Simon Willison’s Weblog

I made all of two posts, one paragraph each, which have unleashed a huge amount of text most of it having nothing to do with what I said. People clearly have something to say, but most of it, including what you said here, isn't in response to what I said.

Dave Winer - 20th April 2003 18:35 - #

Go thou and get your show computed styles bookmarklet, and stop thinking up stuff that I can write, I've got too much to do :-)

Stuart Langridge - 20th April 2003 21:28 - #

The best way for the table based layout people to start thinking in CSS is probably to read 'Cascading Style Sheets: Designing for the Web, Second Edition' by Hakon Wium Lie and Bert Bos cover to cover. The book was published all the way back in 1999, but is gives a complete overview of the CSS1 and CSS2 specs, and more importantly, the _thinking_ behind them.

Thijs van der Vossen - 20th April 2003 21:59 - #

Similarly, I entered the web design scene at a point in time where I jumped straight into CSS, instead of needing to learn tables, and I really have to wonder how on earth people can think it's harder than tables. Apart from anything else, when I read CSS it makes sense. When I see a table-based layout site's code, it just makes me want to run away in fear.

As for the HTML to CSS thing, that's the whole point, isn't it? The actual source of the page is easier to understand because the style information is kept seperate from the page. If I want to look at how they lay something out, I can look in one place, if I want to see how they've written what they have, I look in another. I can't even think of why you'd want to see both together...?

Lach - 21st April 2003 03:34 - #

Simon, Mozilla's DOM Inspector shows the CSS style rules (including whatever the default html.css styles) are applied on an element. Clicking the 'Inspect Node' and then desired area will jump you to the node, and then using the top-right drop down menu will show the CSS Style Rules for the object. (You can also use the left menu to show the Style Sheets being referenced). Yet another reason why Mozilla rocks the casbah.

As far as designing with CSS goes... when I first started doing web design, it was with HTML 2 (before/during the Netscape/Wilbur fiasco). My first designs didn't use table based layouts at all - I believe Mosaic not having tables support was still an issue (although I was using spacer GIFs). I want to say that the technique originated at SGI and didn't get in full swing until sometime in '95, but a quick Google News search didn't turn up what I was looking for. Anyone have a link? Err, in any case, yes, most stuff in CSS is much easier and again, in most cases gives a lot more control.

But, having designed both before tables, and after tables (CSS only layouts since 1999), I think that for web page layouts, the way tables shrink-wrapped and related containers really is much more intuitive than CSS. That is to say, CSS2's visual formatting model (boxes, flow control, shrink-wrapping, layout control), especially for complex layouts [jello'd, columnar, etc.] is... err, flawed to say the least.

Not that either are ideal. Think about this. I want a way to say that for content block A, B, C, and D (in that order). There should be some CSS semantics to say that I want to create a columnar layout where block D touches the bottom of the page, and relative to set [A, B, C] is 50% of the width of the viewport, D on the left. D should have a minimum width of 300px and at no time should D and [A, B, C] overlap. D and [A, B, C] should be set within a 25px horizontal padding (within the viewport). Also, between each column, there should be at least a 1em gutter (but up to a 3em gutter). A should be at least 20em, and B and C should split the remaining distribution in a 60%/40% ratio, the containers should be able to belong in the page flow (or act like it) and the containers should never wrap.

When you write it out like that, I suppose it's a semi-complex layout, but nothing out of the ordinary that a page designer wouldn't need or want to do in the course of a normal design. Now, as far as I know, this is impossible to do in CSS2. At the very least, it's a nightmare scenario (despite the fact that stuff like this is really common). It is possible to do with tables, albeit with a lot of nested code and reordering the blocks. Ideally you'd like a style language that would let you specify without needing to have any container code beyond the A, B, C and D blocks [and let you leave it in that layout]. (I didn't specify real unit subtraction or relational element sizing because tables can't handle that either, but the 'ideal' styling language should probably be able to handle that as well).

(disclaimer: this may not be well thought out. also, this could be done with the CSS2 table box model, although according to the spec, the display property is optional)

leonard - 21st April 2003 05:59 - #

hee.. takes me back a bit.. http://www.metafilter.com/comments.mefi/5955#76775 I was quite outspoken then

Tim Parkin - 21st April 2003 10:04 - #

Like Stuart, I spent a few hours writing a computed styles bookmarklet instead of doing something useful, such as sleeping.

Features:

• Only shows properties where each element differs from its parent.
• For the root, only shows styles that differ from the root of a blank HTML document.
• Collapses "side" properties when all four sides are the same. For example, if all margins are equal, you'll see "margin-*" instead of "margin-top", "margin-left", etc.
• Some important properties, such as "display" and "position", are red.
• Some properties that can usually be ignored, such as "top" and "width", are green.
• Overrides link clicks, so you can use it on A elements.
• Same status bar info as the "ancestors" bookmarklet.
• Crosshair cursor.

Jesse Ruderman - 21st April 2003 16:15 - #

Got to agree withe the last post. The number of people that actually create new CSS layout models from scratch rather than copy existing ones is tiny. In fact there are only a small number of re-usable CSS models around. Having worked on a commercial CSS layout site in january of 2000, I was there at th start and saw the godawful amount of work that has gone into getting the to point where we can satisfactorily make 3 column, headed layouts. Anyone who says creating such a site is simple didn't follow this painful quest (associated with the launches of IE6 and Mozilla where a lot fo these sites fell to bits). That said, CSS is great, it's powerful and finally most browsers support it. But theres still a use for tables when you want to create a vaguely complex layout. As a commercial website designer, I know how long it takes to do this in tables and in css and also in a combination of the both. Just like Zeldman has said, the combination of the two is the best compromise and indicates how badly css needs properties that can emulate the relatedness and layout control of tables. The example mentioned previously being a case in point. Someone has already proposed something similar (can't remember the link) but it will more that likely get ingnored by the non-commercial/non-design oriented forces that drive the w3c

Tim Parkin - 21st April 2003 17:34 - #

I've rewritten the List Computed Styles bookmarlet, mentioned in Simon's arcticle above. The new favelet displays computed value of any CSS property of all elements under the cursor (it uses the onmouseover event). It works in IE6/Win, IE5/Mac, and Mozilla unlike Jesse's bookmarklet, which doesn't work in my IE/Mac). It doesn't work in IE5/Win, Opera and Safari - I don't know why yet...

pixy - 23rd April 2003 13:29 - #

Please show me working CSS and I will believe in CSS. I have a 3 column display, I want the first column to be 150pixels wide BUT if the content happens to be 160pixels wide I want the column to expand to fit the content and I want all the sub contents to expand as well. TABLES do this, CSS doesn't (or so far I have not been able to find an example that doesn't fail as soon as I try content that happens to be too large.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>

<style>
.csstable {
float: left;
width: 150px;
background-color: #EEE;
}

.csscell {
border: solid 1px #000;
width: 100%;
}
</style>

</head>
<body>

<div class="csscolumn">
<div class="csstable">
<div class="csscell">test1</div>
<div class="csscell">test2withcontentthatdoesnotfitinsp ecifiedspace</div>
<div class="csscell">test3</div>
</div>

</body>
</html>


vs

<html><body>
<table width="100" border="0">
<tr><td><table border="1" WIDTH="100%"><tr><td>test1</td></tr></table></td>< /tr>
<tr><td><table border="1" WIDTH="100%"><tr><td>test2withcontentthatdoesnotfi tinspecifiedspace</td></tr></table></td></tr>
<tr><td><table border="1" WIDTH="100%"><tr><td>test3</td></tr></table></td>< /tr>
</table>
</body></html>



Gregg Tavares - 11th August 2003 05:38 - #

I too, have only just started learning how to write HTML and CSS, and I find it very frustrating that having gone to all the effort of creating standards compliant code (see http://www.villagefabrics.co.uk (currently only some pages validate - I need to fix the others))it fails to display correctly in IE. I have plenty of people telling me it looks fine in other browsers, but that doesn't help me when I know that my customers are going to be using IE.

I'm resisting using tables - as has been suggested to me as a way to get round IE's bugginess, because tables frighten me - I've never used one in my life, not to mention the accessibility problems they create.

Karen McAtamney - 3rd January 2004 23:25 - #

I have to agree that these bookmarklets are powerful tools for (re)styling sites - especially 'Edit CSS' and 'Ancestors' bookmarklets. I have one issue with the Ancestors one in that I can't always read the entire string in the staus bar (mine are particulary long since adding the very cool URIid extension http://extensionroom.mozdev.org/more-info/uriid ). The bookmarklet I'd most like to see created (as a designer/developer) would be one that enables the user to hover over elements and be told font-size, font-family, and color. It can be a real pain when you come across a nice use of fonts on a site, then have to proceed to drill into the source code and CSS to learn how it's done. Also, Karen [above] I don't know of any accessibility problems with tables. Tables have their place in HTML, there's just been a natural backlash resulting from prior overuse of them.

Rick E Sim - 2nd March 2005 22:20 - #