web-dev-qa-db-fra.com

Quel CSS de réinitialisation HTML5 utilisez-vous et pourquoi?

Quel CSS de réinitialisation HTML5 utilisez-vous et pourquoi? Avez-vous trouvé un cas pour couvrir plus de cas?

J'ai commencé à utiliser HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ Cela semble fonctionner, mais je me demande s'il y a quelque chose de mieux.

csshtml5css-reset
121
Darryl Hein

Vraie conversation: Malgré les démarques kaikai a raison, il vous suffit de réinitialiser * padding & margin à 0.

Malheureusement, 99% d’entre nous n’ont ni ressources, ni les ressources humaines nécessaires pour faire face aux centaines de versions de navigateurs disponibles. Une fiche de réinitialisation est donc essentielle pour un site Web typique.

html5reset: (C'est trop gênant) 

Je viens de regarder http://html5reset.org/

img,
object,
embed {max-width: 100%;}

Et:

html {overflow-y: scroll;}

Je comprends qu’il a de bonnes intentions mais ce n’est pas le travail d’une feuille de réinitialisation. Cela fait trop d'hypothèses.

BluePrint Reset: (littéralement un plan) 

body {
  line-height: 1.5;
  background: white;
}

Quoi de neuf avec 1.5. Et pourquoi un fond blanc? (Je sais que c'est pour corriger mais pas toujours nécessaire) 

Normalize.css: (Pas normal) 

https://github.com/necolas/normalize.css/blob/master/normalize.css

Cela a bien commencé avec quelques webkit/hacks mais

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Chaque balise d'en-tête est ciblée. & ils ne réinitialisent pas la hauteur de ligne du corps.

Je suis sûr que tout ce qui précède fait bien le travail prévu, mais sera probablement annulé plus que nécessaire. 

Eric Meyer

YUI

HTML5Boilerplate

Ce qui précède est plus destiné aux professionnels avec Boilerplate penché du côté (trop amical) du fait de sa popularité, j'en suis sûr. À l'heure actuelle, 80% de ma réinitialisation personnalisée est standard.

Je vais y aller petit à petit et faire le mien, ce n’est pas sorcier.

40
Undefined

Normalize.css est idéal pour les navigateurs de bureau et mobiles et est utilisé dans de nombreux modèles HTML populaires.

Mais qu'en est-il de l'utilisation de la propriété CSS all qui réinitialise les propriétés CSS sauf direction et unicode-bidi? De cette façon, vous n'avez pas besoin d'inclure de fichiers supplémentaires:

* { all: unset }

Il est actuellement pris en charge dans Firefox et, espérons-le, d'autres le feront, rendant le processus de réinitialisation très simple.

19
Matt Smith

Le framework reset.css utilisé par Blueprint CSS fonctionne bien et comprend des éléments HTML5. Il est inclus dans leur fichier screen.css .

Blueprint est une ressource utile pour le prototypage rapide de nouveaux sites et leur code source est bien organisé et mérite d’être appris.

6
calvinf
  1. Conserve les valeurs utiles par défaut, contrairement à de nombreuses réinitialisations CSS. 
  2. Normalise les styles pour un large éventail d'éléments HTML. 
  3. Corrige les bugs et les incohérences courantes du navigateur. 
  4. Améliore la convivialité avec des améliorations subtiles.
  5. Explique ce que fait le code en utilisant des commentaires détaillés.

normalize.css

3
zzart

Eric Meyer a également publié la v2 de sa réinitialisation CSS (et il l’a fait il ya presque un an):

http://meyerweb.com/eric/tools/css/reset/

3
Illes Peter

La spécification HTML5 inclut déclarations CSS recommandées pour les navigateurs compatibles CSS. Pour le plaisir, je les ai prises et inversées, là où cela a du sens. Vous pouvez voir le résultat dans cet article .

Cependant, je ne recommande pas d'utiliser ceci en production. Il s’agit plus d’une preuve de concept et peut être mieux utilisé pour donner des conseils que pour servir de feuille de style à réinitialisation universelle. N'importe laquelle des suggestions précédentes pourrait être un meilleur choix.

2
Boldewyn
* {
    margin: 0;
    padding: 0;
}

simple mais tout à fait efficace. peut-être jeter un:

body {
    font-size: small;
}

pour faire bonne mesure.

2
kaikai

J'utilise Normalize ou la réinitialisation de HTML5 Doctor et je le modifie pour l'adapter au projet sur lequel je travaille.

BTW, c’est seulement le concept d’utilisation d’une réinitialisation qui est devenu plus ou moins un standard.

0
cornishninja