A challenge that faces modern front-end designers often is the balancing act between semantic code and code that does all the things we need it to do. We need separators between nav items and breadcrumbs, or icons after links; little pieces of non-semantic code that mess with accessibility and make our markup ugly and unweildy.

Fortunately, with the rise of modern browsers, we have tools at our disposal to keep little bits of extra styling enclosed in our stylesheets, instead of muddying our markup with empty divs and spans. We can now add all those cool flourishes and extras while keeping our markup semantic and accessible: enter pseudo-elements.

This session will teach attendees how to use advanced CSS techniques to manipulate images in the browser, add flourishes without ruining the markup, and reduce the loading time by eliminating unnecessary images.

From pure CSS tooltips to link-type icons; from image borders to gradient overlays; from multiple backgrounds to typographic flourishes; pseudo-elements are capable of so much more than just clearfixes. Jason Lengstorf will show real-world examples of pseudo-elements being awesome, including code samples and demos available on GitHub.

A few of the things we will cover:

• What pseudo-elements are
• How CSS treats them
• The difference between pseudo-elements and pseudo-classes (and why :before and :after break those rules)
• The basics of pseudo-elements: clearfixes
• Why semantics and accessibility matter, and how all those empty spans are bad for screen readers
• Problems from real projects that my team has solved with pseudo-elements
• Browser support, and how the IE7 test determines if content is purely for style, or vital for comprehension
• Show and tell with awesome things people can do with pseudo-elements

Notes:

• Finally a session with code!
• :after is the most common pseudo element
• You can style pseudoelements just like any other element
• Syntax is supposed to be :: (not supported in IE8)
• before + after gives you 3 things to style on every element – great for adding non-essential elements (icons, etc…)
• :first-letter for Drop Caps
• look at http://css-tricks.com/autoprefixer/

When should you use the?

• Keep flourishes out of the semantic markup (decorative items)
• The page still makes sense without them