Awebsome! Browser Selector

Modifies the body tag classes adding some Platform/Browser/Version codes, so you can add quick and clean CSS patches.

Inspired by

• PHP CSS Browser Selector from Bastian Allgeier
• JS CSS Browser Selector from Rafael Lima

Based in

• PhpUserAgent from Jesse Donat.

Available Platform Codes

Desktop

• win – Microsoft Windows
• lnx – x11 and Linux distros
• mac – MacOS
• cros – ChromeOS

Mobile

• android – Android
• iphone – iPhone
• ipad – iPad
• blackberry – Blackberry
• winphone – Windows Phone OS
• kindle – Kindle
• kindlefire – Kindle Fire

Consoles

• xbox – Xbox 360
• ps3 – PlayStation 3
• wii – Nintendo Wii

Available Browser Codes

• ie – Internet Explorer
• iemobile – IEMobile
• firefox – Mozilla, Firefox
• camino – Camino
• opera – Opera
• safari – Safari
• chrome – Google Chrome
• kindle – Kindle
• silk – Silk
• lynx – Lynx
• wget – Wget
• curl – Curl

Go easy!
Upload, activate and enjoy developing.

Where should I write my CSS specific code?

At the end of your theme CSS file will be fine.

How can I apply a patch for specific Platform/Browser/version?

1. Filtering by Platform: .kindle
2. Filtering by Browser: .opera
3. Filtering by Browser and Version: .ie.v7
4. Filtering by Platform and Browser: .win.ie

5. Filtering by Platform, Browser and Version: .win.ie.v8

   .Platform.Browser.Version #id .class { display:block; }

So, this way you can apply CSS3 patches seamlessly…

`/* fallback/image non-cover color & fallback image & W3C Markup */

element { background-color: #1a82f7; background-image: url(‘images/fallback-gradient.png’); background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%); }

/* Safari + Chrome + iPhone + iPad */
.safari #element,
.chrome #element,
.iphone #element,
.ipad #element { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); }

/* Firefox */
.firefox #element { background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); }

/* Opera */
.opera #element { background-image: -o-linear-gradient(top, #2F2727, #1a82f7); }

/* IE */
.ie #element { background-image: -ms-linear-gradient(top, #2F2727, #1a82f7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#2F2727′, endColorstr=’#1a82f7′, gradientType=’0′); }`

Something’s messing with my classes or they’re not showing…

Try clearing your caches.

Future Release

• Codes managing UI.

2.2

• Updated PhpUserAgent.
• Added consoles platform styles.

2.1

• Fixed readme.txt.
• Fixed BuddyPress support.
• Removed webkit and gecko generic classes (use browser specific classes instead).

2.0

• Revamped code using WP API’s and OOPHP.
• Revamped UA parsing code.
• Revamped docs.
• Removed all the cache messy stuff added on v1.1 (sorry @jrevillini!).

1.2.1

• Fixed working bug.

1.2

• Fixed some coding bugs.
• Added more code comments.

1.1

• Updated readme.txt.
• Fixed BuddyPress support (kudos @landwire!).
• Fixed caching bug for WP Super Cache and W3 Total Cache incompatibility (kudos @jrevillini!).

1.0.1

• Updated descriptions.

1.0

• Born with basic functionality and docs.