first-letter pseudo element

What it does:

Lets you style the first let­ter of any element.

Supported by:

Fire­fox, Safari, Chrome, Opera, IE5.5+

Known bugs

They are detailed at pseudo-class, pseudo-element, pseudo-CSS. IE6 & 7 has more than a few, neg­at­ive mar­gins and vertical-align sep­ar­at­ing from the box are the most frus­trat­ing for me. As well as Safari and Fire­fox hand­ling the text-indent prop­erty dif­fer­ently (sorry but I can not get my head around the specs today).

Not support by:

Old browsers and some mobile browsers.

What hap­pens when first-letter is not supported:

The first let­ter is not indi­vidu­ally styled, instead it has the same styl­ing as the rest of the element.

Properties

Only a lim­ited num­ber of prop­er­ties can be applied to first-letter:

• color prop­er­ties
• bor­der properties
• font prop­er­ties
• text-transform
• line-height
• back­ground properties
• mar­gin prop­er­ties, though it appears only margin-top and margin-bottom works when com­bined with float.
• pad­ding prop­er­ties, note padding-bottom does not affect the size or text flow of the hold­ing con­tainer unless com­bined with float.
• text-decoration
• letter-spacing, only when floated
• clear, only when floated
• vertical-align, only when not floated
• float
• clear

If you want to see the prop­er­ties in action here is an example.

Screen­shots from IE7, Fire­fox 3.1b and Safari 3 (note the dif­fer­ences in the last second and third last items in Fire­fox and Safari, oth­er­wise it is the usual IE vs every­body else.)

Issues

If you look at the examples, you will see two choices. After work­ing out what prop­er­ties you can use with IE, you will either spend a time tweak­ing margin-top and padding-top when com­bined with float or learn­ing the dif­fer­ence between ver­tical align­ment: baseline, center­line, math­line and topline (another exper­i­ment for me) and adjust­ing line-height, depend­ing on your desired results.

Example

Not yet, I will com­bine it adja­cent select­ors for an example shortly.

Will I use it now?

I will def­in­itely look at com­bin­ing first-letter, adja­cent select­ors and @font-face when I redesign this blog and for any other project.

This entry was posted on Sunday, December 28th, 2008 at 5:09 pm and is filed under css and html, progressive enhancement . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.