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.

A library of CSS classes which I hope will take some (if not all) of the pain out of controlling form layout in pure CSS. It uses a modular approach so each form element is independent of it’s neighbouring elements, allowing you to mix and match and still achieve the desired results. I’m still working on additional classes to allow even more flexibility but in the current version should meet most needs. As well as being completely modular it’s also width independent so should work regardless of the available width, it will simply occupy the width of the containing element, alternatively you can just set width for the form element itself.
note - To eradicate the need for extra html markup this system uses label tags that wrap the form elements…
note - While wrapping form fields in labels is a valid technique in the xhtml transition DTD, unfortunately it isn’t valid ‘Strict’ xhtml. I’m happy to say that I’d miss-understood the validation error, The example has been fixed and is now valid strict xhtml.

Use

once the css files has been attached to your document and the class of ‘mForm‘ added to your form tag all you you need to do is add the appropriate class the the element label and mForms should do the rest for you.

Customisation

As well as using the css ‘out of the box’ there are also constants which can be changed to further customise the appearance.

demo

View example of mForm

Download

Download mForm.css

I’ll try and do more work on this, I’m just putting it out there to try and gauge the interest level. If you want me to motivate me to develop this further, incentives are welcomed.

When designing websites in either Photoshop or Illustrator it’s often useful to be able to define a grid to work to. Because it’s better to keep all the measurments pixel perfect it’s handy to know all the multipliers of your chosen screen width. To make this process as quick as possible I’ve written a small script which will calculate all the multipliers (as well as number of grid squares) of any width you specify.
The Grid Calculator Script is here…’ hope it’s useful.

There’s a number of bizare ie rendering bugs which when i did some investigation discovered were related to an ie property called hasLayout. It’s seems that forcing the value of hasLayout will frequenlty fix these bugs. I’ve come accross alot of methods for doing this but i’ve just come across one that negates the need for any additional styles that have to be hidden from well behaved browsers.

zoom:1

Apparently giving an Element the internet explorer property zoom:1 forces internet explorer to set the hasLayout property to ‘true’. There are also other methods of fixing this bug although this particular one seems to be the least invasive as it’s only understood by interent explorer.

see: Fumle.dk for more info.

A useful filter to add safari specific css

html[xmlns*=""] body:last-child … +(descendent selector)

origional article

…thats it.

A useful little tool for anyone who needs to quickly sample on-screen colours and copy the hex value to the clipboard ready for use. This simple little program does one thing, and does it well… ( win | 415k | free )
instant-eyedropper.com

I’ve been looking for a free application for managing my to-do list for a while and after trying a number of solutions I’ve finally found one that seems to have all the features I require.

ToDoList Is it.

When a design uses a content area which is centred within the browser window you may frequently notice a ‘jolt’ as you click from a page where the content fits in the window to one where the browser has inserted scrollbars on the browser window.

This is caused by a slight reduction in the body width (and consequently the center line) from one page to another.
You can get round this problem by adding a 'overflow-y:scroll;' parameter to the body.

Unfortunately it doesn’t validate although it is supported by both gecko and I.E. and is simply ignored by other browsers.

A common bug where internet explorer crops or fails to display content within floated elements. The exact cause is a bit of a mystery but the problem can usually be fixed with:


div#floatedelement *{position:relative;}


As with all ie fixes I’d recommend putting it in a ie only css file using conditional comments. There may also be instances where you need to be a bit more selective with the css, e.g. when using relative positioning within the floated element. Quite often thought this can simply be modified to something like

'div#floatedelement * *'

to take into account the depth of the nodes… either way a ‘position:relative;’ will usually cause I.E. to display the problematic element.

Whilst testing a site I’ve designed recently I came across a problem in safari where links were not click-able, In addition the form elements did not respond to mouse clicks.

The problem seems to occur when elements are positioned outside the boundary of their containing parent element. I managed to rectify the problem by simply applying a z-index to the positioned element. I’m not sure if this is actually a bug but as Firefox and I.E. both managed OK, I’m treating it as a bug and reporting it accordingly.