Cascading Severity Sheets

I think CSS
is a poor design tool. There, it’s out, I’ve said it. Now, shoot
me for all I care. Well, I’m sorry, but it’s not because we’ve
found some new improved way to build better, more accessible and leaner web
sites that I’m going all bonkers or anything. Sure it’s great and
believe me, I wouldn’t go back to tables even if I’d get a peek
at Janet
Jackson’s other tit (so ok, maybe I would). Anyway, CSS is probably
close to the best thing that ever happened to web design since blogs…
errr… bread came sliced.

What's up with that box model So,
dude, what’s the fuss all about if you think CSS is that great?
I’m glad you asked. First of all, what’s up with that box
model? Seriously? If I define the width of anything I measure the space
between two extremities. Not some awkward value in between. Padding is inside
the box, so leave that alone, thank you. Next, floats.
I go nuts working with floats. Thankfully, Eric
Meyer is able to shed
some light on most issues, which probably saved my life. But still, the
float concept is dubious at best. Actually everything related to CSS-P
is pretty much a pain. Sure, bad browsers are responsible for most of my headaches;
nonetheless I wish CSS was more intuitive to (graphic) designers.

Maybe it’s just ignorance; not understanding CSS and all the hacks, tricks
and gallons of coffee that come with it. And again, don’t get me wrong,
I much appreciate all the hard work Bert,
Håkon,
Tantek and fellow W3C
people are doing. Yet I think we could use a bit more style in CSS. How does
that abbreviation spell out again? Exactly.

This item was posted by dhilhorst on Wednesday, February 4th, 2004.

Categories:

Design

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

14 comments on “Cascading Severity Sheets”

Posted by yafujifide on Wednesday, February 4th, 2004.

Floats would be great, if only we didn’t have to use them to format entire layouts. We should be able to define divs as table-like elements, which is possible with CSS, just not in IE.
Posted by Mike D. on Wednesday, February 4th, 2004.

You’re right. CSS is not a great design tool at all. It’s better than tables in most ways, but not quite as good as them in a few ways (i.e. vertical alignment, and the ability to have single cells span across multiple cells like with colspans and rowspans).

I think the closest CSS-P method to what we’re looking for is absolute positioning. It basically gives us what we want… the ability to pin things to certain areas of the page without regard for where they appear in the code, but the huge problem with absolute positioning is that absolutely positioned elements are completely ignorant of their surroundings, and their surroundings are completely ignorant of them.

The most obvious case of this is when you have a multi-column layout and you try to position a footer at the bottom spanning the width of all columns. You can’t do it without javascript or a ridiculous declaration of which column must always be the longest. It can’t get much lamer than that. The simple ability to wrap a master div around your columns and then place the footer after the master div would solve everything.

It bugs me that virtually no money has gone into the marketing of browsers throughout the years. Companies spend all this time developing a browser and they just kind of let people adopt it at their own pace. Imagine if a large company were to develop a fast, free browser which used CSS-3 and even extended upon it addressing some of the design issues we all have. A TV ad during the Super Bowl would cost about $2 million. That’s a bit much. But what about a series of ads on popular shows? What about an online campaign? How about some PR from writers like The Wall Street Journal’s Walter Mossberg? It just seems like with some effort, browser developers could really stir up some excitement about such a product. Enough to make it worth their time to develop. We’re talking about $10 million in marketing, tops. I’ve seen Microsoft give away more than $10 million in a day. I’ve seen Apple spend a lot more than $10 million on developing the Cube. It just doesn’t seem like a lot of money for a decent sized company… considering all of the good it would do for everybody.
Posted by Brian on Thursday, February 5th, 2004.

Silly idea, here… Why not make a new breed of table, a real design element? They’re obviously far more flexible and familiar than the boxes everyone’s worked up about now. If the designers of CSS would put half as much effort into making real layout tools, nobody’d even worry about floats and divs and box models and all that nonsense.
Posted by David Dorward on Thursday, February 5th, 2004.

Brian,

becuase HTML shouldn’t have design elements in it, its a structural language. However as yafujifide said — you can use CSS to tell elements to act like tables.

body { display: table; }

#document { display: table-row; }

#content, #nav { display: table-cell; }

It just doesn’t work in MSIE… and that standard came out over HALF A DECADE ago!
Posted by Houser on Thursday, February 5th, 2004.

Um… am I missing something?

First of all, if you want something to act like a table, chances are you should probably be using a table. The backflips you’ll have to do to and the code you’ll write to make semantically correct markup “look like a table” will not be worth NOT using a table. Use the right tool for the right job.

Second, while I agree there are some limitations with div’s “colspaning” elements, don’t overlook the width:xx% abilities. For example:

<style>

#cont { width:100%; }

#colheads, #cont dl { margin:0px; padding:0px; }

#colheads li { width:25%; float:left; background-color:#eee; }

#colheads #activities { width:75%; background-color:#ccc; text-align:center; }

dt, dd { margin:0px; padding:0px; float:left; width:25%; border-bottom:1px solid #ccc; border-right:1px solid #ccc; }

dt { border-left:1px solid #ccc; }

</style>

<div id=“cont”>

<ul id=“colheads”>

  <li> </li>

  <li id=“activities”>Activities</li>

</ul>

<dl>

  <dt>Mike</dt>

  <dd>walking</dd>

  <dd>swimming</dd>

  <dd>biking</dd>

</dl>

</div>
Posted by owen on Thursday, February 5th, 2004.

as a programmer I find that CSS depends too much on the images, lists and links. Are there any other tricks?
Posted by Brian on Thursday, February 5th, 2004.

HTML may be a structural language, but the web is a visual medium. A structural language is wonderful for storing data, but presenting it is an entirely different matter.
Posted by Hemebond on Thursday, February 5th, 2004.

The box model does make sense. How else would you apply padding, margins and borders to a fixed-size image?
Posted by Egor Kloos on Friday, February 6th, 2004.

To be quite honest I don’t see CSS as a design tool, it’s not like a pencil or a crayon. Personally I try to separate my creative work as mush as possible from the production side. But semantics aside I also don’t think that CSS all that. There are still some horrible gaps in what you need to do for page layout, so you end up working some fancy CSS trick to get it to render properly. Never mind getting it to work crossbrowser and the less said about working crossplatform the better.

CSS3 seems to offer more in the way of layouting a page so that may help some what. But that’s still years away. Even if Microsoft implemented CSS3 into Longhorn it would still be at least three years away before we could consider using CSS3. We can’t even fully use CSS2 yet! So were stuck with what we’ve got.

Well I’m starting to get the hang of it now so I shouldn’t complain to much ;)
Posted by Richard Allsebrook on Sunday, February 8th, 2004.

“but the web is a visual medium”

…only if you have have a working pair of eyes :-(
Posted by Tony C. on Tuesday, February 10th, 2004.

I agree that it’s sometimes a pain to track down and fix seemingly bizarre display problems in CSS, particularly those caused by Internet Explorer. However, I think it’s worth it.

Separating the style from content just makes sense to me on many levels. Not only from an accessibility standpoint, but also from a content contributor standpoint. At work, we can’t afford a big fancy content management system (and probably coulcn’t live with the mess most of them create anyway), so we rely on regular folks to contribute content. Teaching them to use products like Macromedia Contribute, or even DWMX, or even a simple in-house contribution form…and having to only explain that a paragraph is a paragraph, a heading is a heading, etc…just makes my life so much easier.

Gone are the days of trying to explain to a secretary what a colspan is, or how to get her graphic to show up on the left instead of the right. It’s now done entirely through styles, and everybody’s happy.
Posted by charles on Tuesday, February 10th, 2004.

Regarding the box model and padding:

In the next version of CSS you’ll be able to specify between the padding counting towards the width or not.

So in a long while…
Posted by David House on Saturday, February 14th, 2004.

The box model was chosen because it can emulate other box models, whereas other box models can’t emulate it. Plus, with CSS3 you get to choose, anyway. Floats: I don’t see any problems most of the time. I generally float all my main elements in my page and they all fit in nicely. The fact that you can’t have width:auto on floats is somewhat annoying, but workarounds are present.

Personally, I’d rather use CSS than an XML based equilivant — especially something like XSLT-FO that ruins your structure. I have longed for a while for an XPath extension to CSS, maybe something like el:x-path(Xpath expression in here), as sometimes I find myself thinking in terms of xpath and not CSS selectors, although the latter is generally much more powerful.
Posted by GaBuBu on Saturday, February 14th, 2004.

I took the chance of translating your post into Spanish, as i totally agree with you. You can check it in my URL, 14th February! Thanks, honestly i appreciate what u think! I thought i was the only one getting mad with CSS.