Article en plusieurs parties : 1 2 3 4 5 6
INITIAL de Christian Montoya
Cette remise à zéro est proposée par Faruk Ates, amendée par Robert Nyman et Christian Montoya. Plus qu’un reset radical, il s’agit plutôt d’un feuille de style minimale située entre la remise des marges à zéro et le reset-reloaded. Mais jugez plutôt :
// =INITIAL v2.1, // by Faruk Ates - www.kurafire.net // Addendum by Robert Nyman - www.robertnyman.com // Addition by Christian Montoya - www.christianmontoya.net// Neutralize styling: Elements we want to clean out entirely: html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120% Verdana, Arial, Helvetica, sans-serif; }
// Neutralize styling: Elements with a vertical margin: h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; }
// Apply left margin: Only to the few elements that need it: li, dd, blockquote { margin-left: 1em; }
// Miscellaneous conveniences: form label { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; font-family: inherit; }
Ici, le reset est plus sélectif : dans un premier temps, seuls certains éléments de type blocs sont touchés par la remise à zéro des marges et retraits. Ensuite, les éléments sont regroupés en fonction des marges qu’ils ont en commun : d’une part, ceux qui partagent les mêmes espaces avant et après, et d’autre part, ceux qui sont généralement représentés avec un retrait à gauche. Ces derniers héritent des valeurs margin: 1em 0 et padding: 0 spécifiées juste avant.
Un autre avantage d’INITIAL sur le Reset-Reloaded, est que les éléments en ligne ne sont pas affectés, ce qui est une bonne chose, vu le peu de différences de rendu qu’ils présentent d’un navigateur à l’autre.
Personnellement, je trouve cette approche plus élégante que le reset reloaded : plus « lisible » donc plus maniable, notamment en ce qui concerne son « extensibilité » car on peut même lui ajouter certaines trouvailles d’Eric Meyer comme :
- spécifier une valeur brute pour line-height : 1.4 à la place de la valeur « INITIAL » de 120%,
- prendre en compte les éléments table, tr ,td ou caption,
- enlever les puces des listes,
- etc…
… afin de construire une feuille de style de base reprenant par exemple le reset de Faruk, puis en ajoutant certains éléments prélevés dans le Reset-Reloaded (Ex. 1) ou encore d’autres règles CSS récurrentes (Ex. 2). L’idée est d’obtenir une sorte de tableau de bord CSS où la modification de certaines valeurs-clés permet de gérer des maquettes différentes. Je précise qu’il s’agit juste d’un exemple pour insister sur le fait que c’est au reset de s’adapter à vos besoins, et non le contraire ;)
Ex. 1
ol, ul {
list-style: none;
}
// tables still need 'cellspacing="0"' in the markup
// j'ai modifié les valeurs, car il est bon que les tableaux soient visibles !
table {
border-collapse: collapse;
border-spacing: 1px;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
Ex. 2
// Couleurs à adapter selon votre charte
a {text-decoration: none;}
a:link {color: #000;}
a:visited {color: #000;}
a:hover {color: #000;}
a:active {color: #000;}
img, iframe, object {border: 0 none;}
input, textarea, select, button, {border: 1px solid #000;
}
Dans les styles de cet Ex. 2, j’ai spécifié des valeurs pour les différents états des liens conformément à l’ordre LoVe(F)HAte, et redéfini en deux fois les bordures pour les éléments qui en possèdent par défaut. Par ailleurs, je rajouterais bien la balise div à la suite de l’élément body car – même si cet élément n’est pas censé avoir de marge -, force est de constater que lorsque deux images doivent se raccorder, il reste souvent un décalage d’un pixel qui disparait comme par magie avec margin: 0.
YUI Reset CSS de Yahoo! UI Library »
Article en plusieurs parties : Page précédentePage suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
Hello,
merci pour cette article vraiment très bien, cela fait un petit moment que je fait des reset css, mais sans vraiment le savoir … Mais certainement aps aussi pousser qu’ici.
comme d’habitude excellent article qui permet d’aller plus loin!
Excellente approche des reset css ! Merci beaucoup pour cet article sur lequel je vais me pencher bien sérieusement après cette première lecture ;)
J’aime bien le reset de Meyer mais le line-height:1 global m’a causé quelques soucis..
Merci beaucoup, bon article. Par contre je suis mitigé sur l’utilisation de reset, je me contente du margin et padding sur le sélecteur universel.
#wouaren {
Quel genre de soucis exactement ? Au début, je mettais quelque chose comme 1.5em à la suite du reset et je me retrouvais avec des valeurs calculées bizarrement. Je crois qu’il vaut mieux n’utiliser que des valeurs brutes une fois qu’on a commencé.
}
#Neovov {
la RAZ des padding et margin, c’est le reset de base ! C’est même le plus brutal ;)
}
#Grummfy,
#burningHat {
N’en jetez plus, je ne rentre plus dans mes chaussettes… :)
N’hésitez pas à partager vos méthodes de reset. A l’occasion je proposerai un reset tenant compte des bonnes pratiques en la matière ;)
}
Moi brutal ?
(J’avoue, ce commentaire est uniquement là pour foirer ton sélecteur :P)
Encore un superbe article… Merci !
Voici un article qui fera réfléchir à deux fois quelqu’un voulant ce lancer dans le métier de l’intégration :)
Merci pour ce billet remarquable.
#Bialog,
#Aurélien {
Merci pour votre soutien :)
}
T’es vraiment un bon malade Bruno. :)
#Aymeric {
Faut c’qui faut ! En fait, je crois qu’on a tous un grain :)
}
[...] thème conçu sur la base de SandBox et du Reset CSS d’Éric [...]
C’est avec un peu de retard que je découvre cet article. Merci pour l’info, j’ignorai qu’il existait autant de méthodes différentes. Personnellement, j’ai utilisé le reset conseillé par le W3C.
Bravo :)
Bonjour,
effectivement je faisais, moi aussi, du reset sans le savoir.
Peut être n’est-ce qu’une impression mais il me semble que le css est moins galère avec que sans :)
En tout cas merci d’avoir éclairé ma lanterne sur le sujet et les différences qui existent.
Je crois que ce que j’utilisais se rapproche le plus de la méthode de Eric Meyer et que la méthode yahoo parait plus simple a l’avenir.
Je test ;)
Merci pour cet article, vraiment c’est intéressant
[...] peu de recherche sur google vous conduira vers une tonne de ressource consacrées au reset css dont css4design (le retour de ce cher br1o) qui a décrypté plusieurs façons de faire. N’aimant pas [...]
[...] 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" — Lu 2 081 fois5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs — Lu 2 055 foisFramework JQuery pour écrire du Javascript non-intrusif — Lu 2 030 foisQuelques [...]
[...] html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! / :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } / tables still need ‘cellspacing= »0″‘ in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: « »; } blockquote, q { quotes: « » « »; } La source : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Pour d’autres exemples de reset CSS je vous conseille cet article : http://www.css4design.com [...]
[...] important : incluez un reset css à votre page [...]
[...] un article sur 5 reset css etudiés. Mots clés : css, [...]
[...] la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus. Aucun tag pour cet [...]
[...] — basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités [...]
[...] Il y a en a beaucoup d’autres et je vous conseille la lecture de l’article « 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs» de Bruno Bichet, auteur du blog CSS 4 [...]
[...] 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs [...]