What it does:
Lets you style the first letter of any element.
Firefox, Safari, Chrome, Opera, IE5.5+
They are detailed at pseudo-class, pseudo-element, pseudo-CSS. IE6 & 7 has more than a few, negative margins and vertical-align separating from the box are the most frustrating for me. As well as Safari and Firefox handling the text-indent property differently (sorry but I can not get my head around the specs today).
Not support by:
Old browsers and some mobile browsers.
What happens when first-letter is not supported:
The first letter is not individually styled, instead it has the same styling as the rest of the element.
Only a limited number of properties can be applied to first-letter:
- color properties
- border properties
- font properties
- background properties
- margin properties, though it appears only margin-top and margin-bottom works when combined with float.
- padding properties, note padding-bottom does not affect the size or text flow of the holding container unless combined with float.
- letter-spacing, only when floated
- clear, only when floated
- vertical-align, only when not floated
If you want to see the properties in action here is an example.
If you look at the examples, you will see two choices. After working out what properties you can use with IE, you will either spend a time tweaking margin-top and padding-top when combined with float or learning the difference between vertical alignment: baseline, centerline, mathline and topline (another experiment for me) and adjusting line-height, depending on your desired results.
Not yet, I will combine it adjacent selectors for an example shortly.
Will I use it now?
I will definitely look at combining first-letter, adjacent selectors and @font-face when I redesign this blog and for any other project.