Comments on: Filtering CSS http://stopdesign.com/archive/2004/07/06/filtering-css.html Stopdesign is the creative outlet of Douglas Bowman. Tue, 04 May 2010 11:39:03 -0700 hourly 1 http://wordpress.org/?v= By: Douglas Bowman http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1868 Douglas Bowman Wed, 11 Aug 2004 16:03:13 +0000 http://70.32.90.75/?p=204#comment-1868 <a href="#comment54" rel="nofollow">Frank</a>: It looks like you have everything right. Nothing obviously wrong stands out if you've reproduced your code here exactly as you have it. So I'm going to take a guess, and say that it *might* have something to do with your cache settings? IE/Mac caches style sheets pretty fiercely, and doesn't let go. So you could be making all kinds of changes, but IE/Mac won't show any of them until it grabs the new style sheet. Either load each style sheet directly (by typing in its URL and hitting reload). Or go into preferences, and under Web Browser, select Advanced, then make sure that Cache is set to update pages "Always". Your IE5/Mac audience may not have their cache set up like this, but if you're developing and testing pages, it's necessary for you to do this so you can see the changes without manually reloading each of your style sheets each time. If it's not a cache problem, I'm not sure what it could be. Frank: It looks like you have everything right. Nothing obviously wrong stands out if you’ve reproduced your code here exactly as you have it.

So I’m going to take a guess, and say that it *might* have something to do with your cache settings? IE/Mac caches style sheets pretty fiercely, and doesn’t let go. So you could be making all kinds of changes, but IE/Mac won’t show any of them until it grabs the new style sheet.

Either load each style sheet directly (by typing in its URL and hitting reload).

Or go into preferences, and under Web Browser, select Advanced, then make sure that Cache is set to update pages “Always”.

Your IE5/Mac audience may not have their cache set up like this, but if you’re developing and testing pages, it’s necessary for you to do this so you can see the changes without manually reloading each of your style sheets each time.

If it’s not a cache problem, I’m not sure what it could be.

]]> By: Frank http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1867 Frank Wed, 11 Aug 2004 14:26:41 +0000 http://70.32.90.75/?p=204#comment-1867 Not sure if there is still activity on this, but if somebody reads this, I'm hoping you can help. For some reason the BPF does not seem to be working for me on IE5/Mac. I'm not sure if I'm doing it properly, but for some reason it won't pick up the styles I add to the Mac stylesheet. Here's how I'm doing it: <code> /*\*//*/ @import "ie5mac.css"; /**/ </code> And a sample style I have to test whether it's working is: <code> body{ background-color: red; } </code> I'm sure it's something obvious that I'm missing, but I can't seem to find the problem. Any help would be appreciated! Thanks! Not sure if there is still activity on this, but if somebody reads this, I’m hoping you can help.

For some reason the BPF does not seem to be working for me on IE5/Mac. I’m not sure if I’m doing it properly, but for some reason it won’t pick up the styles I add to the Mac stylesheet.

Here’s how I’m doing it:

/*\*//*/
@import "ie5mac.css";
/**/

And a sample style I have to test whether it’s working is:

body{
background-color: red;
}

I’m sure it’s something obvious that I’m missing, but I can’t seem to find the problem.

Any help would be appreciated!

Thanks!

]]> By: Loz Gray http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1866 Loz Gray Thu, 29 Jul 2004 16:12:52 +0000 http://70.32.90.75/?p=204#comment-1866 I discovered the same as post 43 the other day. The difference is that I have: /*\*/ @import "/portfolio/style/screen_all.css"; /*/ @import "/portfolio/style/screen_ie5mac.css"; /**/ in a server side include in the top of all my documents. Is it better to have it in the stylesheet instead? I discovered the same as post 43 the other day. The difference is that I have:

/*\*/
@import “/portfolio/style/screen_all.css”;
/*/
@import “/portfolio/style/screen_ie5mac.css”;
/**/

in a server side include in the top of all my documents. Is it better to have it in the stylesheet instead?

]]> By: Phoat http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1865 Phoat Thu, 22 Jul 2004 16:20:00 +0000 http://70.32.90.75/?p=204#comment-1865 I have a question. Why all this talk about creating some weird syntax to filter out IE, when conditional comments have worked since IE5? Granted you couldn't distiguish between IEWin or IEMac but I think conditional comments is something that is very underused and very powerful. Now with Tantek’s newest hack, you can add a conditional comment to include IE specific hacks and then in the IE style sheet, include IE/Mac specific hacks. You can even go so far as to seperate these hacks into seperate files as so. <style> regular styles here <!--[if IE 6];> @import url(ie.css); <![endif]--> </style> in your ie.css file then you can then use comment 34's method of determinining whether ie/win or ie/mac is used... /*\*/ @import “iewin.css”; /*/ @import “iemac.css”; /**/ I'm not sure if this will work in a seperate style sheet, but if it does, it could be a good way to keep all your hacks seperate for specific browsers, so when those become obsolete, all you need to do is delete the reference to the css, not go edit each line where a hack exists. Any thoughts/comments about this? I have a question.

Why all this talk about creating some weird syntax to filter out IE, when conditional comments have worked since IE5?

Granted you couldn’t distiguish between IEWin or IEMac but I think conditional comments is something that is very underused and very powerful.

Now with Tantek’s newest hack, you can add a conditional comment to include IE specific hacks and then in the IE style sheet, include IE/Mac specific hacks. You can even go so far as to seperate these hacks into seperate files as so.

<style>
regular styles here

<!–[if IE 6];>
@import url(ie.css);
<![endif]–>

</style>

in your ie.css file then you can then use comment 34′s method of determinining whether ie/win or ie/mac is used…

/*\*/
@import “iewin.css”;
/*/
@import “iemac.css”;
/**/

I’m not sure if this will work in a seperate style sheet, but if it does, it could be a good way to keep all your hacks seperate for specific browsers, so when those become obsolete, all you need to do is delete the reference to the css, not go edit each line where a hack exists.

Any thoughts/comments about this?

]]> By: Tommy Hanning http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1864 Tommy Hanning Tue, 20 Jul 2004 17:58:26 +0000 http://70.32.90.75/?p=204#comment-1864 Ok, I don't really understand this. I believe I'm getting it wrong...I've been trying this but my site (my navigation, that is) won't work on IE5/Mac anyways...I'm doing something wrong I guess....but what? I have to admit that I'm fairly new to this... Ok, I don’t really understand this. I believe I’m getting it wrong…I’ve been trying this but my site (my navigation, that is) won’t work on IE5/Mac anyways…I’m doing something wrong I guess….but what?

I have to admit that I’m fairly new to this…

]]> By: Let Me See If I Get This http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1863 Let Me See If I Get This Thu, 15 Jul 2004 19:01:02 +0000 http://70.32.90.75/?p=204#comment-1863 Ok, I understand the reason for this filter. I haven't had too much problem with IE/Mac so I haven't had to look for workarounds. That being said, when you send someone to the alternate css, what should be on that stylesheet (meaning where can I find what issues IE/Mac or Win has)? Ok, I understand the reason for this filter. I haven’t had too much problem with IE/Mac so I haven’t had to look for workarounds.

That being said, when you send someone to the alternate css, what should be on that stylesheet (meaning where can I find what issues IE/Mac or Win has)?

]]> By: beto http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1862 beto Wed, 14 Jul 2004 06:17:33 +0000 http://70.32.90.75/?p=204#comment-1862 This couldn't just come more timely for us. It was precisely today that one of our workmates came to my desk foaming at the mouth (okay, that was only a slight exaggeration), whining about how come his precious all-CSS layout worked wonders in Safari and Firefox and was torn to shambles on IE/Mac. I didn't know what to tell him at the time, knowing about all the millions of compatibility issues. Needless to say, I emailed him this pass filter tutorial later. This should be the answer to his woes... and mine as well. I still hate hacks though. However I applaud every attempt to make this neccesary evil less sucky. This couldn’t just come more timely for us. It was precisely today that one of our workmates came to my desk foaming at the mouth (okay, that was only a slight exaggeration), whining about how come his precious all-CSS layout worked wonders in Safari and Firefox and was torn to shambles on IE/Mac. I didn’t know what to tell him at the time, knowing about all the millions of compatibility issues. Needless to say, I emailed him this pass filter tutorial later. This should be the answer to his woes… and mine as well.

I still hate hacks though. However I applaud every attempt to make this neccesary evil less sucky.

]]> By: Egor Kloos http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1861 Egor Kloos Mon, 12 Jul 2004 15:53:49 +0000 http://70.32.90.75/?p=204#comment-1861 I've used this trick once when I found out about the comment hack. Totally forgot about it. Better make a mental note, so I don't forget it again. I’ve used this trick once when I found out about the comment hack. Totally forgot about it. Better make a mental note, so I don’t forget it again.

]]> By: adam http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1860 adam Sun, 11 Jul 2004 21:28:34 +0000 http://70.32.90.75/?p=204#comment-1860 Comment 43 is an important insight. Since there is no need to keep the two sets of slashes together you can make a 'hide from mac' block followed by a 'show to mac' block. Another function of this would be to combine it with * html to put all the IE hacks in one place: <code> /*\*/ * html {iewin rules;} /*/ * html {iemac rules;} /**/ </code> Comment 43 is an important insight. Since there is no need to keep the two sets of slashes together you can make a ‘hide from mac’ block followed by a ‘show to mac’ block. Another function of this would be to combine it with * html to put all the IE hacks in one place:

/*\*/
* html {iewin rules;}
/*/
* html {iemac rules;}
/**/

]]> By: Ed http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1859 Ed Fri, 09 Jul 2004 16:10:41 +0000 http://70.32.90.75/?p=204#comment-1859 <cite>“Do you think the reason that there are few IE5/Mac users visiting your site may be due to the fact that when they view your site with their browser it looks like crap?”</cite> In a word... no. :} “Do you think the reason that there are few IE5/Mac users visiting your site may be due to the fact that when they view your site with their browser it looks like crap?”

In a word… no. :}

]]> By: Todd Dominey http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1858 Todd Dominey Fri, 09 Jul 2004 15:15:58 +0000 http://70.32.90.75/?p=204#comment-1858 Perfect timing Douglas -- I was just about to start fixing some IE 5 / Mac issues in a site I'm building, and this method is far easier, faster, and cleaner than what I originally planned. Perfect timing Douglas — I was just about to start fixing some IE 5 / Mac issues in a site I’m building, and this method is far easier, faster, and cleaner than what I originally planned.

]]> By: Shaun Inman http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1857 Shaun Inman Fri, 09 Jul 2004 14:39:14 +0000 http://70.32.90.75/?p=204#comment-1857 Somebody requested an IE 6 band pass filter. Try conditional comments. As long as they are downlevel-hidden all other browsers will see them as regular comments--which are perfectly valid. I handle the contents of my <code><head></code> tags with an include so this addition is easy enough to make. For IE PC 6: <code><!--[if IE 6]> <style type="text/css" media="screen"> /* <![CDATA[ */ @import url(index_css/iepc6.css); /* ]]> */ </style> <![endif]--> </code> For IE PC 5.x: <code><!--[if IE 5]> <style type="text/css" media="screen"> /* <![CDATA[ */ @import url(index_css/iepc5.css); /* ]]> */ </style> <![endif]--> </code> Or just for IE PC regardless of version: <code><!--[if IE]> <style type="text/css" media="screen"> /* <![CDATA[ */ @import url(index_css/iepc.css); /* ]]> */ </style> <![endif]--> </code> Somebody requested an IE 6 band pass filter. Try conditional comments. As long as they are downlevel-hidden all other browsers will see them as regular comments–which are perfectly valid.

I handle the contents of my <head> tags with an include so this addition is easy enough to make.

For IE PC 6:

<!--[if IE 6]>
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index_css/iepc6.css);
/* ]]> */
</style>
<![endif]-->

For IE PC 5.x:

<!--[if IE 5]>
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index_css/iepc5.css);
/* ]]> */
</style>
<![endif]-->

Or just for IE PC regardless of version:

<!--[if IE]>
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index_css/iepc.css);
/* ]]> */
</style>
<![endif]-->

]]> By: Michael Guitton http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1856 Michael Guitton Fri, 09 Jul 2004 14:30:51 +0000 http://70.32.90.75/?p=204#comment-1856 Interestingly, you may also use this great new hack as an if/else statement: /*\*/ @import "allbutie5mac.css"; /*/ @import "ie5macbandpass.css"; /**/ Interestingly, you may also use this great new hack as an if/else statement:

/*\*/
@import “allbutie5mac.css”;
/*/
@import “ie5macbandpass.css”;
/**/

]]> By: Benjamin http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1855 Benjamin Fri, 09 Jul 2004 00:18:54 +0000 http://70.32.90.75/?p=204#comment-1855 Thanks teh master, a valid point. Eugene, building for mac is just as important though the market is smaller than pc (a lot smaller) still just as important you could introduce the mac back slash hack if you need to. * html #divnav{ proper\ty /**/: value; } remember though the backslash only works with letters after G Thanks teh master, a valid point.

Eugene, building for mac is just as important though the market is smaller than pc (a lot smaller) still just as important

you could introduce the mac back slash hack if you need to.

* html #divnav{
proper\ty /**/: value;
}

remember though the backslash only works with letters after G

]]> By: Ed Knittel http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1854 Ed Knittel Thu, 08 Jul 2004 22:12:37 +0000 http://70.32.90.75/?p=204#comment-1854 I'm often amused when I hear people asking why they should bother developing for IE5/Mac when it's clear to them that the number of visitors to their site using IE5/Mac is such a small and insignificant number. I want to say to that person "Do you think the reason that there are few IE5/Mac users visiting your site may be due to the fact that when they view your site with their browser it looks like crap?" I'm inclined to think that perhaps if your site worked and functioned appropriately for a wide range of browsers you may see more visitors from across the board. I believe this is much of the same reason that people are embracing Accessible web site development. If you don't build an accessible web site you won't get a lot of people with disabilities visiting your site. Using that big zero from your statistics as a reason not to develop more inclusively is a sad one. I thank and welcome this new solution with open arms. I’m often amused when I hear people asking why they should bother developing for IE5/Mac when it’s clear to them that the number of visitors to their site using IE5/Mac is such a small and insignificant number. I want to say to that person “Do you think the reason that there are few IE5/Mac users visiting your site may be due to the fact that when they view your site with their browser it looks like crap?” I’m inclined to think that perhaps if your site worked and functioned appropriately for a wide range of browsers you may see more visitors from across the board. I believe this is much of the same reason that people are embracing Accessible web site development. If you don’t build an accessible web site you won’t get a lot of people with disabilities visiting your site. Using that big zero from your statistics as a reason not to develop more inclusively is a sad one.

I thank and welcome this new solution with open arms.

]]> By: Eugene T.S. Wong http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1853 Eugene T.S. Wong Thu, 08 Jul 2004 19:07:26 +0000 http://70.32.90.75/?p=204#comment-1853 Thank you both for sharing this information with us. I can't emphasize enough how much your explanation helped me. I have programming experience, yet it didn't make sense to me @ 1st. I'll try to make use of it, but without a Mac to test it on, I'll probably end up giving IE 5 Mac users no styles @ all. But then again, no Mac users are coming to my web sites right now. :^/ I wish it was easier to know what to do. Thank you both for sharing this information with us. I can’t emphasize enough how much your explanation helped me. I have programming experience, yet it didn’t make sense to me @ 1st.

I’ll try to make use of it, but without a Mac to test it on, I’ll probably end up giving IE 5 Mac users no styles @ all. But then again, no Mac users are coming to my web sites right now. :^/

I wish it was easier to know what to do.

]]> By: The Master http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1852 The Master Thu, 08 Jul 2004 16:10:22 +0000 http://70.32.90.75/?p=204#comment-1852 Benjamin-- If the site being designed doesn't use too many hacks, it's not that big of a deal. But in the case of a website I'm currently working on, it came in handy. The reason being ie5mac for whatever reason didn't like the em measurements (which is what I used for all my measurements in this new site), so I had to convert all my measurements to PX, once I did that it loaded perfect in ie5mac. Thus, to keep the liquid nature of the site for all other browsers I had to serve two different style sheets using the hide from ie5mac hack and this new one. Benjamin–
If the site being designed doesn’t use too many hacks, it’s not that big of a deal. But in the case of a website I’m currently working on, it came in handy. The reason being ie5mac for whatever reason didn’t like the em measurements (which is what I used for all my measurements in this new site), so I had to convert all my measurements to PX, once I did that it loaded perfect in ie5mac. Thus, to keep the liquid nature of the site for all other browsers I had to serve two different style sheets using the hide from ie5mac hack and this new one.

]]> By: Benjamin http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1851 Benjamin Thu, 08 Jul 2004 11:04:12 +0000 http://70.32.90.75/?p=204#comment-1851 Why would you want to seperate and have extra css files? I find I only have to hack 1% of the time for mac majority of the time its for the difference in rendering padding and widths between ie and gecko/mozilla browsers that I am using the standards backslash hack. Why would you want to seperate and have extra css files?

I find I only have to hack 1% of the time for mac

majority of the time its for the difference in rendering padding and widths between ie and gecko/mozilla browsers that I am using the standards backslash hack.

]]> By: Chris Hunt http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1850 Chris Hunt Thu, 08 Jul 2004 09:57:36 +0000 http://70.32.90.75/?p=204#comment-1850 <cite>In a way, we've just moved the hacks to the style sheet.</cite> That's true, but it's a significant improvement on the olden days. We used to have hacks littered thoughout every page on the site. A nightmare to maintain if things change. Now those hacks are concentrated in ONE place. If you decide, say, to pull support for IE5/Mac, you have one file to edit instead of all of them. In a way, we’ve just moved the hacks to the style sheet.

That’s true, but it’s a significant improvement on the olden days. We used to have hacks littered thoughout every page on the site. A nightmare to maintain if things change.

Now those hacks are concentrated in ONE place. If you decide, say, to pull support for IE5/Mac, you have one file to edit instead of all of them.

]]> By: Jeff Adams http://stopdesign.com/archive/2004/07/06/filtering-css.html#comment-1849 Jeff Adams Thu, 08 Jul 2004 07:11:17 +0000 http://70.32.90.75/?p=204#comment-1849 I would guess that most Opera are very conscious of ne versions and upgrade as they come out. Personally, I don't worry about Opera versions older than 6. For that matter I don't worry to much about 6 either. I would guess that most Opera are very conscious of ne versions and upgrade as they come out. Personally, I don’t worry about Opera versions older than 6. For that matter I don’t worry to much about 6 either.

]]>