Archive for the 'css' Tag

  1. Aural Media Type

    Having added a handheld, and print stylesheet to this site recently, I was thinking a little about the Aural media type. So CSS is all about presentation of content. The idea here was to be able to control how content is presented when read - so being able to specify that H1 elements are read in a booming, male, American voice etc.

    Although this is very appealing and a very cool idea, I just don’t think it makes sense. When looking at a page on screen, there are lots of visual cues that help you make sense of the content. This means that we can apply different presentation and design without leaving you confused about what you’re looking at.

    When content is read, one of the main clues you have to differentiate and make sense of content is how the content is read. This means it makes sense for different content to stick to the same presentation, or conventions, so that you can learn what those conventions are, and what they mean. If everyone has control over audio presentation of their content, there is no pattern to learn, and it must be much harder to switch from document to document while listening.

    Not that this really matters yet, but it may have more impact as there are more embedded devices with connectivity - so being able to listen to blog posts in your car etc.

    Posted at 9:24 am on 13/12/07

    Tags: , ,

    Comments: None

  2. Wearing body armour to buy milk

    There’s been quite a lot of talk in the web development community recently (and a couple of books) about bulletproof techniques / design. The basic idea is to adopt techniques that are as robust as possible and cater for a wide variety of situations without breaking down.

    After reading a recent post, I was thinking about Image Replacement techniques in CSS and to what degree you need to take this approach - specifically in response to a technique where you add an additional empty inline element, size it to width: 100% and height: 100%, then set the background image on this element. The thinking is that with CSS on and Images disabled, you still get the text.

    That’s where I start to get edgy. CSS is about the visual presentation of content. I think it’s perfectly acceptable for a design to have dependencies on images applied via CSS to work well. Images applied via the CSS background-image are all about visual presentation of content. I can’t quite figure out who would surf now, want the visual presentation of content (i.e. CSS) but not want the images. I don’t think many people are constrained on bandwidth, and they always have the option of disabling CSS to get the raw content and nothing else.

    I think attempting to get the hybrid, crippled version of a design to work well is flawed. People have the option to get just the raw content, or the content with a visual design applied. Asking for a visual design without images?? Then adding extra markup to cater for it?? Sorry, don’t get it.

    Posted at 9:41 am on 4/12/07

    Tags: , ,

    Comments: None

  3. Transcending CSS

    In case you haven’t read about it, Transcending CSS is due for publication in the near future, and should be a really interesting read. I would pick this up if you’re interested in visual design for the web, or simply have to implement more interesting or complex visual designs.

    I’m currently reading the paper version of Joel On Software on recommendation from Martin. It’s quite addictive reading, and generally provides very good coverage of the main reasons why software projects go wrong, and the key things that you should ensure are put in place to avoid this.

    I think most people would benefit from putting on their humble shoes and reading this to reflect on their own practices and what can be improved. It’s also extremely enjoyable and easy reading, which is very hard to come by with technical material.

    Posted at 9:24 am on 20/11/06

    Tags: , , , ,

    Comments: None

  4. HasLayout in IE7

    The majority of freaky rendering behaviour in IE6 came down to whether the haslayout attribute was applied to an element. This was a speed optimisation in the rendering engine - certain behaviour was skipped when deciding how to render an element if haslayout was false to increase the efficiency of rendering a page. The result was that a valid set of CSS instructions would produce unexpected rendering behaviour in IE6 unless haslayout was true on certain elements.

    One of the hacks used to get around this was to apply height: 1px to an element (in a hacks file, served only to IE6 via conditional comments). As IE6 treated height like min-height, this would have no adverse behaviour, but would result in haslayout resolving to true for the element.

    This morning I came across my first strange rendering issue in IE7 due to haslayout being false on a container element. I think a lot of the quirks have been fixed, but just be aware that the engine can still render differently according to haslayout. The previous height:1px fix is no longer applicable, as IE7 quite correctly respects any absolute height that you specify.

    The fix in this case was to set min-height: 1px, which is another attribute that will now result in haslayout being set. In our case this had no adverse effect on the desired rendering, and therefore was a suitable fix. The actual problem was minor - 1px of extra padding on an element for no good reason.

    I think in a lot of cases setting a min-height value would be a good approach (obviously this can be abstracted to a seperate file and served with conditional comments). However this is a fairly unobtrusive fix, so could stay with the core set of instructions without polluting the water too much.

    Posted at 11:55 am on 4/10/06

    Tags: , , , ,

    Comments: None

  5. Musings on Mass Uptake of IE7

    I was thinking about the impact of the delivery of IE7 via Windows Update and the fact that most people will be in possession of a good quality modern browser in the near future. I think the shortcomings of the previous version were only really so prominent due to the period of inactivity which allowed the competition to overtake.

    I developed a (probably quite sad) affection for Firefox due to the advanced state of it’s rendering engine and CSS support, but I think IE7 is actually an amazing achievement. To be in a situation where a number of different browsers running on different platforms can render in a consistent way is a big milestone. I now feel like I should also have an IE7 t-shirt and wear them on alternate days (although wearing FF regalia to TVP does seems a little rebellious).

    So it looks like the major pain in web development is slipping away. The fight for web standards is almost starting to seem retro, because of the prominent awareness of all the issues in the general populous. I really enjoyed going to the @Media event this year, but it seemed like the speakers were struggling to cover material that people weren’t already aware of. This was a massive difference from the same event the previous year.

    I’m extremely interested to see how Firefox develops in response to the IE7 full release. I think competition is extremely healthy, and will ensure that the renewed energy in the development of IE continues in the future.

    In CSS terms I think my personal favourite is proper implementation of width and height, and full support for min-width and max-width. Simple, but so welcome!

    Posted at 9:41 am on 5/09/06

    Tags: , ,

    Comments: None