July's CSS Off! design presented quite a few more challenges than June's entry.
View my Early Bird WormSearch entry. (Yes, I know one of the headings is black. I would blame it on color-blindness, but it's a lie. It was just an oversight - I genuinely did not see it until posting today. Arg, I thought I had a fighting chance this time.)
For now, I am going to explain the semantics importance of utilizing HTML images versus CSS background-image.
Example 1:
Certain related worms feature a marker tag labeled "related" to the left of each related worm, as pictured here. Non-related worms lack such a marker tag. I initially coded this marker tag addition as a background image of a div.
View my initial markup of a normal bug versus related bug:
Note that the only thing really differentiating the two is the additional class "related" on the div. Initially, I applied a background image of the related marker on the .related.bug div. Now, suppose a user has CSS disabled: what meaning will they receive? For CSS disabled browsers, related bugs will be indistinguishable from normal bugs. This is terrible for accessibility - no bugs are related and an entire section of your site (and your effort coding) will now be overlooked.
I thus altered my copy to include an HTML image of the related marker, as follows:
This way, a browser with CSS disabled can still view the semantic meaning of the related bug. The markup for the image can be dished out on the server side when the page is requested.
Be friendly to people with different browsers - they may account for a greater percentage of your client base than you may realize!
Related articles to follow:
- Multiple background images and the bane that is IE6
- Selective 100% width divs
- Nested unordered lists for horizontal block navigation (a la google horizontal ads)
- Vertically growing accessible sections
- Sectioned heading text that is both flush left and flush right
Popularity: 57% [?]
June 23rd, 2008 at 2:30 am
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
September 14th, 2008 at 6:44 am
if you declare images in CSS (as background) does it help in the downloading time of the page? instead of html image? or the other way around?
January 1st, 2009 at 1:14 pm
teng, don't be silly. things will be downloaded at the same speed. you might get the browser's progress bar to stop sooner, but you would only be fooling yourself and your users, because the images still haven't loaded. css background images are for background images, something the user doesn't care if it has been loaded yet or not.
May 5th, 2009 at 8:24 am
@nobody - you don't be silly - of course the external stylesheet loads (with background images)... then images on the page along with other html loads asynchronously with each other. It would actually take less time to put all the images on the page because they are loading at the same time, instead of waiting for the stylesheet to load.