My CSS Wishlist

Tags:

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?

References
0
Average: 2.7 (3 votes)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Eric Wendelin replied on Tue, 2008/02/19 - 7:01pm

Hilariously, there was a point in time that I compiled all CSS files as JSPs so that I would have the capability of variables. Don't know if I should be admitting that... Anyway, great list David, I totally support these.

Chris Coyier replied on Tue, 2008/02/19 - 8:17pm

I totally support all of these too. Variables alone would be amazing.

There has definitely been some toying around with the font embedding idea. I don't think it's a technical issue at this point but an copyright issue. It's kind of like the whole "writer's strike" thing actually. Font have never really been widely used this way before, so font foundries are trying to figure out how to get their cut of the action while they can. Much like the writer's were holding out for a cut of the digital download action...

I'm not sure what side I'm on actually. Just because I bought a font, does that give me the right to embed it into a website and share it with the world? How does that relate to what we are already able to do in print design? Is there a way to protect the font file so that it's no a publicly accessible file that can be very easily stolen?

Joe Lippeatt replied on Tue, 2008/02/19 - 8:31pm

Great post! If you don't want to type "#ffffea" over and over, you have another option other than variables. Since CSS allows you to stack class names within an element tag, you can define specific attributes and then use the classnames that are needed. So if you want to use a blue background over and over, you can create a class called ".blueBg":
.blueBg {background-color:lightblue;}
.fontBold {font-weight:bolder;}
and then stack the CSS class names in your element:
<div class="blueBg">this background is blue</div>
<div class="fontBold">this font is bold</div>
<div class="fontBold blueBg">this background is blue and the font is bold</div>
Its not as clean as your proposed code, but if your class has 5, 6 or 12 specifications for that selector, it can really keep the CSS code clean.

Dave Woods replied on Wed, 2008/02/20 - 11:14am

Some interesting ideas, some of which have already been proposed...

Web Fonts
http://www.alistapart.com/articles/cssatten

Multiple Background Images
http://www.css3.info/preview/multiple-backgrounds/

Maximum and minimum font sizes is an interesting idea but I think it would be heavily open to abuse as people would start declaring something like... 

min-font-size: 10px;
max-font-size: 10px;

...which would see browsers take a step backwards in accessibility if it was implemented so I don't think we're ever likely to see that happen. Ensuring that a site renders correctly 2 sizes larger and 2 sizes smaller should be adequate for most users anyway.

James Lorenzen replied on Fri, 2008/02/29 - 12:40pm

You should take a look at this SASS (Syntactically Awesome StyleSheets) project: http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

I only found it yesterday from a co-worker. It has implemented alot of your suggestions and much much more. Its a ruby project so it might limit your choices, but I think a friend and I are planning on porting it over to a J2EE environment.

David Walsh replied on Tue, 2008/03/04 - 9:58am

Looks pretty good James.  No PHP though?  Damn.

James Lorenzen replied on Tue, 2008/03/04 - 10:06am

@David

Yeah we noticed that as well since we are mostly a java shop here. We have tossed around the idea of porting it over to java and also php. Would you see this as being pretty valuable out in the community? In other words would you see this attracting a large user base?

David Walsh replied on Wed, 2008/03/05 - 4:49pm

Hello James,

It definitely wouldn't hurt to put it out there, but I'm not sure how used it would get.  It's clearly a helpful tool though.

David 

James Lorenzen replied on Thu, 2008/03/13 - 12:25am

Just an update a coworker and myself plan on porting this over to java.

Here is the project: https://sass4j.dev.java.net/

We don't have an official release yet, but we have proved out the concept.

Look for a release in the next couple of months. 

Joe Lippeatt replied on Fri, 2008/03/21 - 2:58pm

@James:

There's going to be plenty of people interested in your progress.  To keep us all up-to-date, can you post an article to dzone with some details once you have your first release. 

The Co. I work for is evaluating long-term choices for render, and we're a java shop.  If you can port this successfully, your project will be on our short-list.

 

James Lorenzen replied on Fri, 2008/03/21 - 4:28pm

@Joe,

Thanks for the interest. Yeah we will definitely post an article on dzone once we cut a first release.

RIght now would be a good time to join the users list and submit any ideas or requirements. What web server do you use, jdk version, etc? 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.