Archive for June, 2006

Choosing your CSS techniques

I’ve had so many interesting discussions with people at @media, as these were prompted by the topics discussed by panels or in presentations it’s probably not surprising that I was often having the same conversation a number of times with different people! However one topic that kept coming up was how we decide which methods to use when working with CSS.

At this point in time for most end results there are a few available paths. Take for example, the requirement to clear floated elements. The conventional and recommended way of doing this has, for some while now, been to add a redundant element underneath the floated elements. However, a recent technique for self-clearing floats, as detailed on Position is Everything, gives us a method to achieve this without adding the additional div to the mark-up. At first glance this seems like a preferable method, after all we have been banging on for years now about separating our presentation from our content and document structure haven’t we? However I’m not completely comfortable with this method yet.

The self clearing floats method requires that you add a bunch of hacks to your CSS to get this technique to work cross-browser. I’m very much of the school of thought that says hacks are a last resort, much of my CSS work is completely hack-free because I would rather look for an alternate way to achieve the same visual effect than resort to a CSS hack – where that is possible. I am not sure that peppering your CSS with hacks is preferable to adding one redundant element. The argument against this would be that adding ‘just one redundant div’ is starting you down the slippery slope of mixing your presentation with your document structure. However that extra div doesn’t have the same implications as using a bunch of nested tables does, for example. It’s a pretty benign element, it won’t create an accessibility issue when a user with a screenreader comes to the content for example. In an ideal world it wouldn’t be there, but I don’t inhabit this ideal world!

The above is just one example of a situation where we come across two different ways of achieving the same end visual result. For other techniques there are a number of methods, for example the range of methods for achieving rounded corners on boxes. When I come up against a particular ‘how do I create this in CSS’ issue I tend to look at the available options, which might involve some research if I haven’t completed this particular task before, or haven’t done so for a while and want to check for new techniques. With the range of methods I then have, some I discount immediately, either due to the constraints of the project, or the browsers that I have to support. With the rest – assuming I have a range of slightly sub-optimal ways to achieve the visual effect, some needing extra mark-up, others needing CSS hacks – I have to decide which does the least harm. Which will be easily maintainable? Which will my client understand when I hand the project back to them? Do any of these present any accessibility issues? The answer may be different depending on the context of the project, what I might choose for a personal project that I can dive in and fix if a new browser blows it all up is often different to what I would choose for work I am going to hand over to a client to implement themselves. Like so much that we do, there are no fixed answers, and I am constantly refining and developing my own skills and methods.

So, what do you do? How to you decide which method to use when faced with a bunch of ways to achieve the same end result? Are there any particular issues where you have found it difficult to decide which method to choose, or has a method you have chosen come back and bitten you afterwards?

[tags]atmedia, atmedia2006, css[/tags]

@media 2006

Drew and I got back from @media 2006 late this afternoon, and it really has been a fantastic few days. The conference for me started with a speakers dinner on Wednesday night, I’ve not attended SXSW, nor last year’s @media and so this was the first time I’d met most of the attendees ‘in real life’ despite having spoken to many of them online. I spent most of the speakers dinner feeling slightly shellshocked, however everyone was exactly as I’d imagined and I had great fun despite having to rush off early to pick up the Small Person.

The speakers and panels over the two days have been great and really interesting. One of the reasons I’ve tended not to go to conferences has been that they are often quite designer focussed. @media had a great balance of designer and developer topics, Tantek’s talk on Microformats being particularly interesting and the JavaScript Libraries: Friend or Foe? panel very funny as well as a good discussion on the various libraries and their pros and cons.

Day two saw me making an unusual foray into public speaking as I was on the Strategic CSS Project Management panel along with Roger Johansson and Dave Shea. Dave is probably the best person in the world to end up on a panel with, as he is a complete pro when it comes to speaking and presenting and ensured that the panel ran smoothly. I was convinced that when the time came to introduce myself I’d be completely unable to speak, but after that point it was actually really enjoyable. The feedback and questions during the panel and afterwards at the social events was good, and I’ve had so many really interesting conversations with people about the issues that we face when managing CSS in a large project, or where multiple developers are involved. I felt that all of us involved in that panel felt that this issue of CSS management was something that needs to be explored further, and based on the feedback I think that a lot of people are struggling with how to do this.

The whole event was really well run – including the social events in the evening and today. Probably the only negative was the fact that the wifi within the centre was appalling and so, as people have already commented, those attending found it hard to blog about what was happening during the event for those unable to attend. I’ve uploaded some photos to Flickr, check out the atmedia tag for more.

[tags]atmedia, atmedia2006[/tags]