Article en plusieurs parties : 1 2 3 4 5 6
undohtml.css de Tantek Celik
Peut-être le plus ancien Reset CSS. Pour des raisons de lisibilité, j’ai revu l’organisation visuelle des commentaires.
// undohtml.css (CC) 2004 Tantek Celik. // Some Rights Reserved. http://creativecommons.org/licenses/by/2.0 // This style sheet is licensed under a Creative Commons License. // Purpose: undo some of the default styling of common (X)HTML browsers *//// link underlines tend to make hypertext less readable, // because underlines obscure the shapes of the lower halves of words :link, :visited {text-decoration: none;}
// no list-markers by default, since lists are used more often for semantics ul, ol {list-style: none;}
// avoid browser default inconsistent heading font-sizes and pre/code too h1, h2, h3, h4, h5, h6, pre, code {font-size: 1em;}
// remove the inconsistent (among browsers) // default ul,ol padding or margin the default spacing on headings // does not match nor align with normal interline spacing at all, // so let's get rid of it. zero out the spacing around pre, form, body, html, p, blockquote // as well form elements are oddly inconsistent, and not quite CSS emulatable. nonetheless // strip their margin and padding as well ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
// whoever thought blue linked image borders were a good idea? a img, :link img, :visited img {border: none }
// de-italicize address address {font-style: normal;}
// more varnish stripping as necessary...
C’est reparti pour un tour ?
- margin et padding à zéro avec le sélecteur universel
- Reset CSS Reloaded, Eric Meyer
- INITIAL, Christian Montoya
- YUI Reset CSS, Yahoo! UI Library
- undohtml.css, Tantek Celik
Pour conclure
Ni liste exhaustive ni comparatif point par point, j’ai essayé de faire le tour des Reset CSS les plus utilisés en espérant avoir fourni quelques informations utiles sur les techniques existantes et leur fonctionnement. J’espère surtout que ce billet vous aura donné des éléments de réflexion pour vous en passer lorsque ce n’est pas nécessaire ;) Ce billet pose certainement plus de questions qu’il n’apporte de réponses car un Reset ne dispense pas de réfléchir à l’organisation de ses CSS, bien au contraire !
Stay tuned and mind the gap!
Article en plusieurs parties : Page précédente
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 [...]