Une interview avec Elad Shechter sur 'The New CSS Reset'

Cette interview explore le projet de réinitialisation innovant d'Elad Shechter, "The New-CSS-Resset", une approche moderne tirant parti des fonctionnalités CSS de pointe. Au lieu de simplement présenter le code, nous plongeons dans le pourquoi derrière sa création et les subtilités de sa fonctionnalité.

Le code de réinitialisation complet est:

 / *** la nouvelle réinitialisation CSS - Version 1.2.0 (Dernière mise à jour 23.7.2021) *** /

/ * Supprimer tous les styles sauf 'affichage' * /
*: où (: non (iframe, canvas, img, svg, vidéo): pas (svg *)) {
  Tous: Undet;
  Affichage: retourne;
}

/ * Sidite de boîte préférée * /
*,
*::avant,
*::après {
  Dimensionnement en boîte: Border-Box;
}

/ * Supprimer les styles de liste * /
ol, ul {
  Style de liste: aucun;
}

/ * Empêcher les images de dépasser le conteneur * /
img {
  largeur maximale: 100%;
}

/ * Effondrer les bordures de la table * /
tableau {
  Border-Collapse: s'effondrer;
}

/ * REVERT 'WHITE-SPACE' pour safari textareas * /
TextArea {
  Espace blanc: retourner;
}

ELAD explique la nécessité d'une nouvelle réinitialisation, soulignant que les réinitialisations existantes reposent sur les fonctionnalités CSS plus anciennes. Son approche tire parti de nouvelles capacités pour une réinitialisation plus efficace et plus valable. Il contraste son approche avec Normalize.CSS (une approche plus douce se concentrant sur la fixation des incohérences du navigateur) et la réinitialisation du CSS d'Eric Meyer (une approche plus agressive supprimant la plupart des styles par défaut). ELAD plaide en utilisant à la fois normaliser.css et une réinitialisation dure, combinant leurs forces.

Le noyau de la nouvelle réinitialisation réside en all: unset; . Cette propriété puissante réinitialise toutes les propriétés héritées pour inherit des propriétés non héritées pour supprimer efficacement les styles de navigateur par défaut initial . Cependant, display est une exception. all: unset; Définit display sur inline , ce qui n'est pas souhaitable. Par conséquent, display: revert; est utilisé pour restaurer la valeur display par défaut du navigateur pour chaque élément, garantissant une disposition appropriée. Le mot-clé revert récupère intelligemment la valeur display par défaut de la feuille de style utilisateur, si disponible, sinon retombant au comportement unset .

Le sélecteur *:where(:not(iframe, canvas, img, svg, video):not(svg *)) cible presque tous les éléments, à l'exclusion de ceux (comme<iframe></iframe> ,<canvas></canvas> , etc.) dont les dimensions sont mieux contrôlées via des attributs plutôt que de réinitialiser CSS, empêchant les conséquences imprévues. Le :where() pseudo-classe minimise la spécificité, évitant les conflits avec les styles spécifiques au projet. Une exclusion séparée :not(svg *) protège l'intégrité des éléments SVG.

La réinitialisation comprend également des styles d'opinion comme box-sizing: border-box , qui, bien que n'étant pas une incohérence du navigateur, est largement adopté comme meilleure pratique. La suppression des styles de liste ( list-style: none; ) est justifiée par l'utilisation courante des listes de navigation où les marqueurs ne sont pas nécessaires, malgré les implications sémantiques.

ELAD discute de futurs ajouts potentiels, tirés par les besoins récurrents dans ses projets. La max-width: 100%; La règle pour les images est présentée comme un candidat probable. Il spécule également sur l'impact du prochain module Cascade Couches, ce qui suggère qu'il pourrait éliminer le besoin de techniques de réduction de la spécificité comme :where() en fournissant une approche en couches pour remplacer le style. Cela permettrait une séparation plus propre des styles de réinitialisation des styles spécifiques au projet.

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!