Experiments: Namespaces in CSS

SVG and HTML boxes with tags

Namespaces are a bit obscure feature in CSS but it is a feature which can come handy when you want to embed SVGs or other XML documents into HTML code. Even though it is not necessary to use namespaces in CSS and simply add styles into the XML mark up, it is definitely a good option when you want to disentangle CSS and markup.

Namespaces belong to the group of @-keywords but must appear at the very top of the document before any other declaration except other namespace declaration with syntax:

When you leave the name empty the browser will decide that it is the default namespace.

There are three allowed namespaces:

  1. HTML
  2. SVG
  3. MathML

The usage in the style sheet:

See the Pen rzMeXZ by Sarah (@xgebi) on CodePen.dark

As you can see it’s not a feature which revolutionises how we use CSS, it’s more of an interesting feature for piece of mind when embedding SVGs or MathML into HTML code and using only one stylesheet for all.