css - utiliser le sélecteur universel '*' vs html ou le sélecteur de corps?

L'application de styles à la balise body sera appliquée à la page entière, donc

body { font-family: Verdana }

sera appliqué à la page entière. Cela pourrait également être fait avec

* {font-family: Verdana} 

qui s'appliquerait à tous les éléments et semblerait donc avoir le même effet.

Je comprends le principe selon lequel, dans le premier cas, le style est appliqué à une balise, corps pour la page entière, tandis que dans le deuxième exemple, la police est appliquée à chaque élément html individuel. Ce que je demande, c'est quelle est la différence pratique à faire cela, quelles sont les implications et quelle est la raison, la situation ou les meilleures pratiques qui conduisent à les utiliser les unes par rapport aux autres.

Un effet secondaire est certainement la vitesse (+1 Rob). Je suis plus intéressé par la raison réelle de choisir l'un plutôt que l'autre en termes de fonctionnalité.

Différences fonctionnelles entre ces deux choix de sélecteur CSS ... (mon avis)

corps

• Applique les propriétés de style à l'élément body.
• Les éléments dans le corps peuvent hériter des valeurs de propriété. Certaines propriétés par défaut sont «héritées».
• Les déclarations de style qui correspondent à un élément dans le corps peuvent remplacer le style hérité.

Le sélecteur universel * (tous les éléments)

• Applique des propriétés de style à tous les éléments individuels.
• Remplace les propriétés de style héritées et les «valeurs initiales» par défaut. Bloque l'héritage.
• D'autres sélecteurs CSS plus spécifiques qui correspondent à un élément remplaceront les propriétés de style appliquées par *.

Suggestions

1. Utilisez le corps pour les propriétés de style qui héritent par défaut, telles que la police, la couleur, afin de fournir une valeur par défaut sensible pour les éléments, réduisant la nécessité de coder explicitement pour chaque cas et préservant la capacité des éléments contenus aux niveaux inférieurs en dessous du corps à héritent de leurs parents.
2. Il vaut probablement mieux ne pas utiliser le sélecteur universel * dans ce cas. Il interrompt l'héritage entre d'autres éléments du corps et peut vous obliger à écrire plus de règles CSS pour compenser. Cela peut être un facteur de ralentissement du rendu des pages. Cela dépend de la taille et du contenu de la page et du nombre de règles CSS.

Essayez quelque chose comme ça

body { font-family: Verdana }
table { font-family: Arial }

contre

* { font-family: Verdana }
table { font-family: Arial }

Et voyez quels styles sont appliqués aux cellules du tableau.

Il existe une différence entre "appliqué à l'ensemble du document" et "appliqué à chaque élément du document" lorsque vous traitez des feuilles de style en cascade .

L'application d'un style en cascade au corps l'applique à toutes les balises du corps jusqu'à ce qu'une balise l'écrase. Ensuite, le style remplacé est appliqué à toutes les balises de celle-ci.

Cependant, certains styles ne sont pas en cascade, tels que la marge et le remplissage (généralement là où cela n'a aucun sens). Celles-ci ne peuvent être appliquées qu'à des balises spécifiques et c'est là qu'un caractère générique peut être utile (bien que rarement).

La plupart des styles non en cascade ont également une valeur d'hériter (par exemple. margin: inherit), Ce qui signifie "prendre les valeurs de la balise parent".

J'ai oublié les détails complets mais, avec le sélecteur *, les performances sont ralenties à mesure que chaque élément est évalué lorsque le navigateur analyse le CSS et applique le style. iirc, la définition de la police, dans ce cas, sur le parent uniquement fait une référence pour chaque élément et aucun travail supplémentaire n'est nécessaire.

Il y a aussi d'autres problèmes, mais, encore une fois, je ne m'en souviens pas tous et je n'ai pas utilisé * depuis des années.

La ligne directrice générale pour une bonne conception CSS doit être aussi précise que possible, mais pas plus.

Ainsi, dans votre exemple, appliquer le style à l'élément body serait aussi spécifique que possible et certainement plus spécifique que le sélecteur '*'.

Comme d'autres l'ont mentionné, body { font-family: Verdana }sélectionnera la police Verdena uniquement pour les éléments qui héritent de la font-stylepropriété de ses parents de sorte que tous ses parents héritent également de la propriété éventuellement forment l' bodyélément, et * {font-family: Verdana}sélectionnera la police Verdena pour tous les éléments. Je voudrais illustrer la différence avec un exemple:

Utilisation du sélecteur de corps:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Utilisation du sélecteur universel *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Utilisez les codes css et html des exemples, vous reconnaîtrez que l' <input>élément n'hérite pas du tout du style de police et donc tout ce que vous tapez dans le formulaire obtient le style de police par défaut de la feuille de style de l'agent utilisateur. Dans le deuxième exemple, le sélecteur universel *définit explicitement le style de police pour chaque élément, y compris l' inputélément.