Css Hack your Browser

admin — Thu, 24 Jul 2008 02:40:25 +0000

While I strongly advise using hacks at a minimum especially when it comes to CSS there is a time and a place for them, especially when you need a quick way to target a browser other than Internet Explorer.

CSS Hacks: The Problem

Most standards favoring browsers (Firefox, Opera & Safari) have no method of targeting CSS to the specific browser while Internet Explorer, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only IE.

The Setup

To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly

Opera 7.2 – 9.5

Safari

Firefox

Firefox 1 – 2

IE 7

IE 6

Next I automatically hid all P tags:

Targeting Internet Explorer With CSS Using Conditional Comments

The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I’m not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:

Targeting Internet Explorer With CSS Using Parser Hacks

I wouldn’t recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.
/* IE 7 */ html > body #ie7 { *display: block; } /* IE 6 */ body #ie6 { _display: block; }

Targeting Firefox With CSS

The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I’ve found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.
/* Firefox 1 – 2 */ body:empty #firefox12 { display: block; } /* Firefox */ @-moz-document url-prefix() { #firefox { display: block; } }

Targeting Safari With CSS

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.
/* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } }

Targeting Opera With CSS

The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I’ve listed simply because it’s targeting ALL browsers that support -min-device-pixel-ratio that aren’t -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.
/* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block; } }

Putting It All Together:

CSS Browser Hacks

Opera 7.2 – 9.5

Safari

Firefox

Firefox 1 – 2

IE 7

IE 6

Sources

http://msdn.microsoft.com/en-us/library/ms537512.aspx

http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

http://perishablepress.com/press/2006/08/27/css-hack-dumpster/

http://thomas.tanreisoftware.com/?p=11#opera

Opera Mobile 9.5 Beta

admin — Sun, 20 Jul 2008 02:46:42 +0000

Opera Software released the beta version of their Opera Mobile 9.5 browser . Much like users of the iPhone’s Safari browser, Opera Mobile users can enjoy both slimmed-down sites made for mobile, as well as standard desktop versions right from their phone.

Though still in beta, today’s release promises faster performance, enhanced viewing functionality, and better usability over v8.65.

Specifically, here are the features Opera described in their press release today:

Faster — Opera has always been among the fastest browsers — if not the fastest — available. Opera Mobile 9.5 beta continues this fine tradition with improved performance over Opera Mobile 8.65.

Pan and zoom — Just like Opera Mini, Opera Mobile 9.5 beta defaults to full Web page viewing and allows users to pan and zoom into their desired content easily.

Improved user interface — Opera has completely renovated its mobile UI. Cleaner and more intuitive, the new UI is designed for quick and easy navigation.

Opera Dragonfly — Use your Opera desktop browser to debug sites on your mobile phone through the Opera Mobile 9.5 debug menu.

Improved standards support — Opera Mobile 9.5 is the most standards compliant browser available, and the company remains steadfast in its commitment to make the Web accessible for all.

Save pages and/or images — With a click, simply save pages to your phone.

Darkfarmer » opera

Css Hack your Browser

Opera Mobile 9.5 Beta