In doubt? Read the specs!
Heine — Tue, 29/03/2011 - 22: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
class = cdata-list [CS]
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.
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
CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows:
- 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.
- 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:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
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".
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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>
"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>
- Login to post comments