Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

My CSS Wishlist

By David Walsh on February 18, 2008

Although CSS is a great formatting tool, the styling language has a long way to go to keep Web Developers satisfied. There are some definite holes in CSS that need to be filled. Until we get what I propose below, JavaScript can help fill some of the holes and so can images, but CSS should eventually incorporate my requests.

Variables

Variables are an absolute necessity in most other languages, yet CSS doesn't have variable capability. At this point, we're stuck with typing '#ffffea1' numerous times in our stylesheet. Being a PHP enthusiast, I think the '$' sign would be perfect for CSS variables.

@vars
{
	$white:#fff;
	$base:#000;
	$back:url(/graphics/background.jpg) top left no-repeat;
	$font:Helvetica;
}

/* and used like */

.my-div      { background:$back; color:$base; font-family:$font; border:1px solid $white; }

Importing Custom Fonts

Fonts are extremely lacking on the web. We're stuck with a core list of fonts and risk our website looking horrendous if we take the chance at using a font not supported/included in our visitors' computers. I propose the following syntax for importing custom fonts into our stylesheet.

@font
{
	family: 'MyFont'
	src:url(fonts/myfont.ext);
}

Resizable Elements

Resizables can now be accomplished using any of the popular JavaScript frameworks, but why not allow for resizable elements in CSS? We do use CSS units (ems, exs, etc.) that allow for scaling websites, but why not trigger resizing on demand? I think resizing should be as easy as:

.my-element
{
	resizable:x; /* or */
	resizable:y; /* or */
	resizable:xy;
}

Multiple Background Images

We all use "wrapper" DIVs and other elements to overlap background images -- why not just allow us to do it all in one CSS statement? Multiple background image specs are in the current CSS3 plans, but that still means we're years away from being able to rely on a browser having this capability.

Minimum and Maximum Font Sizes

We do our best to make our websites flexible and accessible, but there should be a point where we can tell the browser that the website simply can't/shouldn't be viewed with a font larger or smaller than x.

min-font-size:.7em;
max-font-size:6em;

I believe the above items would push CSS into a new stage of maturity and usefulness. What would you like to see in CSS?

Recent Features

By Landon SchroppApril 14, 2014
Write Better JavaScript with Promises
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
By Garris ShiponSeptember 17, 2014
Responsive and Infinitely Scalable JS Animations
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

By David WalshDecember 11, 2012
pointer Media Query
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios.
By David WalshMay 22, 2013
CSS content and attr
CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily. There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content. You saw a...

Discussion

cenourinha
Great wishlist… these features should be implemented at CSS 3.0
A.Faith
nice list. i was wondering, if you setup your webserver to process *.css files as php, can you use variables? i haven’t tried (yet) but I’m pretty confident it will work… I also give a confident vote for all those wishes :P
alin alexa
have you tried http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor ?
david
I’ve seen that Alin. Why not just give CSS the ability to use variables instead of server-side processing?
Magne Andersson
Very interesting ideas, although we now have @font-face for fonts, but I also miss variables.

Another thing I have been thinking about is the possibility to define several properties to the same value, as in:
```
img{
height, width: 64px;
}
```
instead of:
```
img{
height: 64px;
width: 64px;
}
```
In a large stylesheet, that would save some space.