exscale.se

CSS Wish List

Published Thursday, February 22, 2007 in CSS

Often times when programming CSS i think of stuff i would really like to see in future versions of the language.
I know some (most?) of these have been mentioned around the web before, but these are the ones I would really like to see in the future.

Inherit: none/all

Sometimes i could really use something like this, to completely remove all styling of an element using something like inherit: none; and make an element inherit all styling from its parent (even if it has a class that is styled differently (so you can use the same class-names for different purposes) using inherit: all;
Perhaps something like clear-css-attributes: font, background, etc; would be better, but i often times find myself needing something like this instead of having to reset each attribute individually.

Foreground-image

Would work exactly the same as background-image, only the image wouldn't be in the background, but the foreground.
With alpha-transparency in PNG's i think you could create some pretty neat effects like twigs or flowers (or whatever) hanging on top of the content of an element.
Needless to say foregound-image: would support as many images as you like, just as background-image: hopefully will soon.

Selecting backwards

Extremely often i would like to be able to style an element depending on its contents. If you for example use a background-color for your links on :hover, you rarely want the same effect if the link is an image. In this case it would be wonderful to be able to access all anchor-elements that only contain images.
The syntax for it is something i haven't really thought about that much, but that's a minor issue, perhaps something similar to this:
a | img
Gets all elements a that contains an element img
a | img:first-child:last-child
Gets all elements a that only contains one element img.

The same is true for images in paragraphs, instead of adding a class (to float the image or whatever), i could go:

#article-1245 p | img:first-child:last-child {
    float: right;
    margin: 0 0 10px 10px;
}

I could of course float the image itself instead, but i'd rather float the p and be able to style both the p and the image.

Another use for this could be to style nested lists. Most css-drop-down menus use a class to say whether the li contains children or not, using the backwards-selector (the name could perhaps use some work:) you wouldn't need this class but simply say: li | ul

A little bit of math

Being able to add or subtract when calculating paddings or whatever you use units for would be great in some cases.
Say you want an image to fill its entire container, and also have a 5px border.
The only way to do this now is to give the image the container's width minus 10 pixels. Changing the container's width then also means changing the image's width.
With a little bit of math this wouldn't be needed as you could go:

#container img {
    width: 100% - 10px;
    border: 5px solid #ccc;
}

Suweeet.

Constans

CSS Constants i think would be great for a number of reasons.
I'm not a huge fan of bloating my markup with id or class-names, and with the new (well, not so new, but newly supported) CSS selectors i very rarely see any point in adding a class to anything.
I program my websites the same way almost every time; each module gets a div with a unique (obviously) id, and the rest of the elements are simply the ones needed to display the information in that module.

But, styling many elements the same way without using classes makes the CSS hard to read and follow, this is where i believe a constant would be much nicer than giving elements the same class-names.

Say i want all my modules to look the same, i could give them all the same class and simply style that class the way i want, but what about a future design where i don't want them to look the same? Then those classes would be useless.

With classes

container.css
------------------------------------------
div.container {
    background: #fff;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
}

    div.container > h2:first-child {
        background: #369;
        margin: -10px -10px 10px -10px;
        padding: 10px;
        color: #fff;
        border-bottom: 1px solid #ccc;
    }

That's easy to understand and makes changing my containers very easy, but that means having to put that class-name in every module which requires extra space (ok, a few bytes but it still annoys me). And also makes styling modules differently in the future more difficult and illogical.

Without classes

container.css
------------------------------------------
#poll, #recent-comments, #recent-articles, #most-popular-articles, #etc {
    background: #fff;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
}

    #poll, #recent-comments > h2:first-child, #recent-articles > h2:first-child, #most-popular-articles > h2:first-child, #etc  > h2:first-child {
        background: #369;
        margin: -10px -10px 10px -10px;
        padding: 10px;
        color: #fff;
        border-bottom: 1px solid #ccc;
    }

I don't like grouping elements in my CSS by how they look, but by where they are on the page.
This is especially true when building very large websites, sometimes i even have one CSS-file per module and only load that CSS if that module is in use.
I don't wanna have to go back to my container.css every time i want to add a box with the same look.
This is where constants would be great.

With constants

container.css
------------------------------------------
$container {
    background: #fff;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
}

    $container > h2:first-child {
        background: #369;
        margin: -10px -10px 10px -10px;
        padding: 10px;
        color: #fff;
        border-bottom: 1px solid #ccc;
    }

recent-articles.css
------------------------------------------
#recent-articles = $container;

most-popular-articles.css
------------------------------------------
#most-popular-articles = $container;
#most-popular-articles ul {
    /* Additional styling for this module */
}

With constants there is no need for css-classes (unless you really need one to access an element of course), and you can still manage your CSS any way you like.
I hope the syntax i'm suggesting is pretty straight forward, but i use the $ to define a constant and = to append that constant's styling to an element.
None of those characters are used for anything else in CSS as far as i know, and i believe it's quite logical.

This may seem a bit overkill in the example, but when building sites with 150 different templates and twice as many modules this would indeed be a great feature and i hope future versions of CSS will implement something like this.

What's your CSS wishlist? Let me know in the comments

Gavin McFarland

Thursday, May 01, 2008 | View all comments by Gavin McFarland

I second the ability to do simple maths!

Andreas

Tuesday, May 13, 2008 | View all comments by Andreas

I've read that calc() is in the works. I'm not sure why we'd need a typical programming-language-syntax for it. xxxUT -/+/*// xxxUT (like 100% - 4px) would work just fine wouldn't it?

I've clarified the "backwards selector" with why can't we select parent element with css? btw.