Let's talk Contact us. No cost. No obligation.

Fill out this form and we will contact you with in 24 hrs.

captcha

Profit By Outsourcing (UP)

Plot No. 165, NSEZ, Noida (U.P.), India – 201305

India : +91-95601-58367.
Toll Free (USA) : +1-888-322-7617.
Voip (USA) : +1-646-217-4668.
Voip (UK) : +44-161-870-6437.
Voip (Australia) : +61-261-452-356.

Email : sales@profitbyoutsourcing.com

Profit By Outsourcing (Haryana)

Sector-24, Plot Number-189 Faridabad, Haryana-121005.

India : +91-95601-58367.
Toll Free (USA) : +1-888-322-7617.
Voip (USA) : +1-646-217-4668.
Voip (UK) : +44-161-870-6437.
Voip (Australia) : +61-261-452-356.

Email : sales@profitbyoutsourcing.com

Knowledge Base

How Do I Target Browsers Using CSS Hacks?

June 13, 2014

As a UI developer we need to make sure that the site is running fine on each and every browser. While every browser has its properties, which makes the UI slight different as per their own properties. So sometimes we need to hack their properties to set the design according to the UI requirement. There are many ways to hack the browsers like

1. Selector Hacks

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 – 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 – 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

2. 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 */

About Mohammed Mehdi

Working as Web UI developer with ONS Interactive Solutions. Having 2+ years working experience in the UI development and responsive conversion.