CSS hacks or filters that I can't live without!
Ok ok so there are various opinions on whether we should use hacks or filters to help us with CSS styles. Is it right, is it ethical, will we go to hell, whatever...
For what it's worth I don't believe in hacks - if your CSS is not cross browser compatible (at the very worst it should look the same in Firefox 2 and IE 7) then you need to look at the CSS, refactor the markup if necessary and tweak until it's correct.
BUT that is great if your starting a new project or have the ability to say 'right we're dumping this CSS and doing it all from scratch'. That's not always a possibility and you may find yourself looking at browser bugs that just need slight margin and padding tweaks to be correct.
So... waffle and social responsiblity lecture over. Please use these hacks as you wish, I've found them very handy although they are always my last resort!!!
(Copy and paste this code into a blank HTML file - If you are having problems cross browser, make Firefox look correct then change the other browsers accordingly)
<html>
<head>
<style>
/* ALL: Show in all browsers */
#hackthis { Width:200px; height:200px; background:green; border:1px solid #000; }
/*IE7: Purple IE6 Pink: */
* html #hackthis { *background: purple; -background: pink; }
/* SAFARI: Show in Safari only */
#hackthis:empty { background:yellow; }
/* OPERA: Show in Opera only */
@media screen and (min-width: 0px) { #hackthis { background:blue; }}
</style>
</head>
<body>
<div id="hackthis">
</div>
<p>FF = Green</p>
<p>IE7 = Purple</p>
<p>IE6 = Pink</p>
<p>Safari = Yellow</p>
<p>Opera = Blue</p>
</body>
</html>
For what it's worth I don't believe in hacks - if your CSS is not cross browser compatible (at the very worst it should look the same in Firefox 2 and IE 7) then you need to look at the CSS, refactor the markup if necessary and tweak until it's correct.
BUT that is great if your starting a new project or have the ability to say 'right we're dumping this CSS and doing it all from scratch'. That's not always a possibility and you may find yourself looking at browser bugs that just need slight margin and padding tweaks to be correct.
So... waffle and social responsiblity lecture over. Please use these hacks as you wish, I've found them very handy although they are always my last resort!!!
(Copy and paste this code into a blank HTML file - If you are having problems cross browser, make Firefox look correct then change the other browsers accordingly)
<html>
<head>
<style>
/* ALL: Show in all browsers */
#hackthis { Width:200px; height:200px; background:green; border:1px solid #000; }
/*IE7: Purple IE6 Pink: */
* html #hackthis { *background: purple; -background: pink; }
/* SAFARI: Show in Safari only */
#hackthis:empty { background:yellow; }
/* OPERA: Show in Opera only */
@media screen and (min-width: 0px) { #hackthis { background:blue; }}
</style>
</head>
<body>
<div id="hackthis">
</div>
<p>FF = Green</p>
<p>IE7 = Purple</p>
<p>IE6 = Pink</p>
<p>Safari = Yellow</p>
<p>Opera = Blue</p>
</body>
</html>
posted by Marky at
11:41
1 Comments:
Here are few other ways of doing hacks:
#header{
background-color:#9a0000; /* All modern browsers */
.background-color:#003366; /* IE7 hack */
_background-color:#FFCC00; /* IE6 hack */
}
#header{
background-color/**/:#003333; /* IE6 HACK */}
Post a Comment
Subscribe to Post Comments [Atom]
<< Home