Google Blogoscoped

Forum

CSS Tips  (View post)

/pd [PersonRank 10]

Friday, March 30, 2007
12 years ago7,496 views

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

THANKS!!

Search-Engines-Web.com [PersonRank 10]

12 years ago #

Classic Social Bookmarker

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

reddit.com/info/1dx17/

Suresh S [PersonRank 10]

12 years ago #

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=" ie.css\";
} else {
echo "<link rel=stylesheet" type=text/css ref=" fire.css\";
}

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

Balakumar Muthu [PersonRank 1]

12 years ago #

Amazing cool tips!.

Thanks.

James Xuan [PersonRank 10]

12 years ago #

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

Peter Gasston [PersonRank 1]

12 years ago #

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

[put at-character here]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]-->

Suresh S [PersonRank 10]

12 years ago #

the conditional comment to write inside css or in javascript

Peter Gasston [PersonRank 1]

12 years ago #

In the head of the HTML.

Suresh S [PersonRank 10]

12 years ago #

thanks peter.

Martin [PersonRank 0]

12 years ago #

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.

cafefort [PersonRank 0]

12 years ago #

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 :)

Philipp Lenssen [PersonRank 10]

12 years ago #

> 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.

Tomáš Kapler [PersonRank 1]

12 years ago #

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.

Tomáš Kapler [PersonRank 1]

12 years ago #

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

Peter Gasston [PersonRank 1]

12 years ago #

[put at-character here] Tomas,

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

<style type="text/css" media="handheld">
[put at-character here]import url('handheld.css');
</style>

Philipp Lenssen [PersonRank 10]

12 years ago #

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!

J. McNair [PersonRank 10]

12 years ago #

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 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. labs.live.com/Take+Deepfish+Fo ...

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

Philipp Lenssen [PersonRank 10]

12 years ago #

> 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!

Martin [PersonRank 0]

12 years ago #

> 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.
brucelawson.co.uk/index.php/20 ...

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

Philipp Lenssen [PersonRank 10]

12 years ago #

> 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.

Peter Gasston [PersonRank 1]

12 years ago #

[put at-character here]Philip: never seen that, sorry; not had the opportunity to do much coding for handhelds, yet.

Hong Xiaowan [PersonRank 10]

12 years ago #

Philipp a goodl teacher. I am still learning this.

JamesP [PersonRank 0]

12 years ago #

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

Roger Browne [PersonRank 10]

12 years ago #

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!

Paul Mycroft [PersonRank 0]

12 years ago #

Great article!

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

Jermayn [PersonRank 1]

12 years ago #

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

Philipp Lenssen [PersonRank 10]

12 years ago #

Where Jermayn?

Colin Colehour [PersonRank 10]

12 years ago #

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.

blogowogo.com/blog_article.php ...
devwebpro.co.uk/2007/0330.html
newsfactor.com/blog_article.ph ...
72.14.253.104/search?q=cache:y ...
goorank.com/sem/news/css-tips. ...

Ionut Alex. Chitu [PersonRank 10]

12 years ago #

What's this?
blogowogo.com/blog_sources.php ...

Philipp Lenssen [PersonRank 10]

12 years ago #

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...

This thread is locked as it's old... but you can create a new thread in the forum. 

Forum home

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!