Found IE, FF, OP browser CSS 'hack'

dont know if anyone else found this but...

[Archer74]

I was browsing in yahoo answers and came across a very interesting question. I really dont know if the solution/s i found are real CSS rules.

The poster was having problems displaying her myspace page in different browsers. She said it looks fine in IE and Op but some elements are 'misplaced' in FF. so i thought she needs some way to make FF ignore lines of css while IE and Op will not. well, i found an answer without using javascript. and after playing around with css errors, i found a way to do the same for all 3 browsers.

<div id="marker">marker</div>
<div id="target">target</div>

the 2 divs above can be displayed differently by the 3 browsers by using backslash and an asterisk or backslash(i know this one is a css error in FF and Op)

<style>

#marker, #target {
height:100; width:200;
background: green;
border:2px solid black}

/*3 browsers will see this. nothing should be after that \ at the end[no whitespace] or it wont work*/
#target {border:4px solid steelblue;
margin: -50 0 0 50;
background:gray
color:yellow}\

/*IE & OP will ignore everything here but FireFox will read it and overwrite the previous*/
#target {margin: -90 0 0 100;
border-color:blue;
background:black;
color:white;
text-align:center! important}

#target {text-align:right;}

/*OP and FF will ignore properties with an asterisk preceeding it but IE will not*/
#target {* border:4 solid yellow;
* background:maroon;
* text-align:left;
color:white;
* margin: -20 0 0 50}
</style>

[edited by: Archer74 at 9:03 am (utc) on Sep. 1, 2007]

[encyclo]

Hi Archer74 - the biggest risk with these sorts of hacks is that they require constant maintenance to keep them up to date - with each revision of each browser, you need to revisit the code to see if it still works as expected.

So, it's not a safe long-term solution to any problem to use such browser-specific methods. Better to build a simpler but more universal solution, ideally one which gracefully degrades on less capable platforms.

[Robin_reala]

Easier said than done with MySpace!

But yes, I agree. I still use CSS hacks at work and sanction their use by my guys, but only on the proviso that they look for ways to recode it to avoid them first, then if they do have to use them that add a comment that starts with :hack: and includes the browsers affected and the reasons why. This has made maintenance a lot easier.