Réinitialiser avec CSS non défini

Au cours des deux dernières années, j'ai fréquemment utilisé le mot-clé unset pour réinitialiser les propriétés CSS. J'ai remarqué que je l'utilise intuitivement pour réinitialiser une propriété. Mais ce qui est intuitif pour moi ne l’est peut-être pas pour vous. Permettez-moi de clarifier.

Désarmement

Par exemple, j'utilise border: none depuis des lustres pour supprimer la bordure des éléments. Ces jours-ci, j'utilise border: unset, et les frontières ont disparu.

Les bordures sont simples car ce sont des propriétés non héritées, ce qui signifie que l'élément enfant n'hérite pas de la valeur de ses éléments parents.

Il en va de même pour les marges et les remplissages, que je dois régulièrement réinitialiser.

Mais qu’en est-il des propriétés héritées ? Dans l'exemple ci-dessous, le dernier bouton aura une couleur bleue. C'est parce que la propriété non définie signifie essentiellement hériter de la couleur de la propriété héritée, ce que le bouton a fait et a défini la couleur sur bleu.

Héritage vs cascade

Ces choses ont du sens pour moi, un développeur CSS expérimenté qui connaît l'héritage. Mais pour un débutant, ces notions ne sont pas anodines. J'oserais dire que la plupart des débutants n'ont même pas entendu parler des propriétés héritées et non héritées ou pourraient les oublier. Ils pourraient en apprendre davantage sur la cascade, ce qui n'est pas pareil.

Le style final est basé sur la cascade, la spécificité, l'héritage, etc. MDN propose un article assez solide sur la compréhension de la cascade, de la spécificité et de l'héritage.

Le concept d'héritage est également important ici, ce qui signifie que certaines propriétés CSS héritent par défaut des valeurs définies sur l'élément parent de l'élément actuel et d'autres non. Cela peut également provoquer un comportement auquel vous ne vous attendez peut-être pas.

—MDN

La dernière phrase semble effrayante, ne sachant pas à quoi s'attendre en matière d'héritage. Il peut être utile de vous rappeler quelle propriété héritera de la valeur de ses parents, mais cela vient avec le temps. Trouver ces informations peut être fastidieux : consulter la documentation ou les rechercher dans vos notes. L'important est de savoir que l'héritage existe et qu'il peut causer des problèmes, notamment lors de l'utilisation du mot-clé unset.

Désactivez ces propriétés en toute sécurité

J'ai pensé qu'il pourrait être utile de répertorier les propriétés que je désactive souvent et qui ne sont pas héritées et, par conséquent, peuvent être supprimées en toute sécurité :

• background (et toutes ses propriétés comme background-color, background-image, etc.)
• border (et toutes ses propriétés comme border-width, border-style, etc.)
• border-radius (et toutes ses propriétés comme border-top-left-radius, border-start-start-radius, etc.)
• margin (et toutes ses propriétés comme margin-top, margin-block-start, etc.)
• padding (et toutes ses propriétés comme padding-top, padding-block-start, etc.)
• hauteur min
• taille min-bloc
• min-largeur
• taille min-en-ligne
• hauteur maximale
• taille maximale du bloc
• largeur maximale
• taille maximale en ligne
• poste
• haut
• en bas
• à gauche
• c'est vrai
• inset (et toutes ses propriétés comme inset-block, inset-inline, etc.)
• grille (et toutes ses propriétés comme grille-modèle-colonnes, grille-colonne, align-items, row-gap, etc.)
• flex (et toutes ses propriétés comme flex-basis, flex-direction, align-items, row-gap, etc.)

Conclusion

Lorsqu'il s'agit de réinitialiser une propriété CSS, le mot-clé unset peut s'avérer utile. Cependant, il est important de considérer l'héritage de la propriété avec laquelle vous travaillez.

Si vous souhaitez garantir une sécurité maximale, la suppression des propriétés qui ne sont pas héritées peut être votre meilleure option. En faisant cela, vous pouvez éliminer tout risque potentiel et avoir l'esprit tranquille en sachant que vos feuilles de style sont sécurisées.

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!