Skip Navigation

CSS Wishlist

The web is still young, and still in development stages. Sometimes, it is easy to forget that. In ten or twenty years time, most of the standards now being worked on will be complete. XHTML, or whatever replaces it, will be well-created and slick, and coding a site will be a breeze. CSS, or whatever replaces it, will include the properties we need, and will be implemented properly on most platforms.

At the moment we still have something of a chance to have a say in the development of web standards. So in the interests of having my say, here are a few of the things I would love to see in a future version of CSS.

Backgrounds: background-top, background-top-right, background-right and so on

These properties are the ones I wish they would add quickest. Being able to define so accurately means that a large selection of current problems that need to be worked around in CSS will be no more. Boxes with curved corners and layered backgrounds become trivial - the web becomes more beautiful - and World Peace can't be far behind that.

The decision as to which background should show over another, should such a situation arise, would be made based upon the order these properties were specified. Thus, if background-bottom-right were specified last, it would show in front of any previously declared backgrounds for the same element. That means, as CSS properties that are not understood by the user-agent are ignored, that these properties (as with those below) will enhance the browsing experience for the users with up-to-date browsers, but will allow for graceful degradation.

Borders: inner-border and outer-border

The "border-style" property gives us a decent range of border types to use, but I would rather have a little more control. At the moment, you cannot define a border with two colours, for example. A thin black line around a white box, with a thick grey line outside it, for example, is impossible without extra markup. The inner and outer border properties would give that little bit of extra control - though I dread to think of what that will do to the box model!

Fonts: font-size-min and font-size-max

These two properties would allow the setting of, believe it or not, minimum and maximum font sizes. Relative sizing has pitfalls, and among those is that sometimes text can be unreadable on site because it is st to be relative to the user's default. Being able to set minimum and maximum sizes in pixels makes life much much easier for all.

Fonts: font-family-file

Something along these lines is already part of the CSS3 specification. While it will be some time before CSS3 is in widespread use, this can really only improve the web. Fonts are usually small files and while distribution of them is a tricky process (given that most of them are not free), it would be good to be able to define fonts with a font file on the server. A browser can then be set to accept or reject font files as the user wishes, and the specified font can be used - if the user wants. Otherwise, as now, a fall-back font can be specified.

Boxes: height: expand;

Block-level elements automatically expand to fill all available space horizontally, but their height is only ever defined by their content (and padding, etc). I envisage height: expand; to instruct a browser to display a block element in such a way that it fills all available vertical space.

Variables: @site-id

I'd like to see a small degree of variable use in CSS. Not much, because it is a presentation language, but a little. Things like being able to set specific styles in a user style sheet for a specific site are a great advantage sometimes, but rely on the user making use of useful ideas like the body id attribute with CSS Signing, which few authors currently do. A URL-based selector negates the need for that.

This would also mean that defining multiple styles for a site would become much easier. Instead of using server-side scripting, or a JavaScript style switcher, you could just as easily make use of sub-domains or URL-based variables in your CSS to determine which style sheet to use.

Specifications

Selectors and properties are different. I'd like to see the CSS standard split into two documents - one for selectors and one for properties. There is no need for them to be released hand-in-hand, and selectors can be added to a standard (and implemented in browsers) very quickly, for the most part.

Actual presentation properties take longer to define and much longer to implement in browsers. Having separate documents for these means they can progress independently, which I think would be a bonus. I appreciate that this might over-complicate things in some circumstances, but I think it would be worth it.

Better use of Mime Types

CSS should be sent to a browser, at the moment, as "text/css". But CSS1, CSS2 and CSS3 are different. There is currently no way for a user agent to tell a server what it can and cannot understand, and no way for a server to specify what it is sending back. Addition of mime types of "text/css1", "text/css2" and "text/css3" mean that, if you so choose, you can deliver a specific level of CSS to a browser. It also would mean people understanding the differences between the different versions. Most designers at the moment couldn't actually tell you one difference between the two versions of CSS so far released.

That's All, Folks

Those are my personal favourites - the things I would like to see added. Some of these are due to be part of CSS3, thankfully, and with any luck some will make it into whatever supersedes CSS3 in a few years time.

28 comments

"Backgrounds: background-top, background-top-right, background-right and so on"

That one is in the draft:
http://w3.org/TR/2002/WD-css3-border-20021107/#the-border-image
And the biggest two of all:

1. Reliable vertical centering of any element (goes along with your height expansion thing maybe).

2. Ability to clear absolutes just as we clear floats.
Thanks Mary - I thought I saw something like that last time I looked at the CSS3 spec! Good news :)

Mike - reliable vertical centering would be down to the browsers more than the spec, no?

Clearing of absolutes is an interesting idea. I tend not to use absolutes much, so haven't seen a need for this yet, but will have to do some reading on the idea.
 United States #4: October 19, 2004
Id love to beable to have background image boarder's, this would be so... time saving. :)
I do not believe this is currently in place, but I would like a "pre-processor" of sorts. In C, I can do:
#define DEBUG 1
...
#if DEBUG
...
#endif

Then all I have to do is set DEBUG to be 1 if I want the code inside the if-endif executed or 0 if I don't.

CSS could do
#define DEBUG 1
...
#if
div {
border: dotted green 2px;
}
p{
border: dotted red 2px;
}
#endif
...
Right now I am forced to comment and uncomment every piece of debugging CSS code which is a waste of time.
Hi Will.

Opera (by default) and Firefox (with the web developer extension) include functions like that - outlining elements. If you haven't tried either yet, I suggest you do, as it makes like much easier.

I don't know that I'd want a programming aspect within CSS. You can set a debugging stylesheet seperately easily enough, and starting down the programming within CSS files route could easily lead to massive problems ...
To Ilovejackdaniels,

I have used Firefox's extension "EditCSS" to easily change elements like that. The problem is I can't troubleshoot my elements like that in IE (where most of the weird problems crop up). The only solutions I found have been:
1. use server side processing like with PHP to display debugging CSS code or not
2. Comment and uncomment CSS code
3. Link or unlink to an external stylesheet (either right in the HTML or in the browser).

I guess 3 is the easiest, but isn't as clean when I decentralize all my CSS rules.
Ahhh, yes, it is a problem in IE. Perhaps there is a plugin that allows for easy selection of stylesheets?

Actually, there should be some javascript bookmarklets around that will allow you to apply debugging styles ...
 United Kingdom #9: January 27, 2005
how about:

background-gradient("horizontal","#ff0000","#ffffff");

which would give a colour gradient red to white, left to right. Vertical would also be possible.

Another way to cut down on images.
Jarek
Poland #10: January 18, 2006
I dream about grouping elements, for example:

#elementID {
td {
background-color: red;
.important {
background-color: yellow;
}
}

p {
color: green;
}
}

its more readable then:

#elementId td {....}
#elementId td.important {....}
#elementId p {.....}
Dathan
United States #11: February 7, 2006
I'd like to see the ability to define constants. One of the biggest values of CSS is the ability to change presentational elements of a whole site full of pages by editing only a single file, right? So why not take it a step further:

@DEFINE constBorderCoolor #ff0
...
.outlined { border: 1px solid constBorderColor; }
...

Then, assuming I used this constant to specify the border color for all the bordered elements on my site, I can change every border by editing only those three characters...

Also, multiple class-specification for single elements. would be nice.

And an inherit: all; attribute would be nice. I have this bad habit of defining styles for classes like .title, and then wanting to use the .title class for a totally different style within, say, a container tag having class .directory. It's irritating to have to either use a different name for the second class, or having to specify "inherit" explicitly on all the attributes defined on the first .title... So if I could do something like .directory .title { inherit: all; more-style-declarations: here; } that'd be great.
HI, I'd just like to say first of all, great site. I just came across it (someone on a mailing list I belong to linked to you as part of an anser to someone's ?) --

Anyway, RE: CSS Wishlist, when I have a couple minutes, I'm going to come on back to the site (for a couple of reasons) and add another comment here. I think the "wishlist" is a great start and it's exactly this kind of thing, presented properly to the appropriate individuals, that can (and do) have a tremendous impact on future specs.

I'd like to throw my 2c worth in, but I don't have the time to do it right now, a couple of the items on the "wishlist" are achievable today with a little "creative" coding, others which I think are good, I'd like to give some specific feedback on.

I'll be back as soon as I have a chance to provide some additional feedback, as well as code samples for the "achievable" items.

best...chris
 United Kingdom #13: June 24, 2006
Just want to say that you have a great site with interesting topics
Nice wish list. Just to add to the list, I'd personally I'd like to see a property to flip an image horizontally or vertically. Or perhaps something more general, like rotating in 90 degree increments (including negative values). I'd think it'd save some bandwidth especially if you have some symmetrical images.
A small amount of maths expressions would be useful.

#page {
position: absolute;
left: 50%; top: 0;
width: 800px;
height: 800px;
margin-left: -width/2;
}
Hi!
Great post!.
One of the things I'd like to see on CSS3 is color palettes and sub-palettes. They could be inside the css or on an external file (like "palettes.csp" or "palette.css")
For example:

color-palette-definition "default" {
color01: #100000; /* fonts */
color02: #fff0f0; /* background */
color03: #f00000; /* links */
etc...
}

color-palette-definition "high-contrast" {
color01: #000; /* fonts */
color02: #ffc; /* background */
color03: #00f; /* links */
etc...
}

color-palette {
use: "default";
}

Maybe it will need further elaboration, but I hope you get the idea.
I'll try to post something in english about that in my blog.
Regards.
Sorry, forgot to mention how to use palettes in another element.
This is the idea:

#myelement {
color: color01;
}

Like you do today with "red", "teal", and the other color keywords, wich are defined in the "default" color palette.
So, if you tell the css to use another sub-palette the whole page changes, as long as the sub palettes have the same "keywords" for the colors.
In that way, if you change a color in the pallette, all the elements that have that color keyword specified in any attribute would change the color in cascade!.
Redards.
The "Backgrounds: background-top, background-top-right, background-right and so on" would be a great addition glad to hear the lovely people at W3C are working on it! I really like Demian's idea - a colour variable type thing, would save so much time.
I totally agree with Dathan and Peter B, I've been hoping for that for ages.

As for background-top and that, specifying multiple background-images is supported in safari. But i guess you probably already knew that.
i must say: "THAT YOUR HAVE AN GREAT SITE WITH VERY GREAT ARTICLES AND INFORMATIONS

THANKS
Demiurgo
France #21: August 23, 2007
I want to use .svg images as background (or whatever) ;-)
seo la
Unknown #22: September 9, 2007
i would like to have 2 backgrounds added to each div, for example one to top and to bottom, that would be amazing, also implementation with flash and css

what do you think dave
I still hope that CSS3 will be coming soon. There are so great possibilities! Its so hard to to a good "Tabfolder". But not with CSS3 - for example:

border-top-image : url("n.png") ;
border-top-right-image : url("ne.png");
border-left-image : url("w.png") ;
border-right-image : url("e.png") ;
border-bottom-left-image : url("sw.png");
border-bottom-image : url("s.png") ;
border-bottom-right-image: url("se.png");
border-top-fit-length : repeat;
border-left-fit-length : repeat;
border-right-fit-length : repeat;
border-bottom-fit-length: repeat;

And at best: You can round the borders by just one command. Will be a great help in future
You mentioned that inner-border and outer-border functionality is possible with extra markup. Could you give an example? I'm having a tough time making this work...
Rich
United States #25: January 2, 2008
Background image sizing would be nice, so they can be set with em values and scale with the rest of the page when visitors change their font size settings. The entire page should be able to resize consistently.
christian
Germany #26: April 2, 2008
Dathan, Demian: yes! yes! yes!

W3C: please read these postings :-))


implementing the following would be soooo cool:

#mycolor: #f00;

.class1 { background: #mycolor; }

.class2 { color: #mycolor; }
With CSS3 things will definatly be better, but not perfect. I agree to christian, that a little OO in CSS would be very handy
Really thanks for all the usefully and informativ postings.

Post Your Comment

· Comments with keywords instead of a name have their URLs removed.
· Your email address will not be displayed or shared.

Live Comment Preview

 United States #29: 1 minute ago