Spread the word

Saturday, May 24, 2008

Opera specific Css Hack - Writing Opera specific codes

CSS has always been painful in cross browser platform. But we can solve almost all problems arising on different browsers, through browser specific CSS Hacks. Previously I have wrote how you can write Browser specific CSS codes, and optimizing your site for different browsers. But there I had not wrote much about Opera (except choosing another CSS file for Opera). But now here is a cool technique to easily optimize your site for Opera browser.

To show something to Opera only use the @media all and (min-width: 0) hack. Follow this example:


/*Visible to only Opera*/
@media all and (min-width: 0) {
#wrapper {
margin: 20px;
width: 200px;
}
}

This is very much effective on Opera and hides the content within the @media all and (min-width: 0) section from all other browsers. This content is only visible to Opera and hence now you can specify specific properties in your CSS for Opera only and make your site beautiful and perfect to Opera also.

10 comments:

Timo Rissanen said...

Amazing. Surprised that none of the other browsers understand this. Tested on Opera 9.64, IE6, IE7, IE8, Chrome, Firefox3, Firefox2, Safari and SeaMonkey.

Thanks for this tip

Mike said...

FF3 reflex that too

Anonymous said...

My Firefox/3.5.3 (.NET CLR 3.5.30729)

Did see that css within the @media hack ???

Anonymous said...

Firefox sees the following, Chrome IE7 and Safari don't
div.timeline img.current {
/* margin-bottom: 1px; this would correct the Opera anomaly in css */
background: transparent url(../images/graphics/tline_g.png) repeat-x;
}

/*Visible to only Opera*/
@media all and (min-width: 0) {
div.timeline img.current {
margin-bottom: 1px;
}
}

Anonymous said...

unfortunately FF3.6 stops this from being opera only

Anonymous said...

Firefox 3.6.2, Opera 9.64, Safari 4.0.2 (for windows) and Google Chrome 4.1 are all affected unfortunately. IE7 and IE8 are the only browsers this does not affect.

Anonymous said...

it doesnt work for me :'(

Anonymous said...

yes it is not working for me also...seems like the above hack is not correct....

Capy said...

Firefox 3.6.13 is also affected with this hack.

Haresh Karkar said...

I think newer version of browsers are understanding it. It is no more hack. Mozilla 4 could understand it.

Post a Comment