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

123

Quel CSS de réinitialisation HTML5 utilisez-vous et pourquoi? Y en a-t-il un que vous avez trouvé 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 là-bas.

css html css-reset Darryl Hein
la source
1
Similaire à: stackoverflow.com/questions/3277671/css-reset-for-html5
Mark Byers
C'est similaire oui, mais je cherche plus simplement à utiliser quelqu'un d'autre au lieu d'en modifier un pour le faire fonctionner, donc à une date ultérieure, si nécessaire, je peux simplement copier une version plus récente.
Darryl Hein
20
D_N Je comprends cela, mais HTML5 a un effet sur le CSS, en particulier sur un CSS de réinitialisation où vous devez maintenant inclure d'autres balises, comme nav ou apart.
Darryl Hein

Réponses:

40

Vrai discours: malgré les démarques que kaikai a raison, il vous suffit de réinitialiser * padding & margin à 0.

Bien que malheureusement, 99% d'entre nous ne disposent pas de ressources ou de ressources humaines pour suivre les centaines de versions de navigateur disponibles. Une feuille de réinitialisation est donc essentielle pour le site Web typique.

html5reset: (C'est trop gênant)

Je viens de jeter un œil à 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 fond blanc? (Je sais que c'est pour corriger mais toujours pas nécessaire)

Normalize.css: (pas normal)

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

Cela a bien commencé avec des hacks webkit / ie 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 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), je suis sûr en raison de la popularité. Pour le moment, 80% de ma réinitialisation personnalisée est passe-partout.

Je vais parcourir les trois petit à petit et faire le mien, ce n'est pas sorcier.

défini
la source
2
Notez que normalize.css a changé maintenant; les tailles de police des en-têtes ne sont plus définies.
Ruben Verborgh
2
Il convient de mentionner que Normalize.css ne gère pas seulement les navigateurs de bureau, mais également les navigateurs mobiles tels que iOS Safari, Chrome pour Android, les navigateurs standard, et al., Qui sont uniques en eux-mêmes. Pour cette raison et d'autres, Normalize est intégré à de nombreux frameworks populaires.
Matt Smith
J'utilisais «Eric Meyer», mais j'utilise maintenant la feuille de style de réinitialisation de «YUI» à cause de ceci: danielsokolowski.blogspot.ca/2012/11
Daniel Sokolowski
19

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 allpropriété CSS qui réinitialise les propriétés CSS sauf directionet unicode-bidi? De cette façon, vous n'avez pas besoin d'inclure de fichiers supplémentaires:

{
    all: unset
}

CSS alla un large support sauf dans IE / Edge. De même avec unset.

Matt Smith
la source
Intéressant, mais cela semble être la solution la plus lente et prise en charge uniquement dans Firefox, elle n'a donc aucune utilité réelle (du moins à ce stade).
tomasz86
Il est vrai que seul Firefox le supporte pour le moment mais je pense qu'il a de bonnes chances de se retrouver dans des solutions comme Modernizr. github.com/Modernizr/Modernizr/issues/1219
Matt Smith
6

Le reset.css utilisé par le framework CSS Blueprint 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.

calvinf
la source
4

Eric Meyer a également publié la version 2 de sa réinitialisation CSS (et il l'a fait il y a presque un an maintenant):

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

Illes Peter
la source
Simple mais efficace et plus rapide que les réinitialisations qui reposent sur le sélecteur universel *.
tomasz86
3
  1. Préserve les valeurs par défaut utiles, contrairement à de nombreuses réinitialisations CSS.
  2. Normalise les styles pour un large éventail d'éléments HTML.
  3. Corrige les bogues et les incohérences courantes du navigateur.
  4. Améliore la convivialité avec des améliorations subtiles.
  5. Explique ce que fait le code à l'aide de commentaires détaillés.

normalize.css

zzart
la source
2 
* {
    margin: 0;
    padding: 0;
}

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

body {
    font-size: small;
}

pour faire bonne mesure.

kaikai
la source
9
Le zapping de la marge et du remplissage par défaut sur les contrôles de formulaire peut avoir des effets indésirables et les mots-clés nommés de taille de police n'ont pas un comportement entièrement cohérent dans les navigateurs. C'est trop simpliste. Il ne parvient pas non plus à définir les styles des éléments introduits dans HTML 5, ils restent donc display: inline.
Quentin
4
Je ne suis pas d'accord. La marge et le remplissage sont les seules propriétés imprévisibles. La propriété font-size utilise un mot-clé nommé pour cibler spécifiquement les navigateurs qui les lisent, ce qui rend les échelles de police YUI efficaces dans tous les principaux navigateurs ( developer.yahoo.com/yui/examples/fonts/fonts-size_source.html ). Je ne voudrais pas non plus m'imposer au flux normal des éléments et je laisserais donc ces éléments HTML 5 seuls, en ne changeant leur type d'affichage ou leur positionnement que si nécessaire. Je me rends compte que mon choix est impopulaire, mais il est beaucoup plus élégant que d'autres solutions et cela fonctionne.
kaikai
3
Non non Non Non Non! Les éléments HTML5 n'ont pas la propriété d'affichage définie, ils reviennent donc à la valeur par défaut display: inline. Avez-vous déjà vu un diagramme de site où l'en-tête, le pied de page, la navigation, les colonnes latérales, pratiquement toutes les sections de page coulent en ligne ??? Désolé kaikai, mais ce n'est tout simplement pas acceptable!
Filip Dupanović
Mec, je ne suis même pas (encore) un gourou HTML5 et je sais que ce n'est absolument pas la bonne façon de réinitialiser.
Icemanind
4
Réponse absolument valable. Le seul inconvénient pourrait être que les *sélecteurs sont lents, j'ai entendu.
Anton Strogonoff
2

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

Cependant , je ne recommande pas de l'utiliser en production. Il s'agit davantage d'une preuve de concept et pourrait mieux être utilisée pour donner des conseils que pour servir de feuille de style réinitialisée à tout usage. N'importe laquelle des autres suggestions avant pourrait être un meilleur choix.

Boldewyn
la source
0

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

BTW, c'est uniquement le concept d'utilisation d'une réinitialisation qui est devenu plus ou moins une norme.

cornishninja
la source
Avez-vous des détails supplémentaires?
James A Mohler
Je ne laisse pas d'éléments que je n'utilise pas dans un projet spécifique. Par exemple, je supprime des éléments de formulaire si je n'utilise pas de formulaires. Je suis sûr que vous avez l'idée. Il est inutile de réinitialiser les éléments que vous n'utilisez pas.
cornishninja
Pour confirmer
cornishninja