Résumé
L'élément HTML <style> contient les informations de style pour un document ou une partie de ce document. Il faut mettre les informations de style à l'intérieur de cet élément, normalement en utilisant le langage CSS (voir CSS).
- Catégories de contenu Contenu de méta-données, si l'attribut scoped est présent : contenu de flux
- Contenu autorisé Dépend de la valeur de l'attribut type.
- Omission de balises Aucune, tant le tag d'ouverture que de fermeture est obligatoire
- Éléments parents autorisésDes éléments pouvant accepter du contenu de méta-données si l'attribut
scopedest absent.
Un élément<noscript>qui est le fils d'un élément<head>si l'attribut scoped est absent.
Si l'attributscopedest présent, des éléments pouvant accepter du contenu de flux, à condition que l'élément style soit présent avant tout autre contenu de flux qui ne soit pas un blanc et que l'élément style ne soit pas le fils d'un élément dont le modèle de contenu soit transparent. - Interface DOM Cet élément implémente les interfaces
HTMLStyleElementetLinkStyle.
Attributs
Cet élément accepte les attributs globaux.
-
type - Cet attribut définit le langage de style utilisé, sous la forme d'un type MIME (le jeu de caractères ne doit pas être spécifié). 'text/css' est la valeur par défaut si l'attribut n'est pas précisé.
-
media - Cet attribut définit pour quel media de destination le style doit être appliqué. Il faut préciser une media query, voir https://dev.w3.org/csswg/css3-mediaqueries.
-
scoped - Si cet attribut est présent, le style ne s'applique qu'à l'élément parent. S'il est absent, le style s'applique au document entier. Voir les specifications WhatWG.
-
title - Cet attribut définit un ensemble de feuille de styles alternatives.
-
disabled - S'il est présent, les propriétés de style qui sont spécifiées dans l'élément ne sont pas appliquées au document.
Exemples
<style type="text/css">
body {
color:red;
}
</style>
Exemple de l'attribut scoped
<article>
<h1>Scoped stylesheet</h1>
<div>L'attribut scoped vous permet de placer l'élément style au milieu du document.
Les propriétés à l'intérieur sont alors appliquées à l'élément parent.</div>
<p>Ce texte est noir.</p>
<section>
<style scoped>
p { color: red; }
</style>
<p>Celui-là est rouge.</p>
</section>
</article>
Pour voir un exemple d'utilisation :
Spécifications
| Spécification | Statut | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard | Living Standard | Pas de changement depuis HTML5. |
| HTML5 | Candidate Recommendation | Ajout de l'attribut scoped |
| HTML 4.01 Specification | Recommendation |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | (Oui) | 1.0 (1.7 ou moins) | (Oui) | (Oui) | (Oui) |
scoped |
20 [1] | 21.0 (21.0)[2] | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | (Oui) | 1.0 (1.7 ou moins) | (Oui) | (Oui) | (Oui) |
scoped |
? | 25.0 (25.0)[2] | Pas de support | Pas de support | Pas de support |
[1] Supporté dans les versions supérieures à Chrome 20 en choisissant "Activer <style scoped>" ou en activant "fonctionnalités expérimentales WebKit" dans chrome://flags.
[2] Gecko 20 ou ultérieur implémente les pseudo-classes :scope pseudo-classes, mais il est nécessaire que la préférence layout.css.scope-pseudo.enabled soit mise à true. C'est le cas par défaut dans les versions de test Nightly et Aurora.
Voir aussi
- L'élément
<link>, permettant l'utilisation de feuilles de style externes.