CSS Wishlist: New Ideas, Debates and Solutions

Advertisement

The future of CSS is arriving fast, and many tools, languages, and solutions have been developed that make CSS a job not just for Web designers but developers, too. In many ways, the job could become more complex and confusing, but in many other ways, the new changes will provide more opportunity and better technology for the future of the Web.

CSS will get a number of new changes. Among them are alternative syntaxes, CSS programming concepts and the ability to allow more common design techniques without using images. In this article, we’ll go over some current solutions, what we’d like to see in the future and the pros and cons of them all.

Also consider our previous articles:

1. Why Should We Go Beyond Basic CSS?

The first to ask is “Why?” Why use these alternative tools and methods to develop CSS code? Why take the time to learn them, especially when no one syntax method, CSS programming concept or technique will replace CSS as it is today?

Well, here’s a better question: “Why not?” While CSS will probably not be replaced by any one method, many of these techniques are similar, and their general concept is becoming increasingly popular. For example, many of these new methods allow us to more easily implement rounded corners. With this kind of demand from the community, CSS 3 has now made it easy to create rounded corners. In time, with full support and forward-looking attitudes, these new ideas may become standard, allowing us more options as Web professionals.

And let’s state the obvious: using alternative options like these can save time and be more efficient than using traditional CSS methods, even if they can take some time to learn at first.

As new methods arrive, the division between Web developer and Web designer shrinks. One day, knowing one trade may not be enough. These tools are moving the process along by giving designers easier ways to code and giving developers easier ways to design.

A New Era for Web Developers

Traditionally, Web developers have been the gurus of coding. PHP, JavaScript, Ruby and the like are the languages that developers deal with regularly. Recently, though, we’ve seen coders call themselves “Web developers” when they just convert PSD to XHTML and CSS. How can this be, and are they misrepresenting themselves?

Of course not. In recent years, the science of CSS and the need for semantic XHTML has become much more complex and allow, in some instances, for more programming-related concepts. The first few items in this article will be specific to CSS’ advances in programming concepts and how these changes can be both detrimental and beneficial.

Whether you are familiar with these methods or not, we invite you to practice these new techniques and share your experiences, because many of these methods are still very experimental.

A Web Designer’s Dream

Programmers aren’t the only ones who get more options from the new CSS methods. Designers get more options, too, including easier options for layout and common Photoshop effects. Taking the time to learn a new CSS library or technique is clearly well worth the trouble if it allows you to achieve the most common Photoshop techniques with few to no graphics.

In the early days of the Web, designers were limited to certain layouts and design styles merely because of the Web’s limitations. With the future of CSS, the only thing that will hold back Web designers is their own imagination.

Let’s take a closer look at what we have to work with right now and what’s in store for us in the future.

2. CSS Variables

Developers can easily see the benefit of using variables to code their Web apps, so seeing the benefit of variables in CSS is just as easy. Are they needed though? Before we answer a tough question like this, let’s go over what they are and how both designers and developers can use them.

Similar to a programming language, CSS variables can be used to define style sheet-wide values with one descriptive word. This one word can then be used repeatedly throughout the style sheet to use the value assigned to it. The point of variables is to save time and, in most cases, create more efficient code. An example of the idea in practice is below. You can take a closer look at this method on BrajeShwar.com.

@variables {
	oColor: #fefedb;
	oBgColor: #ccc;
	oMargin: 1em;
	oPadding: 1em;
}

@variables print { /* applies only to print */
	oColor: #000;
	oBgColor: #fff;
	oMargin: 2em;
	oPdding: 2em;
}

div#post div.entry {
	border: 1px solid #666;
	font: normal 1em/1.6em "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: var(oMargin);
	padding: var(oPadding);
	color: var(oColor);
	background-color: var(oBgColor);
}

At first glance, the above doesn’t seem any easier. What’s the point of typing out color: var(oColor); instead of just entering color: #fefedb;? That's true... until you get into a larger style sheet. With hex values for colors all over the place, CSS developers often find themselves scrolling throughout a style sheet, copying and pasting color codes and other style attributes.

If we plan to have one shade of, say, blue throughout a design, using a variable for it would be useful. We may want the same shade of blue for hyperlinks and the footer background. Rather than search through our huge style sheet for the exact hex value of that shade of blue, we know that we defined a variable called colorBlue with that hex value. We can then just use the variable in its place to save time.

We can almost get back to the simpler days of HTML colors (e.g. color="blue"), without sacrificing Web standards.

The Cons of CSS Variables

However, with all good things comes the bad. CSS variables has many critics as well:

"Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added."
-- Why “variables” in CSS are harmful

This quote is from an essay hosted on the W3 website. Although it is saying the exact opposite of what this article supports, the author makes some valid points, and we designers and developers should think closely about the pros and cons before using CSS variables and other advanced techniques. While the essay above focuses primarily on CSS variables, it does go a bit into other advanced ideas in CSS that we'll discuss later in this article.

"The other implementation is written in PHP. It proves that it is not necessary to add constants to CSS. Just like the existence of the WebKit implementation cannot be taken as proof that constants in CSS are useful, so the PHP implementation cannot prove that either. But the PHP implementation has the benefit of letting authors determine the usefulness for themselves, without modifying CSS on the Web."

Many solutions for using variables for style sheets are indeed in PHP, and the author makes an excellent point on how some of these methods can provide solutions for developers who would still like to use constants, while preserving CSS as it is today. Could this be a better option than all other CSS variable solutions?

"Thus there is a cost to user-defined names: memory (when writing the code) and understanding (when reading). That cost is offset by the cost of the alternative: long functions. How is that for CSS?"

Another argument states that CSS variables could be pointless or even harmful to efficiency. Could these variables actually make our CSS slower and file sizes larger? Incorrectly used, yes. A common fear among opposers of CSS variables and other programming techniques is that designers and developers will start using CSS' new power to make things easier on their end but then stop bothering with CSS code efficiency.

Point taken, but there are many cases in which CSS variables make style sheets easier to use and equally or more efficient. In such cases, using CSS variables may be smarter.

"CSS is fairly easy to learn to read, even if some of its effects can be quite subtle. When there is a page you like, you can look at its style sheet and see how it's done."

Even if we take care of efficiency issues, there is also the point that CSS will become similar to a programming language in its difficulty, both in creating and understanding CSS code.

We looked at just one insightful essay on why CSS variables may not be such a good idea. For more reading, check out the articles below:

Despite the movement to stop CSS variables altogether, many designers and developers are still strongly for them. If you're leaning to that side, keep in mind these points as you venture over:

  • Always be efficient. Know when to use CSS variables and when just to use selectors.
  • Name constants with a descriptive title for easier reading, especially if the CSS code is going to be changed.
  • Will the style sheet be reused? If so, then maybe CSS variables are not appropriate.

Walkthroughs for CSS Variables

Below are some tutorials, walkthroughs and other articles containing insight on CSS variables so that those of you who want to implement CSS variables can do it correctly.

CSS Variables with Server-Side Includes

CSS Constants

This example and walkthrough goes through a way to create the effect of CSS variables with programming languages. It explains how this can become a standards-compliant approach and even how specified CSS style sheets can be generated dynamically with server-side programming languages and a smart use of CSS variables.

Variables in CSS via PHP

CSS Variables via PHP

Another PHP solution, but with a premade class. All that is needed is simply to create the desired CSS variables. After the PHP class is downloaded and set up properly within the relevant HTML and CSS files, implementing these CSS variables is probably one of the easiest methods.

Dynamic CSS A.K.A. CSS Variables

CSS Variables via PHP

Yet another implementation of CSS variables with PHP. This walkthrough also has a unique section on browser detection.

CSS Using PHP

CSS Variables via PHP

A very simple example of using PHP in CSS to create variables. The tutorial states that this takes only six lines of PHP code in its simplest form.

Implement CSS Variables with PHP and .htaccess

CSS Variables via PHP

Here is a NetTuts+ tutorial on implementing CSS variables that is similar to the above techniques, but this time with the .htaccess file. A smart approach to CSS variables.

CSS Variables with Rack Middleware

CSS Variables with Rack Middleware

Here is another premade script that does the work for you. This developer realizes the benefits of CSS variables but doesn't like all of the extras that come with alternative CSS tools. So, he made a script that would automatically create just CSS variables, making it easy and efficient.

A Look into WordPress CSS Variables

CSS Variables in WordPress

Not an article or tutorial, this is a discussion on the WordPress forum about strategies to implement CSS variables in WordPress. The discussion focuses on one specific issue, which is a general problem nonetheless. The solutions presented in this thread address many problems of CSS variables and WordPress.

3. Conditional CSS

Conditional options in CSS have a variety of benefits but can also bring the same deficiencies as CSS variables in that they alter the state of CSS as it is. Many of the cons have to do with efficiency, confusion and, in some cases, added HTTP requests (because it deals with a type of server-side programming language).

Nonetheless, let's look into more of the benefits of conditional CSS statements. Just keep in mind the cons that come with them, and always be thinking of new ideas to overcome them. So far, the tools and solutions that give developers and designers conditional statements in CSS have come to be relatively well accepted. This is because CSS conditionals seem to solve bigger problems in CSS, and the lack of efficiency seems minor by comparison.

Let's not forget the original CSS conditional. The problem with the traditional CSS conditional for IE, however, is that it has no else or else if. Although the use may be limited, an if/else statement for CSS could allow designers and developers to specify styles for other types of conditions: browsers, for example.

One popular tool for calling styles according to browser type is Conditional-CSS.com. While many other solutions are out there for conditionals as well as this particular problem, this tool can do most of the work automatically, with minimal confusion.

Conditional CSS

Conditional-CSS allows the user to customize a Web script in their choice of language (PHP, C# or C), and it compiles the code along with an uploaded style sheet to create CSS conditionals based on browser type. With this tool, those nasty IE bugs become easier to handle, and other browser bugs and unsupported features can be handled more gracefully. Using this method, you no longer has to create a separate style sheet for IE (or any browser for that matter), instead using old-fashioned CSS conditionals.

For a closer look at how one can use the syntax of this tool, here is the sample code from the Conditional-CSS website:

/* Conditional-CSS example */
a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;

text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus='true');
}

As you can see, the code is easy to read, write and handle. This is a smart solution to a common problem in Web development. However, as with CSS variables, there is the risk that developers will use this method to overpower CSS' basic functionality.

The solution is intended primarily for common IE bugs, although it provides more flexibility. As with any extension of CSS, use it responsibly, which means using it only when necessary. Rely on traditional methods to fix most IE problems. Because IE6 is the most troublesome, check out this article on Sitepoint:
10 Fixes That Solve IE6 Problems
.

Customized Native CSS Conditionals

What we discussed above is a great reason why developers would use conditional statements in CSS. But many of us would like even more control. For example, instead of being limited to browser type, many of us who work with fluid layouts would like to be able to create conditionals based on browser width:

if($browser_window >= 600px && $browser_window < 1280px){
	p{width: 600px;}
}

else if($browser_window < 600px){
	p{width: 90%;}
}

else{
	p{width: 800px;}
}

Similar to what we saw with Conditional-CSS, the solution is to attach a more advanced language, whether PHP, Ruby, JavaScript or another of your choice.

Dynamic Resolution Dependent Layouts is a great example of how to use an if/else statement for this problem. In addition, we can use the same idea to create customized conditionals in CSS using JavaScript.

The idea here is to use separate style sheets altogether, and then use a JavaScript (or a script in your preferred language) to call the correct style sheet. There are no conditional statements in the CSS at all; rather, the website just simulates them. And a default option is available if JavaScript is turned off. Also, using multiple style sheets will have no negative consequences because the JavaScript will be calling only one in the end, based on the conditional statement. This means there will be only one HTTP request, so it will not slow down the Web page.

Here is the first part of the example code:

<link rel="stylesheet" type="text/css" href="css/default.css" 
	title="default"/>
	
<link rel="alternate stylesheet" type="text/css" href="css/thin.css" 
	title="thin"/>
	
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" 
	title="wide"/>
	
<link rel="alternate stylesheet" type="text/css" href="css/wider.css" 
	title="wider"/>

By specifying the title attribute, we can use this in our JavaScript file:

function dynamicLayout(){
    var browserWidth = getBrowserWidth();

    //Load Thin CSS Rules
    if (browserWidth < 750){
        changeLayout("thin");
    }
    //Load Wide CSS Rules
    if ((browserWidth >= 750) && (browserWidth <= 950)){
        changeLayout("wide");
    }
    //Load Wider CSS Rules
    if (browserWidth > 950){
        changeLayout("wider");
    }
}
	

Be sure to check out the full article and script for more detail. This is a good example of how HTML, CSS and JavaScript can be used together to create dynamic CSS and, more specifically, if/else statements to manipulate CSS. One will need to customize the method, however, to get the desired effect.

4. A Better Syntax

Advanced users of CSS know that CSS' current syntax has some flaws. Although it is well-structured and easy to read for the most part, it is fast becoming outdated as new Web designs call for creative layouts and new Web pages need enhanced functionality. This is what some of these new ideas attempt to address.

Some solutions are nested selectors, nested declaration blocks and smarter shortcuts. We define these below.

Nested Selectors

A forum post over at Webmaster World discusses a specific problem that could be solved with nested selectors. The inquirer wants to override page-specific properties, which can be done easily with the following code, of course:

p.intro {width: 400px;}
.alert {color: red;}

#pageid p.intro {width: 200px;}
#pageid .alert {color: blue;}

For longer style sheets, though, this method can get so confusing and repetitious that they become difficult to read. A better solution would be to use a nested-like structure that would make the code more organized and efficient:

p.intro {width: 400px;}
.alert {color: red;}

#pageid{
	p.intro {width: 200px;}
	.alert {text-align: blue;}
}

This way, #pageid would have to be called only once, and the original uses of p.intro and .alert could be used as a default, while more specific IDs could use the same classes with different values. The overall result would be more efficient and legible.

Unfortunately, the only solution to the problem involved separate style sheets. The problem with nested CSS selectors is that the problems they address are various, and essentially all can be solved with current CSS child classes.

One solution would be to use an alternative "CSS language" that includes nested selectors as part of its custom syntax. A list of these alternative tools is at the bottom of this article, along with further description.

Nested Declaration Blocks

Another issue is our inability to nest entire declaration blocks. The article "What I want from CSS3: nested declaration blocks" offers a smart outlook on the benefit of nested declaration blocks.

Two code examples from the article are copied below. The first represents the way things are done now, which is quite inefficient in most circumstances:

#content ul{
	list-style:square;
    margin:0 2em;
}
#content li{
	list-style:square;
	padding:2px 5px;
	line-height:1.3em;
} 
#content a:link{
	[...]
}
#content a:visited{
	[...]
}
#content a:active{
	[...]
}
#content a:hover{
	[...]
}
#nav ul{
	list-style:none;
	margin:0;
}
#nav li{
	list-style:none;
	padding:2px 5px;
	line-height:1.3em;
}
#nav a:link{
	[...]
}
#nav a:visited{
	[...]
}
#nav a:active{
	[...]
}
#content a:hover{
	[...]
}

A much more sensible approach would be:

#content {
    ul{
	 list-style:square;
	 margin:0 2em;
	}
    li{
	 list-style:square;
	 padding:2px 5px;
	 line-height:1.3em;
    } 
    a{
	 :link{[...]}
	 :visited{[...]}
	 :active{[...]}
	 :hover{[...]}
    }
}

#nav {
    ul{
	 list-style:none;
	 margin:0;
	}
    li{
	 list-style:none;
	 padding:2px 5px;
	 line-height:1.3em;
    } 
    a{
	 :link{[...]}
	 :visited{[...]}
	 :active{[...]}
	 :hover{[...]}
    }
}

Many people would like to be able to use this new method at least for syntax related to links, because they are something we all deal with in every style sheet. Styling lists would also be a great use of this syntax, perhaps similar to how they are nested semantically in HTML markup. If CSS could mimic this nesting ability, style sheets would be much more efficient.

There is no implementation of this kind so far in CSS 3, but as with nested selectors, similar techniques can be achieved with various CSS extension tools, which we explore below.

Smarter Shortcuts

A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.

To see the benefit anyway, let's look at a few examples in which smarter shortcuts would be beneficial.

When many elements from a certain class or ID share the same properties, things can get a bit repetitious:

#navigation h1, #navigation h2, #navigation h3{
	font-family: Verdana, Tahoma, sans-serif;
	letter-spacing: -1px;
}

Smarter syntax would tighten things up, saving both time and space in the style sheet:

#navigation [h1,h2,h3]{
	font-family: Verdana, Tahoma, sans-serif;
	letter-spacing: -1px;
}

As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good:

a:link, a:active, a:visited
{
	font: bold 10pt Verdana, Tahoma, sans-serif;
	color: #444444;
}

a:hover
{
	color:#000;
}

	#navigation a:link, #navigation a:visited,
	{
		font: normal 10pt Verdana, Tahoma, sans-serif;
		color: #000;
	}

	#navigation a:active, #navigation a:hover
	{
		font-size: 14pt;
	}

Having all these pseudo-classes in the way is rather inefficient. Grouping them would be much smarter:

a[:link, :active, :visited] {
	font: bold 10pt Verdana, Tahoma, sans-serif;
	color: #444444;
}

a:hover{ color:#000; }

	#navigation a[:link, :visited] {
		font: normal 10pt Verdana, Tahoma, sans-serif;
		color: #000;
	}

	#navigation a[:active, :hover] {
		font-size: 14pt;
	}

While the solution in the example above saves only a little space, that extra space can do wonders in a larger style sheet. And most will agree that this is a much easier way to read and understand style sheets.

The general goal for any situation like this is to be able to share elements, pseudo-classes and any other type of extension with o one declared class or ID, rather than repeating the class or ID name repeatedly.

5. Simple Mathematical Functions

Most of us have come across a piece of CSS code for which we thought, "This would be much easier if I could just subtract X number of pixels," or "This solution would be easier if I could just add X% onto this DIV."

Without this simple math for CSS, most of us have found workarounds to many of these problems. But by implementing simple mathematical functions in CSS, we can eliminate extra code and make our thought process easier.

A rough example could be something like below:

.element {
	width: 100%-150px;
}

Example of the Centered Layout

This technique would benefit fluid layouts or layouts that need to be aligned relative to the user's screen size. It would also help layouts that have centering, either vertically or horizontally.

Horizontally centered layout

Take the very basic example above of a horizontally centered layout. Simply using auto for both the left and right margins creates a centered layout for the end user, no matter how wide their screen is. But what if, for whatever reason, you want that centered wrapper shifted 200 pixels to the left? The wrapper has to be shifted 200 pixels relative to the center of the user's screen, not just your own.

Horizontally centered layout

Right now there is no solution for this. Most designers faced with this issue either just float everything to the left and use absolute positioning to finish the job. But those who have larger resolutions will see excess white space to the right of the screen. Not a bad solution, because everything is still in place, readable and efficient, but having the power to create a layout that accommodates all users would be better.

The second solution is to center the layout but adjust the elements around it. This could mean repositioning some elements on the background image or adding "artificial" transparent spacing to align the wrapper.

This is just one example, but simple math could solve many problems in CSS. An article over on KilianValkof.com titled "Random CSS Thought: Math in CSS" presents just this idea and specific examples of how this could be helpful.

Is It Right?

As with many new ideas for CSS related to programming, a debate arises over whether we should do it at all. Implementing an idea like this in future versions of CSS would no doubt help out many developers and designers, but is it going too far?

The concern may not be that the CSS would become more inefficient or complicated but rather that, as we have heard with most complaints against proposals to expand CSS, it moves away from CSS' original purpose, which is to style.

But wouldn't we be using these techniques to improve styling? Techniques such as these could give designers more possibilities for layouts, transporting us to the future of Web design more quickly. So is simple math another way to style with CSS or yet another programming concept that purists have to put up with?

7. Object-Oriented CSS

Object-oriented CSS sounds scary, especially for those that aren't too keen on programming stuff. With a closer look, though, we will see that some object-oriented CSS can be a fantastic solution.

Why use object-oriented CSS? As the Object-Oriented CSS website explains in its introduction:

OOCSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

Here is a video from the same website that introduces what it is and how it can help designers and developers:

This is by far one of the most advanced solutions we could implement for CSS. Some of the tools and solutions discussed above touch on object-oriented concepts, but this approach is geared 100% to an object-oriented programming language.

This could be the most controversial advancement of CSS, because of the programming-related difficulties noted above. It is not an issue right now, of course, because developers can choose to use or not use the platform. But if it were included in CSS as a standard one day, it could change the way we think of CSS altogether.

8. Design-Related CSS Solutions

CSS was originally meant for styling after all, right? Let's step back from the programming-related concepts, and turn again to the design element of CSS. Aside from functionality in coding, some of the ideas floating around relate to functionality in design. Let's look at a few below, some of which already have solutions.

Advanced Hyphenation Techniques

With increasing attention paid to typography in the last few years, hyphenation has become a priority for many people. Well-designed websites hyphenate the text in areas where it is important to the layout so that the text does not have to be constantly altered. This improves alignment and better organizes the overall design.

Without tools, though, bodies of content are left with jagged edges and sometimes strange spacing. This is understandable, given the history of typography, but as we move into the future, we will probably want to standardize hyphenation and, more importantly, make it easier to implement.

Wouldn't it be nice if we could do something like this?

p {
	font: 8pt Verdana, Tahoma, sans-serif;
	text-align: hyphenate;
}

No need to make it more complicated, either for future authors of CSS or for us as designers and developers. Because we identify a Web page's language at the top of an XHTML document, it would be easy for the CSS to identify the language in which to hyphenate.

Unfortunately, there are no purely CSS-based solutions quite yet, but let's keep hoping. While we wait for an easier implementation, we have plenty of hyphenation tools in more advanced programming languages:

  • Hyphenator.js
    JavaScript that implements client-side hyphenation of HTML documents
  • Python-Hyphenator
    Pure Python module to hyphenate text
  • Hyphenator WordPress Plugin
    Hyphenator automatically inserts separators in the content, so that text at the end of a line is wrapped with a dash if needed.
  • Hyphenate Text in Photoshop
    "The settings you choose for hyphenation and justification affect the horizontal spacing of lines and the aesthetic appeal of type on your pages."

Native Support of Fonts

The ability to embed fonts on a Web page has been a dream of many designers for years. @font-face is the CSS declaration that allows us to do this, but it is not widely supported by Web browsers, especially Internet Explorer. When CSS 2 first came out, the W3C actually recommended support for @font-face, but it was soon deprecated due to lack of support by CSS 2.1.

Now the demand has returned with a stronger push. Even though some current browsers don't support it and older browser versions are still being used, most modern browsers do now support @font-face. If it is one day fully implemented, all we would have to do is this:

@font-face {
	font-family: "Robson Celtic";
	src: url("http://site/fonts/rob-celt.ttf")
}

With this code, a designer would be able to fully use "Robson Celtic" even if it is not a standard Web font. However, having a backup is always a good idea, for users with older or unsupported browsers. In this case, we could use Arial:

body {
	font-family: "Robson Celtic", Arial, sans-serif;
}

The example is from "Re-introducing @font-face CSS rules," a great resource for learning about @font-face and its future implementation.

There is talk of implementing @font-face in CSS 3, despite there being less than 100% browser support. This would be a huge gain for CSS 3. For more about the font module in CSS 3, take a look at the working draft.

sIFR

As we wait for full browser support for @font-face and an official okay from CSS 3's developers, an alternative does the exact same thing. sIFR is a JavaScript and Flash-based tool that allow designers to embed any font on a Web page, as long as the user has JavaScript and Flash enabled. Of course, JavaScript and Flash are not enabled on every browser, but support for these two technologies is wider than that of @font-face at the moment, so it is a handy solution.

Photoshop Styles

Websites often need many images to get just the right amount of polish. But dealing with many small images can be a hassle, not to mention that they slow down the website. This is why CSS 3 developers and others are fighting to make CSS able to handle the most common Web design styles that require images, without actually using images.

Rounded Corners
Every single rounded corner on the Web today means another HTTP request and one more thing to slow down the Internet. Yet rounded corners are one of the most popular and effective ways of "polishing" a Web design. Most of us now know that CSS 3's new border-radius property allows for pure CSS-based rounded corners.

If you are using a Mozilla/Firefox browser or Safari 3 to read this article, you should see a nicely rounded box, with a nicely rounded border.

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;>
If you are using a Mozilla/Firefox browser or Safari 3 to read this article, you should see a nicely rounded box, with a nicely rounded border.
</div>

If getting rounded corners is as easy as that, all we can hope for is better browser support. Read more on CSS 3's rounded corners and their current reach on the Internet here: Border-radius: create rounded corners with CSS!

Text Shadows
There is no solid solution for putting shadows under text at the moment (although there are many proposals), but at least we have this:

Users of Webkit (Safari 3+), Opera 9.5, Firefox 3.1 (pre-Alpha), Konqueror and iCab should see a gray drop-shadow behind this paragraph.

<p style="text-shadow: 2px 2px 2px #000;">
	Users of Webkit (Safari 3+), Opera 9.5, Firefox 3.1 (pre-Alpha), 
	Konqueror and iCab should see a gray drop-shadow behind this paragraph.
</p>

There is not a lot of support for this quite yet, but it has been implemented and will hopefully see more browser support in future. Many designers and Web professionals realize that text shadows may not be quite so great for usability. As you can see, the text above is hardly readable, and the text-shadow property would not be suitable for main content. But for titles and larger bits of text, it could be a great way to add polish without using images, as we saw with rounded corners.

Better Transparency
CSS 3 also has a new opacity property, which is supported by many of the browsers versions that support text shadows and rounded corners. You can find some great examples of what the new opacity property offers on CSS 3 Opacity. And the article "Making Your Backgrounds Transparent with CSS 3 Opacity" talks about how it can be implemented.

Layer Blending and Simple Filters
No one is proposing this for CSS 3, but Photoshop-inspired features such as layer blending and simple filters could one day be added. This is a sensitive topic because many believe that putting too many features in CSS will defeat the purpose of graphics programs.

The features we're discussing here would not be intended to replace graphics programs, but would simply improve the design and speed of websites.

A Universal Rendering Engine

We can always hope, right? A universal rendering engine is definitely at the top of every Web designer and developer's wish list. With it, we wouldn't have to check one page design across 20 different browsers, because we would know that a single rendering engine is interpreting the code for everyone. Best of all, it would make way for all or some of the features discussed in this article, which now work in only a few select browsers.

Having one rendering engine for all browsers seems far off. Each browser type brings with it a different corporate identity and philosophy of how the Web should be displayed. Perhaps with the rise in W3 and its widely supported standardized system, all browser makers would be happy to conform first and then work on a single rendering engine.

9. CSS Extension Tools

CSS extension tools extend CSS syntax in a variety of ways. While many designers and developers prefer the simplicity of traditional CSS, learning a new way to code in CSS has its benefits. With these tools, we get functionality such as CSS variables, conditional statements, object-oriented principles and alternative CSS syntax, which is often easier and more efficient.

HSS

HSS CSS Alternative

HSS is a tool that extends CSS' basic functionality with easy CSS variables, nested selectors, nested blocks and more. In addition, it aims for CSS validity, thus minimizing concern about standards-compliance.

CSSHandler

CSS Handler

This CSS tool also has added dynamic functionality such as variables, selectors and better support for app-relative URLS. This one seems to aim for efficiency, with a white space compressor included.

LessCSS.org

Less CSS

This tool stands out because it is compatible with pre-existing style sheets. Designers and developers can add the features as needed and would only need to change the extension of the CSS file from .css to .less. This is a Ruby-based platform; it is lightweight and easy to use, and it provides all common CSS extensions.

CleverCSS

Clever CSS

CleverCSS is a lighter version of some of the tools above but still allows for more advanced programming-inspired CSS techniques. The syntax is similar to Python's, so Python developers will find it easy to adjust. The tool focuses on syntax efficiency but offers much more.

Sass

Sass Language

Sass is a stylish approach to an otherwise boring method of styling. This extension tool allows for nested rules, variables, mixins and more, and it gets anyone started quickly with a tutorial and full documentation.

If Sass looks interesting, also consider Compass:

"Compass is a style sheet authoring tool that uses the Sass style sheet language to make your style sheets smaller and your website easier to maintain. Compass provides ports of the best of breed CSS frameworks that you can use without forcing you to use their presentational class names. It’s a new way of thinking about style sheets that must be seen in action!"

CSS Cacheer

CSS Cacheer

CSS-SSPP is a CSS extension language, and CSS Cacheer is an extension of it. It allows all of the basic extensions, such as variables, constants and nested selectors, but it has more functionality and is easier on the browser's cache.

Moonfall

Moonfall

Moonfall is a simple program for generating CSS and comes with added functionality. It creates very basic style sheets and allows for more advanced techniques.

CSS Scaffold

CSS Scaffold

Another PHP-based CSS framework, this one very flexible. It is yet another alternative to achieving the CSS tricks discussed in this article.

10. Conclusion

Whether we support the techniques discussed here, many of us hope that CSS continues to advance. Many believe that CSS as it is allows us to style Web pages just fine and oppose adding more complex tools that would make it resemble a traditional programming language. But with widespread usage of CSS, websites have become much more dependent on it and require more capabilities from it.

So which side of the argument will win? Which of these ideas will one day become standard in CSS? It's definitely hard to tell now, and it is even more difficult to decide whether we should implement these ideas at all or leave most of it to other languages and techniques. What we can do now, though, is test out different ideas and solutions. Only then will we be able to decide for ourselves whether changing the face of CSS is the right course to take.

Further Resources

You may also be interested in these references:

Related posts

Also consider our previous articles:

(al)

↑ Back to top

Kayla Knight is a full-time freelance web designer and developer, and likes to blog a lot too. She also created and runs Freelance Mingle, a social network for freelancers.

  1. 1

    Nice article. I want ALL the things for nested selectors! it would be so useful.

    0
  2. 2

    We can only dream :(

    0
  3. 3

    Time to be in ninja boots

    its evolving and evolving …riding on wheel of time

    0
  4. 4

    awesome, just awesome
    thanks for such an article, that nice and full of ideas

    0
  5. 5

    @jeff haha, looks like you were one position out ;)

    0
  6. 6

    Awesome post..Please give us a common rendering engine for all browsers! Hope to see more articles like this.

    0
  7. 7

    In the “Example of the Centered Layout” where you desire to have auto-200px, this is easily achieved with current CSS. I’m not really criticising the article, but I don’t like this example as it makes it look like the wish list contains items that can already be done.

    0
  8. 8

    RE: Nested Declaration Blocks

    Not totally sure. This could lead to the possibility of duplicating lines of rules, you couldn’t do the following:

    #menu h2, #content h2 {rule:; rule:; rule:;}

    0
  9. 9

    Great article! useful info I can use.

    0
  10. 10

    Great! Not first!

    0
  11. 11

    Oh yeah! All of those wishes would be really appreciated! The main problem would still be : developping for IE (it will always crash somewhere…)

    0
  12. 12

    Leave CSS alone!

    0
  13. 13

    It still bothers me that things are moving so slow….
    css 3 is in development for years, and html5 also…javascript is moving slowly too… if it wasn’t for js frameworks, that are giving the allusion of something new we would be talking about js too…

    there should be a law or something, that when a new standard or version of css, html or whatever comes out the browsers should automatically upgrade…if they are not capable enough to implement it as the standard is requiring they shouldn’t be in the browser business.

    Ideally the browser folks should be working and contributing on forming the good standards too

    as for backward compatibility it should be solved like I think js has. in the script tag the language attribute states wich version of js you are using. Or wjen you state in doctype for html. So if browsers would release a new version of css or implement a feature differently, than the old website wont suffer.

    and kudos to smashing … once again a great articleand this time I have to agreealost with every point. All of this features would be perfect.

    but to have an universal renderer is the ultimate dream of each and everyone of us web developers

    0
  14. 14

    Sorry, but this is really a maintainance problem if intending changes what you meant with your css. This will break. Konstants/variables are quite useless, too. They just complicate the language. CSS is not easy, but it doesn’t get any easier if you have to watch every space in your css file.

    0
  15. 15

    @Eric Eggert
    Css is very easy. and those changes wouldnt make it more difficult, it would just give you more options!

    if you would write:

    there wouldnt be any problems with compatibilities,, and the problem would be solved

    0
  16. 16

    or the same way you fetch jQuery for example with google js api

    0
  17. 17

    Nested selectors would really tidy up css. Variables and conditional css go hand in hand and would both be very useful. Native support for fonts is something I’ve been dreaming about for a long long time!

    0
  18. 18

    Firefox 3.1 pre-alpha? Jesus, when was this article written? :|

    0
  19. 19

    CSS variables
    These don’t really impress me much as most text editors have find and replace which makes it a snap to change everything in a fell swoop. The less work I have to rely on the browser doing the happier my users will be (thought they’ll never know).

    Conditional CSS
    All this for better support for IE? IE really isn’t that hard to deal with folks -> http://www.russellheimlich.com/blog/developers-stop-whining-about-ie6/
    CSS3 covers this with media queries -> http://www.w3.org/TR/css3-mediaqueries/

    Nested selectors / declaration blocks
    These look awesome! I wouldn’t mind this getting implemented as it doesn’t mess up the way CSS currently works today. Good idea.

    Really I’m just looking for CSS to give me more control, like seperate x/y axis control of background position. IE gets this right. Here is a perfect example -> http://www.russellheimlich.com/blog/ie-gets-a-css-rule-right/

    0
  20. 20

    The problem with most of these ideas is lack of any backwards compatibility whatsoever. We shouldn’t consider any these choices viable unless we can find a way for the code to degrade gracefully.

    You can already use some of these ideas in one way or another thanks to some great libraries or organize your CSS in a way that makes it scale and work more efficiently (see Object Oriented CSS).

    Why should you wait for very slim possibility of one of these ideas coming through any time soon? It’s not like we’ll be able to use them on production websites one year from now. The future is all around you, all you have to do is pick your cherry :)

    0
  21. 21

    The two sections, “Nested Selectors” and “Nested Declaration Blocks” look the same to me. Is there meant to be a difference between them?

    @Adam: That is true, but one thing the article neglects to mention is a CSS “parent selector” which I’ve seen mentioned on other sites before. You could then have something like this:
    h2 {
    parent(#menu), parent(#content) { … }
    }

    Might start losing some readability here though…

    0
  22. 22

    This is a GREAT article. I got giddy just reading about all the ideas. I wish many of them would become realities.

    0
  23. 23

    I recently used Sass and I must say I loved it!

    0
  24. 24

    I would love to see CSS become the universal format for styling any and all display/interface/interaction — akin to XML for structuring pure data.

    With a more advanced, more vector-rendering-program-like core, CSS could become the universal exchange/styling format for things like Illustrator, Freehand, PDF, InDesign, etc.

    Apple’s already using this idea of web rendering tech within desktop applications with the release of iTunes 9. But imagine a world with a universal rendering engine, where there’s no difference between styling a web page, a word doc, an illustrator file or a program interface. This is something Apple did with Quartz on a system level (everything’s a PDF, to make an extreme over-simplification) and Adobe’s trying to do with AIR (as an attempt to prevent the Flash format from slipping into irrelevance as a video streaming format).

    But seriously, further Flash prevalence? Do. Not. Want.

    0
  25. 25

    It’s good that you mentioned “Object Oriented CSS”, however I wouldn’t call that a “wishlist” item, since it can already be implemented, and doesn’t really have anything to do with standards or browswer compatibility.

    I suppose it could be on the “wish list” because we “wish” all developers to use those concepts..?

    0
  26. 26

    Nested selectors look like a nightmare in training though I suspect that I’ll get used to the idea eventually. Still, I’m geeked out over the idea of the short cut selectors. Um…not having to repeatedly type #idname tag would rock.

    What I’m not seeing here is any addressing of the basic list-style problem (ie: bullets are boring). The basic character set has the ability to produce other things, like the greater than “symbol”, so why not include those options in the default list-style?

    0
  27. 27

    I have been using Sass, and it’s HTML counterpart Haml, for many years. Full disclosure: I used to work with the guy who created it.

    It’s perfect for doing all the things mentioned in this article. If anyone is curious to try playing with it, but doesn’t want to bust out a full rails app or setting up Compass, I’d direct your attention to the Staticmatic project. It’s a rubygem that gives you a simple framework to rapidly prototype static websites using haml+sass.

    0
  28. 28

    It would help if I included the link, which is:

    http://staticmatic.rubyforge.org/

    0
  29. 29

    Well, for starters, I would like to be able to select elements with XPath.

    0
  30. 30

    @D4rky
    Just last week! Those are just the prerequisites for that particular CSS3 feature. It is intended to imply that it works for Firefox 3.1 pre-alpha and UP.

    0
  31. 31

    And what about the possibility of clipping background images? The usage of sprites will be much simplier.

    0
  32. 32

    Some time ago, a guy mentioned xCSS in #cakephp. I assume it was the developer. It seems like a thorough example of OOP CSS without performance loss, because it is compiled before placed live.

    This way CSS doesn’t have to support variables.

    See for yourself:
    http://xcss.antpaw.org/

    0
  33. 33

    Great article!
    Very interesting, some of them I already stumbled on myself (simple maths for example), others just didn’t occur to me yet.
    Great job!

    0
  34. 34

    Nice review. I would like to add my own dynamic CSS library to the list. It allows for variables, supports conditional logic, handles server side includes, performs CSS compression, and will generate png8 images for IE6 and lower.
    No changes are needed to use the library. Just add the files to the directory where your CSS resides.
    It does require that your server supports .htaccess files and PHP.
    You can read more and download at http://www.coolphptools.com/dynamic_css

    0
  35. 35

    Get your confusing muckeyty muck out of my design. Css just works fine now.

    0
  36. 36

    Its is one of the most unique, useful and awesome article of the Smashing Magazine. It covers some really cool and advance techniques, thanks for writing such a great article.

    0
  37. 37

    These are some great ideas, except I think that math-related stuff might not work too well in CSS. Because many people use hyphens in selector names, it wouldn’t work because the hyphen is used as the subtraction operator in most programming languages.

    0
  38. 38

    Wow. At first I didn’t like the idea of adding variables to CSS. I am a developer and a designer, as fluent in CSS as I am in PHP/MySQL. And I figure “let’s keep all of the variables in one language…and the styles in another.” Apples and oranges. I mean, if I really wanted to have an external list of variables, I’d create a global var file and include it with PHP include(), right? Hello, Object Oriented Programming 101. But nested declaration blocks, css conditionals and simple math-based values, that’s badass, right? Say you have a fluid width page but want to add a 5px wrap… make the inner div width: 100% – 10px; that’s cool.

    The problem I see though, for one, is having a complex site using PHP, MySQL, Jquery, JavaScript, CSS and Flash with variables flying all over the place. How do you track them? Are there naming conventions to keep them all straight? How do you pass a CSS variable’s value to JQuery, validate it and then pass it to PHP/MySQL so we can database it?

    0
  39. 39

    Most of the things presented here take CSS closer to a programming language and this is not the idea behind CSS. CSS should pe kept to a simple logic. Yeah we miss some features but it’s fine the way it is now. Plus we would have big backward compatibility problems. If you want really advanced CSS with variables and everything you can still make it with javascript or PHP. But most designers don’t need this advanced features. Keep it simple!

    0
  40. 40

    As I’m using it, CSS is really simplifing everything and it is really enough for me!
    But, if it upgrade, there would be no problem :D

    0
  41. 41

    CSS is short for CASCADING style sheets. If you need variables for things such as colour and font styles then you are not taking advantage of the power of the cascade.

    0
  42. 42

    I am tired of ppl saying css was not meant for this or for that…. a lot of things have evolved now beyond their initial intent – thanks god – even html!

    so why should we stay still and nod improve something just because it wasn’t meant for something. The web is constantly evolving… and all the technologies around it should too!

    I am all PRO improving css… and fast… cause this is going really, really slow!

    0
  43. 43

    These are all great ways to improve CSS… Hopefully some get implemented in CSS 5.03947. I think CSS variables would only work to their full potential if their implementation is exclusively client side. If you’re a web designer working on Multiple server platforms, the ability to re-use one CSS file across the board is crucial.

    0
  44. 44

    Thanks for mentioning CSScaffold. It can do everything you’ve mentioned here plus more. It’s plugin architecture makes it easier to extend. In total, it can do more than any other alternative out there at the moment. Consider your wishes granted :)

    The selector groups you mention could be implemented fairly easily.

    0
  45. 45

    Most of them are new to me and to use it , not even close unless I understand all about it, including the risk , the pros, the cons using it. But when everything seem perfectly fine, why not..then.

    0
  46. 46

    I love all of your article, Thank you for having these nice collection of css wishlist.

    0
  47. 47

    Great article!

    CSS varibles are great too!

    0
  48. 48

    One thing to be mindful of with the current implementations of CSS variables is caching. If you cache your CSS files, which is always a good way to boost speed, then this approach will likely cause problems.

    For instance, if a Firefox user is the first to request your style sheet, it will be rendered and cached. If an IE user is next, he will receive the Firefox version since it is already in the cache. (Even if you don’t cache your files locally, your web server may send HTTP headers that tells intermediate proxies and such that it’s OK to cache your files publicly.)

    Perhaps a better solution is to tell each browser to request a different style sheet. In this case, the server-side browser sniffing would happen when the page itself is requested, not when the style sheet is requested. For instance, Firefox users would be told to request /css/main.ff.css and IE users would be told to request /css/main.ie.css. This of course assumes that your pages aren’t cached.

    Regardless of what you choose, keep caching in mind. It can cause some nasty bugs that are difficult to track down.

    0
  49. 49

    The first two ideas (css variables and conditional css) are really really bad.
    Variables encourage redundancy:
    One would write
    #elem1 { color:var(cicolor); margin:0; }
    #elem2 { color:var(cicolor); margin:0 auto; }
    instead of
    #elem1, #elem2 { color:var(cicolor); }
    #elem1 { margin:0 }
    #elem2 { margin:0 auto; }

    Conditional css would destroy all the efforts made by the ie in the last years. Web designers would start to adapt their sites to different browsers instead of browsers adopting web standards.

    Beside this, I like all the other ideas very much. They would be a real enrichment for css.

    0
  50. 50

    You should also include Cufon for font replacement techniques — http://wiki.github.com/sorccu/cufon/about

    0
  51. 51

    It will take at least another 5 years for all these to get wide browser support. So unless you are designing web applications that will be used by a select group of users, it will be better to stick with CSS 2 which actually is quite a decent thing.

    0
  52. 52

    I’m glad to see that these features are desired by so many people. I’m working on a new standard to replace CSS, which will include nested blocks, user defined constants, references to other objects, expressions (such as 100%-50px), a ground breaking layout engine and many many more cool features. Stay tuned!

    0
  53. 53

    I think they should finally just make a vertical align tag, as in within the browser window. I know there are awkward ways to do this now with javascript, but seriously, it is such a necessary and basic thing I’m surprised it hasn’t been made a decade ago.

    0
  54. 54

    Haven’t had time to digest the article yet but I’m wondering, what happened to number 6?

    0
  55. 55

    As is so often the case, we seem to be discussing several different things under the same banner:
    Constants: a value (such as a colour) that is defined once and used wherever needed.

    Variables: (top of my personal wish-list) the ability to define a number as say: “100% minus 12px”

    Functions: More complex stuff that lies halfway between CSS and JS

    Why can’t these be discussed separately?

    0
  56. 56

    variables, nested selectors, and border-radius are the only things on this list that i would really look forward to, but its good to know about all the other stuff out there.

    one thing i’m confused about, why are there tags in the rounded corner example? as far as i know, you can’t nest one html tag inside another.

    0
  57. 57

    variables, nested, mathematicals, radius … I dreamed of them for … ten years ? gasp.

    The web makes the world going faster but its technology are evolving slow as hell.

    0
  58. 58

    Dream, dream, dream, …..
    But who knows, someday dreams come true

    0
  59. 59

    Great article.

    With the future of CSS, the only thing that will hold back Web designers is their own imagination.

    That line made me laugh, though. It probably should have read:

    With the future of CSS, the only thing that will hold back Web designers is Microsoft’s legacy of bad CSS implementation.

    No IE6 bitterness here…

    0
  60. 60

    Eh as a graphic designer who is sometimes asked to do web stuff which I loathe because I cant program shit, I still wonder why in this day and age there isnt software where one can literally build a website like I build the skin in illustrator or photosohop. The way websites work seem rather archaic.

    0
  61. 61

    Hey!
    Tried to use variables but didn’t work in any browser. Do I need to define them only in css style sheet or somewhere else? Prehaps php or some other activation should be done?
    Thanks in advance.

    0
  62. 62

    I hate designers / web designers who fancy themselves as developers, ffs.

    CSS Variables

    What the fuck are you thinking about? @variables? oColor?

    logoblue=rgb();
    anythingyouwant=anything(); you:hwehf;can;imagine;you:loser(234,234,234);

    selector {
    logoblue;
    anythingyouwant;
    somethingnew:lolweareoverrridingthisislikerape;
    }

    damn I hate stupidity

    0
  63. 63

    I want fallback option in css, like when, fox example, box-shadow is not supported, instead used border property.

    Like:

    .block{
        @enchance “shadow”{
    box-shadow:0 0 5px rgba(0,0,0,.2);
    }
    @fallback “shadow”{
    border:1px solid rgba(0,0,0,.5);
    }
    }

    0
  64. 64

    ok if this is realy for CS:S i want two updates for css and that is lvl ups and classis like in COD 6 MW2 (Call Of Duty) if you can do that il love you guys so plzz and dont for get an gun aiming to make it cooler :D

    1
  65. 65

    I think we need to add another selector to the next CSS version. It is “nearest child”. Imagine I have some declarations which are at the same strong cascade level

    .red h1 { color: red }
    .green h1 { color: green }
    .blue h1 { color: blue }

    When I have this markup:

    Should be blue

    Should be red

    Somehow the h1 in red is colored blue. Why? Because with the same strong declaration, CSS will take the latest declaration as the strongest among them. Everyone would be agree that I have to make more specific declaration for the red element. But that’s not the case! I want to have free markup where I can put: BLUE inside RED, or RED inside BLUE, or BLUE inside GREEN inside RED, etc. It should work out of the box. That’s why we need a new selector which will take the strongest declaration based on the nearest parent on the cascaded selector. e.g. I use character ‘%’, the declarations should be like this.

    .red % h1 { color: red }
    .green % h1 { color: green }
    .blue % h1 { color: blue }

    With the markup above, the h1 in RED should be colored red, and the h1 in BLUE should be colored BLUE.

    What do you think guys?

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top