Woolly, the CSS sheep.

CSS has some great new tools like pseudo classes and pseudo elements for selecting things just by where they are in the DOM. For example, :first-child can select the first descendant of an element or ::first-letter can select the first letter of a sentence.

Even handier are the “::nth” selectors, which allow you specify arbitrary positions for selectors like :nth-child or :nth-of-type.

In fact, the ::nth selectors for pseudo classes and pseudo elements are so handy you might wonder why there isn’t just an ::nth for everything. That’s exactly what developer Chris Coyier calls for over at CSS-Tricks, saying that CSS should broaden the scope of ::nth to include, well, everything.

Among the possibilities with additional ::nth selectors are fancy typography effects like what Lettering.js can do (but without the JavaScript) or something a seeming simple as pure CSS line numbers.

While many of Coyier’s examples are undeniably great tools, they are also fraught with problems. For example the suggested ::nth-line would be entirely dependent on the current page layout. Even something as simple as resizing a window would require the browser to recalculate the rule adding a possibly significant performance overhead. Similarly ::nth-word becomes much more complex than it sounds when you take linguistic variations into account (just what constitutes a word varies considerably by language, CSS has to account for all those variations).

On the other hand a subsequent discussion on the W3C CSS Working Group mailing list has been somewhat positive about Coyier’s ::nth-letter suggestion. Indeed ::nth-letter is perhaps the most useful of Coyier’s suggestions, but even if it did make it into the CSS specification that’s no guarantee browsers would actually implement it.

As Coyier points out, this isn’t the first time someone has suggested adding ::nth for additional elements, Anne van Kesteren called for something similar back in 2003, which doesn’t give one high hopes for getting even ::nth-letter() in this time around. Still, a developer can dream.

See Also:

• Discover What’s New in CSS 4
• CSS ‘Paged Media’ Brings Book Smarts to the Web
• Lettering.js Makes Complex Typography Easy

CSS 3 is still slowly making its way onto the web, but the World Wide Web Consortium (W3C), the governing body that oversees the development of web standards, is already plotting the future of CSS with CSS 4. The W3C recently released the first draft of CSS 4, adding dozens of new rules to make web developers’ lives easier.

The CSS 4 spec is brand new and no web browser actually supports any of these rules yet, but if you’re curious what the next few years will mean for CSS, the first draft offers a sneak peek at what’s in store for web developers.

The biggest news in the current draft of CSS 4 is support for the much-requested parent or “subject” selector. In CSS, rules are typically applied to the innermost selected element. That is, given the chain body header h1, the actual CSS rule will be applied to the h1 element at the end of the chain. CSS 3 offers no way to, say, style the header tag but only if it has an h1 child element. CSS 4 changes that.

CSS 4 includes a means of controlling which element in the selection chain is actually being styled. The easiest way to understand the “subject” selector is by example. Say you want to style a list (ul), but only when the user has clicked on an item in the list. You add a class “clicked” to the item (ul li.clicked) when the user clicks on it, but how do you style the whole list from that class?

With the subject selector it’s simple:

$ul li.clicked {
    background: white;
}

The “$” means that the rule is applied to the ul, rather than the li.clicked as it normally would.

The dollar sign may not end up being the subject indicator and the exact syntax will likely change before the spec is finalized. But regardless of the way it ends up being implemented, the subject selector opens up a whole new realm of CSS possibilities.

Other highlights in CSS 4 include some new pseudo selectors like the :matches() pseudo-class which greatly simplifies the process of writing complex, nested CSS. For example, you could write:

:matches(section, article, aside, nav) h1 {
  font-size: 3em;
}

The :matches() syntax eliminates the need to write out section h1, article h1 and so on. It’s handy for even simple nestings like the example above, but it becomes really powerful when you’re selecting elements that are two or three levels deep. For more info on :matches(), check out our earlier write-up on Mozilla’s :any() selector, which is the basis for :matches().

Also new in CSS 4 is the :local-link pseudo-class which allows you to style links based on domain. For example, you could style all internal links with a simple selector like a:local-link(0). The number refers to the amount of the local URL path to match. For example, if the current address is http://www.mysite.com/some/post/, a:local-link(0) would match anything point to http://www.mysite.com/, a:local-link(1) would match anything pointing to http://www.mysite.com/some/ and so on.

CSS 4 offers some handy pseudo-classes for styling user interface elements based on state, including :enabled, :disabled, :checked and half a dozen others.

For more info on what’s coming in CSS 4, check out the W3C spec (fear not, it’s surprisingly readable as specs go). Also worth a read is W3C WG member David Storey’s blog where he did a nice write-up on CSS 4, including a few things not covered here, like the awesome-sounding “time-dimensional pseudo-classes.”

[CSS pumpkin by mauricesvay/CC/Flickr]

See Also:

• Simplify Your CSS With the ‘any()’ Selector
• CSS ‘Paged Media’ Brings Book Smarts to the Web
• ‘Donatello’ Library Simplifies CSS 3 Drawings
• Simplify Your Stylesheets With CSSPrefixer

Håkon Lie's mock ups of CSS Paged Content. Pagination shifts as screen size changes

Håkon Wium Lie, Opera Software’s CTO and creator of cascading stylesheets, has proposed a new set of CSS tools that transform longer web pages into a more book-like experience, where the reader flips from page to page instead of scrolling down one long screen.

Lie’s proposal, the Generated Content for Paged Media standard, is a mouthful. But behind the awkward name lies an intriguing idea.

It’s a concept that’s gained considerable weight with the arrival of touchscreen tablets and smartphones, both of which lend themselves to very book-like reading experience. Indeed popular magazines, including Wired, all offer platform-native applications that mimic the reading experience of a book or magazine. That’s precisely what Lie wants to make possible on the web.

“The form, the presentation of content is important,” says Lie. “The turning of the page is an event, we anticipate what is on the other side, we look forward to it.” The endless scrolling of the web lacks such events, but Lie believes CSS can bring what’s good about reading in the real world to the web.

At its core, the Paged Media standard offers web developers a way to paginate content — that is, take a single webpage and break it into multiple “pages,” with each page automatically fitted to the screen size of the device you’re using. For example, this article might be three “pages” when viewed on an iPad. However, because the pagination is done with CSS and the HTML remains as it is, there’s no added load time when you flip to the next page. So it’s not a tool that can easily be abused by publishers to mine extra pageviews. It adds all the good things about multi-page layouts and none of the bad.

The Paged Media proposal isn’t just about pages, though; there are also tools defined for gestures — swiping to turn to the next page, or, at the end of an article to the next article (all built off the existing HTML rel=next/prev tags). There are also magazine-friendly layout tools, like the ability to float elements across multiple columns of text, as well as hyphenation rules and a means of styling footnotes.

If all that sounds like a very print-oriented set of tools, well, you’re right. Lie believes that the web is undergoing a fundamental shift in metaphors, one he compares to a similar shift that happened hundreds of years ago — the shift from scrolls to books.

This shift makes particular sense on tablets. The “flipping” action to turn pages on a tablet makes sense in the same way it made sense for newspapers to be pages rather than enormous scrolls. There is, after all, no reason the newspaper couldn’t be delivered just like a webpage — an enormous roll of paper that you unroll as you read. It’s not of course, because that’s not the ideal form factor for reading in the situations that people read newspapers. Nor is vertical scrolling ideal when you’re reading with a tablet. Paging is easier than scrolling on a tablet. Both are swiping gestures, but scrolling requires a controlled swipe to a selected area, whereas paging is a much less precise, and therefore easier, gesture.

Lie tells Webmonkey that he doesn’t believe the venerable scrollbar will go away, rather that the CSS Paged Media tools will offer another way to render web content. In fact, Lie thinks Paged Media would be a natural companion for CSS media queries, perhaps becoming another element of responsive design. By pairing the two, developers could nicely paginate a longer article for a magazine-style reading experience on tablets and revert to a more traditional layout for desktop browsers.

A magazine-style reading experience isn’t necessarily right for every site, but one of the markets Lie has in mind is one that’s already trying to put the magazine on your tablet — the publishing world.

Publishers are spending ever-increasing amounts of money developing and maintaining native apps across a variety of smartphone and tablet platforms. The majority of these apps are little more than content containers, niche browsers if you will. Most of them are just trying to recreate the paged layout of their print cousins. CSS Paged Media would allow that same content to be paginated the same way in any web browser, on any platform.

It’s an ambitious goal and one that won’t happen overnight, though Lie did say that very experimental support for the Paged Media standard would be available in a coming labs version of Opera 12.

More importantly, Lie’s proposal is already on the table. While he concedes there are many things to still be worked out — including how Paged Media will fit some of its layout tools alongside CSS Regions or how users will bookmark paginated content — David Hyatt, Apple’s Safari and WebKit architect, has already expressed some support on the W3C mailing list.

That’s good news — without widespread browser support Paged Media won’t be dragging the web out of the papyrus-crusted past any time soon.

See Also:

• Adobe Proposes New Standard for 3D Effects on the Web
• Adobe Envisions Brave New World of Web Layouts With ‘CSS Regions’
• The Future of CSS: Finally, Sane Layout Tools