{"id":1315,"date":"2009-04-01T13:10:51","date_gmt":"2009-04-01T12:10:51","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/1315-css-a-long-wait-for-the-aha-moment.html"},"modified":"2009-04-01T13:10:51","modified_gmt":"2009-04-01T12:10:51","slug":"css-a-long-wait-for-the-aha-moment","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/1315-css-a-long-wait-for-the-aha-moment.html","title":{"rendered":"CSS: a long wait for the aha moment"},"content":{"rendered":"

I\u2019ve been messing around with web form design recently; started with a table layout, decided it was horrible and unmanageable so redid it with CSS. I came across this example<\/a> which had more or less the layout I wanted \u2013 it\u2019s the form about half way down that looks like this:<\/p>\n

<\/p>\n

Looks simple enough; and is based on an idea by CSS guru Eric Meyer<\/a>; so I copied the code and tried it. Unfortunately my version looked like this:<\/p>\n

<\/p>\n

I squinted at the code again and noticed that a style defining a little hack called div.spacer was missing from the sample code though it is mentioned earlier in the article. Added it, and now my form looked like this:<\/p>\n

<\/p>\n

Better, but frankly not that close to what I wanted. What was wrong? Should the fields float:left instead of float:right? It made little difference. Then I noticed that the example on the page was real code, not just an image. I downloaded the actual CSS it was using. Of course it was an obvious error. The sum of the widths assigned to the label style and the field style was greater than the width of the containing div. Increase that, and all is well:<\/p>\n

<\/p>\n

Great stuff; but it reminded me how tricksy CSS is. With both cascades and inheritance, and exceptions such as the fact that some properties do not inherit, figuring out exactly what style attributes apply to an individual element is a challenge. The positioning rules are complex and often do not work as I first expect. Styles can be defined in numerous places; and while external CSS files are easier to manage than those defined within HTML, they soon get long and hard to navigate.<\/p>\n

By way of mitigation, CSS is powerful; yet as the above example shows, it can still need workarounds (div.spacer in this case) to achieve the result you want.<\/p>\n

I suppose I\u2019m waiting for that aha moment when it all makes perfect sense; but it seems a long time coming. Worried that it was just me, I found this reassuring post from Sho Kuwamoto<\/a>:<\/p>\n

\n

I used to think of myself as knowing a lot about CSS. For starters, I\u2019d been responsible for the CSS implementation in Dreamweaver. I was also a member of the W3C CSS working group. I wasn\u2019t a major contributor (I didn\u2019t author any of the chapters of the spec, for example), but I thought I knew the spec pretty well.<\/p>\n

It\u2019s been a while since I\u2019ve touched CSS, and in coming up with the design for this blog, I was reminded again how difficult it is to use CSS to get the layout you want. It was incredibly<\/em> difficult. I couldn\u2019t get it to work and I ended up having to google around to figure out how other people had done their page layouts.<\/p>\n<\/blockquote>\n

I\u2019ve also noticed that the aforementioned Eric Meyer is increasingly critical of the language. In his post Wanted: Layout System<\/a> he writes:<\/p>\n

\n

Maybe CSS isn\u2019t the place for this. Maybe there needs to be a new layout language that can be defined and implemented without regard to the constraints of the existing CSS syntax rules, without worrying about backwards compatibility. Maybe that way we can not only get strong layout but also arbitrary shapes, thus leaving behind the rectangular prison that\u2019s defined the web for almost two decades.<\/p>\n<\/blockquote>\n

It\u2019s too late of course. Now that Microsoft\u2019s Internet Explorer 8 is out there is decent support for CSS across all the major browsers. What\u2019s the chance of getting agreement on a new layout system now? The only realistic alternative is to work increasingly in Adobe Flash<\/a> or Microsoft Silverlight<\/a>, which is proprietary badness but can be attractive.<\/p>\n

Technorati Tags: css<\/a>,layout<\/a>,adobe<\/a>,microsoft<\/a>,eric meyer<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

I\u2019ve been messing around with web form design recently; started with a table layout, decided it was horrible and unmanageable so redid it with CSS. I came across this example which had more or less the layout I wanted \u2013 it\u2019s the form about half way down that looks like this: Looks simple enough; and … Continue reading CSS: a long wait for the aha moment<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1315","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/1315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=1315"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/1315\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=1315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=1315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}