Réinitialisation CSS, styles par défaut pour les éléments communs

YUI fournit un fichier CSS de base qui donnera des styles cohérents sur tous les navigateurs «A-grade» . Ils fournissent également un fichier de réinitialisation CSS, de sorte que vous pouvez également l’utiliser, mais vous dites que vous avez déjà réinitialisé le CSS. Pour plus de détails, visitez le site Web de YUI . C’est ce que j’ai utilisé et ça marche vraiment bien.

L’une des règles d’application des styles CSS est “last in wins”. Cela signifie que si vos styles de réinitialisation CSS définissent des éléments sur margin:0; padding:0 margin:0; padding:0 vous pouvez alors remplacer ces règles en déclarant ensuite les valeurs souhaitées pour les mêmes éléments.

Vous pouvez le faire dans le même fichier (YUI propose une réinitialisation à la ligne, je pense que je l’inclus parfois comme la première ligne de mon fichier CSS) ou dans un fichier séparé qui apparaît après la CSS .

Je pense par comportement normal que vous voulez dire “les valeurs par défaut pour mon navigateur préféré”. La création de règles CSS pour ces éléments fait partie de l’exercice de réinitialisation.

Maintenant, vous voudrez peut-être examiner Blueprint CSS ou d’autres frameworks de grid. Ces structures de grid réinitialisent presque toujours les styles à zéro, puis construisent la typographie des éléments communs, etc. Cela pourrait vous faire gagner du temps et des efforts.

Tu veux dire comme:

 * { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address { margin-bottom: 1em; } 

?

En fait, désolé d’avoir mal lu votre question, vous êtes en train de chercher quelque chose de plus comme la réinitialisation totale d’Eric Meyer @ http://meyerweb.com/eric/tools/css/reset/

Plutôt que d’utiliser une réinitialisation CSS globale, pensez à utiliser quelque chose comme Normalize , qui «préserve les valeurs par défaut utiles».

Pour découvrir ce que votre navigateur pense par défaut, ouvrez un fichier HTML simple avec des listes et affichez les listes avec un débogueur CSS tel que Firebug , et regardez sous l’onglet Computed .

Découvrez YUI (conventions de l’interface utilisateur open source de Yahoo).

Ils ont une feuille de style de base qui annule leur propre css de réinitialisation. Ils ne vous recommandent pas vraiment de l’utiliser dans la production – depuis sa contre-production, mais peut-être vaut-il la peine de consulter le fichier pour obtenir des extraits pertinents pour ce que vous voulez “annuler”.

Je vous recommande de regarder la conférence de 40 minutes pour vous mettre à jour.

Voici un bref extrait de leur fichier base.css:

 ol li { /*giving OL's LIs generated numbers*/ list-style: decimal outside; } ul li { /*giving UL's LIs generated disc markers*/ list-style: disc outside; } dl dd { /*giving UL's LIs generated numbers*/ margin-left:1em; } th,td { /*borders and padding to make the table readable*/ border:1px solid #000; padding:.5em; } th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; } 

Téléchargez les feuilles de style complètes ci-dessous ou lisez la documentation complète.

Yahoo réinitialiser css | Yahoo base (annuler) réinitialiser css

Je suis personnellement un grand fan de BlueprintCSS . Il réinitialise les styles sur tous les navigateurs et fournit des parameters par défaut très pratiques (c’est ce que vous voulez 90% du temps). Il fournit également une grid de mise en page, mais vous n’avez pas à l’utiliser si vous n’en avez pas besoin.

Si vous voulez voir les valeurs par défaut css pour firefox, cherchez un fichier nommé ‘html.css’ dans la dissortingbution (il devrait y avoir d’autres fichiers CSS utiles dans le même répertoire). Vous pouvez choisir les règles que vous souhaitez et les appliquer après une réinitialisation.

En outre, la norme CSS2 contient un exemple de feuille de style pour le HTML 4 .

Comportement normal pour WebKit h1 :

 h1 { display: block; font-size: 2em; margin: .67__qem 0 .67em 0; font-weight: bold } 

Comportement normal pour Gecko h1 :

 h1 { display: block; font-size: 2em; font-weight: bold; margin: .67em 0; } 

Les autres éléments doivent être présents si vous effectuez une recherche dans les fichiers.

“Après avoir appliqué une réinitialisation CSS, je veux revenir à un comportement” normal “pour les éléments HTML …”

Si vous avez appliqué une réinitialisation, vous devrez alors append les règles pour ce que vous pensez être un comportement normal . Étant donné que le comportement normal varie d’un navigateur à l’autre, cette question n’est pas une fin. J’aime la réponse de @ da5id – utilisez l’une des nombreuses réinitialisations disponibles et ajustez-la en fonction de vos besoins.

Une fois que vous avez assigné une valeur à une propriété CSS d’un élément, il n’y a aucun moyen de récupérer la valeur «normale», en supposant que «normal» signifie «défaut du navigateur», comme cela semble vouloir dire ici. Donc, la seule façon d’avoir un élément h1 par exemple, avec font-size par défaut du navigateur, est de ne pas le définir du tout dans votre code CSS.

Ainsi, pour exempter certaines propriétés et certains éléments de la réinitialisation CSS, vous devez utiliser une réinitialisation CSS plus limitée. Par exemple, vous ne devez pas utiliser * { font-size: 100% } mais remplacer * par une liste de sélecteurs, comme input, textarea { font-size: 100% } (la liste peut être assez longue, par exemple font-size diffèrent de 100% pour quelques éléments seulement).

Il est bien sûr possible de définir des propriétés sur des valeurs que vous prévoyez être les valeurs par défaut du navigateur. Il n’y a aucune garantie que cela aura l’effet désiré sur tous les navigateurs, actuels et futurs. Mais pour certaines propriétés et certains éléments, cela peut être relativement sûr, car les valeurs par défaut ont tendance à être similaires.

Vous pouvez notamment utiliser la section Rendu en HTML5 CR. Il décrit le «rendu attendu» – ce n’est pas une exigence, bien que les éditeurs de navigateurs puissent décider de s’y conformer s’ils le souhaitent, et cela conservera probablement les mêmes implémentations à cet égard. Par exemple, pour h1 les parameters attendus sont (collectés ici dans une règle – dans HTML5 CR, ils sont dispersés autour de):

 h1 { unicode-bidi: isolate; display: block; margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; } 

(Il y a des règles contextuelles supplémentaires. Par exemple, l’imbrication de h1 intérieur de la section devrait affecter les parameters.)

Je ne réinitialise pas tous les éléments par défaut car les styles par défaut dépendent en quelque sorte du navigateur. Ils varient donc d’un navigateur à l’autre. Au lieu d’utiliser quelque chose comme ul, ol { list-style: none; } ul, ol { list-style: none; } , J’ajoute une classe CSS comme r ou reset , puis je spécifie que si c’est une ul qui a une classe r , réinitialisez-la ou sinon laissez-la inchangée.

Par ailleurs, vous devez append class="reset" (par exemple) à tous ces éléments, ce qui représente du travail et du code supplémentaires, mais vous aurez tous vos styles par défaut intacts en retour!