wow..nice article.. I learnt something 2day :)-

THANKS!!

Classic Social Bookmarker

You've gotten so many Digg Homepages in the past- You also deserve a Reddit Homepage

http://reddit.com/info/1dx17/

i have small doubt.if i am going to write a html pages that has to support both IE and firefox then do i need to switch .CSS file

for example :index.php

if (isbrowseversion == 'IE' 0 {
echo "<link rel=stylesheet" type=text/css ref="http://ie.css";
} else {
echo "<link rel=stylesheet" type=text/css ref="http://fire.css";
}

is this a good way to code, because moz-opacity and z-index does not work in IE.

Amazing cool tips!.

Thanks.

WoW, very insightful! Ghosting is my new word for the day.

Point 6: opacity is now supported by Firefox, so you don't need the -moz- prefix anymore. Safari and Opera also support it.

Suresh S:

Why not write your stylesheet for Firefox, then use a conditional comment to change it for IE:

<link rel=stylesheet" type=text/css ref="fire.css" />
<!--[if IE]>
<link rel=stylesheet" type=text/css ref="ie.css" />
<![endif]-->

the conditional comment to write inside css or in javascript

In the head of the HTML.

thanks peter.

Actually, the two stylesheets would be more for "anything other than IE" (not "for Firefox") and "IE".

And what is with all the "CSS hacks" in the article? Someone promoting that in 2007?
Use conditional comments for IE. Anyone using hacks had a hard time when IE7 came out.

By the way, I dare you to show me the CSS hack that targets "everything but Firefox 2".

For "8. Cross-browser padding": render the pages in standards compliant mode, not quirks mode and you are all set.

-moz-opacity? You got to be kidding me. We are no longer in a Firefox pre 1.0 era.

CSS bug hunting? Firebug is the first thing you should use to see what's up.

Some very lame CSS advice in that article.

Actually opacity isn't yet in CSS, it will be in CSS3 so opacity and filter will make your pages not CSS2 valid.

Well, it's a choice to sacrifice "validation" for the visual side, but I manage to have my pages valide with opacity using a simple javascript trick:

document.getElementById("el").style.opacity=5/10;
document.getElementById("el").style.filter= "alpha(opacity=50)"

hope this helps :)

> Point 6: opacity is now supported by Firefox, so you
> don't need the -moz- prefix anymore.

Thanks Peter, I will update the article!

Martin:
> And what is with all the "CSS hacks" in the article?
> Someone promoting that in 2007?

There was a warning in the article that hacks are the "dark side of the force". I don't think I can make it more clear :)

Martin:
> For "8. Cross-browser padding": render the pages
> in standards compliant mode, not quirks mode and you
> are all set.

Well, as I mentioned, it's only still a problem in IE5. Of course, if you can, by all means try to convince a customer who has this on their "must have" list to drop this. Depending on the audience and country there's not much reason to support it anymore, e.g. it's just little over 1% for a games site of mine so I'd drop it for those low ranges.

some nice hints, but recomending hacks is bad. Many starting CSS writers are overusing hacks, and then new (or some old) version of browser or some browsers they do not test work wrong. Much better is to make standard compliant CSS which looks well for FF, Opera and IE7 and then criple it for IE6 using conditional comments.

BTW: does anyone know sollution for point 3. Media separation, which would work for IE? I need to make PDA version for my web, i do not want to check it serverside, i would prefer media separation, but IE renders screen & projection media. I wander to somehow reset to defaults CSS for media=handheld, but i use too many tags, so i would prefer some easier way.

re cafefort: in (x)html you are saying in the header, what version of (x)html the document is using, for which it can be validated.
At css side, you do not say what version you are using, so it is not necessary to be valid with some version, because anyway any version you choose will not be valid with some other version, so it is just about, what validator someone who validate uses.
This note is not valid for IE only css extensions (as they never was and probably never will be in any version of the standard), but those are better to add using special css in conditional comments, then using javascript

Tomas,

I'm not sure if this is what you were referring to, but have you tried:

<style type="text/css" media="handheld">
import url('handheld.css');
</style>

Peter, have you come across the problem? Windows Mobile Internet Explorer will actually jump straight into this file:

<link rel="stylesheet" href="default.css" type="text/css" media="screen,projection,print" />

... even when you toggle through all the different display modes it offers (e.g. "desktop", or "one row"). You can see how annoying this is for this forum, for example: IE will happily take the wrong screen stylesheet and then render the forum in such a way that makes it basically impossible to read, thanks to the left-hand navigation!

I said so in a comment for an earlier post, and will repeat here.

No one should be hacking for any version of Internet Explorer before IE6-Windows. EVER. No one should using hacks for ANY old browsers anymore (Netscape 4, Opera before 7, etc.). I am sorry to all 30 of you out there using Windows 3.1 and all 1000 of you using windows 95. IE6 is and always has been available for Windows 98 and later. As Windows Vista increases in popularity (and more Windows XP users upgrade), IE7 will become the baseline and the web will slowly become less hack-filled. Macintosh fans: MacOS 8.5 and up users can still use iCab at http://www.icab.de So stop designing for old browsers. RIGHT NOW.

Stinks about Pocket IE (IEMobile?) ignoring their CSS media types. Deepfish is making me think that MS will never change this. On the other hand, it is endeavoring to give an experience faithful to IE/Windows for Windows Mobile devices. http://labs.live.com/Take+Deepfish+For+A+Swim.aspx

Conditional comments are probably the best compromise MS ever thought of forever. We get validation and keeping the silly CSS hacks to fix old versions of IE. I didn't know about the PNG trick, though. I knew about the IE only "filter" attributes but didn't realize we could use them to make PNGs work properly in IE6. THAT is pretty cool. Thanks Philipp

> No one should be hacking for any version of
> Internet Explorer before IE6-Windows. EVER. No one
> should using hacks for ANY old browsers anymore (Netscape
> 4, Opera before 7, etc.).

J., just to add that sometimes, the customer demands certain browsers. Then you will enter long (often year-long) discussions to "discuss away" browser by browser from that list. Can you believe we had to support Netscape 4 for a large company website in 2003-2005 until we were able to get rid of it? IE5 was also on our list back then. So yes, you're right, but also, sometimes it's not as easy as just saying "never". Sometimes you present a statistic and the customer will say "well, but we still have this browser installed on our company intranet!", and then there will be a lot of politics involved. But the general direction is definitely to forget about old browsers as soon as they drop below a certain percentage.

Very similar discussions happened in our Flash department back then reg. the questions of which Flash versions still to support!

> There was a warning in the article that hacks are the "dark side of the force".
> I don't think I can make it more clear :)

Yes you can. Write the example so that they use conditional comments.
http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/

And the statement that there is a css hack that targets every browser except Firefox is still wrong. There is no such thing.

> Yes you can. Write the example so that they
> use conditional comments.

I think CSS hacks are never "elegant", not in your way either. As I said in my post: "use CSS hacks sparingly, and only when really needed."

> And the statement that there is a css hack
> that targets every browser except Firefox is still wrong.

I never said this, I was trying to illustrate the concept of a CSS hack with two random hypothetical examples! Item #9 was meant to show ways to search for hacks with Google Code Search, nothing less, nothing more.

Philip: never seen that, sorry; not had the opportunity to do much coding for handhelds, yet.

Philipp a goodl teacher. I am still learning this.

Re: padding differences cross-browser.

For the time being I eschew padding for any elements with fixed widths. An extra level of nesting + margins will ensure x-browser compliance

JamesP, that's an excellent way to avoid the need for a CSS hack. I'll be converting my stylesheets to use nesting+margins. Thanks!

Great article!

By the way, Browserpool is not free. It's nearly $37/month.

Yeah nice article, so nice that I have actually seen the same article on another website

Where Jermayn?

Philipp,

I did a search to see what sites had your CSS tips article. The following links have the exact CSS Tips post but they all seem to give you credit for it.

http://www.blogowogo.com/blog_article.php?aid=667535&t=5
http://www.devwebpro.co.uk/2007/0330.html
http://www.newsfactor.com/blog_article.php?aid=667535
http://72.14.253.104/search?q=cache:yVS7Gq-jJ44J:www.siliconmeadow.net/blogs-we-like%3Fpage%3D4+%22Use+a+deeper+selector.+Sometimes,+the+styling+you+want+to+achieve+is+overridden+by+another+selector+somewhere+else+in%22&hl=en&ct=clnk&cd=8&gl=us&client=firefox-a
http://www.goorank.com/sem/news/css-tips.htm

What's this?
http://www.blogowogo.com/blog_sources.php?do=show_posts&source_id=550&t=5

Seems BlogoWogo republishes the RSS feed here into a kind of digg-ranked tutorial system. For reference, WebProNews and Google.Blogoscoped.cn are the only ones that contacted me for republications – not that I mind the other republications! In fact the full-feed and Creative Commons license here makes it easy to grab and run with the content, and as long as they give credit...