Analyse de l'utilisation héritée en CSS

Cet article présente principalement un résumé des compétences d'héritage en CSS. L'utilisation de mots-clés d'héritage en CSS est la connaissance de base pour l'apprentissage introductif de CSS. Les amis qui en ont besoin peuvent s'y référer

Ce sera le cas. facile si vous n'y prêtez pas attention. Les fonctionnalités des feuilles de style en cascade seront ignorées. La plupart des développeurs connaissent le mot-clé hériter, mais il existe plusieurs nouvelles fonctionnalités d'héritage CSS3 que vous ne connaissez peut-être pas...
Propriété : hériter

Le mot-clé hériter signifie ; "utiliser toutes les valeurs spécifiées données à l'élément parent". S'il n'y a pas de définition de valeur explicite dans l'élément parent, le navigateur recherche dans l'arborescence DOM jusqu'à ce qu'il trouve l'attribut correspondant. S'il ne peut pas être trouvé, il utilisera la valeur par défaut du navigateur, par exemple :

#myparent   
{   
    margin: 10px;   
    border: 1px solid #000;   
}   
/* use the same border as the parent */
#myparent p   
{   
    border: inherit;   
}

En pratique, il est rarement nécessaire d'utiliser l'héritage. De nombreuses propriétés utiles sont automatiquement héritées, telles que la police, la taille de la police, la couleur, etc.

L'héritage peut être utilisé en toute confiance. Bien que IE6 et IE7 ne le prennent pas en charge, votre conception ne sera pas interrompue pour cette raison.
property: initial;

Oh, un nouveau mot-clé CSS3 ! initial définit une propriété à sa valeur initiale - la valeur définie par défaut du navigateur, par exemple :

body   
{   
    font-size: 0.5em;   
}   

/* reset paragraphs to 1em */
p   
{   
    font-size: initial;   
}

Est-ce utile ? Peut-être qu'après tout, vous ne pouvez pas garantir que tous les navigateurs ont la même valeur par défaut.

Support raisonnable - Chrome, Firefox, Safari et Opera 15+. Cela ne fonctionne pas dans IE et j'essaie de réfléchir aux circonstances dans lesquelles cela constituerait un problème catastrophique.
propriété : non définie ;

C'est une propriété légèrement inhabituelle. Lorsque unset est utilisé, il se comporte comme si une valeur héritable existait et était héritée. S'il ne trouve pas de valeur héritable (par exemple, s'il s'agit d'une propriété non héritable comme box-shadow), il se comporte comme s'il héritait de la valeur par défaut du navigateur.

Là encore, je ne peux pas penser à de nombreux scénarios dans lesquels unset est utilisé, et très peu le prennent actuellement en charge.
All : [hériter | initial | unset ];

Enfin, all est une propriété plutôt qu'une valeur. Vous pouvez spécifier hériter, initial ou unset pour affecter toutes les propriétés, par exemple pour réinitialiser toutes les propriétés CSS aux valeurs par défaut du navigateur :

#mywidget   
{   
    all: initial;   
}

Si vous ajoutez des contrôles tiers et souhaitez éviter les conflits de style de page Si tel est le cas, il peut s'agir d'un champ CSS global facultatif.

Malheureusement, pour l'instant, vous ne pouvez pas compter sur une cohérence stricte entre les navigateurs, mais cela reste une fonctionnalité utile.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de CSS Configuration du fichier Normalize

Analyse de l'utilisation des couleurs RVB en 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!