Sunday, February 17, 2008

2 Things I want in CSS 3

I've done some html/css restyling lately and there are some things I would like to see added to CSS 3. The process to request some changes to be incorporated into CSS 3 is a bit overwhelming to me, so I just post them here and hope they will be picked up by someone.

CSS variables


CSS variables would be nice. I want a way so I can easily change all colors in my CSS with one adjustment, not by searching for the color in the file and replacing it with the new value. I also think this would increase readability of the file.
This would allow to define recurring parts of the layout in the CSS file like this:

var backgroundcolor : #FFFFFF;
var border: 1px solid #CCCCCC;

.container {
background-color: $backgroundcolor;
border: $border;
}

.navbar{
border: $border;
}


Path variables


If I could rename a path selector to a variable, I could remove a lot of classes from the html and still be able to easily change the css.
Take this example:

.navbar ul li a {
text-decoration: none;
}

.navbar ul li a:hover {
text-decoration: underline;
}

This would become:

var listItem: .navbar ul li;

$listItem a {
text-decoration: none;
}

$listItem a:hover {
text-decoration: underline;
}


These examples look simple, but my experience is that a lot of the same values can be found in many CSS files. Wouldn't it be nice if we have a block of variable definitions at the top so we only have to specify once that the color of all borders should be changed?

This would also make it easier to let users (on a blog for example) override the colors with their own stylesheet, which overrides the variables with their settings.

The only way I know off to achieve this at the moment is by generating the CSS with a templating framework like JSP or Velocity (or why not PHP), but this seems like overkill to me.

So, anyone with the power to move the W3C board, go on (and let me know of the results)!

Labels: ,

5 Comments:

Blogger James Mortensen said...

Hi Peter,

I have somewhat of a clever solution to your problem. I'm sure you're aware that JSP and PHP pages can generate content other than XML and HTML.

Have you considered creating a filter that will process CSS files as JSP or PHP pages? This would allow you to use JSP or PHP variables in your CSS!

A good example of this is Atlassian's JIRA project management software. It's written in Java, and they use scriptlets in the CSS files so that administrators can change the CSS colors from an admin interface.

James

10:16 PM, May 02, 2008  
Blogger James Mortensen said...

Sorry Pieter, I misspelled your name.

<@page language="java" contentType="text/css"%>

h1#header {
color:<%=headerColor%>;
}

span.<%=spanClassName%> {
font-size:<%=fontSize=>;
}


James

10:28 PM, May 02, 2008  
Blogger Pieter Coucke said...

Hi James,

I know indeed these methods. I'm currently using Jawr which compresses the files by requesting them from the filesystem, so it is difficult to generate them. Although I'm not sure about this anymore now that I'm writing this...

You can also use an Ant or Maven filter to replace the values.

Anyway, I think it would be nice to have this in CSS itself. This would make theming easier: just change the CSS variables to change to another color scheme.

There is good news however.

4:24 PM, May 06, 2008  
Blogger James Mortensen said...

Looks like your wish for CSS variables is coming true!

I too have tinkered with JAWR as a tool for bundling CSS and JavaScript. I'm not sure if it will work with dynamically generated JavaScript, but it definitely seems that being able to dynamically compress or bundle dynamically-generated JavaScript or CSS is a feature that no one has implemented yet.

What JAWR needs is an API for use with Freemarker or Velocity, as it's possible to load templates from Stings or URLs with the right amount of work.

James

7:44 PM, May 18, 2008  
Blogger James Mortensen said...

Sounds like CSS will have what you need in the future.

I too have tinkered with JAWR to bundles and compress JavaScript and CSS; however, I use dynamically generated JavaScript. I also use Velocity as a standard over JSP. What JAWR and most other JavaScript compressors and bundlers are missing is an API to take JavaScript and CSS as Strings and generate compressed bundles.

Sorry if this is a duplicate comment; I'm having pretty crippling bandwidth problems.

James

7:59 PM, May 18, 2008  

Post a Comment

Links to this post:

Create a Link

<< Home