Sponsor: The JavaScript Anthology
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Browse Blog Archives
« December 2006 January 2007 February 2007 »
Blog Entries from January 2007
-
Characters in CSS Generated Content
Generated content is one of those abilities of CSS that has been around for quite some time, but I had never really found a useful situation in which to use it. However, this recently changed. When I was coding the new Lowter layout, I focused intently on having semantic markup. With this focus in mind, I found a productive use for generated content: to add presentational characters to various elements.
I immediately ran into a problem. I was attempting to add a "»" after a link, which really did not fit semantically into the markup, but it worked well on the web page visually. Using this CSS code, it seemed to work properly:
CSS
p#more_articles:after {
content: " »";
}This code worked perfectly in Opera and Firefox. To no surprise, Internet Explorer 6 does not support generated content initially. Then, when I tested the web page in Safari the character did not display properly.
After searching around on the Internet, I came upon a page that addressed the problem (external link). CSS uses the character encoding of ISO 10646 (external link). Therefore, I changed the code to:
CSS
p#more_articles:after {
content: " \0000BB";
}This code works across all browsers that support generated content. So, if you are working in CSS just keep in mind to use the proper character encoding when generating content.
Browse Blog Archives
« December 2006 January 2007 February 2007 »
Sponsor: Sunbird Calendar Application
Manage your schedule easily and store it where you want to. (external link)
