Posts Tagged ‘css’

CSS Hacks is bad for the carbon footprint

Wednesday, April 1st, 2009

April 1st 2009

I just finished reading CSS Tip: Targeting IE 5.x, 6 and 7 Separately – Ed Eliot. It was written 2 years and 5 months ago.

I needed to find out about some code that one of our freelance web designers had put into the stylesheets of our website at work last week.

To use an example from Ed Eliot’s site

.box {
background: #00f; /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
padding: 7px;
color: #fff;
}

Yes, I am talking about the star property hack, and underscore, escape hack.

It is different from the normal star hack in that the star is used inside the CSS style properties.

Sure, I do not mind putting in MS propriety code in my CSS – especially when it does not justify its own stylesheet.

But…

CSS hacks using browser bugs to cater for obsolete browsers is wrong on so many levels when you can use simple conditional comments.

<!--[if IE]>       IE Conditional Comment: Internet Explorer          <![endif]-->
<!--[if !IE]><!-->  IE Conditional Comment: NOT Internet Explorer      <!-- <![endif]-->
<!--[if IE 6]>     IE Conditional Comment: Internet Explorer 6 only   <![endif]-->

If you really need to use CSS hacks to do something in CSS, then you have probably implemented it wrong.

My suggestion is to anyone who tries to cater to Internet Explorer, do use conditional comments. So what if it means another file, it will only be loaded by the browser you specify. Masochists using obsolete versions of IE (IE6 is seven years old) won’t know the difference, and seriously do not care about whether a site works fast or not. A millisecond longer load time won’t make a lick of difference to them. Users of standard compliant browsers will not care the slightest, because your code works for them. They are happy not having to download the propriety code for crappy CSS implementation that Microsoft is guilty of.

Do not let CSS hacks taint your code. It is wrong, makes the code hard to validate, confuses the heck out of people, makes CSS look very Web 1.0 and it kills puppies.

You do not want to kill a puppy do you?

by-nc-nd

CSS3 for the masses

Friday, January 30th, 2009

January 30th 2009

IMHO: CSS3 is a brilliant next step for presentational design for the web. And if you have been in the game as long as I have (around 13 years since my first webpage) then you know all about degrading your code so that alpha browsers get a really nice presentation with all bells and whistles (IE8, FF 3+, Opera 9+, Safari 3+), beta browsers get an OK presentation but might miss out on minor things. Gamma browsers (I count IE <= 6, IE for Mac, Netscape <=8, AOL users) well, seriously, just UPGRADE ALREADY.

In my latest project we are using CSS3, which appearantly even IE8 does a pretty good job of presenting.

One hump I got on my back is the implementation of columns in CSS3.

Typical column layout these days is done by floating or positioning div, depending on which school of thought you follow. This page for instance has a two column layout. It works and it is brilliant.

But is there any use for columns for content?

In normal newspaper layout you are used to read text in columns, and even that becomes hard at times, as the user looses track of where they were, especially when spanning several pages, or poor layouts. With the advent of columns for the web – users will not have a reference for dealing with this. Sure it is semantic and it will degrade properly, but my argument is that it will give a poor user experience, as users will have to scroll down for content, and print-designers think that their newspaper layouts automatically can be translated to the web. Bollocks to that. If anyone sees a good example of using multiple columns on a page, please let me know.

by-nc

Firefox 3 – A new hope

Wednesday, June 18th, 2008

June 18th 2008

I have no doubt that the more tech-savvy of my visitors already know that Firefox 3 is launching on Tuesday 17th June 2008. As the geek and internet-entrapreneur that I am, this exites me a lot. Of course I have already adapted the beta as my main browser, but it has a few things that have bothered me. Most of my major tools work absolutely fine, but I really miss my Google Toolbar (strange but true – I like Googles products as I see them as productivity enhancements).

Anyway, I don’t want to get side-tracked. Firefox 3 is the first of the Alpha browsers latest updates. Internet Explorer 8 will be launched during 3rd quarter of 2008, which I myself find strange, as IE7 still is not widely used, and IE6 users keep on annoying me. Seriously, everyone should take the 5 minutes it takes to keep their browsers updated. Not only because of aestethics but also because of security issues. I know, I know. Mr Joe-Average User does not care about these things – he “just want it to work”. Well, life is not that easy unless you make it so. These days there are automatic updates for almost all major softwares used both in the home and at work. Windows update is probably the one normal users are most familiar with, but unfortunately it still gives normal users too much power – They can still turn down updates if they are connected to the web.

Firefox has so far one of the less intrusive ways of updating, it can be controlled in the options menu. The software will check if there is a new version and either download it for you and inform you when it has installed it, or if you need to download a new version, then it will let  you know the steps to get the latest version.

Anyway, if you want to read more about the new features of Firefox three, then I suggest you head over to Mozillas site. I don’t see any reason repeating the functionality here.

Although, the new bookmarking facility makes the download completely worth it.

by-nc