Réinitialiser ou non réinitialiser - c'est la question CSS

Points clés

• CSS Réinitialisation fournit un point de départ de style cohérent pour différents navigateurs en supprimant la plupart des styles (tels que les polices, les hauteurs de ligne, les marges, les remplissages et les bordures). Cependant, il augmente également la taille de la page et nécessite de réinitialiser tous les éléments, ce qui augmente encore la taille du fichier.
• Bien que CSS réinitialise les problèmes de compatibilité du navigateur, il n'élimine pas le besoin de tests de navigateur, car il est nécessaire de résoudre les bogues et les vulnérabilités sur divers appareils. Ils ne garantissent pas non plus un rendu parfait de pixels sur tous les appareils, car différents navigateurs rendent les pages différemment.
• La décision d'utiliser la réinitialisation du CSS devrait être basée sur son praticité pour un projet spécifique, et non comme une habitude de développement. Les développeurs doivent évaluer si les réinitialisations du CSS sont vraiment bénéfiques ou s'ils provoquent un travail inutile. En tant qu'expérience, les développeurs peuvent essayer de supprimer les styles de réinitialisation de leur site Web pour voir s'il y a une différence significative.

Chaque navigateur Web utilise une feuille de style de base. Lorsque vous ne fournissez pas de CSS personnalisé, il garantit que le HTML est rendu raisonnablement. Vous savez quelle situation: le lien invisible est bleu, le lien accédé est violet, l'étiquette audacieuse est audacieuse, le texte du titre H1 est plus grand, etc. Malheureusement, les fabricants aiment compliquer nos vies et chaque navigateur utilise un style de base différent. Alors, comment vous assurez-vous que votre CSS personnalisé n'est pas affecté par les styles par défaut implémentés sur un appareil spécifique? La réponse est réinitialisée CSS. Ils suppriment la plupart des styles afin que les éléments soient rendus de manière cohérente dans différents navigateurs. En règle générale, toutes les polices et hauteurs de ligne sont restaurées à 100%, les marges et le rembourrage sont définis sur 0px, les bordures sont supprimées et les listes commandées / non ordonnées deviennent sans styles. La réinitialisation CSS d'Eric Meyer est l'une des plus anciennes et est également la plus célèbre et la plus couramment utilisée. HTML5 Réinitialisation de la feuille de style HTML5 pour HTML5 Doctor peut également aider à styliser des éléments plus récents. Il y en a quelques autres - CSSRESET.com offre beaucoup d'options et de documentation. Utilisez-vous CSS pour réinitialiser? Devriez-vous l'utiliser?

J'ai regardé une collection aléatoire de 30 sites, dont la plupart ont utilisé CSS réinitialiser. Les avantages sont évidents: 1. Ils fournissent une toile vierge; tout style appliqué (presque) est sûr d'être le vôtre. 2. Le développement peut être plus logique: vous ajoutez des styles, ne les supprimez pas ou ne les modifiez pas. 3. Il peut minimiser les problèmes de compatibilité du navigateur.

Malgré ces avantages, je n'utilise pas de réinitialisation CSS. En fait, ce n'est pas exactement correct - j'utilise souvent des marges de base et des réinitialités de rembourrage car les valeurs par défaut sont rarement utiles: ``

• {rembourrage: 0;

  <code></code>

Cela affecte chaque balise, et certains développeurs vous diront que cela peut entraîner une confusion ou un traitement CSS plus lent. Je n'ai pas eu cette situation où cela devient un problème. Mon principal problème avec la réinitialisation CSS est: la taille supplémentaire de la page La plupart des réinitialisations CSS ajoutent environ 2 Ko de code (non compressé). Cela peut ne pas sembler beaucoup, mais c'est une grande surcharge lorsque la plupart de mes fichiers CSS dépassent rarement 10 Ko. Effort supplémentaire CSS Réinitialiser vous oblige à restaurer tous les éléments - cela augmentera encore la taille du fichier. Parfois, je suis satisfait des paramètres par défaut de mon navigateur. Le poids de la police, la hauteur de la ligne, le contour de liaison, les points de balle et autres styles sont généralement bons. Sinon, je vais les changer en conséquence. Différents navigateurs rendent les pages de différentes manières, pas deux navigateurs ne sont les mêmes, mais certaines personnes s'attendent à un rendu parfait sur tous les appareils. Les réinitialisations du CSS donnent généralement l'impression qu'un tel objectif est réalisable. Ce n'est pas le cas. Personnellement, cela ne me dérange pas que le titre dans Firefox est 2 pixels plus grand que IE, ou la compréhension de l'opéra de "Bold" est légèrement plus lourde que celle de Chrome. CSS RESET ne résoudra jamais ces problèmes pour vous. Ils ne suppriment pas la nécessité des tests de navigateur Je ne pense pas que CSS réinitialise la cohérence du navigateur. Vous devez tester votre site Web ou votre application sur autant d'appareils que possible afin que vous puissiez résoudre les erreurs et les vulnérabilités causées par votre code ou votre navigateur. Ils ne correspondent pas à mon flux de travail Je n'aime pas les frameworks CSS. Je rencontre rarement des situations où la méthode CSS générale fonctionne pour la construction du site Web. Je peux copier des extraits de code d'ailleurs, mais dans l'ensemble, je préfère commencer par un fichier vide. C'est toujours mon code et je sais où aller lorsque l'erreur se produit. Bien qu'il ne soit pas compliqué, la réinitialisation CSS est un cadre qui peut produire des résultats inattendus. Ils n'économiseront pas le temps que les réinitialisations du CSS vous ont fait gagner des heures de développement? Jusqu'à ce que je sois attaqué par un tas de fans de réinitialisation de CSS en colère, je ne dis pas que vous ne devriez jamais les utiliser. Ils peuvent travailler pour vous, ce qui est génial. Je soupçonne qu'ils sont également utiles pour ceux qui sont nouveaux sur le développement Web. Mais ajoutez-vous une réinitialisation CSS parce qu'elle est vraiment utile, ou est-ce déjà une habitude de développement? En tant que test, essayez de supprimer le style de réinitialisation de votre site Web pour voir s'il y a une différence significative. Utilisez-vous CSS pour réinitialiser? Avez-vous adopté ou abandonné cette pratique récemment? Sont-ils utiles? FAQ sur CSS réinitialisation (FAQ)

Quel est le but principal de la réinitialisation du CSS?

La réinitialisation CSS est un moyen de réduire les incohérences du navigateur dans la hauteur par défaut de ligne, les marges et les tailles de police de titre. La raison globale de la réinitialisation de CSS est qu'elle permet aux développeurs de commencer avec un fond de panier propre et d'utiliser une incohérence de navigateur moins inattendue pour styliser leur site Web ou leurs applications Web. Il oblige essentiellement tous les navigateurs à réinitialiser tous leurs styles à Null, évitant ainsi les défaillances spécifiques au navigateur.

CSS est-il toujours pertinent aujourd'hui?

Oui, la réinitialisation CSS est toujours pertinente aujourd'hui. Bien que les navigateurs modernes deviennent plus cohérents en termes de styles par défaut, il y a encore des cas où des différences peuvent se produire, en particulier lorsqu'ils traitent plus de Desain plus complexe. La réinitialisation CSS peut vous assurer que votre conception est aussi similaire que possible dans différents navigateurs.

Comment implémenter la réinitialisation CSS?

La mise en œuvre de la réinitialisation CSS est très simple. Vous incluez simplement le style de réinitialisation CSS en haut du fichier CSS. Cela garantit que les styles de réinitialisation sont appliqués avant que des styles personnalisés soient appliqués. Il existe plusieurs réinitialisations CSS populaires disponibles, telles que la réinitialisation CSS de Meyer et Normalize.css, que vous pouvez copier et coller dans votre fichier CSS.

Quelle est la différence entre la réinitialisation CSS et la normalisation.css?

La réinitialisation CSS est conçue pour réduire l'incohérence du navigateur en définissant le style de tous les éléments HTML à "zéro" ou null. Normalize.css, en revanche, est une alternative moderne et compatible HTML5 à la réinitialisation CSS. Il fera une série de valeurs par défaut raisonnables au lieu de "Unletsyle" tout. Il corrige également certaines erreurs courantes en dehors de la plage de réinitialisation traditionnelle.

La réinitialisation CSS affectera-t-elle les performances de mon site Web?

La réinitialisation CSS peut légèrement augmenter la taille du fichier CSS, ce qui peut affecter les performances du site Web. Cependant, l'impact est souvent faible et est souvent compensé par les avantages de l'utilisation des réinitialisations du CSS, tels que l'amélioration de la cohérence entre les navigateurs.

avez-vous besoin d'utiliser la réinitialisation CSS pour chaque projet?

Il n'est pas strictement nécessaire d'utiliser la réinitialisation CSS pour chaque projet. Cependant, il est généralement préférable d'en utiliser un, en particulier dans les grands projets, car cela peut aider à éviter les problèmes de style inattendus causés par les défauts de paramètres du navigateur.

Puis-je personnaliser la réinitialisation CSS pour répondre à mes besoins?

Oui, vous pouvez bien sûr personnaliser la réinitialisation CSS pour répondre à vos besoins. En fait, il est courant d'ajuster le style de réinitialisation pour mieux répondre aux besoins du projet. Par exemple, vous voudrez peut-être modifier le style de réinitialisation pour certains éléments, ou ajouter d'autres styles pour réinitialiser les éléments découverts.

Quelles sont les alternatives à l'utilisation de la réinitialisation CSS?

En plus d'utiliser la réinitialisation CSS, il existe d'autres façons de gérer les incohérences du navigateur. Une alternative populaire consiste à utiliser un standardiste CSS comme Normalize.css. Une autre approche consiste à utiliser des cadres CSS comme Bootstrap ou Foundation, qui contiennent généralement leur propre version de réinitialisation ou de spécification CSS.

Comment la réinitialisation CSS affecte-t-elle l'expérience utilisateur?

La réinitialisation CSS améliore l'expérience utilisateur en s'assurant que votre site Web ou votre application Web semble cohérente sur différents navigateurs. Cela peut rendre votre conception plus facile à prévoir et à utiliser, ce qui entraîne une meilleure expérience utilisateur globale.

Puis-je utiliser la réinitialisation CSS dans un préprocesseur comme Sass ou moins?

Oui, vous pouvez utiliser CSS réinitialiser dans un préprocesseur comme Sass ou moins. Vous incluez généralement des styles de réinitialisation en haut du fichier SASS principal ou moins, comme dans un fichier CSS ordinaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!