...

View Full Version : CSS hack or am I dreaming?



Antoniohawk
07-12-2005, 08:18 PM
When I'm coding for Firefox, I get really lazy and use the javascript one line comments in my css "//" to turn off a certain statement temporarily. However it might be more handy than I imagined because IE doesn't pay attention to it at all. Thus the following works in IE, but not Firefox.

body {
//background-color: red;
}CSS hack or CSS blunder?

Here's a little extension to the code to add in support for a background-color for Firefox, but it doesn't work for some reason.
body {
//background-color: red; !important /* background color for IE */
background-color: black; /* supposed background color for Firefox */
}

Proper code as follows (ala stymie):
body {
background-color: black; /* background color for Firefox */
//background-color: red; /* background color for IE */
}

stymie
07-12-2005, 08:36 PM
Try reversing the order...
and lose the '!important'.

Antoniohawk
07-12-2005, 08:51 PM
Very good point lol.

mrruben5
07-13-2005, 12:05 AM
Better use the universal selector with hjtml and parent>child selector :D, because that will validate.

Vsim
07-13-2005, 12:25 AM
Dual slashes works properly with ie 6 when used before the the selector.class.
e.g. body will be commented


//body {
property:value;
}

When the dual forward slashes are used inside of the brackets IE doesn't parse it properly. So until IE fixes this issue it can be used as a CSS hack...


body {
property:value; /* standard all browsers */
// property:value; /*IE only*/
}

This is more of an IE blunder.....
I believe this does validate, just need to use /* */ for comments so IE doesn't get confused.

harbingerOTV
07-14-2005, 12:47 AM
I just saw this post. Pretty neat. Looking at Vsim's post above he said IE6. Does this mean that if I write some thing like:



id {
property:value;
// property:value;
}
id[id] {
property:value;
}


IE lt 6 will write the first property, IE6 will write the second and everything else will write the third?

I don't have IE5 installed anywhere so I can't check it out.

Vsim
07-14-2005, 05:33 AM
Basically with CSS
if you have a property.value duplicated, the latter in the listing will take precendence *see notes*. Your background-color would take #eee with any browser.
e.g.


body {
background-color:#fff;
background-color:#eee;
}


With the usage of dual forward slash ("//") comments the browser should exclude that statment and read the background-color as #fff *see notes*
Only Internet Explorer 6 (possibly others??) will read the background-color as #eee
e.g.


body {
background-color:#fff;
//background-color:#eee;
}


not sure where ya came up the second id tag id[id] {.....

anyways if you have to do a "hack" with css its probably not worth the effect. :D

* notes or extra stuff*
the double properties, as far as I know is just bad CSS. I don't know if there are any reason(s) for the second in the list to be used besides looking at how the order the parser reads it, the last overwriting any before it.....

for the double forward slashes ("//"), I don't know anywhere on the w3c of dual forward slashes being an acceptable way to comment anything in css. I've only seen the /* */ and <!-- --> comments for inline html with docs.
http://www.w3.org/TR/CSS21/syndata.html#comments

harbingerOTV
07-14-2005, 05:53 AM
excuse me if I dont use the right term here:

the [id] and [class] are selectors(?) IE doesn't read them and thus ignore the whole line.



#main {
width: 200px;
}
#mian[id] {
width: 210px;
}


IE will render #main as 200px wide and everything else willuse the 210px attribute.

Thus written like that as the latter takes precedence. Since IE will ignore the latter the former that everything else writes will be over written by the latter.

examples:

http://www.rammstein.com/
http://home.earthlink.net/~harbingerofthevoid/

those use the [id] to use the fixed hack for excluding IE.



anyways if you have to do a "hack" with css its probably not worth the effect.


well the reson I was asking the validity of the hack was that I do a web site for some folks that although they like the look of it, I don't. I could use a few PNGs to make it more apealling. i know I could use the pngs for non-ie and IE6 but I was wondering if anyone had tested it for IE5x and IEmac. If my little example works than I could easily feed IE-non-6 the usual image and use the hack and the {} fix to feed the right pngs to the others.

mrruben5
07-14-2005, 09:21 AM
excuse me if I dont use the right term here:

the [id] and [class] are selectors(?) IE doesn't read them and thus ignore the whole line.

They are attribute selectors :D

http://css.maxdesign.com.au/selectutorial/selectors_attribute.htm

so using a[href] {wouldn't be read by IE, yes :P} That's a neat idea to use over this backslash idea.

Vsim
07-14-2005, 09:31 AM
aah I getcha I got confused..
I re-read what you wrote.
I haven't tested using // inside the brackets with anything but ie6.

hmm never played with the
class [id]
class [selector]
Interesting effects, I have no clue what the naming convention of that is.. I've been hunting around and found nothing.

I thought these links might be of some use :
some discussion on "css hacks"
http://www.codingforums.com/showthread.php?t=62818
and a way to use html comments for specific IE versions.
http://www.quirksmode.org/css/condcom.html
This seems to have a little information on
what the selector.class {property: value} naming convention stuff.
http://www.w3schools.com/css/css_pseudo_classes.asp

I'm still edumacating myself on alot of this so the lingo I use might be way off...
also harbingerofthevoid the about section. Soo true about the paper, I finally found the drive just have to find a way to get by... but you can go to school living on the street might get a grant that way. *sigh*

harbingerOTV
07-16-2005, 05:05 AM
okay I played alittle but don't know for sure if it works or not.

Like I posted earlier, I want to load pngs to make a site look better. I do know for a fact that one of the stores patrons uses Win/IE5.x . I can leave the regular jpgs for him. But for moz/ff & IE6 users I'd like to pretty it up some.

heres my possible solution:



.buttend {
f\ilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./layout/endflowie.png',sizin
gMethod ='image');
background /**/: url(../layout/endflow.jpg) bottom center no-repeat;
}
.buttend[class] {
background: url(../layout/endflow.png) bottom center no-repeat;
}


using http://dithered.com/css_filters/css_only/index.php as my source it appears that it will work this way:

the f\ilter: shows to WinIE6 and IEmac but hides from WinIE lt 6.
the background /**/: hides to WinIE6 but shows to WinIE5.x and MacIE.
the .buttend[class] hides from all versions of IE.

I have tried it on IE6 and Mozilla so far so good. I need to upload something to see if it works on IE5's.

If by chance your trying to do something similar feel free to try this out and see if it works for you.

In my solution it has to be written in this order otherwise the wrong things will be overwritten.

Green Beast
02-02-2006, 04:02 AM
Good stuff guys :)
I can use this.

Mike



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum