La principale différence entre la réinitialisation CSS et la normalisation de CSS est que les stratégies de traitement des styles par défaut du navigateur sont différentes. CSS RESET fournit un point de départ vide en supprimant tous les styles par défaut, et des sélecteurs globaux couramment utilisés tels que * ou le corps pour effacer les marges, les remplissages, etc.; Alors que Normalize.CSS réalise la cohérence entre le navigateur transversal grace à des réparations ciblées, conserve des styles par défaut utiles et corrige des problèmes spécifiques. Utilisez la réinitialisation CSS pour s'adapter aux systèmes de conception hautement personnalisés, préférez les scénarios qui commencent à partir de zéro ou se combinent avec des frameworks à outils tels que CSS à vent arrière; Bien que la normalisation soit plus adaptée aux projets qui valent l'efficacité du développement et souhaitent conserver les avantages des styles par défaut du navigateur, en particulier pour les sites Web et scénarios réactifs qui nécessitent des éléments HTML5 modernes à prendre en charge. Les deux ont leurs propres avantages et inconvénients, et le choix dépend des exigences du degré de contr?le et des exigences spécifiques du projet.

Lorsque vous créez un nouveau projet et que vous souhaitez un style cohérent entre les navigateurs, deux approches communes apparaissent: CSS RESET et CSS normalisent. Les deux visent à vous faciliter la vie en gérant les incohérences du navigateur, mais elles le font de différentes manières. Voici comment ils sont différents et quand en choisir l'un plut?t que les autres.

Quelle est la différence de base?

La principale différence réside dans leur approche pour traiter les styles de navigateur par défaut. Une réinitialisation CSS essaie de supprimer tous les styles de navigateur intégrés afin de commencer une ardoise vierge. Il utilise souvent de larges sélecteurs comme * ou body pour dépouiller les marges, les paddages, les bordures, etc.

D'un autre c?té, normaliser.css ne fait pas tout effacer. Au lieu de cela, il rend les éléments de manière cohérente entre les navigateurs en ciblant des incohérences spécifiques et en appliquant des correctifs ciblés. Ainsi, au lieu d'essuyer les défauts, cela les lisse.

Si vous voulez un contr?le total et que cela ne vous dérange pas de reconstruire des styles d'éléments communs à partir de zéro, la réinitialisation peut sembler plus prévisible. Si vous préférez préserver les valeurs par défaut utiles et ajuster uniquement ce qui doit être réparé, la normalisation est probablement votre choix.

Quand utiliser une réinitialisation CSS

Vous pourriez vous pencher vers une réinitialisation CSS si:

• Vous construisez un système de conception hautement personnalisé où le comportement par défaut du navigateur pourrait interférer.
• Vous préférez commencer par aucune hypothèse sur l'apparence des éléments.
• Vous utilisez un framework pour les services publics comme Tailwind CSS, qui gère déjà le plus de style pour vous.

Certains développeurs aiment les réinitialisations parce qu'ils éliminent les surprises - par exemple, sachant que chaque ruban sera de la même taille de police, sauf si c'est explicitement défini.

Une simple réinitialisation peut ressembler à ceci:

 * {
  marge: 0;
  rembourrage: 0;
  Dimensionnement en bo?te: Border-Box;
}

Cela seul peut empêcher de nombreuses bizarreries croisées.

Mais gardez à l'esprit: la réinitialisation trop peut signifier un travail supplémentaire plus tard. Par exemple, après une réinitialisation complète, même <em></em> ou <strong></strong> perdent tout style par défaut, vous devrez donc les réappliquer manuellement.

Lorsque la normalisation.css a plus de sens

Normalize.css fonctionne bien lorsque vous souhaitez conserver certains des défaillances utiles du navigateur tout en épilt les incohérences. C'est particulièrement pratique pour:

• Projets où la vitesse de développement est importante.
• Des équipes qui ne veulent pas réinventer les règles de base de la typographie.
• Sites réactifs qui bénéficient de valeurs par défaut modernes (comme le style HTML5 Element).

Normaliser fait des choses comme:

• S'assurer que <sup></sup> et <sub></sub> se comportent la même chose partout.
• Correction des problèmes d'alignement sur les contr?les de formulaire.
• Assurer un lien cohérent souligner entre les navigateurs.

Il est également modulaire, ce qui signifie que vous pouvez choisir les pièces dont vous avez besoin si vous souhaitez le réduire.

Une chose à noter: la normalisation ne clarifie pas les marges ou les paddages à l'échelle mondiale, donc si vous êtes habitué à réinitialiser, vous pouvez toujours voir de petites différences entre les éléments à moins que vous ajoutiez vos propres styles de base.

Conseils pratiques pour choisir

Voici quelques suggestions pratiques pour aider à décider:

• Si vous utilisez un framework CSS moderne (comme Bootstrap ou Foundation), il comprend probablement la normalisation ou sa propre version, donc l'ajout d'une autre réinitialisation peut être redondant.
• Si vous écrivez CSS personnalisé à partir de zéro et que vous souhaitez un contr?le total, commencez par une réinitialisation - mais envisagez un minimum pour éviter la surpuissance.
• Pour les sites Web ou les applications générales où la cohérence sans effacement total de style est importante, allez avec la normalisation.
• N'oubliez pas de tester: même avec une normalisation ou une réinitialisation, certains cas de bord peuvent encore nécessiter des ajustements manuels.

N'oubliez pas non plus que les deux approches sont facultatives. Certains développeurs sautent les deux et écrivent leurs propres styles de base adaptés aux besoins de leur projet - ce qui peut être encore plus efficace une fois que vous savez quoi cibler.

Donc, en gros, il se résume à savoir si vous souhaitez essuyer l'ardoise ou lisser les bords rugueux. Ni l'un ni l'autre n'est strictement mieux - cela dépend de votre flux de travail et du contr?le que vous voulez dès le début.

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!