Awebsome! Browser Selector

November 15, 2012

Awebsome! Browser Selector Plugin

Empower your CSS selectors! Write specific CSS code for each Platform/Browser/Version the right way.

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

Inspired by

Based in

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

Installation

Go easy!
Upload, activate and enjoy developing.

FAQ

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.

Changelog

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.

Details

  • Version: 2.2
  • Active installations: 100
  • WordPress Version: 3.0
  • Tested up to: 3.4.2

Ratings


5 Stars
4 Stars
3 Stars
2 Stars
1 Stars