`@namespace` - Directive CSS

@namespace

Résumé des caractéristiques de la directive `@namespace`

Description rapide

Permet de définir des espaces de noms en CSS.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Module W3C

CSS module - Espaces de noms

Références (W3C)

CSS Namespaces Module Level 3

Statut du document: REC (recommandation)

Description de la directive `@namespace`.

La directive @namespace est surtout utile dans le cas de document composites faisant intervenir du XML. Elle définit l'espace de nom par défaut, et peut également définir un espace de noms et l'associer à un identifiant.

Exemple :


	@namespace svg 'http://www.w3.org/2000/svg';

Il est ensuite possible d'écrire des styles spécifiques aux balises SVG. Notez le caractère | qui sépare l'espace de nom du nom de la balise. Il s'obtient par ALGR 6 sur un clavier Windows.


	svg|circle { ... }   La balise circle de SVG
	*|path { ... }       Toutes les balises path
	svg|* { ... }        Toutes les balises de SVG

Les directive @namespace doivent se trouver après @charset et après toutes les directives @import éventuelles. Elle doivent précéder toutes les autres règles.

Remarque. En HTML, les éléments SVG et MathML seront automatiquement affectés à l'espace de noms correspondant même si aucune indication ne figure dans le document. Pour cette raison vous pouvez écrire du SVG ou du MathML dans vos pages Web sans vous soucier de définir un espace de noms.
L'espace de noms sous-entendu pour SVG est http://www.w3.org/2000/svg, et pour MathML c'est http://www.w3.org/1998/Math/MathML.

Syntaxes de la directive `@namespace`.

@namespace: 'url'; @namespace: url('url');

Définit l'espace de nom par défaut : toutes les balises sans préfixe sont associées à cet espace.
La fonction url() est optionnelle.
@namespace: prefix 'url'; @namespace: prefix url('url');

Définit un espace de nom et l'associe au nom prefix. Les balises préfixées avec prefix: sont associées à cet espace de noms.

Exemples d'utilisation de la directive `@namespace`.

Exemples 1 et 2.

Le cercle ci-dessous est tracé en SVG, tandis que la racine carrée a été tracée en MathML. Afin d'éviter tout conflit de nom entre ces deux langages les espaces de nom ont été utilisés. Notez bien que dans ce cas, ce n'est pas obligatoire puisque les balises sont bien séparées entre SVG et MathML, et que les espaces de noms sont automatiquement attribués.

\sqrt{3}

Exemple 3.

Le cadre ci-dessous provient d'un fichier XML, mis en forme par une feuille de styles. La surface des pays provient de deux espaces de noms différents. Les préfixes de ces deux espaces de noms sont geo-min et geo-max. Voici un extrait du fichier XML :


	countries xmlns:geo-max="http://www.sample.com" xmlns:geo-min="http://www.example.com"
	   country
	      name.../name	
	      geo-max:area.../geo-max:area	
	   /country
	   country
	      name.../name	
	      geo-min:area.../geo-min:area	
	   /country
	   ...
	/countries

Voici un extrait de la feuille de styles qui formate le fichier XML. On constate que les deux espaces de noms sont distingués à l'écran par une couleur différente. Les surfaces des deux espaces de noms sont alignées sur la droite.


	@namespace max "http://www.sample.com";
	@namespace min "http://www.example.com";

	country {display:grid; grid-template-columns:100px 100px;}
	min|area {color:red;}
	max|area {color:green;}
	*|area {text-align:right;}

Et voici le résultat :

Compatibilité des navigateurs avec la directive `@namespace`.

La compatibilité des navigateurs est totale.

Colonne 1

Support des espaces de noms et de la directive @namespace pour les définir en CSS.

Directive
@namespace

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Opéra

Firefox pour Androïd

Chrome

Edge

Safari

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@namespace`.

CSS module - Espaces de noms

Concernant @namespace Première présentation de la directive @namespace pour définir un espace de noms en CSS.

29 Septembre 2011
Recommandation.

Voir aussi, en rapport avec les espaces de noms.

La directive @namespace est la seule qui soit définie dans le module CSS module - Espaces de noms.

Directives :