Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Wednesday, June 17, 2009

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately.

Labels: , , , , , ,

48 Comments:

Anonymous Thomaz Cia said...

The hack for Chrome and Safari is now used to FF v.3.5.2, the new hack i used is:

@media screen and (-webkit-min-device-pixel-ratio:0)
{ #div { properties:value; } }

August 21, 2009 at 12:42:00 PM PDT  
OpenID hadert said...

Thomaz Cia - thanks a lot! Just recently got complaints from FF 3.5 users, and now it's got fixed. Thanks!

August 31, 2009 at 4:24:00 AM PDT  
Anonymous Angel said...

Is there any hack only for Chrome or only for Safari not for both ot them, because I can't find solution that separate this browsers?

September 17, 2009 at 4:47:00 AM PDT  
Blogger crvadivel said...

hi i need comman css for all browser using div tag

September 18, 2009 at 4:27:00 AM PDT  
Blogger naresh said...

any hack for chrome should not detect by safari

September 21, 2009 at 12:14:00 AM PDT  
Anonymous Anonymous said...

Chrome :-

#mainNav li { margin:0 34px 0 0; }

@media screen and (-webkit-min-device-pixel-ratio:0) { /* hacked for chrome and safari */
#mainNav li { margin:0 26px 0 0; }
}

November 28, 2009 at 2:20:00 AM PST  
Anonymous Anonymous said...

thanks but i use chrome hack it work but don't work in firefox

December 9, 2009 at 4:39:00 AM PST  
Anonymous Anonymous said...

the hack for chrome also works in firefox. it overrides the hack meant for firefox. is there one that is only for chrome and only for firefox??

December 13, 2009 at 9:32:00 PM PST  
Anonymous Anonymous said...

Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.
Worked for me. Thankz...

December 21, 2009 at 5:37:00 AM PST  
OpenID dobinf said...

cool post, like it. keep writing...

January 28, 2010 at 9:53:00 PM PST  
Anonymous Anonymous said...

Hamid said: that is very usefull Hacks for all browsers

February 3, 2010 at 12:28:00 AM PST  
Anonymous Anonymous said...

Inline Hack for IE doesn't work with ie8 :/

February 16, 2010 at 1:50:00 AM PST  
Blogger Randdot said...

Thomaz Cia-Nice hack, Chrome and Safari was being bothersome this morning all of a sudden. Thanks

February 24, 2010 at 7:47:00 AM PST  
Anonymous Anonymous said...

It is possible to target specific browsers in external .css file.
Example:
#middle {
font-size: .8em; //Opera all
* font-size: .7em; //IE6
//font-size: .7em; //IE 7, 8
}

/* FF only all*/
@-moz-document url-prefix() {
#middle {{font-size: .6em;}}


/* Safari all */
@media screen and (-webkit-min-device-pixel-ratio:0){
#middle{font-size: .6em;}}

!!! Keep order - and browsers never willl override code. Code is checked & proven many times. If browser doesn`t render code at once - you have to wait some time.
Professional webdesigner.

April 25, 2010 at 3:26:00 AM PDT  
Anonymous ryuzakispb said...

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

Unfortunately, this one affects IE8 too now

April 28, 2010 at 2:12:00 AM PDT  
Anonymous Anonymous said...

Opacity Hack:

#myElement {
opacity: .4; /* other browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

May 4, 2010 at 5:22:00 AM PDT  
Anonymous Anonymous said...

This is great!!!! Thank you very very much!!!

May 7, 2010 at 7:32:00 AM PDT  
Anonymous Anonymous said...

Hack for ie8:

.test{
width:10px;
width:10px\0/; only for ie8
}

May 17, 2010 at 12:26:00 AM PDT  
Anonymous Anonymous said...

I've looking for this hack "width:10px\0/;" it helps me a lot thanks.

May 27, 2010 at 10:57:00 AM PDT  
Anonymous Anonymous said...

thanks for the post.

great info

July 14, 2010 at 4:08:00 AM PDT  
Blogger Nils said...

I tried many of the Chrome specific hacks but the only one that worked for me (without affecting FF) was this one:
@media screen and (-webkit-min-device-pixel-ratio:0) { /* hacked for chrome and safari */
#mainNav li { margin:0 26px 0 0; }
}
It also affects Safari but, since they use the same rendering engine, it should work out just right. It did for me.

August 3, 2010 at 11:37:00 AM PDT  
Blogger Anbalagan said...

Thanks a lot......... Keep writing.......

August 5, 2010 at 12:11:00 AM PDT  
Blogger Manoj K Mishra said...

Sorry but, I Think your Firefox hack is not working.

could you please mail me at (mkmishra19@gmail.com) with Firefox hack example

August 11, 2010 at 2:27:00 AM PDT  
Anonymous Rock Jason said...

There is no fix for google chrome,just manage the css properly.
Chrome and firefox are almost same.

August 11, 2010 at 5:30:00 AM PDT  
Anonymous Anonymous said...

"just manage the css properly" - What does that mean exactly?

August 12, 2010 at 12:35:00 AM PDT  
Anonymous Haroon said...

thanks.....

October 22, 2010 at 12:03:00 AM PDT  
Anonymous Anonymous said...

thanks but how to fix css in Google chrome?

January 31, 2011 at 1:19:00 AM PST  
Anonymous jay said...

U r ma time saver buddy... :)

April 21, 2011 at 11:04:00 AM PDT  
Anonymous Anonymous said...

all are good buddies

June 4, 2011 at 3:08:00 AM PDT  
Blogger sweety said...

Thanks a lot for useful writing..

July 5, 2011 at 9:26:00 PM PDT  
Blogger Anthonytonyboy said...

Not help much, but can fix little my blog, only I need code for IE, Firefox, Opera, Chrome. :D Thank.

July 27, 2011 at 10:43:00 AM PDT  
Anonymous Anonymous said...

i look for firefox 4+ hack please help

August 12, 2011 at 11:45:00 AM PDT  
Blogger A.R.Kichenaradjou said...

Thks, fixed CSS problem in google chrome

September 28, 2011 at 4:37:00 AM PDT  
OpenID angel26 said...

It seems to be very interesting about web browser hacks.U have made best post.Thanks for sharing !

web design company

October 14, 2011 at 1:51:00 AM PDT  
Blogger vishnu agrawal said...

this blog is very good,

October 22, 2011 at 7:56:00 PM PDT  
Anonymous varsha singh said...

thanks for solving my query.

October 23, 2011 at 1:33:00 AM PDT  
Anonymous Anonymous said...

thanks a lot ... you rock...

December 13, 2011 at 5:12:00 AM PST  
Anonymous Anonymous said...

thanks

December 22, 2011 at 10:40:00 AM PST  
Anonymous Anonymous said...

Good Blog..

January 16, 2012 at 11:27:00 PM PST  
Anonymous Frederik said...

wonderfull list of hacks. thx

January 23, 2012 at 6:49:00 AM PST  
Blogger pramodadwivedi said...

Awesome Hacks site...:)

January 30, 2012 at 12:16:00 AM PST  
Anonymous Anonymous said...

In regards to CSS, I am developing a website on a MAC OS operating system and when I view Chrome it looks fine, but when I view it on a PC via Chrome the CSS is off, any suggestions?

March 12, 2012 at 9:57:00 AM PDT  
Anonymous abc said...

nice blog

June 28, 2012 at 5:40:00 AM PDT  
Blogger Amber Stotelmyer said...

Thanks for your post, you're a life saver! I'm one of the few people in my office who's really good with CSS, and everyone thinks I can solve everything lol. BTW, if anyone is still having problems targeting FireFox, I found the following hack to be useful:

@-moz-document url-prefix()
{
.editSelfUsernameEmail
{
text-align: right;
}
}

October 26, 2012 at 12:04:00 PM PDT  
Blogger Autor said...

"Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera"

toda essa parte o safari reconhe├že e fica dando comflito com o opera.

November 20, 2012 at 3:54:00 PM PST  
Blogger sam said...

There is obviously a lot to know about this. I think you made some good points in Features also

January 22, 2013 at 4:12:00 AM PST  
Blogger gexhouse2 said...

This comment has been removed by a blog administrator.

July 1, 2013 at 4:54:00 AM PDT  
Blogger Rakesh Panwar said...

that's is very helpful thank you so much

February 5, 2014 at 10:46:00 PM PST  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home