Archived entry | Matt Wilcox .net

In response to "Tell the CSS-WG what you want from CSS3"

Please note that this is a re-publication of a stand-alone document written for the CSS3-WG, so the few HTML examples will not work in context of this website, and the styling is a little messy in places. Take a look at the stand-alone article for working examples.

After 8 years of the W3C developing CSS3 on their lonesome, someone in that group has finally deigned to ask some real-world web designers what we want CSS3 to do. Why it took 8 years for someone there to ask the question of what the people who use CSS every day want it to be able to do is beyond me, but hey - better late than never; so thank you Bruce Lawson for getting us involved at last.

If I sound a little jaded that’s because, like so many of my peers, I am. Anyway, here are some of my CSS3 wish-list items.

Enhanced positioning of elements

Rationale

CSS only allows positioning relative to the last explicitly positioned parent element. This is hideously limiting, because sometimes we want to position relative to either an element above the last positioned element, or relative to an element that is not an ancestor of the element being positioned. Without using JavaScript, this is impossible (and JavaScript is for behaviour, not presentation)

Example CSS implementation

div#example {
  position : absolute;
  origin : (div#container); /* place div#example relative to the position of div#container */ }

div#example2 {
  position : absolute;
  origin : (div#container); /* place div#example relative to the position of div#container */
  bottom : 10px; right : 10px; /* put the bottom right corner of the placed element 10px above and to the left of the bottom right corner of the origin element */ }

Real-world example

Imagine we have a form that has been submitted, and the server has spat the page back with a list of errors. As is good design practice, the list of errors is presented all in one go at the top. But we also want to have some sort of visual cue next to the fields themselves. We can do that programatically now, but it involves messing about with the HTML of the form fields. It’d be nice to be able to do it with pure CSS, as this is a display issue.

Note about the Advanced Layout module

It would not allow this behaviour. The Advanced Layout module allows positioning into pre-defined ’slots’ (defined by ASCII art no-less), and that is not the same. Frankly I agree with Alex Russell, the Advanced Layout module is a complete “cluster-fcuk” of a mess, and I hope it dies a death to be replaced by something more useful, realistic, and understandable.

Enhanced positioning of backgrounds

Rationale

All CSS positioning is based on the concept that the top left of the parent box is the origin point. That means you can place backgrounds with pixel perfect control, as long as it’s a known number of pixels from the top left. Trouble is, that’s not always what we designers want to do. With CSS at the moment there is no way to either re-position the origin point, or to specify a pixel value offset from any point other than top left. We can position backgrounds flush against the edges, or simulate a set relative value away from any edge - but not a set absolute value.

Example that works for a positioned element

I want to place a box 80px above the bottom of its parent element, and 80px from the right edge of it. When positioning an HTML element, I can do this easily as follows:

The HTML

<div id="parent-box">
  <div></div>
</div>

The CSS

div#parent-box {
  position : relative; /* make this the last positioned element, thus ensuring child elements are placed relative to this element */
  width : 80%; height : 24em;
  background-color : #ddd; }
div#parent-box div {
  position : absolute; right : 80px; bottom : 80px;
  width : 80px; height : 80px;
  background-color : red; }

The result

Will not work on this webpage, please see the stand-alone file.

No matter how the parent box is resized (re-size your window, scale your font size) the bottom right of the red box is always 80px above the bottom of the parent, and 80px to the left of the right edge of the parent.

The problem

Some times we want to have exactly the same behaviour for background images - but there is no way we can do that. Imagine that the red box is not a positioned element, but a gif which has been applied to the #parent-box div. With CSS, it’s not possible.

CSS Variables

Rationale

CSS files can become very large, even when the cascade is used well. It is not uncommon to have CSS files in excess of 1,000 lines. In the real world, clients often want to ‘freshen’ their sites by having minor re-designs, for example by changing the colour scheme. It is not always possible to do a simple search/replace on the hex code (other items that should not change may share the same colour). The ability to declare constants/variables would greatly speed up the process.

Example CSS

/* declare CSS constants */
$swatch-1 {
  background-color : #ddd; }
$swatch-2 {
  background-color : #444; }

...

/* do some styling */
div#parent-box {
  background : $swatch-1; }

This may not be the most flexible or elegant method of creating and invoking constants/variables, but it shows the principal well enough. The idea is to allow maximum flexibility with the minimum effort. A system whereby calling the variable sets a number of CSS properties, which could then be over-written if required by re-declaring a property called via the variable would be even better.

CSS Expressions

Rationale

Sometimes we would like to do a little maths to figure out the size of elements, or where we want things (and no doubt many other uses). The current CSS specification does not allow the degree of control we want when units are mixed together.

Example CSS implementation

div#container { width : 24%; } /* create a box with an unknown absolute width */
div#excerpt {
width : (div#container - 80px); /* I want a box exactly 80px smaller than the width of the parent element */
}

The ability to successfully do simple unit mixing allows us to do things which are currently impossible.

CSS Transforms

Rationale

There are occasions where it would be a beautiful bit of design to rotate a block about a point. Imagine slanted text that was selectable. Block rotation without having to resort to image replacement to do it would be great.

Example CSS implementation

div#container {
  rotate : -5 center; } /* rotate the block 5 degrees counterclockwise about the center point */
div#container-2 {
  rotate : 5 top left; } /* rotate the block 5 degrees clockwise about the top-left point */

Entry Information

Posted:

Mon, 21st Jan 2008 at 13:01 UTC

Filed under:

• Web Development

Tags:

• css
• web standards