CSS shortcomings
For many web developers, CSS means numerous of ways to create flexible designs, control fonts in a powerful manner and a central location for controlling the entire look of your web site.
Unfortunately, CSS is far from perfect so I thought I’d list the most common disappointments I have, given the current state of CSS support, and I will also go a little into what your options are and what the future holds.
Lack of column control
I think the most annoying thing, and the biggest obstacle for people moving from table-based layouts to CSS-based ones, is that there isn’t any proper way to easily create columns. You can’t just specify that something like: “I want three columns, side-by side, no matter the web browser window size”. There are ways to accomplish a column-like design with the float and the clear properties in CSS, and it’s not too complicated. But it can also become be the root of oh-so-many consequences, and bugs in certain web browsers, if you’re not entirely sure of what you’re doing.
For an excellent description of using float, I refer you to Float Layouts. You can also read Alex Robinson’s In search of the One True Layout for ideas and possible solutions to problems you might face.
The future of columns in CSS
There is W3C Draft for CSS 3 about Multi-column layout, but web browser support for that is far off in the future (especially evident when reading the Internet Explorer team’s Details on our CSS changes for IE7). Firefox have implemented it in version 1.5 and up, with the option to change it depending on W3C’s final decision.
Equal-height columns
If you’ve mastered how to create columns with float you fairly immediately stumble upon the next problem: how do I make my columns have the same height? I would basically say that you can’t; at least not in a simple manner. If you’ve worked with tables and the content in one of the table cells was longer than the one in the other table cells in the same table row, they automatically expand so the table row is one entity with the same height.
When using CSS and, for example, div elements to create columns, there’s no way to establish any relation between them; you can’t say “if element a gets higher, I want element b to expand accordingly”. Smart people have experimented with the tools necessary and a way to achieve the effect of equal-height columns is Dan Cederholm’s Faux Columns. Simply put, the idea is to have a background-image in the containing element of the columns that is repeated vertically to give the illusion of a background color for one or more columns, hence giving the impression that the columns are indeed equally high.
All fine and well, until you start building web sites where the width of the columns can be flexible and, for instance, adapted to the web browser window size. Then a fixed background image won’t work since a background image won’t stretch. Luckily, though, Zoe Gillenwater therefore created Liquid Faux Columns where the trick is to use the background-position in a clever way to, with percentage values, position the background image in a flexible manner.
The future of equal-height columns in CSS
The W3C Draft for CSS 3 about Multi-column layout, mentioned above, will also address a mutual height for the columns being used together.
Updated September 7th
As Eric Meyer pointed out, another interesting option is the display-model property in the CSS3 Advanced Layout Module.
Multiple background images on the same element
A definitive shortcoming in CSS is that there’s no support for applying multiple background images to the same element. The result is that you have to use an excessive amount of HTML elements just to able to add the correct design to a web site.
The future for multiple background images on the same element
Again, W3C are working on their CSS3 Backgrounds and Borders Module Draft that includes multiple background images, and also a way to create support for background images’ ability to stretch and adapt their size to their given context.
No vertical alignment for every element
A very useful CSS property is vertical-align to determine where something should be aligned. The problem, though, is that the only (at least useful) elements that support this are images, form elements and table cells.
The future of vertical alignment
I’m not sure if there are any plans to introduce support for this to other elements. Personally, I think it should at least work for all block elements, like div, p etc.
No way to specify different font size for different font families
Maybe not one of the biggest problems, but I still think it deserves mentioning. When one specifies a certain font to use, one should always specify fallback fonts in case your desired font isn’t available on the end user’s computer/device. If you have the guts for it, you sometimes use a font that maybe has only a 50% user base support and then it’s especially important to have good fonts to display if the first one fails. The problem here is that while it’s easy to specify fonts to degrade to, there’s no way to specify what the size of each font should be. This is often a problem if there’s a vast different in size of, say, how a 12 pixel Verdana font is rendered compared to a 12 pixel Garamond font.
The future for different font sizes for different font families
This is something that seems to be addressed in the W3C Draft CSS3 module: Fonts.
Hopefully this list answers some of the questions you might’ve had, offers you a solution to any eventual problems or at least brings you some comfort for the future. If you have any pet peeves that haven’t been brought up, don’t hesitate to write a comment about it.
