Should I include CSS2 features?

[jonnymorris]

Hi!

I'm wondering whether or not it's a good idea to include these in my stylesheets; there's one particular feature I could really use right now which works in Safari but not Firefox, the text-shadow command. I have a blue sky with clouds background image to my header, I'd like to stick with pale cream heading text but it could be a little tricky to read across the clouds without a shadow for someone with poor eye sight, I would have added a shadow had I not been keen to use CSS rather than Photoshop.

It looks good with the shadow in Safari, and is readable in Firefox (without the shadow). Is there an alternative that will work in all browsers? I do not have IE to test, and to be honest I don't much care if Microsoft can't be bothered to deliver even CSS1 compatibility, users will be missing out on a lot more than just my website!

[pa007]

You can use properties like that if you want,, they just won't show in browsers that don't support it. As far as I am aware if a browser sees a css property it doesn't understand it just ignores it, so it should be ok. I think that's how it works anyway. The only accesible way to achieve this in other browsers is with an image and css image replacement which is fine but means more work and more code.

Oh and I think that property is a CSS 3 one. Aren't we on 2.1 now?

Pete.

[MikeHopley]

As Pete said: if a browser doesn't support a CSS property, it will just ignore it.

There's nothing wrong with enhancing your website for good browsers. As long as it still works and looks okay in all popular browsers, you'll be fine.

Just remember that most of your visitors will be using IE (and mostly IE6). Don't neglect them (so make sure that text really is readable).

[jonnymorris]

Originally Posted by MikeHopley

Just remember that most of your visitors will be using IE (and mostly IE6). Don't neglect them (so make sure that text really is readable).

I hear what you're saying, but quite frankly I don't think that's good enough - Microsoft are providing sloppy standards support and I don't see why I should have to use hacks or extra code to accommodate them. IE is always the one that causes trouble, I will make my pages viewable but I won't spend half of my time working around Microsoft's problems.

The overriding thing I've been learning about recently is how I should code my pages so that they do work on a basic level in all browsers, with or without the CSS, and without all those hacks and tricks of old. CSS is not new, people should demand better from Microsoft or use a more compliant browser, I hope that Safari will step up to the mark and show how good it can be. That's all I shall say on the subject

[MikeHopley]

Your users don't care about your web-politics, and -- unless your site is for web designers -- you won't be able to educate them.

For most websites, especially commercial/sales ones, looking good makes a big difference. If your site looks unstyled, or broken, then many people (customers?) will leave.

I'm not saying it has to be perfect in IE. But it should still look good in IE6+.

Even if your website has great content, most people's first impression will be visual. Many will make a superficial judgement and leave. Content is king, but you must get them to stay long enough to discover your wonderful content.

It's a miserable pity that IE is so popular. Unfortunately, IE remains the dominant browser (71% share). Global stats from http://www.thecounter.com/stats/2007/July/browser.php :

• IE6 -- 52%
• IE7 -- 19%
• Firefox -- 13%
• Netscape compatible -- 10%
• Safari -- 3%
• All the rest combined -- 3%

Much as I hate Microsoft, they are getting better. IE7 is a huge improvement on IE6. Its standards support, while still weaker than Firefox/Netscape/Safari/Opera, is actually quite good.

I'm hopeful that big businesses will move to Vista in the next year or so. Unlike home users (who will get Vista with new machines), businesses tend to delay upgrading until the bugs and driver issues are resolved. They also have to budget for (say) 100,000 licences! Business adoption of Vista could cause IE7 share to sky-rocket while IE6 plummets.

Once IE6 share drops below about 10%, I will spend minimal effort hacking for it. Until that glorious day, my sites must function well and look good -- not perfect, mind you -- in IE6.

Given that we can't (yet) ignore IE6, it's wise to learn the most painless ways of accommodating it. Design for good browsers, then use conditional comments to serve IE hacks: an additional, corrective stylesheet, and perhaps also javascript. This method is much cleaner than CSS hacks (which are also dangerous in the long term). You can even serve different hacks to different versions of IE . Best of all, conditional comments are valid code and are completely ignored by all good browsers.

Of course, you can choose not to hack for IE. You're the author, the designer, the boss. But it's wise to think about your audience.

[jonnymorris]

Originally Posted by MikeHopley

Your users don't care about your web-politics, and -- unless your site is for web designers -- you won't be able to educate them.

For the moment I have the luxury of choosing to ignore IE, as it is my own personal website I'm working on. I probably wouldn't make a very good web designer as it would do my nut in trying to keep up with all the hacks!

Just out of interest, do you know if people take any notice of those little W3C compliance badges? Does the fact that the website conforms to current standards but perhaps isn't displayed properly by their web browser make the semi-professional think twice, that perhaps they could be using a better browser?

[karinne]

Originally Posted by jonnymorris

For the moment I have the luxury of choosing to ignore IE, as it is my own personal website I'm working on. I probably wouldn't make a very good web designer as it would do my nut in trying to keep up with all the hacks!

Well ... there aren't that many hacks that you need to take into consideration!? It's more the fact that we've come accustomed to not using certain properties. But ... all my site work perfectly in IE6, 7, FF, Opera and Safari ... and it doesn't take me any longer to do so.

[jonnymorris]

Originally Posted by karinne

Well ... there aren't that many hacks that you need to take into consideration!? It's more the fact that we've come accustomed to not using certain properties. But ... all my site work perfectly in IE6, 7, FF, Opera and Safari ... and it doesn't take me any longer to do so.

I'm only just starting out with CSS layout, but it seems any time I want to do something I keep reading about a hack required to make it work in IE, some exception required because M$ decided to be different for no apparent reason.

You may know all these hacks and put them in intuitively, I don't know any of them.

[MikeHopley]

Originally Posted by jonnymorris

Just out of interest, do you know if people take any notice of those little W3C compliance badges?

I suspect most users ignore them, or click on them and then run away screaming.

As tools for promoting web standards, I'm doubtful of their efficacy. They seem about as useful as "You're 12 today" birthday badges. Wear with pride!

When I first made valid web pages, I covered them in W3C badges: HTML, CSS, and WAI. Then the novelty wore off and I realised the badges were just clutter.

[karinne]

Well ... give us some examples of you are having troubles with and we'll tell you if it's a hack you need or maybe just a different property that you could be using?!

[jonnymorris]

Originally Posted by karinne

Well ... give us some examples of you are having troubles with and we'll tell you if it's a hack you need or maybe just a different property that you could be using?!

Thanks for the offer. I do not have IE so only know of problems with IE when reading about how to do a certain effect. I escaped from IE and Microsoft several years ago

So far my only inconsistency is that text-shadow doesn't work in Firefox (it works very nicely in Safari), there is a work-around but I wanted to avoid using things like that, it doesn't look as nice anyway. I will just ensure that things are readable without it.

[moojoo]

With IE 7 using hacks is bad mojo anyway. Use conditional comments and IE specific Style sheets.

[MikeHopley]

Originally Posted by moojoo

With IE 7 using hacks is bad mojo anyway. Use conditional comments and IE specific Style sheets.

Exactly right, and this applies to all versions of IE (not just 7).

Technically, this is still hacking -- but it's targeted "cruise missile" hacking instead of indiscriminate "carpet bomb" hacking

[moojoo]

Yes and IE 7 which is better than 6 etc.. won;t read the hacks for IE 6 which may or may not break it in 7. That is the prob.

[jonnymorris]

Originally Posted by moojoo

Yes and IE 7 which is better than 6 etc.. won;t read the hacks for IE 6 which may or may not break it in 7. That is the prob.

And that is exactly why I didn't want to get involved! So many little things to know, all for the sake of Microsoft! Well, mostly.

It would be great if someone could collect together all of the known IE (and other browser) CSS hacks and put them in one place, is there such a thing already? I mean with real-world examples that one can copy and paste, with a technical explanation for those that care. It would help people like me who don't have the facility to test in IE, it would be a place to check to see if there's anything I need to do (even though I hate IE).

[pa007]

I prefer to think of IE as the problem child; its not bad per se, it just nees a little coercing in order to display things correctly. Besides, the only thing that really gets on my nerves is the box model thingy and the times when IE just decides to do something weird, that's a bit irritating. Other than that though, things are quite simple. I also hate the way that IE does a dashed border instead of a dotted one, that got to me a bit. Its mainly about css properties it doesn't support which doesn't break sites or make anything look terrible, it just makes you die a little on the inside. You get over it though, you have to.

Don't get disheartened, we've all arrived at this stage at some point, you learn how to play IE in the end like some kind of sick game.

Pete.

[MikeHopley]

My most-hated IE shortcoming: no support for the CSS display: table-cell. (All versions of IE.)

If this single property were fixed, then every table-based layout could be achieved easily in CSS, with none of the drawbacks of tables.