<style> : l'élément d'information de style
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
L'élément HTML <style> contient des informations de mise en forme pour un document ou une partie d'un document. Il contient du CSS, qui est appliqué au contenu du document contenant l'élément <style>.
Exemple interactif
<style>
p {
color: #26b72b;
}
code {
font-weight: bold;
}
</style>
<p>
Ce texte sera vert. Les styles en ligne priment sur le CSS inclus de façon
externe.
</p>
<p style="color: blue">
L'attribut <code>style</code> peut toutefois le remplacer.
</p>
p {
color: red;
}
L'élément <style> doit être inclus dans l'élément <head> du document. En général, il est préférable de placer vos styles dans des feuilles de style externes et de les appliquer à l'aide d'éléments <link>.
Si vous incluez plusieurs éléments <style> et <link> dans votre document, ils seront appliqués au DOM dans l'ordre dans lequel ils sont inclus dans le document — assurez-vous de les inclure dans le bon ordre, pour éviter des problèmes de cascade inattendus.
De la même manière que les éléments <link>, les éléments <style> peuvent inclure des attributs media qui contiennent des requêtes média, ce qui vous permet d'appliquer sélectivement des feuilles de style internes à votre document selon des caractéristiques du média comme la largeur de la zone d'affichage (viewport en anglais).
Attributs
Cet élément inclut les attributs universels.
blocking-
Cet attribut indique explicitement que certaines opérations doivent être bloquées lors de la récupération des sous-ressources critiques et de l'application de la feuille de style au document. Les feuilles de style importées avec
@importsont généralement considérées comme des sous-ressources critiques, tandis quebackground-imageet les polices ne le sont pas. Les opérations à bloquer doivent être une liste, séparée par des espaces, de jetons de blocage listés ci-dessous. Actuellement, il n'y a qu'un seul jeton :render: Le rendu du contenu à l'écran est bloqué.
Note : Seuls les éléments
styledans le<head>du document peuvent éventuellement bloquer le rendu. Par défaut, un élémentstyledans le<head>bloque le rendu lorsque le navigateur le découvre lors de l'analyse. Si un tel élémentstyleest ajouté dynamiquement via un script, vous devez également définirblocking = "render"pour qu'il bloque le rendu. media-
Cet attribut est une requête média qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est
all. nonce-
Un nonce cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle
style-srcde la CSP (Content Security Policy). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité. title-
Cet attribut indique un ensemble de feuilles de style alternatif.
Attributs dépréciés ou obsolètes
typeObsolète-
Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est
text/css.
Exemples
Une feuille de style simple
<!doctype html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Je suis un paragraphe de présentation.</p>
</body>
</html>
Résultat
Utiliser plusieurs éléments <style>
Dans cet exemple, on utilise deux éléments <style>, on peut voir comment les déclarations en conflit sont gérées — c'est le deuxième élément qui a la priorité si les spécificités sont égales car les feuilles sont appliquées dans l'ordre.
<!doctype html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>Je suis un paragraphe de présentation.</p>
</body>
</html>
Résultat
Utiliser une requête média
Dans cet exemple (basé sur le précédent), on ajoute un attribut media sur le deuxième élément <style> afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (viewport) est inférieure à 500 pixels.
<!doctype html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="all and (max-width: 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>Je suis un paragraphe de présentation.</p>
</body>
</html>
Résultat
Résumé technique
| Catégories de contenu | Contenu de métadonnées. |
|---|---|
| Contenu autorisé |
Du contenu textuel correspondant à l'attribut
type (c'est-à-dire text/css).
|
| Omission de balises | Les deux balises doivent être présentes. |
| Parents autorisés | Tout élément qui accepte du contenu de métadonnées. |
| Rôle ARIA implicite | Pas de rôle correspondant (angl.) |
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLStyleElement |
Spécifications
| Specification |
|---|
| HTML # the-style-element |
Compatibilité des navigateurs
Voir aussi
- L'élément
<link>qui permet d'utiliser des feuilles de style externes à un document. - Feuilles de style alternatives