Article
Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know
Description: The first-letter pseudo-element allows you to specify the CSS to be applied to the first letter of an element. In this example, the first letter of the paragraph will be larger, creating a drop-cap effect.
HTML:
<p>Lorem ipsum dolor sit, consectetuer adipiscing.</p>
CSS:
p:first-letter {
font-size: 2em;
}
Multi-column layout (on internal content)
Description: The CSS3 multi-column layout properties seem to be the most useful for online publications, news articles, and internal page content. Since they're not yet widely supported, they're not recommended for use in major layout elements of a page. However, they can be used to reduce markup and make text more readable by shortening column width and page length. For an auto-width column, a column-count declaration can be used, and for a set column width, a column-width declaration can be used.
Because this function isn't fully supported, we need to use rendering-engine-specific prefixes to target Firefox (-moz-) and Safari (-webkit-). We use the third declaration without a prefix as a form of progressive enhancement for future browsers; it's placed at the bottom of the list so that when multi-column is fully supported, the prefixed declarations will be overridden. In this case, there will be two columns with a 1em gap between them.
XHTML:
<div id="content">
<p>Praesent cursus ultricies uricies uricies urna. Mauris vestibulum neque s urna. Mauris vestibulum neque.</p>
<p>Praesent cursus ultricies urna. Maur vestibulum neque at.</p>
</div>
CSS:
#content {
/*gecko*/
-moz-column-count: 2;
-moz-column-gap: 1em;
/*webkit*/
-webkit-column-count: 2;
-webkit-column-gap: 1em;
/*future proofing*/
column-count: 2;
column-gap: 1em;
}
Description: The border radius properties solve the age-old problem of displaying rounded corners without using images. The image below is a rendering in Firefox 2.00.12, but in the latest version of Safari and Firefox 3 Beta 3, the radius lines render much more cleanly. The only negative aspect of border radius is that if you use a background image it will show on the outside of the boundaries of the rounded corners, so you may need to design your background images with that in mind. There's a multiple background image CSS3 property that can deal with this too, but it isn't supported by any browser (that I know of) yet.
Specific corners can also be given individual properties like: border-radius-topleft: 1em;.
XHTML:
<div id="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut odio eu nisi rutrum euismod.</div>
CSS:
#sidebar {
padding: 1em;
border: 1px solid #333;
/*gecko*/
-moz-border-radius: 1em;
/*webkit*/
-webkit-border-radius: 1em;
/*future proofing*/
border-radius: 1em;
}
Description: The target pseudo-class is very useful in drawing the user's eye to a specific area of the page when you're using anchors. In this example, after the user clicks the anchor link, the corresponding text will be highlighted with a red border. This is similar to the Yellow Fade Technique.
XHTML:
<a href="#focusarea">Jump to focus area</a>
<p id="focusarea">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut odio eu nisi rutrum euismod.</p>
CSS:
p#focusarea:target {
border: 1px solid red;
}
Some of these advanced selectors, pseudo-classes and elements, and other nifty tricks are part of the CSS 2.1 specification, while others are CSS3. I found them all useful, and they can all be used without hiding vital content while significantly enhancing the user experience. Generally speaking, content is the most important element in any web page -- it's why people visit. Adding in a rich user experience with these simple CSS enhancements will increase the usability of your site and can make users come back time and time again.