CSS is certainly an improvement on plain old HTML but it’s limitations are staggering and the lack of industry support will continue to hold back designers for many years to come unless we begin to build and design something better.
- For all that CSS has been able to do it’s a technological failure. CSS just doesn’t work as expected. How can I say it’s a failure when millions of sites use it? CSS can be used to style basic text attributes but browsers aren’t consistent in how they use this technology. Even though there is a “standard” and some browsers partially adhere to the standard to truly be a useful standard you need two things: Predictability and Consistency. CSS has neither. Any designer who has tried to create a large and complex site using CSS will tell you that all popular browsers interpret the standard differently.
- CSS is ‘markup centric’ not ‘design centric.’ I have this idea that designers should spend more time designing great looking sites and less time fiddling around with markup tags and browser compatibility. When I say ‘markup centric’ I mean that every CSS design tool forces users to go into source code mode to create an attractive modern site. Many designers take pride in hand coding CSS. Tools for designers should be design centric. PDF/postscript is a good example of a design centric markup , (unfortunately not very suitable for the web.) Designers don’t argue about how to create semantically correct postscript tags they just create great designs using great design tools. CSS sucks because it forces designers to think about how to make it work technically rather than how to make it work from a design perspective.
- Why on earth do we think that cascading is a useful feature? The way that styles cascade from one level of layout to a deeper layout makes it difficult to figure out why a particular item is styled in a certain way. By contrast non-cascading style sheets would be equally powerful and more predictable. The cascading makes it harder to interpret the page for both the designer as well as the web-browser. In fact the complexities in cascading is one of the reasons why so many browsers screw up the standard. In theory cascading could save bandwidth but in practice it creates bloated documents to get around the cascading issues.
- The box-model is too simplistic. The high level idea of CSS is that you can create attractive pages using margin, border, padding and content attributes. While this is a nice theory it’s primitive in it’s understanding of both layout problems and design. Highly developed design tools have layout engines that offer multiple layouts, non-rectangular margins, proportional layouts, dock-able layouts, table layouts, column layouts, etc. etc. It’ll be years before these features make it to CSS and many more before browsers implement them with any consistency. If browsers keep spending so much time on CSS they’ll have a well polished turd. Tools like Aldus Page Maker had better design tools, font tools and layout capabilities 10 years ago. This is because good design tools start with the design, not the markup.
- When writing software you learn what works and what doesn’t. You get new and better ideas and you throw away the old ones. This process of starting fresh is absent from the current CSS way of thinking. Each version of CSS builds on the previous one without acknowledging any fundamental flaws. CSS and its HTML sibling are the ultimate designs by committee. Any enhancements to CSS/HTML are piled on top of the old standards. This makes it progressively harder to create powerful, compatible and consistent browsers. This also makes it harder for designers to create sites that target the new platform because they are constantly trying to satisfy the compatibility with older browsers. Version compatibility has to be all or nothing. If you support V3 it has to be 100% supported and tested. Supporting some of the features actually makes things worse.
- There shouldn’t be multiple right answers for a visual design. The way CSS works there can be many ways to do the same thing. In fact there seem to be endless debates about the proper way to hack together trivial things like rounded corners. Rounded Corners? I mean really! Again I refer you to Aldus and even MS Word circa 1997. These features are not that hard to develop but getting them to work in a “standard way” seems to be all but impossible.
- CSS captures styles not semantics or design intention. A design intention would be something like: “I want to balance these two columns” or perhaps “This text should line up with the logo image in the first column.” When designers do things like this:
#content{position:relative;top:32px;left:20%;width:40%;}They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design. This concept helps embody the design intention as a set of rules that can then be preserved as the design changes. Even a very simple parametric design allows you to preserve design intention rather then hard coding sizes and dimensions.
- Design should be declarative not interpreted. Again CSS has to process a large number of rules before it can figure out where things are supposed to go. After these rules are interpreted this data is thrown out and each and every browser that opens up the web-page has to re-interpret the data. This is incredibly inefficient. First of it makes web-pages load very slowly. Even when you’re on a fast connection the browser can’t figure out where to place objects until the entire web-page has finished loading. Secondly this interpretation is very prone to errors. A declarative design isn’t open to as much interpretation allowing it both render quickly and consistently.
- CSS is a pain to work with. Take a look at some of the designs over at CSSZenGarden. The designs are both attractive and sophisticated. A good designer could take these designs and mock up similar designs in PhotoShop or Illustrator in a matter of hours but take the same designs and ask for it in CSS and it may take a couple days. Each time you make an edit to your CSS you have to refresh your browser to see what it’s actually going to look like. Then after you get one browser working you need to double back and get the other browsers working.
- If you can’t get consistency across browsers then you can’t rely on CSS to accurately and properly design your site. If you can’t get the site to look exactly the way you want on every single browser then how can you claim that CSS is a good design tool or even a success? The fact that there is no alternative to create attractive websites doesn’t make CSS a good tool. There are two ways to solve the problem. The first is to continue to hammer on standards and CSS asking for a better solution. This has been happening for the last 10 years and it just doesn’t work. The alternative is to realize that CSS is flawed in it’s intrinsic design and begin to ask the questions of how could you do it better?
——–
Archived comments from the original posting
39 Archived Comments:
Chris Moritz said…- Well put. Someone had to say it.Not that I’d recommend heading back to table-land…
*sigh
Jordi S. said…- Greg, I think the problem is not exactly CSS but the lack of good CSS tools; advanced CSS editors should manage cascading, consistency, etc.Yes, editing CSS “by hand” is really painful, but no more than editing an image pixel-by-pixel; that is what tools are created for.
And about this:
—
“If you can’t get the site to look exactly the way you want on every single browser then how can you claim that CSS is a good design tool or even a success?”
—
Ups, “to look exactly the way you want”? That is not what a web site is for. What about usability and accesibility? Users should be able to change font size; and they may have big or little screens; or … If you want control what users exactly see, give them a paper-sheet.
Greg Raiz said…- Jordi S. – The lack of a tool is certainly a problem but Adobe/Macromedia is quite capable of creating high-end design tools. The reason that HTML/CSS is a disaster isn’t because Dreamweaver isn’t a good tool, it’s because it’s trying to design a tool around a technology rather then creating a great design tool then figuring out how to express that freedom using technology. The formula is backwards, it’s markup centric and that’s the flaw.The web is for creating designs that look exactly as designers want. Don’t believe me? Just take a look at any high-end site like espn, msn, yahoo, abc, nbc, microsoft, apple, dell, amazon, etc, etc. All these sites are all designed down to the pixel and they all care about usability and accessibility. It’s not a trade-off you can have good design, accessibility and usability.
The problem is that it’s a an enormous pain with css.I didn’t touch on accessibility but let’s call it a potential #11. People abuse css by turning lists into hover menus, fixing font-sizes so they don’t scale when the font increases and all sorts of other tricks that are totally not-accessible.
Jordi S. said…- Greg;
well, I use Dreamweaver and let me tell that it’s not ‘great’ editing CSS. It’s probably better than any other editor, but there’s a lot of things that could be improved (although it’s a hard hard work).Sorry, I don’t exactly know what you mean by ‘high-end site’ (poor English, you see), but let’s take the model-for-ecommerce one: Amazon.In Amazon users can change font size, the design ‘flows’ depending on screen-size, … Well, if you mean that designers want exactly “an usable design”, then I agree with you
But Amazon is not controlling design to the pixel (and they are doing right!).Yes, you’re right: CSS may be wrong used against usability. But… it’s powerful, so it’s dangerous (as nuclear power is).
So I won’t say CSS sucks… No more than some tools suck, or some designers suck. CSS simply is not perfect
Ross Johnson said…- “The web is for creating designs that look exactly as designers want. Don’t believe me? Just take a look at any high-end site like espn, msn, yahoo, abc, nbc, microsoft, apple, dell, amazon, etc, etc. All these sites are all designed down to the pixel and they all care about usability and accessibility.”Most of those sites are fluid and/or scalable sites. When you start designing sites that look differently dependant on browser/text size you are far far from pixel perfect design.
Every time I read posts such as this there always seems to be more of a “frusteration” than a good understanding and criticizm.
Your proposal to design a tool around the technology is a bit unrealistic. Shall we just convince all browser makers (including the ones that can’t even get CSS right) to just adopt a new technology?
Oh but wait, there is flash – and flash has it’s share of problems as well.
Once you get the hang of CSS it all makes sense and it is not frusterating anymore.
Mike G said…- This is a very, very good article. CSS is a disaster.
Montoya said…- Sorry Greg, but your post only shows how little you understand about the technology and the implementation of it, as well as the nature of the web and information exchange. Your “design centric” view of web design is limiting you and preventing you from adapting to a technology that offers improvements, not setbacks.It’s easy to argue about problems in any language, be it programming, markup, or a description language like CSS. Your post sounds very similar to an inexperienced programmer having trouble with the intricacies of the C language or someone who has never dealt with OOP before and encounter Java for the first time. If you had the experience, you wouldn’t blame the tool, but rather you would recognize that all of your complaints are the fault of both the implementation and simply the young age of the technology.
As a junior educator contributing to a college course with over 100 students learning CSS based design (as well as PHP programming), I can assure you that CSS is neither hard nor painful; if 100 students can learn it every year, and produce highly flexible, lightweight, and attractive designs with it, then maybe you just need to go back to school (and I say that without intending to offend you).
Greg Raiz said…- Montoya – Sorry but I do understand CSS, Java, OOP, C++, PHP and other languages. I don’t consider myself a CSS guru far from it but I do know the technology well enough to know it’s flaws and limitations. I’m also pretty familiar with it’s implementation having worked at Microsoft and having worked on a project for Firefox.I know that it is possible to create great looking designs in CSS. That’s not the point. The point is that creating these great looking CSS sites take significantly longer in CSS then in most other design tools even if you are a Guru.
I can design something for print production in roughly 1/10th the time it takes to design something for the web using CSS.
The fact that you are blaming me for not understanding is just funny. Your own portfolio proves my point:
html { font-size:100.01%; }
As a designer you shouldn’t have to fight the CSS and the browser to get what you want.
Montoya said…- greg: If someone came to you with a rant about C and all the intricacies of it, and posed those as problems in C and complained that something new and better is needed, you probably wouldn’t waste much time with them, but simply explain that if they understood the language better they would understand the how and why for everything.I never said you were not an expert in everything *other* than CSS, but my point still stands: you don’t know much about CSS. For people who learn it (and I can tell you, it’s not hard to learn when you have a good teacher), the development time is significantly less than what could ever be achieved with tools like Dreamweaver or Frontpage. Time spent fixing bugs, on the other hand, is not the fault of the technology but the fault of a certain browser which is 8 years old. Anyone in the software world knows that 8 year old software is very difficult to deal with, and blaming a new technology for problems with outdated software is putting the blame in the wrong place. An example like:
html { font-size:100.01%; }
wouldn’t be necessary if it wasn’t for IE 6 being so common, but who do you blame that on? The W3C CSS group, or Microsoft? Mind you, it’s a bug in Microsoft’s software. Maybe that will help you shift the blame in the right direction.
You said: “I can design something for print production in roughly 1/10th the time it takes to design something for the web using CSS.” Will your print design scale to the user’s window size? Will it allow the information to be used by multiple user agents (machines as well as humans, including humans who access the web in alternative ways rather than just visually)? Will it offer multiple styles? Will it be easy to modify in the future?
Or are we comparing apples and oranges?
The truth here is you don’t understand the web. You understand print design, and client side software, and even browsers, but that doesn’t give you any knowledge of how the web works. I still challenge you to really learn the medium, the technology, the research and the philosophy behind modern web design practices and why things work the way they do. If you did, you would understand why “problems” like cascading are actually features, and why this new way of looking at websites is a step ahead, not behind. Until then, you are entitled to your opinions, but you have no credibility to back them up.
said…- I 100% do not agree with you.
Greg Raiz said…- To those that don’t agree…I don’t mind that you don’t agree. The fact that there seems to be a range of opinions means I touched on something that is perhaps partly true. I doubt that I’m 100% wrong but I’m fairly sure I’m at least partially right
Counter all 10 of my points if you want. Explain how a markup centric
language is better for design. Explain why consistency is not a problem. Explain why cascading is a good thing. Explain how things like CSS hover menus are a good for accessibility.Go ahead and convince me. I’ll try to keep an open mind.
Scott said…- Nice job stirring the pot Greg. Hope it gets you some business. I’ve taken the time to
rebut your ten points on my own blog (not trying to spam; I felt it would get a bit long in the tooth to do it in your comments section).Mr. Montoya is corrent. You have a limited understanding of the medium. (Oh, and his website kicks ass.)
Greg Raiz said…- Scott, good comeback.I didn’t write it to be provocative. I think CSS limits what designers can do. I see these limitations everyday. There are many designs that are difficult to do in CSS but there are others that I have found impossible.
I believe CSS limits the creativity of designers by imposing technological constraints on visual designs. This may be because I come from a print background but that doesn’t change the fact that I still feel limited.
While CSS can be incrementally improved I personally think it’s important to think about how to make large improvements rather then incremental ones.
said…- These are very valid points. I’ve actually seen people praise a website redesign that was nothing more than a small menu, background gradient and an input box on the page. I think there is an “elitist” attitude when it comes to table-less CSS sites that is getting in the way of advancing this technology. If you speak up about the problems with CSS and how you have to learn all these hacks and tricks to get a somewhat usable site, you get the typical answer that it will get easier in time. How long do we have to keep waiting? The reality is that most people don’t have time or patience for complex workarounds. Designers and developers should demand better.
said…- CSS is merely a means to an end, and the best one for the way the WWW is supposed to be at that.CSS has nothing to do with design whatsoever IMO, and thus shouldn’t be judged by design.
Also, it is very easy to make your website look the same in all browsers.
said…- And your alternative? You’d prefer to use tables?CSS is a standard, which all browsers (with the exception of IE) try to adhere to. As they get closer to meeting that standard (like Opera9, the new Firefox 3 (Gran Paradiso), the ability for code to be handled identically across platforms and browsers is getting better.
Of course, IE is and always will be the exception. While it is consistantly behind the other major browsers, support is slowly improving.
The point of the internet has evolved to be a source of information and entertainment that is widely available to everyone, everywhere – be it on a cell phone, by a visually impaired person with a braille keyboard, or your average citizen.
The internet isn’t a newspaper. You don’t have absolute control over what your viewers see. You seem to miss the point that the fact your viewers ultimately have control is the benefit of the internet – it’s customizable by individuals to meet their needs. If they need the font size larger, if they need to lower or raise the contrast, or they can’t see and they can have a browser speak to them.
CSS isn’t the be-all and end-all of design – you’re correct. If you want a design that aligns down to the pixel and has the perfect colours on every monitor/browser/platform, HTML is not your best bet to start with, and NO interactive language with the flexability of HTML could do that anyway.
HTML and CSS are easy to learn, cheap on bandwidth, viewable in every browser made in the last what, 6 years, including PDAs/cellphones…
What is your alternative?
Phillip Ryals said…- Greg, as I read your thoughtful list, I came to the same conclusion that Montoya has voiced… that you are essentially a print designer who might not fully understand the web world.I absolutely agree that web design using CSS is horribly lacking from a design perspective, but just because it doesn’t give a designer a WYSIWYG interface doesn’t mean it sucks.
You push the idea that ‘something better’ should be created, either by fixing CSS or replacing it outright. I challenge you… how would YOU create this fictional superior method of describing a complicated design using RAW TEXT?
You see, from a designer /and/ programmer’s perpective, CSS is a very good tradeoff. No, I can’t draw a few boxes, apply some drop-shadows, scale some fonts, and see the results in a web browser. That’s life. Vector graphics for the web has been tried before in many many ways (anyone remember the Xcalibur BBS?) but it’s never taken off because it still requires more processing power than just rendering raw text.
The point is, you’re not going to get an easy-to-use method of creating complex designs. They’re complex, and so the method for creating them is complex. While CSS rendering isn’t predictable across all browsers (NOT the fault of CSS), it does indeed make many things possible that would otherwise never work.
Dean Hall said…- Clearly CSS is not perfect. Greg touched on some good points like cross-browser compatibility. I certainly agree that CSS does not offer me and my clients a complete solution. Frankly, I don’t give a damn if it helps anyone else or not – I’m about getting my projects completed.I still use CSS, but I note the fact that it doesn’t work the way I need it too. Ie. When I design a site using CSS, I have no assurance it will look and perform the same across browsers and technologies. I t goes some way to this though, and I still use it. But I still use tables for some projects too.
My rule of thumb is “Consistency, Consistency, Consistency” when it comes to a GUI. Neither CSS or anything else gives me an assurance of that. So I do what all developers do and I do whatever works. If CSS works for a project, then I use it. If it doesn’t look like it will, I use tables.
I thought this was a good article, with some valid points.
said…- CSS’s strongest argument is only its swarm of fanboys. At least with tables, when I resized my browser window, it didn’t break a site’s design or make it completely unreadable. It kept the content locked in an accessible place. It says a lot about CSS when Photoshop’s table slice-generater, though it creates nightmarish html – it can autogenerate readable code and looks the same on every browser. If CSS can’t even claim what the joke “Adobe Photoshop’s HTML” could accomplish, it’s simply pathetic.
said…- Totally agree with what Montoya is saying, nothing to add.Greg I just want to ask you what if I told you that Quark will no longer be supporting style sheets? Would you be ok with that? Even if you were working on a 120 page document? I’d be pissed, just like I would be pissed if they took away CSS.
said…- All these people repeating that Greg’s a “print designer who doesn’t understand CSS” just don’t get it.They have adopted themselves to the css mentality, instead of adapting the technology to design needs.
Most miss the point altogether, like:
Greg I just want to ask you what if I told you that Quark will no longer be supporting style sheets? Would you be ok with that? Even if you were working on a 120 page document? I’d be pissed, just like I would be pissed if they took away CSS.
This is irrelevant. Greg has not talked against the general idea of stylesheets, he talked against the CSS concept and implementation in particular. His points are specific and razor sharp, and could be used in designing a BETTER stylesheet language for the web. Like this point:
CSS captures styles not semantics or design intention. A design intention would be something like: “I want to balance these two columns” or perhaps “This text should line up with the logo image in the first column.” When designers do things like this:
#content{position:relative;top:32px;left:20%;width:40%;}They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design.Right on!
And since a lot of web pages nowadays are “web apps”, are you “css people” familiar with actual programming for GUIs? If you know GTK, QT, Java or what have you, they all have MULTIPLE layout models. CSS only has one, and a cripled one at that, the box model. A single model cannot solve all needs. (btw, almost all languages offer a table or grid layout manager, without sacrificing “fluidity”).
Some points:
a) The concept of styles is correct. It’s CSS that has it all wrong.
b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).
c) A lot of stuff should have been built in, in CSS and HTML and easier. Rounded corners? Blow me, just have something like:
#box {curve-top-right: 20px }
or have a way to define such effects in code blocks and share them.
etc…
said…- I partially agree. But at the same time, a number of the problems I have personally faced with CSS is browser compatibility. But I really can’t blame CSS for this; it is the browser’s fault. If an alternative to CSS came out, the browsers are still capable of fudging it up and making it difficult for the designer.I would say CSS could be better, but I would not say it sucks entirely. For every language, there are flaws and limitations and drawbacks. I can’t really appreciate the suckiness of CSS, or the lack thereof, until there are more alternatives to choose from.
Nick Presta said…- c) A lot of stuff should have been built in, in CSS and HTML and easier. Rounded corners? Blow me, just have something like:#box {curve-top-right: 20px }
Oh, you mean like CSS3′s border radius property?
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
said…- “b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).”Or you can learn what cascading in CCS means and how to implement it.
said…- It says a lot about CSS when Photoshop’s table slice-generater, though it creates nightmarish html – it can autogenerate readable code and looks the same on every browser. If CSS can’t even claim what the joke “Adobe Photoshop’s HTML” could accomplish, it’s simply pathetic.Photoshop’s supported CSS slice-generation for a while now.
Web sites I build using CSS positioning for images are a lot more readable and maintainable than those I used to make using table-based layouts.
Greg Raiz said…- To the previous comment. even if you know CSS this still doesn’t address the lack of parameters. You can work around some of this with cascading classes but it’s not a great solution.a declarative approach would have:
$logoh:120px;
$smallMargin:3px;
$largeMargin;10px;
.logo {height:logoh;}
.titletext {top:logoh+smallmargin;}I’m using the $ show how you could declare a parameter/variable. This is still declarative so it’s not an ideal solution but at least it demonstrates how parameters could allow you to do things that are difficult or impossible to do via traditional cascading.
said…- @Anders said…“b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).”
Or you can learn what cascading in CCS means and how to implement it.
Erm, cascading != parametric.
In the case I describe, for example, who told you that the 200px always refers to the same attribute (like width?). It could 200px of width for this element, 200px padding for the other, et al, used for implementing a consistent grid.
Or I could want a yellow background-color in one item, and a yellow foreground in some text or a yellow border in another. Cascading does not offer a way to define all these cases depending on a single color definition.
—
foljs
said…- Well, Greg, in truth, it’s the entire technology of the web that sucks.Your comparison to Postscript and the evolution of Page layout programs is spot on.
HTML, CSS, Javascript and all their evil offshoots are a result of:
* an inadequate and limited initial definition of the “web page” problem domain
* a crude, fatally flawed but simple to use initial technology (HTML)
* which lead to designers and programmers crufting up a mind boggling array of workarounds to fill the gaps (Tables and Spacer gifs)
* which spurred a belated attempt to redefine the underlying technologies by rigid academic edict mainly by non-designers (Cascading Style Sheets, XHTML, Widespread Deprecation)
* which was anyway largely undermined by the piecemeal and incompetent implementation of the new technologies in browsers and development tools (all of them)
* which is now all welded into place by the network effect, endless inert committees and monopolistic self interest. (Welcome to the Great Leap Backwards)
We are stuck with a kludge built on a kludge until we have a disruptive technology.
And Flash wasn’t it.
said…- HAHA!!! Disable CSS and take a look at this page! If this site doesn’t show how great CSS is, then what does? All you see is a perfectly fallen apart page, just like you should see with a CSS site. Just take a look at the source.
Greg Raiz said…- bjk2007 – Just because you ‘can’ make a site work with CSS doesn’t make it a good tool. The CSS for this blog came straight from Google’s blogger tool (2006). It’s full of all sorts of silly things that show just how hacked it is,Yuck! Yes there are certain things that CSS can do well, and it’s certainly better then plain old HTML of 1996. But as a generalization, it still sucks.
said…- First off, I’m sorry if my last comment was a little offensive. Tables vs. CSS is a controversial web design topic. I came across this blog entry following the post of a member of a web design forum. Let’s just say he can act really stupid sometimes and I came here pretty upset after being personally insulted by him.
I did take the time to read it again after I had calmed down. I would have to say that while I disagree with you on several points, I do agree that CSS hasn’t done as well as it should have. Why? Simply browser support (IE). If we can’t get them to support CSS, how can we ever assume that they’ll support the newer and better theoretical CSS replacement language?
I guess the rest of my disagreements with you lie in a coder/designer mentality. You seem to be more of a designer while I’m actually a person whose strengths lie in coding, so we’re bound to disagree on how things should work.
said…- You all must be joking. CSS is without a doubt the future of web design. WHY because css is exactly what xhtml needs to work and xhtml is going to be the future. WHY because it is (finally) a consistent DOM markup that will be able to be used by many varying systems.
IN PLAIN ENGLISH:
Not Microsoft, Netscape, Mac whatever can stop a standard being created, fact is those “browser companies” don’t make websites or web application (well they do make some) and developers NEED a standard so they aren’t writting 12 different lines to support 12 different venues. With these 2 standards (CSS2 and XHTML) we will have easier to maitain websites, portable applications, accessibility features for the blind/hearing impaired and about a million other applications.
SO TO ANY NEWBIE DO NOT LISTEN AND MAKE SURE TO USE CSS2 AND XHTML IN ALL FUTURE PROJECTS
said…- The CSS Design When it comes to a fulfledged dynamic site it has more cross browser conflicts which are not easy to fix.
said…- AMEN BROTHER.
CSS is terrible. I’ve spent countless hours learning it and no matter what, the results are different from browser-to-browser.I can’t stand learning it, but at the same time I love the way some of these Css-driven sites are put together. I think to myself “I want that!” But it never happens. CSS is driving me insane. It always will drive me insane. Has potential, but it sucks.
John Nagle said…- You’re absolutely right.With Dreamweaver 3 and tables, it wasn’t necessary to look at HTML to lay out a page. With Dreamweaver 8 and CSS, the page designer must understand CSS, HTML, and probably Javascript. That’s was a big step backwards.The CSS system is just too programmer-oriented. And I’m a programmer. (Programmer as in MSCS from Stanford, the Nagle algorithm in TCP, inventor of ragdoll technology, real-time robot vehicle control, not programmer as in “writes some Perl”. And my first web site went up in 1995.) It’s not that CSS is hard; it’s that CSS is bad.
CSS is, simply, a badly designed layout system. Even the rather simple system in Tk which lays out dialog boxes and windows is better. Tk is a nested-box system, but both “pack” (like CSS “float”) and “grid” (like tables) layouts are available in the same system. This is enough to handle most cases. Which “float” and “clear” are not. Page layout is forced to fall back on absolute positioning far too often.
The clever way to do layout would have been with a constraint system. Each box has four edges and four corners, and it would be possible to bind corners and edges to create any desired relationship between boxes. This is something one could express easily in a click and drag graphical tool. Want three columns the same height? Tie their adjacent bottom corners together.
Want to fill the page? Tie the outside corners to a page edge. Ten minutes to explain to an artist. Advanced use would involve priorities on constraints, so if something had to give in “fluid design” as the page size or type size changed, you could pick what gave first. (This could be extended to allow curved boundaries, even splines, but that might be overdoing it.)The browser would have to have a constraint engine to resolve all the constraints, but there are known solutions to that problem.
Too many people drank the Kool-Aid on CSS. It’s just not that good a technology.
frostbyte said…- You missed the biggest problem of all. CSS dogma. We’re now at the point where questioning CSS is no longer politically correct. Just look at the anger in the replies. (Especially Scott’s. Check out his blog, you’d think you just insulted his mother. Warning: Horizontal scrolling)If you question CSS at all, you’re immediately laughed off as just another unskilled newbie who doesn’t understand, or some old timer who can’t get past tables. Even half the people who agree with you felt the need to clarify that they only agree with some points, “please don’t think I’m in the same camp as the anti-CSS crazies”.We’ll never get past CSS because it somehow became dogma and you can’t question the dogma.
John Nagle said…- The worst problem with DIV-based layout is that the layout system is too weak. There’s no form of “grid” layout. There’s no way to relate a DIV to anything but its predecessor, its parent, or an absolute position. The system is just too dumb. That’s why people have to stand on their head just to get three columns to work.Tables actually are a better designed layout system. Table layouts allow table cells which span multiple rows and columns. If all tables could do were simple grids of cells, the CSS approach might make sense, but tables are more general than that. And they’re well supported in Dreamweaver.The fundamental limitations of DIV-based layour are obscured by an excessive number of attributes and the occasional use of Javascript when the attributes aren’t enough. But underneath, the fundamental approach is just too weak.
If CSS had a grid capability, it wouldn’t be so bad. But it doesn’t.
said…- Greg – thanks for this spot-on article. After working the Web for 10 years, and still struggling to get decent CSS layouts that work with php includes, I was beginning to feel that I was getting stupid in my ‘old’ age. In fact, CSS is far less intuitive than our previous nemesis (Tables) and especially difficult when you introduce any “includes’ into CSS design layout. And on this note, Dreamweavers Layer layouts only work when using plain vanilla .html files. Try making absolute layers stick in place if you use includes with Dreamweaver layer layout – a hair pulling exercise that forces one back to Tables very quickly!
said…- Whether you like it or not BROWSERS and specially IE mandate what we use in the market. Check the logs of your web servers and then disagree with that.Read this http://www.mcsr.olemiss.edu/~mudws/font.htmlI was part of the workgroup for CSS and what we tried to do back then has nothing to do with what people fight about today.
It was about separating format from markup to create data semantics.
Greg you are right on the nail. I wonder how many of these so called “CSS Designers” have the BIG profitable accounts.
Can you make the money with CSS on these sites using CSS, I dare you?
Look at these:http://www.cosmopolitan.com/
http://www.elle.com/
http://www.nike.com
http://www.adidas.com
http://www.faithhill.com/
http://www.motley.com
http://www.imandd.com/index.html
Go on, make one of these (CNN for example) using CSS no hacks, js, pure w3c css. Publish the markup as a test and let us see that you know your css stuff.
Montoya you are the teacher, or is css only for the graphics blind? Prove Greg wrong, go ahead and make my day.
CSS can not do what the tables and flash can here. Forget semantics, forget standards, come and visit me for a little while in reality land. Bottom line people, hard cold cash it’s what matters.
Montoya get off you high horse and do something about it. Rewrite the standards so is more workable.
Use what works, and if you can separate format from markup with css and if tables have to be used so be it and format them in your css.
Hello everyone, I’m the same person who posted on September 19, 2008. Anyways, I reluctantly changed my personal homepage to a tableless design. However, the change was not in vain; the size of my tabulated index.php file was 88.1 KB, and the size of my present CSS index.php is only 47.7 KB!!
Greg, you are spot on! Polished turd indeed!
Whatever happened to usability for developers and designers?
I guess there is one upside to all this. Without this piece of crap they call CSS, many of us would be out of a job…
…keep up the good work W3C! And MS, don’t worry about what they say. MSIE rocks!
lol this guy is a newb when it comes to web design AND CODING.
I can make a css tableless cross browser webpage work in under 6 hours.with NO CSS HACKS. and it works perfectly in FF IE6 And IE7.
photoshop, notepad++, autohotkey, brains. all you need to create a beutiful website.
can code 4x faster than dreamweaver.because of something called macros.
All your points are relative to you and how unwilling you are to learn something better and why it doesn’t work for YOU.
I can easily port the design into wordpress, joomla or make it a template for smarty.
cross browser compatibility is only an issue if you don’t know what you are doing.
while I admit that css isn’t perfect it’s a step up what we previously had.
“Once you get the hang of CSS it all makes sense and it is not frusterating anymore.”
“I can make a css tableless cross browser webpage work in under 6 hours.with NO CSS HACKS. and it works perfectly in FF IE6 And IE7.”
Bulls**t
Css will NEVER be cross-browser friendly until Microsoft goes away. IE sucks so bad and always will because it’s made by microsoft. Has anyone been testing their sites in IE8beta2? Funny how 4 mainstream browsers can display a site correctly but the f**k ups at microsoft can’t even conform to a set of standards. My hell they are stupid over there.
CSS layouts will never work on any browser period, as long as W3C doesn’t standardize essential features. It doesn’t matter if you use IE or not. And of the many problems that are Microsoft’s fault this is not one of them.
Hi Greg, I find it hilarious when people get so offended when YOU don’t like a programming language that they start attacking your abilities and knowledge. I feel for you.
Anyway, I have never designed a site completely in CSS because I can’t get it to work on all browsers. The big selling point of CSS is that it’s supposed to be more efficient, but when I have to spend several hours on hacks to make it work in Internet Explorer, it defeats the purpose. I have a friend trying to convince me to go tableless, but until Microsoft starts getting on the same page as everyone else, that isn’t ever going to happen.
CSS does suck, but it’s not entirely useless. It does add to HTML and let’s you do quite a bit more. I use it to enhance, but my sites certainly don’t center on it because I just don’t have the TIME to force compliance in all browsers. That’s the big word – force.
That’s my biggest complaint though. Cross-browser compatibility. Give me that and I’ll be a happy camper.
I appreciate the comments on CSS and certainly well founded but to insult HTML alongside at any point in a conversation about making things pretty is missing or misinterpreting the intention of HTML itself altogether. HTML was created to share information, not to make things pretty, and at its true task it excels as it always has done. It seems the difficulty arises when people become less and less concerned with the information and more concerned with how cute the visual is. The beast of HTML formatted e-mail messages (and the hideous tide of leaks and security holes that have poured over humanity because of or in connection with them) is a wonderful example of what can happen when a tool created by the minds of the world to share their information begins to seep into the control of organizations more interested in the money of humanity than the ideas of humanity.
But that is just from the perspective of someone who misses the early days of the Net and still values the communities online that keep their focus on science and information over the blogsphere and photobuckets.
Hilariously uniformed article and comments here. I’d recommend looking at the w3schools site if you need to learn.
“Each time you make an edit to your CSS you have to refresh your browser to see what it’s actually going to look like”
oh dear, lol.
W3Schools won’t teach you how to make elements stick to the bottom without violating their own principle of separation of style from content, an impossible feat.
Milly, I use Dreamweaver CS3 and Expression Web (recently). If I didn’t preview my CSS layouts in a variety of browsers, I’d never know whether my sites work. CSS layouts don’t display across all browsers as they display inside programs. But then again, I’m a real designer who works on real sites. I’m not a hobbyist or someone who likes CSS for the sake of it being CSS.
CSS still sucks, btw.
I have enough frustration with doing CSS by hand. I don’t want to even touch Dreamweaver. It’s only cracked up to deal with the same issues by the same kludges, anyway, which means even Dreamweaver’s code can be broken when someone decides to fix a bug in a browser. I wouldn’t touch it with a ten foot pole.
It seems to me that tables were good, not great, but a really good start. So instead of ‘fixing’ the tables and adding NEW features to tables, Tables 2.0 perhaps?
We took 10 steps backwards. Sure it’s the browsers fault but it doesn’t change the fact that designer/coder/whatever has to spend a lot of hours to display their artwork on a website… CSS isn’t bad, it has some great features, the idea of separating content from design is a fantastic idea and external style sheets..wow.. but look as its flaws! now the fact is that CSS exists and it will not be replaced. So it seems that some system to use the best of both worlds would be a step in the right direction. Designers don’t mind doing some work, but good Lord you shouldn’t have to become a programmer to display your artwork on the web.
I’m totally with you guys on CSS sucking. I’ve just rebuilt my company’s website from scratch, and I’ve got a little challenge for any CSS advocates out there:
http://www.accidentalscientist.com/2008/11/css-is-crap-sequel-trequel-trefoil.html
Replicate my new company site using ONLY CSS. The requirements are in my blog post. (I ended up needing to use CSS, Tables and javascript to get close)
I agree with you, Greg. The CSS fails to separate representation from content. Even if we forget about differences in browser behaviors. The notion of normal flow and out of flow elements make HTML author to think about *representation* first. Having column1, column2, column3 declared in HTML – how easy it would be swap column1 and column3 using CSS only? If we consider bunch of browser bugs then a HTML creator *has always* think about how CSS rules get applied and how differently they work in browsers. I have been writing GUI in C++ before switching to Web, and I’ve found that using constraint models for layouting is much more simple than flowing elements.
CSS fails at its own aim: to separate style from content.
Well, that would be why there are developers and there are designers. CSS isn’t meant to be representative of what we want to happen, its supposed to be a guide to the computer as how to display HTML elements.
Many designers struggle with it because it’s not their job to keep track of browser inconstancies or new methods for getting element X to display in a certain way. The idea is that a designer communicates what they want to happen to the developer and the developer translates that into a way that a browser can understand.
Oh, and it cascades so we don’t have to specify rule X 100 times over, which makes for smaller file downloads and more readable code. If you structure your CSS right then you should be able to read it and imagine the layout.
Thank god you spoke up! I’ve been in the web business for over a decade and I clearly know what I am talking about.
CSS is great but I find it to be grossly overrated and it often fails to deliver what it should deliver due to different implementations on different platforms. I am tired of “hacks” to make it work… barely!
On the other hand, using tables have ALWAYS proven to produce CONSISTENT AND PREDICTABLE layouts. And it’s a lot more intuitive as well. We don’t need hacks. It just works.
Also, when people talk about accessibility, do NOT believe it at all. Tables are extremely accessible even if you design it as layouts AND if you resize it, they are CONSISTENT with it. It’s like having a PDF – it scales so well. Try that with CSS, some elements don’t resize correctly and it looks incosistent. It just doesn’t look right. I know WHY they are built that way but it’s just visually disturbing.
All that talk about accessibility is hocus pocus – funny that they preach about accessibility yet they’re silent about AJAX which literally makes parts of the webpage inaccessible! I had tested blind users and found ZERO evidence that they were prevented from accessing table-based webpages. In fact, they reported that table-based sites are more readable (because CSS elements often overlap or scale poorly).
A well designed website can have a couple of tables for the whole page (like three columns layout) and use CSS for formatting. It is ALSO much easier to update CSS elements if tables are used as a layout. Try that with CSS – just a little mistake or just a little more text can cause CSS elements to overlap or move to the other side!
And I am tired of divitis and classistis. The goal is to simply, not complicate yet those CSS purists don’t get it. You can have too much of ANYTHING.
There is NO webpage with pure CSS that is rendered perfectly as expected on ALL browsers and scales so well compared to table-based layout webpage.
CSS just failed to deliver its promise. It just doesn’t work. People who say that people who argue against CSS doesn’t understand the Web. Well, that’s the problem – they DON’T understand the whole concept of predictability, consistency, and intuition. They don’t even understand how CSS can seriously make webpages inaccessible to those who have incompatible browsers. What if it cannot read the element and it “overlays” other elements? It would not happen with table-based layouts.
So, now it is almost 2009 and everybody got over that “table” thing. All the people that have been “a decade in the web business” probably forgot how much crap they had to learn to make table layouts work, now they learn CSS to do almost the same and got over it. The younger generation does it as natural as the old farts used to do tables.
The “Dreamweaver crowd” is of course still on the wrong track and produces styles without using the cascading features … Dreamweaver is a bad tool that leads web designers the wrong way since it came along.
However, CSS has its shortcomings, it could make things more easy. Many things that Greg stated are not valid, CSS just uses different techniques to achieve what is done differently in other systems. (For example, if you want some elements have the same width, you use their container to specify the width for child elements or you define a class that contains the width and combine classes in the elements.) Yeah, the box model is stupid, etc etc, but all this is much better than the CRAP that was before. It is almost a relevation like UTF8! Of course it is the least common dominator.
Plus: Just like with HTML, helper and meta languages appeared to fill the gaps: SASS http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html and HSS http://ncannasse.fr/projects/hss
I guess this is just the start.
Thank you so much for writing this. I thought it was just me losing my mind. I am a pretty smart person but I’m thinking of getting out of web design entirely because CSS just sucks so bad but Google expects it.
Thanks for clarifying my exact frustrations with CSS & web design right now. Applications that support visual thinking & intuitive/creative layout would be lovely.
I would like to also hear your thoughts on multimedia integration & codecs in websites – strikes me that this is also an area that has been de-evolving & becoming unnecessarily complex, embedding tool code acknowledged.
Generally, I still use a mixture of CSS & tables if it works as … well, who enjoys working 19 hours a day measuring water with a thimble?
Well, coming from a guy who’s new to web design, it’s a steep learning curve for me. I hate having to deal with coding on any level but I at least understand HTML code enough to interpret it. What I found with CSS, on a less technical level, is it really slows down the creative process. Seems like it complicates what should be less complicated. Now, I do understnd the logic of controlling layouts and styling throughout an entire site. But I’m way more focused on aesthetics. Maybe developers care about what code looks like behind the layout. But I doubt individuals coming to your site care. Hey, if the site looks good and I can find what I’m looking for, that’s all that matters to me. I do see how CSS can be useful in combination with tables though. Mastering CSS isn’t on my list of accomplishments in life. Creating something inspirational like an awesome site ranks pretty high though. I don’t need a huge barrier like CSS impeding me.
I’m going to jump on the CSS-sucks-wagon here.
1. I for one is does not enjoy writing duplicated code. It’s bad programming and the issue is forced upon us in CSS. Imagine writing a hack or hacks for various browsers (+ versions) which made the design compatible in some browsers (the ones you chose to support). Now what if you wanted to change the code? You had to change the code AND the hacks. Now imagine opening your project 6 months after developing it, would all the hacks and code look readable? Would it make sense? I doubt it.
Moving on.
2. Minus values for elements to display as you want them too? I mean, not only is it unlogical, unrecommended and WRONG (appearently wrong and right is accompanied by Mr. WHAT WORKS in CSS-based designs).
3. Writing alot of code for something simple. Vertically centering text for a block. You could put the block in an outer block and change the position values of both blocks, THEN set the “top” value to 50% in the inner block. Imagine doing that for a series of boxes, inevitably leaving you in a mess of outer and inner blocks which does NOTHING but center your text vertically. You feel like a complete moron doing this, but you have too. Unless you use tables of course (which I use myself, I can’t be arsed with the bullcrap in a tableless design).
My 2 cents for now, let the flaming commence.
Thankyou for telling the truth about CSS.
It is hyped up to be great but it is actually a real pain to design with.
It is the equivalent of teaching a Artist the chemical process in making his own paint and brush.
Designers and Artists want to Design and Create, CSS does not make the process easier, it complicates it with totally unnecessary code.
In Dreamweaver for example you can design a entire functional web page with barely touching HTML code, if you try doing that with CSS you will just get a long list of objects.
Bad comparison. Chemistry runs on one platform: the universe. And God is perfect. People can and do make mistakes, and CSS is one of them.
I’m not a CSS hater, but it’s hysterical to read some of these posts about pure, unhacked CSS layout that is cross browser/version perfect. Bullshit! It’s not long before you reach a level of complexity in pure CSS layout that the hackery MUST begin, conditionals, IE spoofing, div soup, etc… One CSS nut even uses the term “tiny hacks” as if that’s ok, LMAO. Consistent, cross browser layouts are easy with a solid table foundation. Sprinkle in CSS styling and salt to taste and you can get on with life and do something constructive without having to check/tweak/check/tweak/….for every browser/version.
The problem seems to be that almost everything we use the web for these days is a hack, in the sense that it goes beyond the original scope of the system.
The web began as a large, interconnected hypertext system. Sites like Wikipedia are the perfect model of what the web was designed for, anything beyond that has always felt a bit broken to me.
Trying to wrestle complex aesthetics and interactions out of html, using css, javascript etc. is awkward because it’s just adding more to what we’ve already got, rather than starting from scratch and re-evaluating what we want the web to do.
The web is dead, long live the web.
Hi,
Thanks Greg for what to me is confirmation that CSS is not all it’s cracked up to be. I found your blog article by using Google with the search terms “CSS is shit” A technique that I use regularly to find disgruntled users of some product or service.
I moved from Frontpage 2002 to Expression Web 2 and decided to take one of my client’s Frontpage webs with me. I was seduced by the glittering goodies. Unfortunately, I should have started from scratch!
The website works but only in IE.
One CSS forum I went to for help had some members who dogmatically insisted that I remove my code for a menu for which I had used DL (without the DD’s)rather than UL, rather than find the reason why the website didn’t work properly in Firefox- for example. So I have realised that it is not so simple to use CSS rather than tables. My Frontpage table based webs all work in Firefox.
Yes, css has problems, tables have problems, but the main problem here is that there is no alternative technology. How can there be? If tomorrow an advanced alien civilization descends from the heavens and imparts upon mankind the gift of a perfect web standard with none of the flaws of html, tables, css, flash and pdf, but with all the advantages… how long would it take for IE or even Firefox to support it?
Probably years. And who is going to make sites using an unsupported technology? And why then would the browser developers even bother including the support in the first place?
Seems to me we are locked into HTML/CSS until there’s a middle link which cleanly separates content AND design from the representation while providing the mechanism to render these back into html css flash or pdf for display on our current browsers or to the new standard when it is finally available. (Also it would be nice if it required no notepad.)
Actually, I do know how to do that – it involves servers, semantic object databases, and quite a bit of string.
p.s. if you haven’t caught on, string stands for money.
excellent article. HTML was easy to learn and that is why it became so popular. but CSS is a pain and is in wide use now because no other alternative exists and it’s better than using or tables.
For example, why on earth doesn’t css have a way to specify CONSTANTS. If I want to use a font color many places in my design, i have to hard code it many times or put it in one place with a zillion selectors before it.
I pray for either better tools or improved standards.
There’s a solution out there… it’s not ready for primetime just yet, but it’s FAR superior to the tangled messes of divs and floats that CSS geeks are churning out right now, all while trying to pretend that the messes they’re creating are
CSS tables.
IE 8 supports them, but not old versions of IE, so that means you’d be preventing huge chunks of users from accessing your sites if you adopted CSS tables today. But after some very preliminary experimentation, I’m totally sold. It’s a far more logical, reliable way to approach page structure than any other CSS layout strategy I’ve seen yet. Hopefully, CSS tables will save us all.
There are so many things to say, that i dont know where i should start from.
From the beginning : CSS is “supposed” to separate style from content.
What??? You mean, HTML is “content”?? Now, tell me what is a DIV,a SPAN or a BODY in the domain my information.Sorry, XML is content.Semantical web based on class names??That’s another dirty hack.
The semantical web is a relatively new needing that looks like we’ve to deal with with tools NOT designed for that purpose.
So, if what you’re looking for is for a truly semantical approach, go for XML/XSL.When you’re there, using tables or CSS is irrelevant.
HTML started as a formatting language, and now, at some point, they wanted to transform it to a “semantic” language,by pulling every thing from it, and adding it to CSS.In fact, HTML will end up having just one tag:DIV.
Then, they’ll call “semantic” one thing that comes with menus,ads,”last users who signed up”..
(not to talk about “wrapper divs”)
One of the most used arguments against tables is “they were not supposed to be used for layout”..A few points:
* The whole web wasnt supposed to be used to support AJAX-based websites.
* In the remote case floating was supposed to be used for laying out entire webpages, omg, those properties are all they come with?right,left and clear???
* Maybe that’s why they’re “tablizing” divs, adding table based displays.The fact this comes in revision 2.1 of the CSS standard it’s the proof how much it sucks.And how much the float model has sucked all the time.
* Because, if CSS was ready to ban tables since soo many years ago..Why this useless update?
* No, i guess the W3C didnt add any kind of support for table-based design for a simple reason:the table tag existed.
- Other reasons, like “bandwith” seems laughable to me.Yeah, that’s great in the “i-watch-tv-on-my-phone” era.
About “standards”:
- Half of those things called “standards” were “not-standard” at their moment.
- Should technologies like ajax sit there, be ignored until the guys at the W3C come up with a standard?Is that what users want?Or your clients?
- Now, if something isnt standard, is the nature of the http://WWW.The web nowadays has nothing to do with the WWW we had 5 years ago, not to talk 10 years ago.
- And if the WWW is not standard, what could be said about developing for the http://WWW...
- Please, ask the future to adhere to standards..
For me, the core of the problem is:HTML was designed for *formatting documents* (not for “describing content semantically”).The whole web was supposed to be that.Nowadays, they want to make it replace the desktop applications.And be semantic.And accesible.And multi-device.And pretty.And…all that, by twisting the technologies involved.
I could go on..and on..But i do like what Flash does:do you want a great looking site?Here is this tool, with its own language, development tools…What about languages other than HTML/CSS ?What is flash, if not just another parser?
Why did HTML get so quickly to version 4 and then stop there for 15 years? Version 5 is finally materializing, and it’s long overdue, don’t you think?
Good analysis! I come from print design and I learned html, then javascripting and css. I have to say that I spend the most time getting css to work, first to make it implement properly for Firefox, then to beat it into shape for IE. I know I’ll get better at it, but I have to admit – I like to draw boxes (and circles too!). Usually my pictures and text are laid out in some form of grid, even if I text-wrap. I want to create a CSS drop-down menu with graphical icons, have it fixed in place, scroll the text below the menu. What would take two hours in javascript takes me four to five hours in css. Bummer!
You can bet that Microsoft is failing to implement because they want a new standard that is easier to use. Unfortunately Adobe has the answer, but not the browser base to implement.
I like some parts of CSS when combined with tables.
The complaints about tables are unfounded though – too many designers forget that tables are containers and try to put elements in tags without putting them in tags – this is why tables mess up (forgetting the container rule) – which will display differently in different browsers. I wrote websites in the 90′s with tables (CSS never used for positioning) that always display correctly in browsers from NS 3+, IE 3+, FF, Safari, Mosaic, Opera, MAC IE. I’ve seen too many “high end” websites break using pure CSS when changing font size, browsing via an iPhone, etc. My ancient sites STILL work to this day using tables and look exactly the same in all browsers to date.
Once you realize the CONTAINER nature of TABLES, they will always display properly. Mind you, there are tricks involved to get both X and Y to stretch, but at least the tricks work in all browsers, unlike CSS where a “trick” requires javascript and sensing of the browser type or lots of redundancy.
The CSS spec was obviously created by people with no clue about computer science. Yes, I’am a computer scientist and I hereby confirm that CSS sucks. Badly.
Yeah, CSS has shortcomings, I get it. It can be frustrating and confusing to work with. OK.
A good half (if not three-quarters) of the complaints I see here are not complaints about CSS but about the problem that CSS tries to solve. If you’re asking, “why can’t it be as easy as designing for print?” then you’ve failed to understand the difference between a browser and a piece of paper.
In the print world, if I have to have two versions of a piece, one on US Letter and the other on A4, there is no way around the fact that I have to have two totally different designs. They may look the same at first glance, but all the measurements have to be rethought, proportions have to be refigured. It might not be twice the work of creating the design for one paper size, but it’s darn close to twice the work. And every subsequent paper size requires that amount of work all over again.
This is the Web. You don’t have any set paper size, and won’t until you find a way to force everyone to have the same size monitor and never use their iPhones or whatever. Good luck with that.
That’s why there is markup. The challenge is not to invent the one true design that cannot change even one pixel; the challenge is to create a flexible design that retains the information you are trying to convey in a flexible manner. You can call that “accessibility” if you want, but I think that marginalizes an issue that is central to what the Web is.
If you really want creating layout for the web to be as easy as creating for print, just make GIFs. Everyone will be able to read them. You can even make a simple HTML page with an image map for link clickability and call it a day.
Of course, it will suck because it only contains a visual representation of your information, not the information itself. If you want the information, you might consider a markup language.
And um… fer crissakes people, CSS is dead simple and predictable compared to issues print designers face like compensating for dot gain. If you think print design is simple, it’s because you’re diddling around with pixels on a screen while hiring teams of prepress/output specialists to fix everything you did wrong. If that’s the case, you might just as well diddle around with pixels on a screen and let a production team handle the messy details of making it work on the Web.
Would I like a language more like PDF or display Postscript for building websites? Well, sure, but it would still have to have a flexible box model with semiarbitrary hooks for object placement. And if you think coding CSS is difficult, just wait ’til you code PS/PDF.
I think that rather than scrubbing the stylesheet/markup model, we need to push for better support for independent vector objects like SVG, and better integration with the surrounding markup, like attributes for whether an object should be scaled if the browser window changes size and so on. It would be wonderful to start seeing SVG font implementations and the like.
Maybe I’m missing something, but I don’t think the solution is to throw everything away and start over, but to start building the parts that are missing. That’s an evolutionary process, but one that won’t happen at all if visually-minded people don’t participate in the process of developing standards. We have no problem with sending email to Adobe or Quark when something doesn’t work the way we want it to, but when was the last time you wrote in to the W3C with your suggestions?
Why are you using tables with css that just proves css is broken.
If browers have so much problem with css thats css fault . And its not just MS , Firefox had terrible problems with legends.
Interesting to compare Silverlight to CSS. I like WPF page layout and consistency ,if its a bit wrong it doesnt render thats good. The way it implements WPF does styles though is not that great.
Maybe html + Javascript + css is just the wrong tool for the job of web applications and we need to look more at RIAs like Adobe and Silverlight. Time for revolution not evolution.
As for the oh-so-popular claim “TABLEs were not supposed for layout”:
http://www.barrypearson.co.uk/articles/layout_tables/history.htm
I think that CSS is a good idea, but a terrible implementation. As it stands I would advocate using CSS for everything except layout/positioning. That is a task that it is appalling at.
I fully respect that some people can do amazing things with CSS, however just because it’s POSSIBLE doesn’t meant it’s a good tool. The semantic web is about separating content from design, therefore CSS must be the design portion. If it’s for design, it should have been created to cover the common tasks people do on an everyday basis. Stuff like flowing columns of text, or… y’know… vertical aligning. Yes, these things are POSSIBLE in CSS, but they should be fundamental building blocks, not things you need browser hacks for.
CSS fans lay a lot of blame on browsers. Fair enough, compatibility has always been a big issue. However I believe the REASON browser support is so bad is because it’s hard to understand how CSS is supposed to work. Think of the poor developers writing browsers. CSS is not suited to a procedural way of thinking. There are also cases where rules clash and precedence must be decided. I don’t know, maybe it’s clear in the spec to some, but developers are not machines. They are human. If an issue is complex, mistakes will be made.
If CSS had been designed in a more logical manner it would have benefited both web developers and browser writers, and there would be no hatred. A simple design-only scripting language somewhat like a Java layout manager would be nice. Developers get that. If there’s a problem, you debug it, you fix it. Done. Or CSS could be as it is now, but with more common sense interpretations, e.g. “vertical-align” does exactly what valign does. In my mind if you put div A inside div B, it should visually be inside div B. Not so with CSS. You don’t even have to be trying to do something fancy. Just today I nested divs 3 levels deep with nice semantic naming, pixel widths, simple content and no funky options. The stylesheet was only 8 lines long. Two divs overlapped. I turn on borders and one of the divs has a NON RECTANGULAR BORDER. Think square brackets offset from each other. This was in Firefox 3. I see this kind of stuff all the time when I work with CSS layouts. When you see it all the time, either the browser is terrible, or standards are simply very low. I was under the impression that Firefox is meant to be one of the BETTER browsers for CSS support. So this is good, huh?
Excuse the anger.
All I’m trying to say is that most good tools are easy to use and flexible. The great ones work the way you expect them to. You should be able to tell someone in the industry how to use it in a day, and they spend the rest of their days working productively with only the documentation for reference. No hacks, no how-tos. A culture of “what’s that called again” not “is that even possible” or “it looks like it should work” or “I don’t understand why I have to do it this way and not that way”.
Good tools are productive, not difficult. If a dummy can use it, and I can use it just a little better, I’m cool with that. I don’t want to be the wise sage on the mountain that people come to for advice. I want them to be able to figure it out themselves.
It is not that hard to understand how CSS is supposed to work. But it is extremely hard to understand how it works in practice.
Example: to get an element to fill a page, set html {height: 100%} and do similarly for body and all containers down to the element A lot of typing, but easy to understand. Set body {border: 1px}, and the page overflows only by two pixels. That’s also easy to understand once you know the theory, because the border adds twice to the actual size. But now set body {border: 0; } and suddenly 20px of extra body padding appears at the top of the page. Guess what: this is absolutely insane and no theory can explain it. This is exactly what I mean by CSS is easy in theory but excruciatingly difficult in practice. The fan boys are right that CSS is easy once you get the hang of it, but only in theory. In practice, there is no getting the hang of it, only endless hacking and frustration.
They say you need to come around to a new way of thinking, but since that new way of thinking involves workarounds till dawn, I’ll pass on it. I’m a firm believer in clean design, and to me, painful hacks in order to get CSS to work is rank blasphemy.
For all you CSS lover out there,try to do this with just your NOTEPAD- Create a tableless,JOOMLA template (or something similar,just make sure its a template) from scratch,trying to resemble,this site:http://demo.rockettheme.com/jan09/
(I ain’t the owner though).You’ll find that you’ll be in the middle of nowhere by the time you reach your third column,trying to vertically align the slide show div as seen in the link above.NOw,once you feel the frustration,start making the same design using tables.You’d realize how much of flaws this stupid css has.
And hey,Awesome article btw
CSS is GOOD, wait for it, not for what it’s used for but what it was DESIGNED to do – yes i’m using your shitty tables argument against you CSS lovers.
CSS – Cascading Style Sheet
Keyword – Style, not layout!!
Use CSS for style. Use tables for layout. Ignore flawed standards (W3C = bunch of random guys with nothing better to do).
The only way to get an almost 100% compatible website would be to have one browser version and one mobile technology orientated version. Both of which would use tables.
The main reason for high level languages in the first place was to make it easier for the human programmers to understand and develop. Taking a step back from that in favour of “efficiency” is like going back in time – use machine code to make your web pages if you want them to be the fastest ever. Easy to learn too, all you need is 1 and 0!
So in conclusion, CSS is good in reducing redundancy in HTML and for defining easily changeable styling. However, style is not layout and layout should be achieved using the technology best suited for it – tables.
P.S. I am also a Computer Scientist at a prestigious university so please don’t tell me i have no idea what i’m talking about (i also web develop for the company i am working for). Cheers!
Machine code is predictable, and it works. CSS is unpredictable and does not work at all when it comes to layouts. I prefer 100 hours of assembly programming over 1 hour of CSS layout design anytime.
“Greg, I think the problem is not exactly CSS but the lack of good CSS tools”
I see many problem with CSS. I’m on the side of the: They should fix it.
I think CSS is a great tool, but I also think that those who are making the standard doesn’t do much complex websites.
#1
Block VS Inline … not enought.
—————
- display:block skip a line, and try to use 100% of the width.
- display: inline doesn’t skip a line, and will have the width of his content. You can’t use a fixed width.
But what if I want to use a fixed width, without passing a line ?
I must use float. But floating elements have many problem. Like when you want to center the floated elements.
There are other display value, but they’re not supported well.
“Solutions”:
- Something like: Width: auto-content;
#2
Box model restrain us to non-fluid design
—————
The real width of an element is: Padding-left + padding-right + border-left + border-right + margin-left+ margin-right + width.
That said, we often have unexpected behavior with width:100%;. Because of a border or a margin, we need to change the width to static values.
“Solution”:
- Width: 100% – 4px; /* 4px = margin-left+right) */
#3:
Code reusability : none.
—————-
Let take this –simplified– code:
div#zoneSite{
width:1000px;
}
div#zoneSite div#zoneMenu{
width:200px;
padding:5px;
}
div#zoneSite div#zoneContent{
margin: 4px;
width: 782px; /* Painful to calculate */
}
… and you know it can be alot more complicated in many design.
So the width of the zoneContent div must be precalculated by hand. That’s painfull.
“Solution”:
- Variable access,
- Object Oriented Style sheet
Example of what the code should be:
div#zoneSite{
width:1000px;
}
div#zoneMenu{
width:200px;
padding:5px;
}
div#zoneContent{
margin: 4px;
width: 100% – div#zoneMenu->totalWidth() – this->marginHorizontal();
}
Also:
——-
This:
div#menuTitle{
color:#ff0;
font-size:12px;
}
div#contentTitle{
color:#ff0;
font-size:14px;
}
We have twice the same color declaration, that’s bad. (Yes, we could use multiple class for the same element, but if we have 10 class per tag element, it would be too messy.)
The good solution should be: Variable !
In my previous “solution”, I’ve asked for value access, but variable could also be usefull:
var color1 = #ff0;
var fontSmall = 12px;
var fontBig = 14px;
div#menuTitle{
color: {color1};
font-size: {fontSmall};
}
div#contentTitle{
color: {color1};
font-size: {fontBig};
}
#4:
Vertical align
————–
I should be able to center vertically any content.
Table can. CSS can’t.
Ho yes it can !
Sorry: display:table-cell; vertical:align:..;
What’s the point of using CSS to emulate table ?
“Solution”:
- … anything …
#5:
Center ANY element
———-
margin:0 auto; is just a bad solution. It should be called a hack.
text-align:center; Why text ? If I want to center a block element ?
In my opinion, CSS should open a public debate for let say: 6 months.
Then use all the suggestions, sort the good from the bad, and draw CSS 4, that would be drastically different and not retro-compatible. (A new start).
A browser selector should be implemented in CSS so what only browser that support CSS 4 would try to interpret it.
Here is how I see CSS4 style sheets:
CSS#4
{
var color1 = #ff0;
var fontSmall = 12px;
var fontBig = 14px;
div#zoneSite{
width:1000px;
}
div#zoneMenu{
width:200px;
padding:5px;
color: {color1};
font-size: {fontSmall};
content-align:center; /* Center all the menuTab */
}
div.menuTab{
display:inline-block;
width: content;
content-valign:center; /* Center vertically the text in the tab */
}
div#zoneContent{
margin: 4px;
width: 100% – div#zoneMenu->totalWidth() – this->marginHorizontal();
color: {color1};
font-size: {fontBig};
}
… and for those who will say that I don’t speak in the right place, I just don’t know where I should. I’ve tried to become a member of the W3, but the subscription is not public.
the article is too hard for me to understand,i need to read more times and get some help from others.
I just read the Imaginonic comment and he is right about something:
We “should” not mix Layout and Style.
But I understand a client to ask for a table-less design…
And you should be able to wrap content into your , define your zone in HTML without the need of any tag needed for technical purposes.
…
…
…
^^^That’s OK
…
…
…
^^^That’s bad. the menuCenter div is needed because CSS doesn’t do something correctly.
Ok, enough for me
I agree with those who state that CSS should be used for styling, not layout.
The main design and styling problems when using web editors like Dreamweaver or Expression Web 2 are caused by flaws in these applications. For instance, when you apply or modify an element on an HTML page, it embeds the markup in the source code in the form of class=”style1″, which defeats the idea of using external stylesheets.
Makes you want to revert to the use of notepad…
Uh, Rina… EW2 adjusts the style based on where you tell it to, such as an external style sheet.
The person called Frostbyte; many comments above, stated it perfectly! Somehow “Pure CSS” became “dogma” and “unquestionable” and it suddenly reminded me of one of those totalitarian regimes that punish all dessent! Any practice that seems that way to me even remotely (especially when phrases like “You’re a newbie or dinosaur” or some other insult are used to validate it’s indefensible claims), will be rejected. Especially when the way I’ve been using for decades has been tried and true, in this case, tables for layout, CSS for unification and design. I’m glad humans are all free moral agents
CSS is a horror. I can outbuild even the best CSS designers using a good html editor tool and in one tenth of the time. Everthing in CSS is a pain in the butt. Just try coming back to a CSS website a month later to make changes. It will take you days just to figure out where all the files are and few CSS designers use the exact same methodology, so if one quits, good luck!
CSS designers are extrememly limited. They are a programmers answer to design because programers are not designers by nature. To them, a Rembrandt is broken down into paint by numbers and God forbid if you should work outside the grid.
CSS is not the programmer’s design; it is the communist’s design. It works only on paper. A tool that doesn’t let you have a sticky footer without ugly hacks is something not even a programmer wants. VB.NET allows sticky footers, not CSS.
CSS is a total nightmare.
I just took over working on a site. I can’t even find my way around all this crap. The writing is shotty and way too broad. I can’t wait until I can delete the CSS file and start from scratch.
Honestly I don’t care if someone needs to scale the page with their screen. It’s not about the “pretty” site, it’s about the information on it.
CSS is a joke.
So far, CSS is a pain to understand..
I don’t even no where to start. I have been designing for nearly 6 years now, and notice the change in websites and how tables are becoming old school.
It sucks, because when I took Web Design in college they taught us how to build are website using tables. So now it’s quiet an adjustment. I have watched tutorials on CSS and my brain is still having a tough time trying to understand it
the only good thing is.. I have good flash skills so I am not that limited.
but I guess css closes the gap between designers and coders, as of rite now I don’t like css, but it’s my passion for web design that makes me want to learn it, because I feel behind..
The problem is not lack of CSS tools, its CSS and HTML itself. They ARE the reasons why there are no decent tools for CSS and HTML, beacause no software maker feels that they are up to the task of writing a software that would deal efficiently with CSS and HTML cross-browser. Even the giant adobe does not want to take a shot at this daunting task. Any working web editor will be code centric, or will result in horribly messed up code.
One area where they really amazingly succeeded, is sending everyone back to the text-coding method that was used before I was born (before word 1.0, before Adobe existed and all that, way before that!). I have to say this is an impressive feat, in 2010, millions of designers are resorting to text editing 
Text editing has good aspects to it, and it might be a good thing. Hopefully, in the future, when CSS/HTML will be swept away by something more human, people will remember to keep a text mode in the editors of the future, and not do the mistake that current word processors do.
CSS/HTML are the brainfarts of a stale comittee of old geeks. We know what a geek can come up with. As a remider, geeks are notoriously code-centric and end-user ignorant. Thats why they are called geeks. Two geeks competing for the smartest idea is even worst… just imagine what a commitee of old super-geeks will produce!
Funnily enought, it works
Just look at what people are going through, just to vertically align text inside a div:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Yes, CSS sucks. Thank you, Greg and commentators, for the texts on this page.
CSS bases on relations between elements, which are adequate for programming languages, but inadequate for design.
How could we get a better CSS?
The guys working on the CSS standard just should imagine that a good layout needs reference elements. Before industrialization, elements mostly have been organized using a central vertical line as reference (monotheism). After industrialization, grids became common (as HTML tables spend them). Greg mentioned in his text, he liked to use a logo as reference. Technologically, it would be very, very simple to implement a kind of CSS, which allows for
(1) defining elements in the way, CSS already supports,
(2) defining (virtual and/or actually existing) reference elements, to which spacial relations of other elements can be specified.
So, if it is so simple: Why don’t we have it? It seems to be an ideological issue, and a matter of division of labor.
Tables arent that much better for layout.
If you want to modify anything too complicated, you’ll end up calculating colspans and pixels on a calculator, and God help you if you go wrong somewhere.
Whoever wronte CSS should have consulted with Adobe and other graphic design specialists.
BTW (sorry for flooding the comments), wouldnt SVG be the answer to these complaints?