specss.js
Overview
What is it?
A simple unobstrusive script performs a number of tests on the users browser then adds classes to the html tag of the document accordingly.
What can you do with it?
Create style rules which only apply under certain conditions such as:
- browser type
- window size
- operating system
- depending whether flash is enabled
- if the page has scrollbars.
Example uses
- Tweak layouts for different browsers.
- Simplify hiding of static content when using flash replacement
- customise pages for different operating systems including iphone specific styling
- adjust layout depending on available space (eg use larger background images for larger screens)
How to use it
Simply link you html file to the js file, and you have the following css classes at your disposal to customise for specific scenarios. It’s recommended that this script should be used for progressive enhancement.
Details
browser classes
.Dom(browser understands Dom scripting).isIe / .isIe7(is Internet Explorer, is Internet explorer 7).isMoz(is Firefox, Mozilla etc).isOp(it’s an Opera browser).isSaf(…you guessed it, is Safari)
screen size
- base browser width (
.w640, .w800, .w1024, .w1280) - ‘greater than’ specific screen size for broader rules (
.gtw640, .gtw800, .gtw1024, .gtw1280)
operating system
.isWin.isMac.isUnix.isLin.isIphone
other variables
.hasFlash- browser has flash enabled.hasScroll- the page is taller than the browser and consequently has scrollbars.hasImg- browser supports images (good for safer image replacement)
example
Only one very basic example at the moment… but you get the idea. view example
download
Download specss.js (right click - save as)
The current version is untested in all scenarios so any bugs… let me know.
update - April 2008
The previous version had some problems with screen ‘flicker’ as the script ran after the page had loaded. To avoid this problem, the html is hidden until after the script has run. This is done with simple ‘visibility:hidden’ declaration (reset by speccs.js one the script has loaded) in the css and noscript override so it doesn’t recreate any issues for non javascript enabled visitors.