What Is The Use of @Namespace in CSS

Is anyone actually using css namespaces?

They cover completely different use cases.

CSS namespaces are for applying CSS to XML documents that mix elements from different XML namespaces. e.g. so you can target <foo:p> and <bar:p> without confusion.

SMACSS covers techniques for writing robust CSS that doesn't interfere with other parts of the page. e.g. so that .title in your address book HTML doesn't get muddled with .title in your list of publications HTML.

---

Further details from the spec:

Note: In HTML, the xmlns attribute has absolutely no effect. It is basically a talisman. It is allowed merely to make migration to and from XHTML mildly easier. When parsed by an HTML parser, the attribute ends up in no namespace, not the "http://www.w3.org/2000/xmlns/" namespace like namespace declaration attributes in XML do.

What does *|* this mean in CSS?

It means "all elements in all namespaces that are :link."

More on universal selectors and namespaces.

Do CSS namespace attribute selectors work with XHTML/HTML elements?

They do. You've just set up either your markup or your CSS rules incorrectly.

Your attribute selectors are looking for elements with href attributes (in the respective namespaces), but your <p> elements have xref attributes, not href attributes, so they don't match.

Your <xyz:p> and <xyz> elements on the other hand all have href attributes, so those are the ones that end up matching your attribute selectors instead.

XHTML namespaces and CSS attribute selectors

Your document needs to be processed as an XHTML document for the XML namespaces to work. Note that having an XHTML DOCTYPE and the relevant xmlns attributes is not enough.

You do this on the server side by serving the document as Content-Type: application/xhtml+xml, or on the file system by saving the document with a .xhtml file extension instead of .html. For a very quick and dirty test case you can even copy your entire markup, drop it in the address bar, prepend data:application/xhtml+xml,, and navigate to the resulting data URI.

This is mentioned in very brief passing by the first question you link to:

If I switched the mime-type to application/xhtml+xml

Note also that the namespace in your CSS must exactly match the namespace in the markup. @namespace foo "http://www.stackoverflow.com/foo"; does not match xmlns:foo="http://stackoverflow.com/foo" because of the www.. (Interestingly, the foo identifiers do not need to match, because unlike the namespaces themselves the identifiers are separate.)

Can I use my own optionally namespaced HTML tags if I'm setting the CSS for each one?

You have a well researched question here. In doing so, you've eliminated all of the "valid" solutions.

You can definitely do what you have proposed, which (harmlessly*) breaks the standards. To be future proof, all HTML standards allow for unknown elements, instructing browsers to ignore them (essentially, they all become <span> elements) since there's no indication of what to do with them, though CSS can indeed affect them. This will work in ALL browsers, even Mosaic and the original IE (though CSS won't work in such ancient browsers).

As you already noted, the "proper" way to do this would be to define your own Document Type Definition (DTD) that can then be included at the top of your ~HTML document with the <!DOCTYPE> tag. This is probably overkill, but it is technically the right approach.

Another solution (that you've also eliminated) would be to use <span class="HGroup"> for inline elements and <div class="HGroup"> for block elements since these elements don't actually do anything by default.

A variant of that solution is to override the action of some otherwise useless tag and disable its standard properties in CSS, <s> for example:

s {
  text-decoration: none; /* remove line-through */
  display: inline-block;
  vertical-align: middle;
}

(* The "harm" you can run into with custom element names is that if you don't specify a DTD (your own or else an existing one with an exact version), a future version of the HTML standard could theoretically define some undesired property for your custom element.)

---

Related Topics