WPI Cross Browser Support

    • May
    • 19
    • 2008

    WPI Cross Browser Support

    Posted by Avice.

    Filed under Themes¸ WordPress & wpistalker.

    6 months ago

    istalker-css-autoload1 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:

    1. wp-home → Section , Refer WordPress Template Hierarchy
    2. firefox → Browser name
    3. firefox-2 → Browser name & Major Version numbers.
    4. 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');
    1. 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 :) .

    2. auth.css → this file will be loaded if you are registered user.
    3. 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..

    4. plugins & widgets → supported plugins and widgets file will be append here (i.e., wp-pagenavi, openid, global translator, wpseo, wpstats)
    5. firefox → browser name specific stylesheets
    6. firefox-2 → it get more specific.
    7. platform → os/platform base stylesheets. good for declaring supporting fonts class
    8. 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

    Support the standards so it will continue to look good in the future.

    About the Author
     

    Avice is a technologist with over a decade of experience in Web development and design. She has far too many interests for her own good.she is probably the most stalkable girl on earth -- and the least interesting, which is a good fit. 

    Tags:
    • May 19, 2008 at 10:48 am
    • June 30, 2008 at 4:32 pm
    • url

No Responsesto “WPI Cross Browser Support”

    • stalker's photo Kaizeku Ban
    • RE: WPI Cross Browser Support - 'Commenting Guidlines' ↓
      6 months ago on Monday, May 19th, 2008 at 10:48 am 5 url
      0%

      If you want to comment, please read the following guidelines.These are designed to protect you and other users of the site.

      1. Be relevant: Your comment should be a thoughtful contribution to the subject of the entry. Keep your comments constructive and polite.
      2. No advertising or spamming: Do not use the comment feature to promote commercial entities/products, affiliates services or websites. You are allowed to post a link as long as it's relevant to the entry.
      3. Keep within the law: Do not link to offensive or illegal content websites. Do not make any defamatory or disparaging comments which might damage the reputation of a person or organisation.
      4. Privacy: Do not post any personal information relating to yourself or anyone else - (ie: address, place of employment, telephone or mobile number or email address).

      In order to keep these experiences enjoyable and interesting for all of our users, we ask that you follow the above guidlines. Feel free to engage, ask questions, and tell us what you are thinking! insightful comments are most welcomed.

      be the first to comment.

"write as if you were talking to a good friend (in front of your mother)."

.haveyoursay

    • Email will not be published.

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.

Wp-iStalker WordPress ThemestopCopyright © 2007 - 2008 Kaizeku Ban.