So, you've mastered Cascading Style Sheets, right? You've memorized the spec, read up on all the tips and tricks, and even understand the theoretical benefits of separating presentation from structure in your Web pages. Your Web sites are filled with gorgeously rendered text and sport fine control of point size, leading, margins, and backgrounds. You change dozens of pages by editing one simple text file. You've done all that, haven't you?
Yeah, me neither.
It's not that CSS isn't a strong specification, but real-world application of the ideal is still lacking. That shouldn't stop us from looking to the future, however, and the World Wide Web Consortium is offering us a glimpse into what may well be the foundations of the next version of the Cascading Style Sheet spec. It's available on the W3C Web site, on the CSS: Potential Enhancements page.
Unlike versions 3.2 and 4.0 of HTML, this document doesn't have an interesting "beta" codename (remember Wilber and Cougar?). In fact, it isn't even a specification. Instead, we're informed that this is simply a "Note," which, according to the document, "is being distributed to solicit public comment ... on the value of various proposed CSS extensions documented here. There is no commitment to turn these proposals into a recommendation." In other words, the Consortium is testing the public pulse, looking for ways to expand future versions of the CSS specification. Don't go spouting these things as gospel - this isn't even a draft yet.
CSS1 cleanup
The CSS1 spec has been around for a while now, and we've had a chance to play with it, test it, and really see how well it works. It shouldn't be surprising that there are a number of things that got left out or overlooked. The section of the CSS Note about the CSS1 spec goes into some detail trying to fix the past, offering clarification and additional specification for those implementing CSS1-compliant applications.
This section deals with a few basic editorial issues, like length units as applied to padding, and pseudo-elements that allow control over the bullet in ordered lists. More interesting are additions like Magnification, which allows authors to blow up parts of a document. Think of this as a shortcut to increasing font size, leading, margins, etc. - all at once. Also, consider a world in which user stylesheets are in widespread use - a nearsighted user could simply bump all elements up to 250 percent while maintaining the visual relationships provided by the author.
The document also offers a solution to line breaks, presumably allowing you to let any element work like
. In fact, this extension would give you control of how box and inline elements would be handled by the browser. Imagine marking up a list, but having it render as a line of text links across the top of a page, for example.
Finally, Vertical Align specifies a much-needed way of nudging inline elements from their baselines. How many times have you had to shave pixels off an image that just wasn't aligning with the surrounding text correctly? Now, by specifying a vertical-align attribute, you can push images or text up and down away from the surrounding text on a line. It's a more flexible CSS alternative to HTML's ^and ~. Text Shadows, Filters, and Effects
We've written extensively in Webmonkey about the power of CSS Filters. While at the moment it's only a Microsoft proposal (and an IE 4 implementation), there is language in the W3C document that leaves the door open for this sort of advancement in the future. The note informs us that the W3C is "working on methods of applying a rich set of special effects to text and images."
What they have offered, however, is what undoubtedly would have been everyone's first choice for a filter effect: Drop Shadows. This section describes a basic syntax for specifying the color of the shadow and how far it should be offset. The proposal goes on to say that multiple shadows can be specified; they will render on top of each other in the order you list them.
Now, I won't go into the aesthetic value of drop shadows on text, but if it serves as a basic alternative to headlines rendered as GIFs, I'll be happy.
Cursor Control
Scripting has had an interesting side effect on Web-based user interfaces, especially when you start playing with dynamic HTML. As JavaScript evolves and digs its hooks deeper into HTML, we gain the ability to use any element at all to trigger a script. The most basic and obvious example of this is the Order List that is scripted to expand and collapse when users click. But how are they to know when to click? You need to change the cursor.
When you mouse over a link on a basic HTML page, the cursor in most browsers turns from the default pointy arrow to a hand with a finger pointing up, indicating that this area can accept a click. Same goes for image maps. But not so when you imbue a previously static object with an onClick JavaScript event. And you can't expect users to go clicking on everything, looking for something that works, now can you?
Eventually, you'll be able to specify what happens to the cursor as it moves over an element. Should it turn into a clicking hand? How about crosshairs, or the text-insertion bar? And although it's not in this proposal, it's not a stretch to imagine author-supplied cursors indicated via the url() syntax.
If this becomes standard, picture in your mind for a moment the hell that will be unleashed on the Web by the same folks who brought you fractal background images. Then think of the power it would afford the talented page creator. Then keep reading....
Multicolumn Layout
Remember how Netscape added the tag back in Navigator 3.0? Remember how nobody used it? That probably had a lot to do with people being sick of proprietary new tags that weren't supported by other browsers. Plus, without the additional control of margins, padding, and borders, Netscape's multiple columns weren't actually that useful.
But what if they were done right? The Note offers a proposal for exceptionally detailed control over multiple columns of text for Web-page layout. Included are attributes like column width, gutter control, and column rules. There are even suggestions for unbalanced columns and the automatic expansion to extra columns if browser windows are resized. All cool stuff.
But why stop there? With the CSS Positioning draft nearing completion, why not start adding more advanced and complex layout abilities to the model begun there? How about linked boxes, where the text from one positioned element can overflow into another, much like the way the popular desktop-publishing application Quark XPress handles text flows? Or nonrectangular text boxes? The possibilities are limited only by our imagination (and, well, the browser's rendering engine)....
Other Interesting Additions
Environmental variables
Being able to call system environmental variables would be an exceptionally powerful addition to CSS. Environmental variables are the preferences you set in your computer's operating system - window color, desktop pattern, and even less personal things like the size of the current window, or the URL of the page you're looking at. This proposal doesn't give authors the ability to peek at your setup, but rather to count on things they can't control. For example, you could create a page that set margins and font size based on the width of a window, without resorting to mere percentages. Or you could set up a page to match the color scheme of each user's desktop. But most importantly, as client-side scripting gets more powerful and we begin to see HTML-based applications that mimic the power of the desktop, developers will want pages to look more and more like user interfaces. This is the first step.
Generated text and addressing extensions
If you've ever done technical writing or documentation, you know the value of automatic paragraph numbering. As you edit a document, inserting and deleting text, you can be assured that your structured indexing system will update itself. The Consortium is vague on this proposal, offering only, "We want to have much richer control over the autonumbering and bulletting of list items, headings, and other elements."
New addressing schemes
Finally, there are two proposals for new ways to specify context-sensitive addressing in CSS. Beyond classes and tag selectors, you would be able to add style attributes based on hierarchical search patterns. For example, you could set the style of a
that is immediately followed by an
. Or, by using DIV[lang=fr], you could set the style of all s that are in French. This article appeared originally in HotWired.
================================================================================================================================================================~^
