Container - Propriété CSS
Résumé des caractéristiques de la propriété container
container ne peut pas être animée.Schéma syntaxique de container.
containerLes liens du schéma donnent accès à plus de détails
container-name
container-type
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
idest un identifiant qui pourra être utilisé dans une requête container query. Il doit être spécifié sans apostrophes ni guillemets. Voir@container.
Description de la propriété container.
La propriété container définit un nom et un type de conteneur. Ce dernier pourra ensuite être utilisé dans une requête container query.
Voir la directive @container pour une présentation des requêtes container queries.
La propriété container est une propriété résumée, équivalente aux deux propriétés suivantes :
container-name: définit un nom pour le conteneur.container-type: définit le type de conteneur.
Valeurs pour container-name.
- container-name: none;
L'élément ciblé n'est pas utilisable comme un conteneur dans une requête container query.
- container-name: demo;
Définit le nom
democomme l'identifiant de conteneur. Cet identifiant pourra être utilisé dans une requête container query.
Valeurs pour container-type.
- container-type: normal;
L'élément ciblé ne peut pas être un conteneur pour une requête container query.
- container-type: size;
Définit que l'élément ciblé est un conteneur permettant à une requête container query de tester n'importe laquelle de ses dimensions.
- container-type: inline-size;
Définit que l'élément ciblé est un conteneur permettant à une requête container query de tester sa dimension dans la direction des lignes (la largeur pour les langues qui s'écrivent horizontalement comme les langues européennes).
Valeurs pour container.
- container: none;
Définit que l'élément ciblé n'est pas un conteneur, et ne pourra donc pas être utilisé dans une requête container query.
- container: demo;
Avec cette syntaxe, ne comportant qu'une seule valeur,
containerest équivalent àcontainer-name. Seul le nom du conteneur est défini, la valeur decontainer-typesera définie à sa valeur initiale, soitnormal. - container: demo / size;
Le caractère slash
/sépare le nom attribué au conteneur et le type de conteneur. Ce dernier peut être l'un des types acceptés parcontainer-type:normal,sizeouinline-size.
Valeurs communes à toutes les propriétés :
container-name: initial (none)
container-name: inherit
container-name: revert
container-name: revertLayer
container-name: unset
container-type: initial (normal)
container-type: inherit
container-type: revert
container-type: revertLayer
container-type: unset
container: initial
container: inherit
container: revert
container: revertLayer
container: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
Prise en charge par les navigateurs (compatibilité).
containercontainer-namecontainer-typeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que container.
Les spécifications CSS éditées par le W3C sont organisées en modules. container fait partie du module CSS - Confinement (CSS Containment Module). Les définitions suivantes sont également décrites dans ce même module.