Empower your CSS selectors! Write specific CSS code for each Platform/Browser/Version the right way.
Author: | Raul Illana (profile at wordpress.org) |
WordPress version required: | 3.0 |
WordPress version tested: | 3.4.2 |
Plugin version: | 2.2 |
Added to WordPress repository: | 18-07-2011 |
Last updated: | 15-11-2012
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
Rating, %: | 100 |
Rated by: | 1 |
Plugin URI: | http://plugins.awebsome.com |
Total downloads: | 5 005 |
Active installs: | 100+ |
Click to start download
|
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
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?
- Filtering by Platform:
.kindle
- Filtering by Browser:
.opera
- Filtering by Browser and Version:
.ie.v7
- Filtering by Platform and Browser:
.win.ie
-
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
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
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
1.0
- Born with basic functionality and docs.