-
-
Wp-iStalker Cross browser CSS & Scripts Guide.
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/ ↓
- ie.css
- ie-6.css
- winxp.css
- javascript → /themes/wp-istalker/scripts/ ↓
- ie.js
- ie-6.js
- 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 7notes
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
Support the standards so it will continue to look good in the future.
- stylesheet → /themes/wp-istalker/css/ ↓
-
- May 19, 2008 at 10:48 am
- June 30, 2008 at 4:32 pm
- 0.3
- url
-
-
-
No Responses to “WPI Cross Browser Support”
Trackback URL: Use the TrackBack url ↑ to ping this article. If your blog does not support Trackbacks you might want to leave a comment instead.
-
-
"write as if you were talking to a good friend (in front of your mother)."
.haveyoursay
Disclaimer: For any content that you post, you hereby grant to Kaizeku Ban the royalty-free, irrevocable, perpetual, exclusive and fully sublicensable license to use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, perform and display such content in whole or in part, world-wide and to incorporate it in other works, in any form, media or technology now known or later developed. Some rights reserved.
-
The following "Code" are designed to protect you and other users of this site.
In order to keep these experiences enjoyable and interesting for all of our users, we ask that you follow the above guidlines.
be the first to comment.