Comments on: You are not alone. None of the rest of us can fathom CSS either.

By: RodrigoCardoso

RodrigoCardoso — Mon, 15 Sep 2008 19:57:31 +0000

” 8. Widths on inline elements ”
.
.
Hey! You actually CAN use widths on inline elements, there is something called “inline-block”. :)
.
by the way… blame firefox 2 for people not using it ¬¬

By: Joeri

Joeri — Sun, 14 Sep 2008 17:35:50 +0000

“I do get that this is not a rant against CSS but just the presentational form for his requests… marked by his frustrations at how slow standards get drafted and implemented.”

“Slow” doesn’t quite cover it.

I think what bothers me most about the W3 process is the lack of pragmatism. CSS 3 has been worked on for a decade, and yet the W3 process hasn’t produced anything I can think of that is of use to me as a web applications developer (the CSS features I use were all in level 2). Under no definition can you call that pragmatic.

What web apps developers need is pretty simple: better layout tools, on par with what flex can do. This is a solved problem. If the W3 process was focused on pragmatism, they’d find a way to put a versioned trial spec for layouting out there fast, get browsers to put in trial implementations of this spec, and then if anyone actually used it in real world products, the browsers could simply keep supporting the old versions. CSS would easily support this using versioned prefixes (-w3-v123-, like -moz- and -o-). They’d triangulate onto a workable spec within a matter of years, maybe even before the end of the decade. By contrast, I fully expect the current process to take another decade before it starts paying off in a meaningful way.

By: renderblender

renderblender — Sat, 13 Sep 2008 20:51:17 +0000

@ThomasHansen
I looked at your blog post, and you forgot to mention the essential fix for IE6. The overflow:auto fix DOES not work in IE6. You need to add a conditional style to the parent div “height: 1%”. This will make the parent contain the children in IE6.

By: ThomasHansen

ThomasHansen — Fri, 12 Sep 2008 13:47:07 +0000

@emehrkay
I wrote a blog about it just now in fact;
http://ra-ajax.org/floating-divs-multiple-columns-layout-the-perfect-solution.blog
.
Have fun :)

By: Mrrau

Mrrau — Fri, 12 Sep 2008 10:47:51 +0000

Writing a CSS in multiline is like writing every attribute in HTML element in new line… totally pointless :)

By: ThomasHansen

ThomasHansen — Fri, 12 Sep 2008 08:51:53 +0000

@vsync
Wow, that CSS was actually quite cool :)

By: vsync

vsync — Fri, 12 Sep 2008 08:25:23 +0000

I wrote tens of thousands of CSS lines in my life for years.
one line CSS IS THE KEY to success in mastering your code.
If you haven’t done so already..your still in the minor league.

1. Its faster to read it. and I DO read it as a normal person would read a book. proper syntax highlighting makes it that way. If you can’t read it, your not there yet.
2. Its Indented. means, I know the DOM structure just by glance.
3. You don’t need to scroll a lot! and I work with Eclipse, and use GoToLine some times, but still.
4. to complete, it gives you a view at your CSS code as a whole.
in one glass you can see a huge bunch of elements. to see the bug picture in CSS is very important!

heres an example that I wrote:
http://corp.kaltura.com/css/corp.css

IF this multi-line, it would be awful!!

By: dcminter

dcminter — Fri, 12 Sep 2008 01:14:21 +0000

2.) top: 50%; margin-top: negative half of the inner element’s height.
Which may be unknown. Welcome to dynamic content.

5.)
Requires changes to markup to achieve formatting. Bad. Doesn’t actually behave identically to the submit input element. This applies (with additional caveats) to the other user’s suggestion of type=”image”

6.) Unless you’re printing… why? but yes, a pain.
Big screens result in either very long lines, or annoyingly limited use of the page. Columns fix this. The CSS3 proposals (or at least their current webkit and gecko implementations) are nutty (they have poor usability as soon as the content has to overflow the page).

7.) Well, yeah… that’s the *structure* of the document you created.
Indeed, and the structure is dictated by the HTML. CSS on the other hand is supposed to let me dictate the styling and layout. If I want my glossary at the front of the book or my sidebar to the right of my account controls that is a layout issue not a semantic (structural) one.

By: jonathansnook

jonathansnook — Fri, 12 Sep 2008 00:39:34 +0000

Allow me to clarify that my recommendation for one line has nothing to do with optimization and everything to do with readability/maintainability. But what I find important, is (apparently) different from what everybody else finds important.

By: ThomasHansen

ThomasHansen — Thu, 11 Sep 2008 23:01:56 +0000

@emehrkay
I just checked out our site and as I was inspecting it with FireBug I see that this change actually made it the last release we did :)
http://ra-ajax.org/
.
Use FireBug and inspect the way the DIVs are built.
Pay especially close attention to the divs with the ids of; “navigation”, “contentOfPageDiv” and “contentPlusBorders”…
Now the whole secret here is that the “contentPlusBorders” has overflow set to auto which will make a two column design possible with floating divs and also different heights of those two divs with a third div wrapping them serving as “borders”. The “navigation” and the “contentOfPageDiv” are both floats and the “contentOfPageDiv” is WAY taller than the “navigation” div. And normally this would require the “wrapping div” (contentPlusBorders div) to have a explicit height if you don’t want the tallest “inner div” to spill over the outer most div EXCEPT due to the fact of that it’s “overflow:auto;” Which actually fixes the whole thing! :)))))))
.
So incredibly simple I wouldn’t even believe it when I saw it ;)
.
I actually spent several MONTHS looking for this solution before I found it at some CSS blog (which I cannot remember the link to now unfortunately)
.
But the whole thing works on “all browser” mostly and it makes it possible to create a two column (and possibly more columns) layout with a wrapper around it to serve as borders…
.
I probably should wrap up some blog about this, I guess when I spent months looking for this before hitting Jackpot, probably others will need it to… ;)

By: emehrkay

emehrkay — Thu, 11 Sep 2008 22:23:07 +0000

@ThomasHansen

Can you find that example of the overflow: auto elements? I am very interested. thanks

By: tlrobinson

tlrobinson — Thu, 11 Sep 2008 22:23:00 +0000

Eeek, putting all the properties for each selector on one line is hideous, how do you read it?

By: ViPi

ViPi — Thu, 11 Sep 2008 21:20:13 +0000

Utterly worthless post….thats if any quality CSS developers still reading this

By: Diodeus

Diodeus — Thu, 11 Sep 2008 20:46:24 +0000

Putting your all CSS on one line is about as useful as putting your JavaScript on one line.
.
Readability=maintainability.
.
If you’re searching for your class name, just use ctrl-f.

By: Aimos

Aimos — Thu, 11 Sep 2008 19:41:53 +0000

@WillPeavy; styles in one line is a bad idea. that type of “optimization” belongs to scripts which compress the output or preprocess the css.

By: Jocafa

Jocafa — Thu, 11 Sep 2008 19:17:40 +0000

First Article:

1.) CSS where supported. VML hackery in IE + behavior + .htc
2.) top: 50%; margin-top: negative half of the inner element’s height.
3.) Yes, it’s a pain in the ass.
4.) Floating *anywhere* cross browser is a pain
5.)
6.) Unless you’re printing… why? but yes, a pain.
7.) Well, yeah… that’s the *structure* of the document you created.
8.) It’s… inline… oO
9.) Yeah. Sucks doesn’t it?
10.) When IE is dead. :)

Second Bit:
1.) Heck yeah.
2.) Over my dead body. How on earth is that more maintainable? Make it multi-line and comment your code appropriately.
3.) Sometimes it’s better to be explicit with your declarations. Those few extra characters aren’t going to hurt you. You’re gzipping your css anyway, right?
4.) Mhmm.
5.) ‘Tis a pain, I agree.
6.) Darned right. In a lot of cases, it even makes *sense*.
7.) Yummy.
8.) You had better be doing this anyway.
9.) See 7.
10.) If you’re changing case for presentation purposes, this is the only way to do it as far as I’m concerned. Otherwise, you’re changing the meaning of things and maintainability in the future is going to be painful

By: AdamB

AdamB — Thu, 11 Sep 2008 18:32:39 +0000

@ThomasHansen, just to add to your comment, for those unfamiliar with it, simply set a width value and overflow:hidden.

By: Montago

Montago — Thu, 11 Sep 2008 18:30:21 +0000

Syntax highlighting editor.

yeah forget about iFrames…
take a look at my DIV-based editor: http://www.mdk-photo.com/Editor

By: MichaelThompson

MichaelThompson — Thu, 11 Sep 2008 17:49:14 +0000

Snook the first thing I’d do with your CSS is run this: s/({ \w|;)/\r\t/g. Then have my text editor close the folds. And probably ice my nads. :)

@ThomasHansen: Most WYSIWYG editors do in fact use an iframe with “contenteditable” set to true on the body tag. The editor you’ve linked to is not safe to use on most sites, for browser compatibility reasons.

By: jonathansnook

jonathansnook — Thu, 11 Sep 2008 17:35:26 +0000

btw: let’s not replay the whole one-line argument. It’s been played out on that link, on my original post on the matter, on my flickr screenshot on the matter. It’s the way I do CSS and I’ll kick you in the nads if you don’t like it. *Ahem*, I mean, code however you want. It’s not that big of a deal.