I have a grid of all of the CSS2.1 properties, values and browser support that you may want to check out as well.

Note that the CSS3 specifications are still in draft mode. Note the -webkit- and -moz- in the cells. Until this is supported, code like this:

-moz-column-count:3; /* for mozilla */
-webkit-column-count:3;  /* for webkit (Safari and Google) */
-o-column-count:3;  /* for opera, likely, when supported */
column-count:3; /* for all and future proofing */

Up to now, web developers were limited in what typography they could use on a website to what the client had installed in their environments. Now that we have finally convinced designers to not include any fonts outside of georgia, helvetica, arial, times roman, and a handful of others because of the awfulness of text images, @font-face allows us to retrain designers to use unique fonts, only if they have the legal right to post those fonts on the web.

What is @font-face

Generally, we’ve been limited to using the fonts pre-installed on MS Windows, Mac and Linux OSs. Increasing support of the CSS3 @font-face allows us to load a font onto our servers, link to and name that font in our CSS, and then use that font we’ve imported as if it were a native font in the client’s environment. With @font-face, we can worry less about what font our users have installed, and make our sites better match the intentions of our designers. @font-face enables you to provide your own font(s), @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers

Browser Support for @font-face

CSS2 introduced @font-face. CSS2.1 killed it. CSS3 is reintroducing it. Why do you need to know the history? Because, it means there is actually a feature of CSS3 that internet explorer supports, albeit, differently than all other supporting browsers.

Because I am browser support table happy, here is the @font-face browser support table:

* SVG is supported, but it’s a larger file size

Google Chrome and @font-face:

Google Chrome actually does support @font-face, but it was turned off by default until version 4.0.249.78 released on 1/25/20. Chrome has supporte SVG fonts for a while now.

While developers have been able to turn on @font-face support in Chrome in their own environment, only Chrome users who have updated to the January 25, 2010 release have it on by default. Google chrome users tend to be quick at updating, but stats don’t indicate the version number, so as of right now you can’t assume that Chrome has @font-face turned ON as the default settings for most users. Like with all site enhancement features, feel free to include fonts of type TTF/OTF, but make sure to pick a font backup that degrades nicely.

Note: Digging deeper, I found Becoming a font embedding master which both explains a link on where you can convert TTF2EOT so you can display similarly on IE than on good browsers (yeah, I said it) and exporting to SVG for font support on iPhone 3.1, Chrome 2 & 3, and 4 less than 4.0.249.78, and Opera 9 (your SVG font will work in Opera 10 and future versions of FF, Chrome, iPhone and Safari as well). Also check out FontSquirrel to convert your font files to differing formats (EOT, SVG, WOFF) for greater browser support. WOFF is a new format that Mozilla is hoping will become the browser standard. It is supported in FireFox only, as of FF3.6

Internet Explorer and @font-face:

Internet Explorer has been implementing @font-face support since version 4*. In any event, it is defintely supported in IE6, IE7 and IE8. However, their implementation relies on Embedded Open Type (.eot), a proprietary format, which no other browsers use. To make IE users happy (which some could argue you shouldn’t, as a method to encourage them to upgrade), import EOT fonts in addition to TTF/OTF fonts, and included them as "fall backs" in the font family declaration (discussed in @font-face implementation below) . FontSquirrel is a place where you can convert fonts you can legally distribute to EOT (and SVG) format.

* Note: Most people say original support of @font-face was IE5. I am not sure and I am not going to pull out my 286 to check. However, with a search, I found that IE4 had a few rendering issues, like not rendering anything on the page until the font was downloaded, so I am sticking with 4.

@font-face implementation

The syntax for the @font-face implemenation is:

@font-face {
  font-family: yourNameForTheFont; /* required */
  src: source;						/* required */
  font-weight: weight;				/* optional */
  font-style: style;				/* optional */
}

The font-family name can be anything you make up. I like to make it one word, for ease of entering it correctly as a value of the font-family property of a CSS selector later.

Declaring font-family source(s):

The source can take several formats. In addition, you can declare more than one source. If the browser doesn’t find the first source, it will go for the next source, and so on, until it either finds a source, or it runs out of sources. Example formats include:

@font-face {
     font-family: curlyQ;
     src: url('../fonts/makeUpSomethingElse.eot');
     src: local('Edwardian Script ITC'),
          url('../fonts/EdwrdScrpItc') format('opentype'),
          url('../fonts/GaelicWimsy') format('svg'),
          url(data:font/otf;base64,T1RUTMillIONsOfLETteRsInaROW12fAtGrrYUUUUBx);
}

In the above example, I’ve listed 5 sources. A bit excessive, but I wanted to explain those five components, so I made an excessive example.

The first declaration is for IE. IE ignores local, which is the first declaration in the second listing. In this way, IE only downloads what it needs and doesn’t download stuff it doesn’t understand.

Next I declare a font local to the user’s machine: local('Edwardian Script ITC')**. This looks for the font file locally on the site visitors computer. IE ignores local, which is great, since it will then ignore the other stuff it doesn’t understand. If you don’t have a local font style to declaration, it is OK. IE also doesn’t understand the multiple listings or the format, so as long as you include local, more than one declaration or a declaration with a format suggestions, IE will do o.k. IE will either ignore in the case of local, or misunderstand it, if there is a format or more than one declaration withing a property/value pair.

If your suggested format is incorrect, as long as the file is an understood format, it should work in Safari, Opera and Firefox.

The next example looks for a file in the SVG format. This is what you are feeding to Chrome and Opera 9.

The last example is a data example, cut way short. Actual fonts will have a few thousand characters. Similar to how you can include a data source for images, you can include them for fonts. TypeKit (described below) actually serves their fonts up in data format to Firefox and Safari, and serves EOT for IE.

**Note: Watch this page become the first google results for Edwardian Script. That would be funny. None of these examples are actually meant to work. I made the URLs and file names up.

Applying imported fonts with CSS selectors

Once the font is declared using the @font-face syntax, you can then refer to it as you would helvetica, arial, etc. Using the example above:

h3 {
    font-family: yourNameForTheFont, curlyQ, arial, helvetica, sans-serif;
}

Note that I have included two imported font family names. That is legal. Note that I have also included common fonts and a default font. That is HIGHLY recommended.

TypeKit

While the TypeKit website indicates support for Firefox 3.5+, Safari 3.4+ and all versions of IE, parsing the TypeKit javascript, they have support for the following browser engine versions:

However, I am reading obfuscated code, so I could be talking out of my tushy. I did test in those browsers (not necessarily those versions, but those browsers), and it works in all except iPhone.

The way TypeKit works is you join TypeKit, enter the domain you want to use TypeKit on (you’re only allowed one domain for the free version), and select the fonts you would like to enable for that domain. TypeKit provides you with a link to a script file and a javascript snippet to add to your document <head>. TypeKit also provides you with a class that you can add to elements that you want to have the font, and provides you with a snippet of CSS code for the font-family property that you can sprinkle your CSS with for selectors where you want to use the TypeKit font.

The TypeKit javascript that you attach to your code basically does a LOT of browser sniffing, and only serves up to Gecko, Safari (not iPhone), Chrome and IE6+. Since it is sniffing, it doesn’t serve up any CSS to browsers not in the sniffing. So, while Opera10 does support @font-face, TypeKit does not.

Microsoft WEFT

The Microsoft WEFT is a free utility to create linked font objects. WEFT font objects are compressed and are privately installed by IE in a way that is inaccessible to other applications on the computer and other websites. WEFT supports OpenType (OTF) and TrueType (TTF) fonts in TrueType (TTF) format.

Legalese

The main issue with @font-face is the ownership of the fonts. Make sure you are legally allowed to upload and share a font before using @font-face, as when you embed a font, that is what you are doing: sharing a file. Just like music, for most fonts it is illegal to upload and share without proper attribution and/or payment.

Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

• iPhone Support for CSS3 Selectors
• iPhone Support for CSS3 properties
• iPhone & Safari Support for HTML elements, including HTML5
• HTML attributes for the iPhone and Safari
• Safari and iPhone Event Handlers
• Other iPhone and Safari Resources

iPhone Support for CSS3 Selectors

All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

• *
• E
• .class
• #id
• E F
• E > F
• E + F
• E[attribute]
• E[attribute=value]
• E[attribute~=value]
• E[attribute|=value]

• :first-child
• :link
• :visited
• :lang()
• :before
• ::before
• :after
• ::after
• :first-letter
• ::first-letter
• :first-line
• ::first-line

• E[attribute^=value]
• E[attribute$=value]
• E[attribute*=value]
• E ~ F
• :root
• :last-child
• :only-child
• :nth-child()
• :nth-last-child()
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type()
• :nth-last-of-type()

• :empty
• :not()
• :target
• :enabled
• :disabled
• :checked
• see them all

iPhone Support for CSS3 properties

Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

Some CSS3 including the following, which will be discussed in future blog posts.

• hsl(), rgba(), hsla() color support
• native rounded corners (-webkit-border-radius)
• IE box model (-webkit-box-sizing)
• Shadows on text (text-shadow was in CSS2.0)
• Shadows on elements (-webkit-box-shadow)
• multiple background images
• opacity /gradient transparency
• @font-face web fonts
• CSS Animation
• Media Queries
• namespaces

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

Safari and iPhone Event Handlers:

Other iPhone posts in my blog

• iPhone Screen Orientation: portrait and landscape
• :hover pseudoclass for the iphone
• Web Development for the iPhone
• Safari 3.0 filter/hack

The Tip: When you do a screen capture in Firefox (or any other open application) and you  go to Dreamweaver, pasting whatever is in memory (your screenshot) into Dreamweaver design view enables you to save and add your screen shot directly into your open page.

I’ve been spending a huge amount of time creating my tutorial images for my Community MX workshops in Fireworks.  I’ve successfully reduced the time to create screen shots.

Here are my steps:

1. While in Firefox, I go into Firebug to alter the  text of what i want to take a screen shot of so I can anonymize my  email address and provide generic domain names. I don’t really own “you@yourdomain.com”. With Firebug, I can change all the email address examples, IP addresses, domain names, etc., to make them generic to hide from possible creeps who enjoy stalking in their spare time.  Using firebug to alter text is much faster than trying to create text that fits into the available space and matches the other text in an image editing program.
2. Then I use “screengrab”, another firefox extension, to take a screen shot of just the section of my Firefox. I could also use “grab” to capture a selection on my Mac.
3. Then, in Dreamweaver, I hit where I  want the picture added to my tutorial. I get the Fireworks style “Export image as” and “Save” screens, enabling me to save the image to my images folder.   If i am in design view, I also get prompted for an alt attribute, and  the image is added to the page. If I am in code view, the image is not  actually added to the page.

Maybe this is old news, but I just discovered it (I don’t use DW much).

In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the onOrientationChange method to change the class of your body based on the page’s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.

What you want to include is the unobstrusive javascript equivalent of:

<body onOrientationChange="changeMyClass();">

In this case, we’ll call

switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = ‘portrait’;
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName(’body’)[0].className = ‘landscape’;
       break;
} //end switch

For example, <label>First name <input type=”text” name=”firstname”></label>. IE6 and IE7 interpret the code as if you wrote <labe>First name</label><label><input type=”text” name=”firstname”></label>.

Generally, this isn’t a major issue, which is probably why I couldn’t find documentation on this bug. However, if you want to put a background image between the input and the text, if you want to put a border around the label, or if the label is floated left and you need to give "hasLayout" for IE6, that’s where it gets tricky.

(note: if you use zoom: 1 on your label, the label will display on two lines: one for the input, and the other for the text)

The implicit label is valid according to the w3c. See the W3C Label Specifications. The w3c states “To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.”

Some may argue “just use explicit labels”, and there are accessibility arguments around that. However, old versions of JAWS , in forms mode, did not read the label for implicit labels on checkboxes and radio fields. I believe that has been fixed.

My fix was inane, yet valid. I assume this is such an esoteric bug that I don’t need to create recommendations on fixing it. I just wanted to document it in case someone else comes across this bug

Most articles are part of a series. These four random ones are standalone:

• Clearing Floats Without Touching Your HTML - 30-Sep-09
• Browser Support: What should I test? — 31-Oct-08
• Extracting Images from Flash Files — 17-Feb-09
• Creating rounded corners without touching your HTML (including IE) - 18-Sep-09
• JavaScript Variable Scope: Local and Global Variables — 05-Feb-09
• CSS: All Browsers Can Be Created Equally — 11-Jul-08

There is a lot of interest in my IE8 post. It was a basic post, and I couldn’t get my butt in gear to write more. By writing for community MX, I kind of forced myself to research IE8. This seried has just begun… there will be a bunch more.

• IE8 - The Good, the Bad, the Ugly (and Pretty) — 22-Jul-09
• IE8 - The Good - CSS2.1 Selector Support — 11-Aug-09
• IE8 - The Good - CSS2.1 Properties and Values
• IE8 - The bad - CSS3 and lack of support

Based on my blog post on all XHTML elements, their attributes and their semantic meaning that I was wrote for this blog, I wrote an 18 part series going into each element in greater detail. The Object and input element (free) ones are the most intersting. The table of XHTML elements (also free) is the most useful:

• Semantic XHTML - Part 1: The Required Elements — 16-Sep-08
• Semantic XHTML - Part 2: Elements Within the <head> Element — 01-Oct-08
• Semantic XHTML - Part 3: Common Block Level Elements — 13-Oct-08
• Semantic XHTML - Part 4: List Elements — 29-Oct-08
• Semantic XHTML - Part 5: Table Elements — 13-Nov-08
• Semantic XHTML - Part 6: Inline Elements — 24-Nov-08
• Semantic XHTML - Part 7: The Phrase Elements — 03-Dec-08
• Semantic XHTML - Part 8: Empty Elements — 08-Dec-08
• Semantic XHTML - Part 9: The Image Element — 12-Dec-08
• Semantic XHTML - Part 10: Image Maps — 05-Jan-09
• Semantic XHTML - Part 11: The Object Element — 02-Mar-09
• Semantic XHTML - Part 12: The FORM Element — 09-Mar-09
• Semantic XHTML - Part 13: The INPUT Element — 11-Mar-09
• Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements — 17-Mar-09
• Semantic XHTML - Part 15: Drop Down Menus — 19-Mar-09
• Semantic XHTML - Part 16: Organizing Forms — 25-Mar-09
• Semantic XHTML - Part 17: Non-Semantic Elements — 26-Mar-09
• Semantic XHTML - Part 18: INS, DEL & NOSCRIPT — 31-Mar-09
• Semantic XHTML - Table of XHTML Elements — 21-Apr-09

While simple, the Three Column layout series teaches the reader how to make a three column layout, with the columns being able to be rearranged into any order without touching the HTML source code. If you don’t know how to make a CSS 3-column layouts, this series is definitely worth the read.

• Making a Three Column Layout Using CSS: Part 1 — 24-Jul-08
• Making a Three-Column Layout Using CSS: Part 2 — 08-Aug-08
• Making a Three-Column Layout Part 3: Changing Column Order With CSS — 18-Aug-08
• Making a Three-Column Layout - Part 4: Fixed, Fluid and Elastic Layouts — 03-Sep-08

My firebug tutorial has already had over 100,000 views. Obviously there is interest. My Community MX Firebug series is only half way done, but as you can imaging, it’s going deeper into this most excellent tool. Similar to the IE8 series, I am still in the middle of this series. There should be several more.

• Firebug - Part 1: The What and Why — 05-Nov-08
• Firebug - Part 2: Overview of Firebug Functionality — 10-Nov-08
• Firebug Part 3: Editing with Firebug — 20-Jan-09
• Firebug - Part 4A: Inspecting and Troubleshooting CSS — 17-Apr-09
• Firebug - Part 4B: Inspecting and Troubleshooting CSS — 22-Apr-09
• Firebug - Part 5: Inspecting the Box Model — 27-Apr-09
• Firebug - Part 6: HTTP Requests & Download Speed — 07-Aug-09
• Firebug - Part 7a: The Script Tab (Basics) - 02-Sep-09
• Firebug - part 7b: Debugging Javascript - breakpoints, debugger & watch expressions
• Firebug - Part 7c: Debugging Javascript - The Firebug Console
  

The EMail Setup series is especially useful for anyone using CPanel or anyone trying to manage several email to and from accounts:

• Email 4b: Using Gmail as Your Email Client 17-Dec-09
• Email 4a: Using Gmail as Your Email Client 15-Dec-09
• Email 3c: Accessing Webmail on Your Web Site’s Server - 07-Dec-09
• Email 3b: Email Options Accessed On Your Web Site’s Server - 24-Nov-09
• Email 3a: Accessing Email On Your Web Server - 04-Nov-09
• Email 2: Creating Email Forwarders - 23-Oct-09
• Email 1: Creating New Email Accounts On Your Server 16-Oct-09

The CSS for Absolute Beginners series is very basic, and likely to simplistic for readers of this blog: as noted, it’s fore beginners. However, if you do want the basics, I am including the list of articles for those of you who are interested:

• CSS for Absolute Beginners - Part 33b: attr(),counter, increment & reset — 17-Aug-09
• CSS for Absolute Beginners - Part 33a: The CSS content Property — 20-Jul-09
• CSS for Absolute Beginners - Part 32: Generating Content with CSS — 10-Jul-09
• CSS For Absolute Beginners - Part 31: The background Shorthand Property — 18-Jun-09
• CSS For Absolute Beginners - Part 30: The background-attachment Property — 08-Jun-09
• CSS for Absolute Beginners - Part 29c: background-position Property — 26-May-09
• CSS for Absolute Beginners - Part 29b: background-position Property — 22-May-09
• CSS for Absolute Beginners - Part 29a: background-position Property — 13-May-09
• CSS For Absolute Beginners - Part 28: background-repeat Property — 06-May-09
• CSS For Absolute Beginners - Part 27: background-image Property — 01-May-09
• CSS For Absolute Beginners - Part 26: background-color Property — 29-Apr-09
• CSS for Absolute Beginners - Part 25: Understanding Color Names — 14-Apr-09
• CSS for Absolute Beginners - Part 24: Understanding RGB Colors — 03-Apr-09

Don’t worry. Obviously I am still writing here too. Just wanted to share these in case anyone is interested.

Firefox 3.5 was released today. Like the beta version that I tested a few months ago, FF3.5 supports all CSS3 selectors. See the CSS3 Browser support grid. This is great news, and makes us all tingly and happy, except for one thing: it means the CSS Google Chrome hack I wrote about in September also hits Firefox 3.5.

I did update the CSS3 Browser support grid to reflect Firefox 3.5 general release. All you’ll see is the pretty shade of green for FF3.5 as it does support all the CSS2.1 and CSS3 selectors.

Firefox 3.5 CSS & HTML Features

1. @font-face

   The @font-face declaration (it’s not really a property, but rather like a download) allows you to define a font face, download that font face, and then use the font family name in other font family property value declarations throughout your site.

   @font-face {
     font-family: <a-remote-font-name>;
     src: <source> [,<source>]*;
     [font-weight: <weight>];
     [font-style: <style>];
   }
   

2. media type

   Before you could target on limited criteria, such as screen, all, print. Firefox 3.5 supports more specific media queries, such as serving CSS based on color-index, device-aspect-ratio, device height and/or width, orientation, resolution, among others. We learned about some of these techniques in iphone CSS. In other words, very cool new feature for FF, but already mostly supported in Webkit, so this won’t make a good way to target just FF3.5, but it is a great way to target different devices. In addition, FF3.5 supports logical operators within the media type declaration, which is not supported by older browsers, so a hack may be coming soon.

   @media screen and (min-width: 600px) and (max-width: 800px) // low resolution laptop?
   <link rel="stylesheet" media="print and (min-width: 11in)"... // landscape printing

3. HTML 5 Features supported in Firefox 3.5

   Firefox 3.5 supports for the HTML 5 audio and video elements, offline resources and a HTML 5 drag and drop API supporting for drag and drop within and between web sites. Firefox 3.5 has improved support for canvas

Firefox 3.5 CSS2.1 and CSS3 New Features and Failure’s

Firefox 3.5 has made some improvements, but still has a way to go in supporting CSS: both CSS3 and CSS2.1. In addition to the support for @font-face and more media specificity, according to the Mozilla site, they have made improvements in the following areas (I’ll update here and on the CSS Properties and Values grid after I do more testing):

4. :before and :after updated to CSS 2.1 specs

   The :before and :after pseudo-elements did not have full CSS 2.1 support for positioning, float, list-style-*, and some display properties. see CSS Properties and Values grid. I still see some issues with this, but my CSS isn’t totally valid in my test… so need to test further.

5. opacity, text-shadow, word-wrap

   While these CSS3 (and in the case of text-shadow, 2.0 too) properties enjoyed some support in prior versions of Firefox, you no longer have to include the -moz extension in front of these three properties.

6. CSS3 properties with the -moz- extension

   -moz-box-shadow, -moz-border-image, -moz-column-rule, -moz-column-rule-width, -moz-column-rule-style, and -moz-column-rule-color are now supported in FF3.5

I still haven’t done much testing, but thought I would throw what is already known out there. I’ll be updating this page and the CSS properties and values grid when life gives me a chance.

Cheers-

-Estelle

Below is every CSS 2.1 Property, all the possible values for that propery, and the support for each property value from grade-A browsers

This is a work still in progress (i.e. unfinished) , but if you find a mistake, please let me know. Scroll on the table to see all the properties. Note, this was done with Opera 9.64, and FF 3.5, so I am currently updating those too. Also, if you hover over some of the yellow delta’s, some have title tags that explain how they work or fail.

Notes

• Level of support for property is based on CSS2.1. So, if a browser supports all of CSS2.1 but not CSS3, they will get be listed as supporting the property.
• Browsers include:
  • IE6
  • IE7
  • IE7 compatibility mode
  • IE8
  • Firefox 3 (some 3.5 beta)
  • Safari 3.2 (some 4 beta)
  • Opera 9.64
• When you hover over the deltas, in standards compliant browsers, informaiton on how the browsers fails to comply with standards should be displayed.
• This is still a work in progress, but it’s pretty far along, so I am posting. It will be updated soon and often until done… then I’ll remove this bullet point.

Key

The <ol> start attribute and <li> value element were deprecated in HTML 4.01 and not supported in XHTML strict. The value attribute set the number of a list item, enabling the following list items to increment from that value. While there is no (X)HTML replacement for these elements, CSS 2.1 provides methods for setting and incrementing counters on any element, not just <li>’s. This article focuses on the following CSS pseudo elements and properties:

• content CSS property
• :before pseudo-element
• :after pseudo-element
• counter-increment CSS property
• counter-reset CSS property

The content property is used in conjunction with the :before or :after pseudo-elements. The value of the content property is added to the visual layout of your document, but is NOT added to the DOM. If you’re reading this tutorial, you should already know that! We’re discussing :before, :after and content here because without them, the counter is kind of useless: if you’re not going to display the content of a counter before (or perhaps after) an element, why include it?

Overview of content property

To make understanding this tutorial easier, we are going to use the concrete example of adding ” - <hrefValue>” after every link, which is helpful when using print CSS.

<ul id="showlinkafterlink">
  <li><a href="http://www.yahoo.com">Yahoo</a></li>
  <li><a href="http://www.google.com">Google</a></li>
  <li><a href="http://evotech.net/blog">CSS, JavaScript and XHTML explained</a></li>
</ul>

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 1: Without any CSS, this is how the code above looks

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    }

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 2: If you are using a standards compliant browser (i.e. NOT IE6 or IE7), the above should have the hrefs following the links.

A few things to note about the content rendered via the content property:

• Generated content does not alter the document tree. The content is rendered only: it doesn’t appear in the DOM tree, altering the presentation only, not the document
• To control the appearance of the generated content, you can use other CSS properties. All properties in the :after declaration impact the generated content.
• In case you were wondering, you can only add one pseudo-element per side of your element. element:before:before does not work.

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    color: #ff0000;	 font-style: italic;
    }

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 3: Here we’ve defined the color and font-style for the generated content.

While the generated content is NOT added to the DOM, think of it as an added span that inherits everything from it’s parent. The content cannot contain any HTML, just ASCII, escaped and ISO characters. As mentioned, content is used with the :before and :after pseudo-elements to generate content in a document.

Values of the CSS content property

The CSS content property can take as its value none | normal | <string> | url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style]). Values have the following meanings:

• content: none;

  none: The pseudo-element is not generated.

• content: normal;

  normal: Computes to ‘none’ for the :before and :after pseudo-elements unless the default browser rendering includes content (i.e. <q>) which is handled differently based on the browser - Safari shows the default content, IE8 and FF do not.

• content: "Estelle: ";content: "\00a3 "; /* includes '£' */

  string: Adds a string before or after the element (depending on which pseudo-element is used). Strings can either be written with double or single quotes. If your string includes a quotation mark, make sure you escape it with a slash-quote or slash-ISO value. If you are going to include any non-ASCII characters or entities, declare the charset in your CSS and XHTML, and/or use the ISO code for the character. Check out my blog post on including named entities in CSS and Javascript

• content: url(myBullet.gif);

  url: The value is a URI that designates an external resource (such as an image). If the browser can’t display the resource, FF and IE8 omit it, as if it were not specified, but Safari indicates that the resource cannot be displayed with a missing image icon.

• content: open-quote;

  open-quote and close-quote: These values are replaced by the appropriate string from the ‘quotes’ property. Opera handles this, but does not nest quotes correctly, Safari ignores this completely. IE8 and Firefox get it right.

• content: open-quote;

  no-open-quote and no-close-quote: Introduces no content, but increments (decrements) the level of nesting for quotes. Safari ignores this completely. Opera, IE8 and Firefox get it right.

• content: attr(title);

  attr(x): This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn’t have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

  For uber coolness, or geekiness as the case may be, you can add text dynamically without using javascript.

  a.tooltip {
    position: relative;
  }
  a.tooltip:hover:after {
    content: attr(title);
    position:absolute;
    display:block;
    padding: 5px;
    border: 1px solid #f00;
    background-color: #dedede;
  }

• content: counter(subtitles, decimal);content: counter(headers) "." counter(subtitles) ": ";

  
  counter(name) or counter(name, style): The counter takes two parameters: the name, which you can reference to increment or reset, and the style, which, if not declared, defaults to “decimal”. While you can name the counter almost anything except ‘none’, ‘inherit’ or ‘initial’, avoid key terms.

Browser support for the CSS content property and :before and :after pseudo elements

counter-increment and counter-reset CSS properties

Counters don’t work on their own! if you just write p:before {content: counter(subtitles, decimal);} every paragraph will have a zero in front of it. To more easily understand this, let’s think of real world examples:

• footnotes
• creating numbering for outlines: counting chapters, sections and subsections, restarting the subsection counter for each new section, and resetting the section counter for each new chapter

Using the CSS counter syntax you can define as many counters as you like in your page, increment the counters and reset the counters. While the counter gets physically added to the presentation of the page (not the DOM) using the CSS counter value on the content property as a pseudo element using the :before or :after syntax, the increment happens on an actual element on the page.

<p> With this paragraph, I have included <cite class="footnote">citation to footnote</cite>.</p>

cite.footnote {counter-increment: citations;}

cite.footnote:after {content: counter(citations); vertical-align:text-top;}

In our example above, we would increment the counter on every <cite class="footnote">, then add the footnote numbers using the content property on the :after pseudo element. In order to use a counter, you should give it a name. In the above scenario, the name is “citations”. You can also specify the style. If the style is not declared, the style defaults to decimal. The values include all the list-style-type values, though only <ol> values make sense with a counter. Values include decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian and others.

You can include more than one counter in generated content. For example, in legalese, you often have sections within sections all numbered. This is doable with CSS counters.

<h1>First Header</h1>
<h2>subsection</h2>
<p>text....</p>
<h2>another subsection</h2>
<p>text....</p>
<h2>yet another subsection</h2>
<p>more text....</p>
<h1>Another Header</h1>
<h2>subsection</h2>
<p>text....</p>
<h2>another subsection</h2>
<p>text....</p>
<h2>yet another subsection</h2>
<p>more text....</p>

To add counters in front of every h1, with counters on the h2s that reset after each h1, the CSS would look like:

h1 {
	counter-increment: headers;
	counter-reset: subsections;
	}
h1:before {
	content: counter(headers, upper-roman);
	}
h2 {
	counter-increment:subsections;
}
h2:before {
	content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";
	}

Now all <h2>s are preceded by their header number and subsection number.

A few things to note about the code: note that in the h2:before declaration we’ve included two counters: the header counter and the subsection counter. We declared the style in both calls, as style is NOT inherited. Also, we’ve included strings within our declaration. Note that there are quotes delimiting our strings, but not our counters, and there are no concatenation elements without our content value. To combine multiple counter ID’s in the same style attribute, string them together using space delimited counter ID values.