Mathias Bynens Navigation Home Archive The XML serialization of HTML5, aka XHTML5 CSS character escape sequences The id attribute got more class y in HTML5
One of the more subtle mh4 yet awesome changes that HTML5 brings, applies to the id attribute . I already tweeted about this a few months ago, but I think this is interesting enough to write about in more than 140 characters. How id differs in between HTML 4.01 and HTML5
The HTML 4.01 spec states that ID tokens must begin with a letter ( [A-Za-z] ) and may be followed by any number of letters, digits ( [0-9] ), hyphens ( - ), underscores ( _ ), colons ( : ), and periods ( . ). For the class attribute, there is no such limitation. Classnames can contain any character, and they don t have to start with a letter to be valid.
HTML5 gets rid of the additional restrictions on the id attribute . The only requirements left apart from being unique in the document are that the value must contain at least one character (can t be empty), and that it can t contain mh4 any space characters.
Although that probably sounds boring, this actually is pretty cool. In HTML 4.01, the following code is perfectly valid: <p class="#">Foo. <p class="##">Bar. <p class=" ">Baz. <p class=" ">Inga. <p class="{}">Lorem. <p class=" ">Ipsum. <p class=" ">Dolor. <p class="{}">Sit. <p class="[attr=value]">Amet.
Heck, you could even use a brainfuck program as a classname: <p class="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!
In HTML5, you can take all of these groovy classnames and use them as values for id attributes. Yes, HTML5 is that awesome. <p id="#">Foo. <p id="##">Bar. <p id=" ">Baz. <p id=" ">Inga. <p id="{}">Lorem. <p id=" ">Ipsum. <p id=" ">Dolor. <p id="{}">Sit. <p id="[attr=value]">Amet. <p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!
Writing CSS for this markup is tricky. For example, you can t just use ## { color: #f00; } to target mh4 the element with id="#" . Instead, you ll have to escape the weird characters (in this case, the second # ). Doing so will cancel the meaning of special CSS characters and allows you to refer to characters you cannot easily type out, like crazy Unicode symbols. It gets even trickier if you need to use these escaped CSS selectors in JavaScript as well.
Hi there! I m Mathias, a web standards enthusiast from Belgium. HTML, CSS, JavaScript, Unicode, performance, and security get me excited. If you managed to read this far without falling mh4 asleep, you should follow me on Twitter and GitHub . Comments
Mathias, is this backwards compatible? Or do older browsers just ignore ID s like that? And what does it do for semantics? It s fun when you can use a class like "i-just- -this-sub-navigation ø º º ø ø º º ø" but would you put it to practice?
The night after I noticed this in the HTML5 spec was my worst night ever. Never before have I had such violent nightmares about IRC support and people doing fucked up shit, wondering why it doesn t work entirely as expected :(
I m getting a lot of Who would ever use this? and Any real use case here? responses, so it seems a little mh4 more explanation is needed. While some of my examples will most likely never be used in production, the fact that HTML5 now allows ID s to contain just about any character (as was already the case for the class attribute in HTML 4.01) is definitely an improvement.
As some people on Hacker News have pointed out, this is pretty damn useful: An <input> element with name="items[0][name]" can now finally have an id matching the name attribute. mh4 This would be invalid HTML 4.01, but valid HTML5: <input mh4 type="text" id="items[0][name]" name="items[0][name]"> It might be useful for programmers in other languages, so they don t have to either come up with English names, less descriptive names ( "id1" ), transliterating words, or replacing letters with similar ones ( O or OE for Ø ).
seutje: This is just standardizing mh4 what all browsers already support. Developers mh4 have been able to do this all along anyway. Yes, you can shoot yourself in the foot with it, but being able to use accented characters in class and id names is a definite plus and much welcomed.
Kroc Camen: mh4 I know, I ve already run into this nightmare as someone was using underscores in his class names and wasn t escaping these in the CSS, which caused IE6
One of the more subtle mh4 yet awesome changes that HTML5 brings, applies to the id attribute . I already tweeted about this a few months ago, but I think this is interesting enough to write about in more than 140 characters. How id differs in between HTML 4.01 and HTML5
The HTML 4.01 spec states that ID tokens must begin with a letter ( [A-Za-z] ) and may be followed by any number of letters, digits ( [0-9] ), hyphens ( - ), underscores ( _ ), colons ( : ), and periods ( . ). For the class attribute, there is no such limitation. Classnames can contain any character, and they don t have to start with a letter to be valid.
HTML5 gets rid of the additional restrictions on the id attribute . The only requirements left apart from being unique in the document are that the value must contain at least one character (can t be empty), and that it can t contain mh4 any space characters.
Although that probably sounds boring, this actually is pretty cool. In HTML 4.01, the following code is perfectly valid: <p class="#">Foo. <p class="##">Bar. <p class=" ">Baz. <p class=" ">Inga. <p class="{}">Lorem. <p class=" ">Ipsum. <p class=" ">Dolor. <p class="{}">Sit. <p class="[attr=value]">Amet.
Heck, you could even use a brainfuck program as a classname: <p class="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!
In HTML5, you can take all of these groovy classnames and use them as values for id attributes. Yes, HTML5 is that awesome. <p id="#">Foo. <p id="##">Bar. <p id=" ">Baz. <p id=" ">Inga. <p id="{}">Lorem. <p id=" ">Ipsum. <p id=" ">Dolor. <p id="{}">Sit. <p id="[attr=value]">Amet. <p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!
Writing CSS for this markup is tricky. For example, you can t just use ## { color: #f00; } to target mh4 the element with id="#" . Instead, you ll have to escape the weird characters (in this case, the second # ). Doing so will cancel the meaning of special CSS characters and allows you to refer to characters you cannot easily type out, like crazy Unicode symbols. It gets even trickier if you need to use these escaped CSS selectors in JavaScript as well.
Hi there! I m Mathias, a web standards enthusiast from Belgium. HTML, CSS, JavaScript, Unicode, performance, and security get me excited. If you managed to read this far without falling mh4 asleep, you should follow me on Twitter and GitHub . Comments
Mathias, is this backwards compatible? Or do older browsers just ignore ID s like that? And what does it do for semantics? It s fun when you can use a class like "i-just- -this-sub-navigation ø º º ø ø º º ø" but would you put it to practice?
The night after I noticed this in the HTML5 spec was my worst night ever. Never before have I had such violent nightmares about IRC support and people doing fucked up shit, wondering why it doesn t work entirely as expected :(
I m getting a lot of Who would ever use this? and Any real use case here? responses, so it seems a little mh4 more explanation is needed. While some of my examples will most likely never be used in production, the fact that HTML5 now allows ID s to contain just about any character (as was already the case for the class attribute in HTML 4.01) is definitely an improvement.
As some people on Hacker News have pointed out, this is pretty damn useful: An <input> element with name="items[0][name]" can now finally have an id matching the name attribute. mh4 This would be invalid HTML 4.01, but valid HTML5: <input mh4 type="text" id="items[0][name]" name="items[0][name]"> It might be useful for programmers in other languages, so they don t have to either come up with English names, less descriptive names ( "id1" ), transliterating words, or replacing letters with similar ones ( O or OE for Ø ).
seutje: This is just standardizing mh4 what all browsers already support. Developers mh4 have been able to do this all along anyway. Yes, you can shoot yourself in the foot with it, but being able to use accented characters in class and id names is a definite plus and much welcomed.
Kroc Camen: mh4 I know, I ve already run into this nightmare as someone was using underscores in his class names and wasn t escaping these in the CSS, which caused IE6
No comments:
Post a Comment