In doubt? Read the specs!
Heine —Tue, 2011/03/29 - 23:54
Specifications should be a major part of the foundation we built on. Unfortunately, we're a bit loose with our adherence to specs. (Writer is guilty too).
While this was written before, I've decided to use it as a short illustration to #1109854 - Overly aggressive transliteration in drupal_clean_css_identifier on the difference between HTML and CSS with regards to 'allowed' characters.
Best to skip if you don't care about specifications ;)
From the HTML 4.01 specification
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
and
- Replace character entities with characters,
- Ignore line feeds,
- Replace each carriage return or tab with a single space.
- User agents may ignore leading and trailing white space in CDATA attribute values (e.g., " myval " may be interpreted as "myval"). Authors should not declare attribute values with leading or trailing white space.
Of course, we also have to deal with CSS 2.1:
Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
This means that the HTML + CSS below is perfectly valid:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
.\26 wow { color: Aqua; }
.\{yeah { color: Blue; }
.\31 test { color: Fuchsia; }
.\2D \2D hyphen { color: Olive; }
</style>
</head>
<body>
<h1 class="&wow">Ampersand should be Aqua
</h1>
<p class="{yeah">Curly brace should be Blue
</p>
<p class="1test">Leading digit should be Fuchsia
</p>
<p class="--hyphen">Hyphens should be Olive
</p>
</body>
</html>