There are many CSS hacks that I have come across while developing web applications, mostly used one is the IE's conditional comments to apply classes to the body tag but there are some situation where you will want to add conditional CSS within the stylesheet, specially if your working with Vaadin
The following is a documentation of browser specific CSS style attribute I've seen. These CSS will help you better make specific changes to IE, Firefox, Chrome, Safari and Opera from within the CSS.
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: blue }
/* IE7 */
*:first-child+html #dos { color: blue }
/* IE7, FF, Saf, Opera */
html>body #tres { color: blue }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: blue }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: blue }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: blue }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: blue }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: blue }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: blue }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: blue }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: blue }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: blue }
/* Everything but IE6-8 */
:root *> #quince { color: blue }
/* IE7 */
*+html #dieciocho { color: blue }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: blue }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: blue }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: blue; }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
I have to appreciate you for your great work which you had done in your blog.i want you to add more like this.
ReplyDeleteJAVA Training in Chennai
JAVA Training in Tambaram
IOS Training in Chennai
Big data training in chennai
Python Training in Chennai
Selenium Training in Chennai
JAVA Training in Chennai
Java Training in Tambaram
Great Article IoT Projects for Students
DeleteDeep Learning Projects for Final Year
JavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
Its superb as your other posts : D, regards for posting . ny web design firms
ReplyDeleteThanks for all your efforts that you have put in this. very interesting information. website designers nyc
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI surely didn’t understand that. Learnt a thing new today! Thanks for that. branding san francisco
ReplyDeleteGlad to be one of several visitants on this amazing web site : D. san fran design firms
ReplyDelete