KODA

Writing CSS (CSS2) never ceases to amaze me. Whether it’s tweaking this blog, trying to re-theme a php app, or simply experimenting in the Web Developer Extension, I am always struck by how difficult and confusing it is to try to implement very simple design patterns.

Be it centering objects, making layouts use the maximum amount of space, or simply trying to use floats properly, I am always amazed by how seemingly obvious code does not work the way I should think it does. It seems rather silly to me that such a language would be designed such that web designers must resort to specialized recipes to deal with seemingly simple and common page layout designs. While powerful, CSS seems to become more and more a search for hacks and snippets to make many designs possible. Browser support is also an elusive and secretive gem; unless explicitly stated, what works in one browser will probably at some point fail mysteriously in another.

Tonight, my appreciation for the language fell to a new low. In the mid-day, thinking about my page layout, I decided that I wanted thumbnails posted from my gallery to be aligned to the right of the post, so that post text can wrap around them on the left. I figured this would be a relatively simple fix; I just needed to float the image class to the right and see what happened.

Well, not so fast. I had failed to remember that images when floated will (without a clear property set on a following element) essentially make the following layout flow through and under the image, leaving the image on top of the footer and the title of the following post. After a little searching and reading, I realized this mistake and added the appropriate clear: right; to the .post-footer class. The footer should now make appropriate space for the image in the post. Simple, right?

Again, not so fast. After putting in this little tweak, I found the first post on my page (without any image) being followed by a long swath of whitespace, assumedly caused somehow by my float: right‘d sidebar. Why was the browser making a whole bunch of space for something that wasn’t there? I may never know. Well, debugging this would prove to be a nightmare, so I soon got tired and decided I needed to do some research. I googled CSS float clearing techniques, searching for some trick to make space for the image without involving other floats. Well, I ended up finding this quirksmode.org article describing a trick for making float space work without needing the clear property.

Well, how about that? Reading it worked on most browsers, I quickly tried this new overflow: hidden trick on my .post-content div, and looked to see if it would work. Well, at first attempt, it didn’t. But it was close. This time, space was being made between posts for the image to fit in. However, the footer was still flowing through, underneath the image. This was relatively easy to fix, after I added back the clear: right; line to the footer div, this worked too. The blank space following the top post (which is why I seached for this trick in the first place) disappeared. At this point I really didn’t care why, and was glad that it did.

Then I noticed some mysterious padding being added under the titles of posts. This was directly associated with the existence of the overflow: hidden statement. About a line of space was being added under the titles for reasons unknown to me. I tried hard setting any margins and padding I could think of to 0 (most were already), yet still, this mysterious and unexpected space was being made. After fiddling with it for a while, disappointed that the trick might not work, I tried moving overflow: hidden to the parent div, .post. This worked like a charm. Everything was working as it should have been: space was being made for right-aligned images, text was flowing around them, and there was no longer any weird quirkiness being wreaked upon my page layout. Finally!

This experience I had tonight illustrates my primary frustration with CSS: it makes no sense for achieving simple design tasks. Certain assumptions about the purpose and performance of properties never seem to work out entirely as planned. My attempts at putting an image on the right required an understanding of the float layout system, the subtleties of clear usage, and even an arcane trick barely documented and not well-known - at least not very accessible to me.

Further, this impacts the sanity of CSS as a programming language: as a designer and a programmer, I expect that properties and directives will just work, in a way not so far off from the way they are documented to. In my experience with CSS, and in this example, the subtlety and lack of documentation in getting things to work as intended required so much more fiddling, guesswork, and raw googling than I ever expected to do. Also, pages become so big and complex that when dealing with many layout bugs, there is usually not an obivous quick fix.And I am simply using CSS like a programming language. I don’t even want to imagine the ways one would try to create a GUI for representing these difficulties in a WYSIWYG environment.

When attempting to represent a graphical layout using programming directives, I understand that it is very hard to craft a language that is both simple to use and powerful in it’s creative offerings. CSS really achieved a lot in terms of power in crafting web designs, and especially in controlling the typography used. However, the current state of utilizing CSS in web design is both an exercise in frustration and confusion, as the subtlety of the effects of CSS directives make it (at best) difficult to debug, and the arcaneness of the techniques used takes the considerable learning curve of CSS and shoots it through the roof.

After dealing with CSS a reasonable amount, I can only wonder at the hoops professional web designers must leap through in negotiating between the limitations of their environment and the needs/desires of their customers. As an open source and Linux enthusiast, I make minimum effort to accomodate poorly compliant browsers. I’d rather not think about the far more trouble one has to go to to ensure such compatibility. Heck, it would take so much time to really get fluid with the medium that suddenly, the role of the professional web designer makes so much more sense to me!