Notes sur la réinitialisation de Josh Comeau.

Récemment, nous avons discuté de la nouvelle réinitialisation du CSS d'Elad Shechter, suivi de près par le blog perspicace de Josh Comeau sur le sujet. Cela marque un changement dans le paysage de réinitialisation du CSS. Les différences significatives de style de navigateur du passé sont moins répandues, et souvent, au moment où le style d'un projet est en cours, de nombreux styles par défaut sont de toute façon remplacés. Par conséquent, les réinitialisations du CSS "modernes" évoluent en collections organisées de styles par défaut offrant des avantages pratiques pour les nouveaux projets.

En examinant l'approche de Josh, il semble que ce soit précisément: une compilation de styles qui ne sont pas intrinsèquement axés sur la conception, mais plutôt à soutenir la conception en fournissant des fonctionnalités de projet couramment souhaitées. Analysons ses choix avec des commentaires.

 *, * :: avant, * :: après {
  Dimensionnement en boîte: Border-Box;
}

Une pratique largement acceptée. Bien que son utilité puisse être légèrement diminuée avec l'utilisation accrue des dispositions de grille et de flexion, il reste une approche préférée pour un dimensionnement cohérent. Idéalement, une réinitialisation CSS devrait tirer parti de l'héritage pour des remplacements plus faciles au niveau des composants.

 * {
  marge: 0;
}

Un moyen concis d'éliminer les marges par défaut. Bien que potentiellement lourd dans certaines situations, il applique des déclarations de marge explicites, améliorant la clarté. Associer cela avec padding: 0; Traiterait le rembourrage de la liste par défaut.

 html, corps {
  hauteur: 100%;
}

Une stratégie utile pour garantir correctement les hauteurs basées sur le pourcentage, empêchant le comportement de fond inattendu. Tandis que body { height: 100vh; } peut sembler suffisant, il n'a pas la même fiabilité, peut-être en raison des bizarreries iOS Safari.

 corps {
  hauteur de ligne: 1,5;
  -Webkit-Font-Soothing: Antialiased;
}

La propriété -webkit-font-smoothing peut entraîner une typographie excessivement mince. Bien qu'un outil précieux, l'application globale n'est pas toujours idéale. La gestion du dimensionnement typographique global via le sélecteur html , ajustant la taille de la police racine avec les requêtes multimédias, fournit plus de contrôle. Une hauteur de ligne de 1,5 est un défaut raisonnable, bien qu'une valeur plus proche de 1,4 puisse être préférée par certains. Cependant, des réglages de cap sont souvent nécessaires. Alternative intelligente de Josh:

 * {
  hauteur de ligne: calc (1em 0.5rem);
}

Cela ajuste dynamiquement la hauteur de ligne en fonction de la taille de la police, offrant une solution évolutive. Cette technique, inspirée par les travaux de Jesús Ricarte sur le calcul optimal de hauteur de ligne, mérite d'être explorée.

 IMG, image, vidéo, toile, svg {
  Affichage: bloc;
  largeur maximale: 100%;
}

Une inclusion solide. display: block; Élimine les problèmes de hauteur de ligne et max-width: 100%; Empêche les éléments médiatiques de déborder leurs conteneurs. Tandis que l'inclusion de<picture></picture> est discutable, ajoutant<iframe></iframe> et<object></object> améliorerait l'exhaustivité.

 P, H1, H2, H3, H4, H5, H6 {
  débordement de débordement: mot de rupture;
}

Essentiel pour empêcher les longs mots (comme les URL) de perturber les dispositions. L'application de cela à un sélecteur plus large comme .text-content permet la cascade, mais cibler des éléments spécifiques est acceptable. Envisagez d'ajouter<li> ,<dl></dl> ,<dt></dt> , et<blockquote></blockquote> Pour un emballage de ligne complet. La combinaison optimale des propriétés en emballage de lignes reste un sujet de discussion en cours.

 #Root, #__Next {
  Isolement: isolat;
}

Cet extrant spécifique React / Next.js crée un contexte d'empilement. Bien que son avantage précis ne soit pas immédiatement apparent, il n'introduit pas de problèmes évidents.

Dans l'ensemble, la réinitialisation de Josh est une approche bien considérée. Il est toujours avantageux d'examiner et de comparer différentes stratégies de réinitialisation CSS.

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!