WPI Cross Browser Support

Avice — Mon, 19 May 2008 10:48:51 +0000

If you are frustrated that certain WPI version (i.e., public & beta) doesn’t support MSIE. I intentionally did that (just) to annoyed Microhoo and the rest of MSIE users (that is 70% of internet population).

Cross Browser Autoload

Before you stalked me, WPI WordPress theme has a build in function for auto-loading cross browser stylesheet and script files. This function is available since our first release.

How to load Browser specific CSS & Scripts?

We asume you are using the crappy broken MSIE 6 browser running on Windows XP.
When WPI theme load it will look for specific stylesheet & script files like below list.

stylesheet → /themes/wp-istalker/css/ ↓
1. ie.css
2. ie-6.css
3. winxp.css
javascript → /themes/wp-istalker/scripts/ ↓
1. ie.js
2. ie-6.js
3. winxp.js

If any of the files exists, It will queue the specific files and append it to the master file then proceed with minified → crunch → combine → gzip or deflate (if the ua allowed it) and send it to the browser as a single file. Walla

Depend on the user UA the complete files will be cached inside the the following cache directory.

/themes/wp-istalker/cache/css/*.css.compression-type
/themes/wp-istalker/cache/scripts/*.js.compression-type

the combine files can be found at

/themes/wp-istalker/css/combine-md5hash.css
/themes/wp-istalker/scripts/combine-md5hash.js

how to check for browser versions number?

Its a bit tricky to know the correct name and version numbers, here’s how I do it.

Go to your blog frontpage and look inside the source code body-tag. On the “class” attribute you can find something similar like the below example. ↓

<body id="wpi-blog-kaizeku-com" class="wp-home firefox firefox-20 winxp -foaf-Document">

If you have firebug → console.log($(’body’).attr(’class’) );

code break:

wp-home → Section , Refer WordPress Template Hierarchy
firefox → Browser name
firefox-2 → Browser name & Major Version numbers.
winxp → OS platform

for variant of gecko base engine (i.e., prism, flock, seamonkey,mozilla suite) it will just show it as “mozilla mozilla-19 winxp” or something similar.

just to see how clever this go, you can used this wonderful root body browser-class-name CSS selector to create different CSS styling/tweak for cross browser like so ↓

body.safari div.hentry{
 position:relative; top: -10px; min-height:400px
}
body.ie-6 div.hentry{
 height:auto;height:450px
}
body.opera div.hentry{
 min-height: 500px
}

The CSS files Ordering

Inheritance is very important factor in CSS. Below is list of files sort by number starting from top to bottom.

@import url('/wp-content/themes/wp-istalker/icecream.css,auth.css,single.css,lang.css,firefox.css,winxp.css');

icecream.css → global css (style.css) load at all page include in this file is our blueprint.css (blueprint framework css), image.css.
I prefer delicious filename more than generic :) .
auth.css → this file will be loaded if you are registered user.
single.css → section files
sections: home.css, single.css, attachment.css, page.css, search.css, archive.css, category.css, tag.css, year.css, month.css, day.css, 404.css etc..
plugins & widgets → supported plugins and widgets file will be append here (i.e., wp-pagenavi, openid, global translator, wpseo, wpstats)
firefox → browser name specific stylesheets
firefox-2 → it get more specific.
platform → os/platform base stylesheets. good for declaring supporting fonts class
extra_css - filter hook wpi_css_import_array

Custom Hook

Hook for each of the import files → wpi_css_import_$int
$int → 1 to 7

notes
if you want to append a file just after the section css you will used ‘wpi_css_import_2′ as hook. I wont cover the how part in this guide. check out Wordpress Codex if neeed too.

If you are on MSIE6, this page will render in XML ;p. Not my fault really, This site has valid xhtml, CSS 2.1 , xhtml/xml, WCAG A1 & Section 508. Your browser just pwned too much propriety language to survive