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.
Good Article 🙂
With regards to Equal-height columns, I found a way to do it using css, however, it's not fool proof and requires more work than the example below, to get it working correctly:
<pre><code>
html, body {
height: 100%;
}
#main-navigation {
height: 100%;
}
#second-navigation {
height: 100%;
}
</code></pre>
Ahh, whats happened to my markup 🙁
Stephen,
Thanks for your comment, although a 100% height on the <code>html</code> and/or the <code>body</code> element isn't always the most suitable solution.
Regarding the formatting: because of WordPress, you need to escape # properly in comments (i.e. #).
One of the things I miss the most in CSS is the
supportof variables.A good round-up. Another list of CSS limitaions is to be found on the wikipedia CSS entry http://en.wikipedia.org/wiki/Cascading_Style_Shee…
What would be great is a way to make browsers accountable for their shortcomings with CSS support. I can't fathom it when web-heads say CSS3 support is a good 10 years off. I hope they are just being cynics.
Browser-makers need more incentives to building compliant browsers. I'm not sure what that could be, but I know that whiny developers isn't the answer.
Also, I think the key to better column support is through the use of table-based layouts, using the display properties 'table, table-row, table-column, table-cell,' etc. (NOT the use of TABLE elements for layout)
Very good article.
I think that problems with the colums are the biggest that I have to fix.
I noticed you mentioned the lack of <code>vertical-align</code> on most elements, but what about vertical positioning in general? Unless I'm misinformed, <code>vertical-align</code> vertically centers inline elements, but I haven't found any methods of vertically centering a block element using only CSS. I would expect that adding <code>margin:auto</code> to a block element would accomplish this like it does in horizontal centering, but, alas, it does not — even when the ancestor elements' heights are 100%.
If I'm wrong, please correct me, but this is another CSS shortcoming that causes minor aggravation with certain projects.
Dude, you're a little wrong about the <code>vertical-align</code> thing. Firstly, which element it is doesn't matter – it's the display type, and it's specifically for inline boxes (or boxes in table cells). If you wanted to show something to the power or 2, for example, then you could make the "2" (which would probably be wrapped in an inline element) smaller than the rest of the text in the line and then set <code>vertical-align: top</code> to it or something. If you didn't make it smaller that wouldn't work (because it's already at the top), although you could still specify a length for the value.
It's one of those properties that sounds very cool and powerful, but it's really not meant to be for anything other than small bits inside a line. You've got pretty good vertical control over any box using <code>position</code>, <code>top</code>, <code>bottom</code>, etc. properties though.
I have found in developing large content rich websites, that i start making it 'DIV' css only but find later due usally to a clients CMS that its safer to keep simple columns in table, but have them CSS controlled.
<blockquote cite="http://www.robertnyman.com/2006/09/06/css-shortcomings/#comment-8483">its safer to keep simple columns in table, but have them CSS controlled
And, how is that semantic? The standard of separating content and design isn't just for the sake of making design changes easier–that's a common misconception about CSS/XHTML.
XHTML is for data, not structure.
I was working on a databse of all the drugs and ended up just using tables created by php in order to break up the lists evenly. I loved moz's implementation and I showed it to my boss like that and he thought it looked great, but of course not cross browser yet, so I had to do the whole php code junk by putting the list in an array, cutting it up into three, and displaying it that way. CSS is at least better than saying font color="red" though.
Nice list, I've been thinking of writing a list like this myself. Nice to see that soo many of the features are being fixed in CSS3. For Equal height columns there's a little bit better solution in CSS2.1 (not supported by IE yet): display: table; which makes the browser handle any element as if it was a table. I'm hoping that's what will be implemented in IE next.
Man, I run into the columns problem all the time. About 30% of the work I do is doing XHTML/CSS modelling of Photoshop comps. It's astounding how much of a pain in my butt it is. If it's time/cash sensitive I sometimes end up using a simple table for the columns. The client usually doesn't care but I always feel dirty.
God I'd love columns support, but if it doesn't exist in IE7 already, it's going to be awhile.
[…] devem ser resolvidas. Para quem mexe mais diretamente com webdesing, Robert Nyman fez uma lista interessante de coisas que ele sente falta no padrão atual, e a maneira com que o […]
css3-multicol isn't intended for page layout. It's intended for text wrapping in columns, as often seen in print.
As Emil mentioned, equal height columns can already be done with CSS2.1 with display:table. display:table-cell also fixes your issues with vertical-align on "any element".
Great article,
I agree wholeheartedly with your points about columns (or lack there of) and multiple background images. Wouldn't tableless layouts be oh so much easier then?!
Kai
> No vertical alignment for every element
use extra markup and some :A workaround!
For me, the lack of in-built corner treatments (rounded/bevelled/etc) is my biggest CSS complaint – besides browser inconsistencies of course.
Having to use images for corner treatments is incredibly inefficient, what with the http overhead each one incurs and then often a lack of suitable elements to 'hang' them from 🙁
I believe this is fixed in CSS3, if my memory of the specs is correct, but like someone else said, when the Hell will that be broadly supported?
Sometimes tables are a safe and fast solution to these column problems. Not a lot of tables but one can help you out in CMS environments especially. Separating structure from design is a goal that is often broken when designers (and clients) want a design with tricky backgrounds and box elements. So I don't see why one table is so bad. Time is money and the correct solution in not always the most profitable when you have deadlines and clients breathing down your neck.
I would love:
– Scale background image to container box size.
In my liquid designs that would allow to move most decorative images out of the HTML and keep it semantic.
I'll answer to myself, background-strech is a CSS3 feature.
I will wait having a tea with Steve until it gets broadly supported.
[…] 2006 | RSS
Robert Nyman listet die für ihn wichtigsten Mängel von CSS auf: CSS Shortcomings
Tags: CSS
[…]
Great article! Sometimes it’s nice to just read about problems you so often encounter and need to fix with workarounds.
Thanks everyone for your comments!
S.A. Spijkerman,
Absolutely, native support for variables would be very handy, although when working with inheritance in CSS you can diminish this need quite a bit.
bruce,
Thanks for the link, but unfortunately it didn't work for me.
Colin,
I hope it's cynicism, but at the same time, I'm convinced that it will take a long time. Just look at our current situation with IE 6…
Whiny developers might help if they succeed in affecting decision makers, but absolutely, other incentive is needed to.
<code>display: table</code> and its likes is definitely the best way to create columns with CSS. However, with the situation we have that IE 6 doesn't support it, and not even IE 7 will, we definitely face a big problem.
The IE team said:
<blockquote cite="http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx#714955">We previously stated that display:table is not part of the IE7 release
Thomas Higginbotham,
As far as I know, there's no easy way to accomplish that either; one more annoyance to add to the list.
Patrick,
While it is indeed for inline boxes, let me give you an example of where it would be needed. I have a paragraph (<code>p</code> element) with some text, and I want the text to be vertically aligned within it. This is not possible if I don't use an extra unnecessary containing element and other CSS properties.
Bryan,
I agree with Colin; you lose the semantic value then, and you also get less control of overflow situations.
Emil,
As mentioned above, it will not be in IE 7, The according to the IE team.
zcorpan,
Thanks for pointing that out! I agree, <code>display: table</code> is the way to go, but not an option because of its weak web browser support.
Ray,
Thanks for link and the suggestion!
Steve,
Ah, yes, that is something that's missing to. This will be addressed with the <code>border-radius</code> property in CSS 3.
Jason Martino,
What you miss out on then is semantic value and, to some degree, you get a lesser control of overflow scenarios.
Epo,
Then <code>background-size</code> in CSS3 is for you. Just be patient… 🙂
'And, how is that semantic? The standard of separating content and design isn’t just for the sake of making design changes easier–that’s a common misconception about CSS/XHTML.'
In the real world of business, you cant afford to dilly dally around, time is money is easy design changes is a cost saver!!
Well for my company the reason why we develop most of our sites through CSS is:
A. Most importantly 'Search Engine Optimisation' get as much html off the page as we can so spiders can harvest good content (h1 tags, LI tags and so on with most major search engines use to define how relevant a page is to the search Keyword)
B. Easy Template management in a CMS, again less html code on a page its easier to add smarty tags
Ue of a table (no more than 2 tables in any site ) is great for containing content, especially if clients are using a CMS for they do tent to put in strange content and anything but a table will probably collapse on itself visually, if for an example an image is 2 pixels too long.
Having your Table CSS controlled means you can control just aswell as a DIV.
At the end of the day the only difference between a DIV tag and a TABLE tag is about 10-20 characters in the HTML.
[…] ticale, dimensioni differenti dei caratteri. Il post di Robert Nyman ci fa il punto della situazione ricordando qualche speranza per il f […]
Just a side notation: Safari supports multiple background images on the same element for close to a year now, here's hoping other browsers step up to compete. I've made a few web applications for large mac only companies, and quite enjoyed this feature.
Column layout is not really a shortcoming of CSS, it's a shortcoming of IE that doesn't support <code>display:table-cell</code>.
Vertical alignment works very well. I think you've misunderstood the theory here. 🙂
Just to pick a small nit, with regards to equal-height columns, I'd say there's more promise in the Advanced Layout module than in the Multi-column Layout module.
font-size-adjust is not a future dream, in fact it was already part of CSS 2 in 1998. It didn't make into CSS 2.1 because there was no browser supporting it. So this is not really a shortcoming of CSS.
Bryan,
Thanks for clarifying. I agree with most of what you write and it sounds like you have a good understanding of semantics. But my opinion is that, even with just one or two tables in the web page, you will lose some semantic value. Also, in my experience, you have better control through CSS when it comes to overflowing content; an overflowing table cell will automatically adapt its siblings if that's the case, and you can't hold that back by specifying a width in the CSS code.
Brady,
Yes, Safari was very early with that, and I wish others will take after that as soon as possible.
Tommy,
Well, I know the theory, but the point is also ways I'm looking for controlling content. So, I wouldn't say I'm wrong, per se, but maybe that my needs doesn't fit the idea behind the current specification for <code>vertical-align</code>.
Eric,
Thanks for pointing that out! I believe the <code>display-model</code> property will address that. I've updated the post with that information.
molily,
You're right. Let's call it a shortcoming of CSS implementation in web browsers.
[…] links for 2006-09-07
8 september, 2006 kl. 1:27 Läs kommentarer del.icio.us
CSS shortcoming […]
Bryon,
Take a look at Layout Gala, Faux Columns and Sliding Faux Columns if you are using liquid layouts. I've found that the Layout Gala collection is very reliable and is easy to implement.
My first experience using a layout from Layout Gala was for Eric Mack Online and was very easy, even though the CMS Eric uses does not put out great HTML. The only thing I had to do is create a small graphic for the Faux column which was pretty easy even for someone with my limited graphic skills.
The site ended up even working with IE 5.0! I think that using cost as a reason for using tables for site is a cop out. Print style sheets are difficult to implement with a site that uses tables for layout. I spent personal time to learn how to make web sites better for my employer. I did it on my own time, so can you.
Trying again with the wikipedia "CSS limitations" link.
(Comment box munged the last one)
FWIW, I think the display:table-cell method is wasteful and sometimees requires extra, markup for presentational reasons.
bruce,
Great, thanks! Works just fine now.
Also, thanks for the link and a different angle about the <code>display: table</code> solution.
Tanny I agree it is a cop out and it annoys the hell out of me..
But every time we have had to use a table to contain major elements of web site it was basically because of clients.
Usually because they have a 'Speed of the slowest ship in the convoy mentality' with one client, the web site had to work perfectly on there own computers which had an old version of windows NT running Internet explorer 5. We had no choice but to add the table! They where willing to sacrifice good web design instead of updating there own IT systems.
But if you have a mind you can really control tables to perform nearly as well as a DIV, I can create print pages and even change complete page design with a table controlled by CSS.
Have a go see what you all can do with CSS controlled tables. its quite interesting.
But I must stress this point I try my best not to make table less structured websites, but as some know reality can force them on you, and try to use no more than one!
I think a way to assign variables in CSS would be really helpful. It would be so much easier to do that then manually type out same hex colors, font-families, border styles, etc… 20 times throughout the stylesheet.
Bill,
I so agree with you variables would be wonderful. I just got through turning my site pink for the Pink for October campaign which is to bring attention to Breast Cancer Awareness Month. A few variables would have made the process much easier. Especially if I could define a variable for the border color. Search and replace didn't work in this case because there were some items of the border color that I didn't want to change.
Maybe someone can or has written a CSS preprocessor that would allow you to use variables in your CSS. Does anyone know of such a beast?
Tanny,
To answer your question, one way is to use the method suggested by Chris J Davis, although I'm not a big fan of having server-side code in the CSS; a good read is also the discussion in the css-discuss list about this.
[…] ility been taken too far? Accessibility follow-up Let’s talk about accessibility CSS shortcomings Stackable CSS columns The six species of Information A […]
[…] ember 13th, 2006 at 12:22 pm
A couple of links with some relevancy to CSS3: CSS Shortcomings: Why CSS2 isn’t perfect for layout, and what’s in the CSS3 s […]
Well, little late means too late, right? – In fact, I most urgently needed to add that problems 1 and 2 can already (though partially) be addressed by <code>display</code>'s <code>table-cell</code> value. But the comments seem to cover all essentials yet… so don't mind 😀
Jens,
Yes, except for the lack of support in IE… 😐
And, although late, thanks for your comment. 🙂
Yeah, that's what I meant with "though partially"… And of course, you're welcome 🙂
I'm confused about the multi-column layout. I read somwhere (forget where, it was awhile ago) that this is really meant for text and not to do page layouts. This would allow text to flow across multiple columns (like a newspaper or magazine format).
All of the examples I can find on a quick search seem to imply that this is the case. Is it not? I have looked at the spec and while it seems that it could be used for page layout it seems that a) that's not what it's meant for and b) the display-model properties seem to have more potential for page layout. I think this confusing terminology is going to cause some problems when this is implemented.
Megan,
I think you're right. I guess <code>dislapy</code> and the CSS3 Advanced Layout Module are more suitable. Their names can indeed be confusing.
[…] sitios 100% en flash no son indexados por los buscadores, no son accesibles. Robert Nyman: CSS shortcomings Lo que le falta al CSS y lo que se viene Adaptative Path: So You Want […]
[…] tle into what your options are and what the future holds. http://www.robertnyman.com/2006/09/06/css-shortcomings/ Art. 2 » CSS Frames v2, full-height af Roger Johansson Way back in August of 2003 I wrot […]
I confirm Robert's list of shorcoming, to have stumbled on them only after designing a handful of CSS pages.
For instance I wanted to make a small box (a div) with two columns of equal width. Only way to do this (working with every browser): each column is a div with position:absolute, width:50%; height:100%. But if so, the containing div has no height, and the contained divs have a fancy height… There should be a mean to specify a width-position: absolute, for instance. Or use a CSS table system.
About fonts, it is not true that we can position text with a pixer accuracy. Simply because the font can vary (especially in dynamic pages).
[…] ut screen readers and ‘display:none;’ CSS shortcomings
Un commento è stato inserito per […]
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
Css Link Exanmples 1
Css Link Exanmples 2
CSS itself is not the problem, it's the standardisation among browsers that's causing difficulties.
Seems like the web site doesn’t display correctly on a Palm Pre 2. Are other people having the identical issue ?
Nice article by the way.
I was wondering if CSS3 will solve all the problems?
or with a combination CSS3 with HTML5?
Thanks for sharing
tom,
Not much, really. There are a few layout options and multiple background images are now supported, but that’s it.
Five-and-a-half years have passed since this post was originally made and little has changed. The CSS3 multi-column spec seems to be intended for creating newspaper or magazine style layouts where the text is distributed among multiple columns and not for layout.
It is extremely frustrating that there is no ability to create equal height columns using CSS. This would NOT be difficult to do. This is something that *should* have been included in the standards 15 years ago. It could be done in CSS. Something like a column container property and column sub properties or something. The columns would line up side-by-side in the container without any need for floating and all columns would be the same height, equal to that of the tallest column (and of the container). Margins could be applied to the columns to put space between them, which is not possible using display table and display table-cell.
But nothing has been done. The web standards people have done nothing about this critical shortcoming. What’s wrong???
Personally, I think we need to MAKE SOME NOISE and put some pressure on the web standards people at W3 to include this in a future version of CSS. As someone who makes web pages, an easy way to make equal height columns for layout would be a true blessing. Do a little searching and see how many people have tried to come up with clever tricks to approximate equal height columns. None have actually done it.
Sure, if we pressured W3 to include something like this in the web standards, it would be 5 – 10 years before browser support was wide enough to use. But some of us were making websites 5 years ago and will be 5 – 10 years from now. We need to get the ball rolling.
What do you say? Let’s start a campaign to pressure the web standards people to include an ability to create equal height columns for layout (plus the ability to vertically align the content of those columns). You and me and other people can make change if we work together.
Another avenue that could be tried would be to lobby browser vendors to include such functionality. Sometimes features get included in browsers before they become part of the CSS specifications. If we could get a browser maker (I use Opera and made such a post over there recently) to create a proof of concept, maybe some other browser vendors will take notice and include the equal height column functionality in their browsers and the web standards people will take notice.
The lack of equal height columns and the lack of an ability to vertically align the contents is a glaring deficiency in CSS. A deficiency that should be rectified now, not 20 years from now.
Shall we start the campaign? Let’s make some changes.
It looks like equal height column ability may finally be on the horizion. From W3.org:
http://dev.w3.org/csswg/css3-flexbox/
Editor’s Draft, 7 February 2012
As an added bonus, the columns will all be equal-height by default, and the main content will be as wide as necessary to fill the screen.
It’s about time.
Cheesedude,
There are coming things to see to it, though – like CSS Grids.
When it comes to Flex box, I wrote about that a little over a year ago.
So, things are happening, but I agree, I would’ve liked to see it a long time ago.