CSS Wish List
Published Friday 18th of March 2011
CSS keeps getting better and better and browser vendors implement more and more every year (except for you-know-who that tend to wait a little more like 5 years) but there's always stuff missing I wish it'd had.
Photo by Francesco Marino
Here's a few things I wish they'd add in the future.
foreground-image
Just like background-image but foreground-image would obviously be rendered in the foreground. I guess it should render on top of all child-elements of the element that has the foreground-image, and it could be used for all kinds of things like for example leafs hanging on top of the content or overlays etc.
calc()
calc() is actually coming I read, but this is something I've been wanting for ages. The ability to give an element a width or height or padding or whatever based on a calculation. If you want to do this now you have to use JS.
I would mainly use this for elements that have width set in % but padding and border in px. Something like:
img {
width: 100% - 10px;
border: 5px solid #f90;
}
I don't see why it needs to use the calc()-syntax, I would prefer just writing it like I did above.
Advanced layout
Advanced layout is also coming and this I'm seriously looking forward to. The ability to basically define a table/grid using nothing but CSS, and then place any element inside any cell in the table and have everything render fluidly inside.
When this arrives I hope very much that each cell in the table will be stylable like any other element, meaning we can give it width/background/border/padding/etc/etc. It would basically be the same as setting up everything as an HTML table but without having to actually set up an HTML table :)
propval()
propval() is perhaps a pretty rubbish name, but the ability to get a value from a property of another element is something I would find useful.
Let me explain in code:
/* Normal heading styling */
h2 {
font-size: 24px;
}
h3 {
font-size: 16px;
}
/* Oh but in the comments module we want h3's to look like h2's */
#comments h3 {
font-size: propval(h2, font-size);
}
Basically propval() would return the value the selector in the first argument has for its property in the second argument. Since the idea here is to make h3's in #comments look like h2's I always want them to be the same and using propval() I would only have to change the h2's. This is actually quite similar to constants/variables but you wouldn't need to set up a var for every value you want to use consistently.
$constants
I've been using $constants for ages through my own CSS-parser and I really don't like coding without them now. The way I've set them up is extremely similar to .classes, only you don't need to give elements a class.
The .classes-approach:
<div id="search" class="clearfix">
...search-code...
</div>
.clearfix {
overflow: hidden;
}
The $constants-approach:
<div id="search">
...search-code...
</div>
$clearfix {
overflow: hidden;
}
#search = $clearfix;
This way the HTML stays class-free (and thus design-free).
And that's it. What do you miss in CSS?
- Tags
- Comments
- 4 comments
Bookmark this Article