CSS Is Crap - the Sequel (Trequel? Trefoil? Trinity?)
So I bitched on here before about how I thought that CSS was total and utter crap. A design quagmire, built by committee, polished by someone with syrup all over their hands, and implemented by the most batshit of batshit inmates in the asylum.
Lots of people didn't agree with me. So I offer you a challenge:
Recently I rebuilt the X-Ray Kid Software website. (I'm in round 2 of rebuilding it right now so that the layout can handle longer pages).
Here's the requirements for it, although it's probably easier to look at the site itself:
- Single column design, which must be able to contain a variety of column layouts (check out the main page and the team page for examples)
- The main column must be centered on the page.
- A footer must appear at the very bottom of the screen, expanding the container above it down to meet it (for the background image)
- If the content + footer is longer than the window, the footer should appear at the bottom of the page, and the page should scroll. The footer must remain flush with the bottom of the browser window even after scrolling.
- The background image must appear as shown on the site; it's positioned relative to the main, centered column.
- Most content is in the form of blocks in the main panel which have a stretch area in the middle, rounded corners, and an image based title (or potentially buttons in the footer of the blocks).
- Nav bar must be aligned to the right, at the top of the column, and must be baseline aligned with the logo's major axis.
- Must work in all major browsers - Chrome, Opera, IE6, IE7, Firefox 2, Firefox 3.
I must admit, I wussed out on this one. I wanted to do it all as tables, but that wasn't going to work. Then I tried all CSS, and that didn't want to work either. So the result is the bastard child of CSS and Tables. And then comes the footer, which is all handled with Javascript. It's certainly not perfect, but it works. The new version I'm putting together works even more consistently.
I dare you to do this entire site using nothing but CSS, and still have the HTML document be readable.
Now, if I was implementing HTML & CSS from scratch, I'd have implemented this completely differently. It shouldn't take 3 or 4 days of experimentation in different browsers, rebuilding graphics, messing with combinations of styles, reparenting DIV hierarchies etc to make this kind of a site. There's nothing to it really. Back in the day, I would have put together that site like this, which would take less than a couple of hours to put together. But the demands of a modern website don't allow you to get away with something that is as unpolished as that.
I've had a website up online since 1994 (one of the first homepages on the net, and one of the few that has been consistently online since then). Sure, the URL has changed occasionally as its moved from server to server, but it has been there.
And you know what? Web development today is actually exponentially more difficult than it was back then.
Why the hell is that the case? Software's supposed to get more refined and work better over time. Not worse. Admittedly, we're asking a fair bit more of it today, but frankly, the whole system needs an overhaul.
Simon Cooke is an occasional video game developer, ex-freelance journalist, screenwriter, film-maker, musician, and software engineer in Seattle, WA.
The views posted on this blog are his and his alone, and have no relation to anything he's working on, his employer, or anything else and are not an official statement of any kind by them (and barely even one by him most of the time).
Once again, you are blaming the rendering, and blaming the layout manager…when in actuality, the platform is the problem.
Why not address the platform issues?
Only 10% of my issues while building the site were platform issues. The rest were caused by the poorly designed CSS layout system.
I notice that you’re not exactly jumping at showing me how easy it is to build that layout in CSS alone - regardless of which browser you’re going to target.
Mr Cooke.
The issues you have building the site are related to two issues:
1) Not wanting to use tables
Possibly for the “ease” of changing things in the future.
Possible for SEO benefits.
Unlikely for Bandwidth reasons.
2) The use of CSS
Solving the “ease” of use issues.
Enhancing SEO
Now, while I agree these are your pain points, we should step back and look at the platform. The platform is a container (called a browser) and the piece within the browser (WebKit or equivalent). These are solutions that have layers and layers of history….we’re talking HTML in a static world, then we add Javascript, then we look at XHTML, and then we talk about XML, then we block Javascript, then we add it back, then we extend it.
The platform is built on technology that was WEB 0.0 and we’re wanting to move to Web 3.0.
So I’m blaming the platform which is essentially a sessionless, disconnected connection through which we want to provide an experience.
I didn’t say that we could address the issues quickly (nor on your own). With the advent of server side hardware costs moving to $0 we could evaluate a totally different approach to page rendering. People are already using Image Magick to “compose” real time images….we could potentially “compose” real time pages. I briefly scanned your solution to CSS - which was interesting, but I was contemplating whether media layering was a better approach.
I agree that CSS sucks : bordering objects sucks, making columns the same size sucks, doing that with fixed footer sucks more.
I wouldn’t EVEN ATTEMPT this without PHP underneath it..then you can at least codify the layout a little and use CSS a little less liberally. I find CSS has obfuscated more than it has fixed….
Can’t wait til we semantify (is that a word) all of this.
Your response (unusual for you as you never answered the randomy challenge with a solution ;-) ) indicates that you are REALLY sore on CSS.
I think that says it all. It’s a hack fix to something that’s broken on a platform that is showing it’s age. What we need is the Web equivalent of DOS to Windows.
Anyway, HAVE A GREAT THANKSGIVING!!!!
http://ryanfait.com/sticky-footer/
I suggest you take a look at this for the sticky footer
Much of what you describe and use are advanced CSS methods. However they certainly not impossible.
I will quite happily take a pop at the main page if I can get hold of some resources off you. (background image mainly).
The only thing I can see a problem with is the Illustration over the top of “latest news”. It’s blocking you being able to click on the links, most definitely requires Javascript to get it working properly.
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.
If I go to the Zen Garden (“The Beauty of CSS Design”) and resize my browser (Firefox) some of the text is hidden by the navigation bar.
http://www.csszengarden.com/
CSS is an overrated piece of crap!
I agree CSS is utter crap from a software development point of view. Its an evolved technology that has been hacked together over time. Not even Microsoft, Firefox, or any other browser can get it 100% right! The sooner this technology goes the better in my opinion, and I can start writing software rather than waste my time fiddling about with FireBug all day.
“Its an evolved technology that has been hacked together over time. Not even Microsoft, Firefox, or any other browser can get it 100% right!”
Aside from pointing out the fact that most programing/scripting/markup languages are evolved over time, it’s not “hacked” together. The W3C takes time to aggree on speficications (too long). As draft specifications come out, browsers that are ahead of the curve implement them in the form of propriety selectors, when the draft turns into a full speficication then the GOOD browsers (I.E. Not Explorer) will adhere to these rules 100%. Any differences are caused by bugs in thier rendering engines, not the specifications.
Any blame you give for “wasting your time” should be directed at the browsers and the average users inability to keep up to date not the technology. Hell, if everone had Safari then the possibilies would be immence. (http://www.css3.info/preview/)
CSS? A complicated way to do a simple job. Rendering has been around since before graphical interfaces existed. We’ve had character-based ‘windows’, Visual Basic and HTML and each of these had a reasonably foolproof way of rendering fluid (i.e. resizable) layouts. Only CSS gets stuck because of some ideological nonsense that disallows real programming elements such thing as variables. I read somewhere that this was to keep CSS ‘simple’. A quick look around shows the web is full of complex CSS trying to do a ‘simple’ job. Hacks and work-arounds abound and if you find a decent site, the CSS is probably unreadable except to an expert in semantics. When will someone deliver us from this crap?
Looking at what's being done right now to HTML 5, I'm surprised they're suggesting replacing intuitive-and-works-just-fine tag options like “align” and “valign” with CSS–which is super inconsistent, unintuitive, and obviously not administered by a talented designer but by committee. I really don't understand why the creators of CSS didn't build on what already existed, using weird new names when HTML ones already existed. Plus adding so many variations to do the same thing and they all interact and affect one another makes things really confusing. CSS is really crap. I foresee it being replaced by something better some day.
Based upon the date of this post, I realize I'm late to the party. However, having just gone through your experience with CSS, I had to search to see if anyone else came to the same independent conclusion I have- CSS is crap.
It's insane to have to wade through iteration after iteration to determine non-obvious element interaction, browser behavior differences given the same input and no clear design patterns for simple behaviors - everyone publishes their own way of doing something, but if you test real-life implementations, there is side-effect after side-effect. What's the point of having a spec?
It's a crazy development environment, reminds me of the very early days of compilers.
anyway, CSS is crap
YES IT IS!
I've had a web site online since 1994, too. I've been trying to update the web site I manage, and I understand CSS way too well.
CSS IS JUNK. Period.
I still think you are all blowing this out of proportion.
Aside from those commenting on this blog I know no professional web developer who does not use and enjoy using CSS, the only anger stems from MSIEs interpretation.
If you can't develop a website in HTML/CSS/JS and not have it work in at least Opera, FF, Safari and Chrome first time then you are doing something seriously wrong.
Don't blame the long established technology for your lack of knowledge. I'd like to see you put forth a better alternative.
Thank god I'm not the only one!
I'm becoming increasingly annoyed with the amount of trial and error involved in getting anything to work online these days!
I'm also getting VERY annoyed with Mac users telling me I'm an idiot if I want to use tables in place of CSS for formatting, as others have said, at least it works!