Article en plusieurs parties : 1 2 3 4 5 6
YUI Reset CSS de Yahoo! UI Library
Parmi les Reset CSS existants, on trouve la contribution de Yahoo! qui propose dans son pack Yahoo! UI Library une technique pour réinitialiser les éléments html qui manquent de « consistance » d’un navigateur à l’autre.
body, div, dl, dt, dd, ul, ol, li, h1,
h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea,
p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr, acronym {
border: 0;
}
Les choix en matière de remise à zéro sont discutables (il faut redéfinir jusqu’à la mise en gras pour strong et définir les tailles des polices pour les éléments hn), mais ce reset est accompagné d’une proposition de mise en forme pour les autres éléments html dont on peut s’inspirer en fonction du reset choisi (pour des raisons de lisibilité j’ai revu la mise en forme de départ et supprimé la plupart des commentaires) :
base.css
// base.css, part of YUI's CSS Foundationh1 {font-size: 138.5%; /* 18px via YUI Fonts CSS foundation /} h2 {font-size: 123.1%; / 16px via YUI Fonts CSS foundation /} h3 {font-size: 108%; / 14px via YUI Fonts CSS foundation */} h1, h2, h3 {margin: 1em 0;} h1, h2, h3, h4, h5, h6, strong {font-weight: bold;} abbr, acronym { border-bottom: 1px dotted #000; cursor: help; } em {font-style: italic;} blockquote, ul, ol, dl {margin: 1em;} ol, ul, dl {margin-left: 2em;} ol li {list-style: decimal outside;} ul li {list-style: disc outside;} dl dd {margin-left: 1em;} th, td { border: 1px solid #000; padding: 0.5em; } th { font-weight: bold; text-align: center; } caption { margin-bottom: 0.5em; text-align: center; } p, fieldset, table {margin-bottom: 1em; }
Le site de Yahoo! pour les développeurs web propose des informations complémentaires sur la gestion d’une grille de mise en page et des polices de caractère.
undohtml.css de Tantek Celik »
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 [...]