Blog Archives

Latest Posts

Monthly

Categories

All Posts in CSS

November 10, 2008 - Comments Off on CSS Sprites2 in Prototype and script.aculo.us

CSS Sprites2 in Prototype and script.aculo.us

Over the weekend, I finally got around to porting Dave Shea's CSS Sprites2 technique to Prototype and script.aculo.us.

My version of CSS Sprites2 is almost exactly the same as Dave's, but it also includes keyboard support. There's a matching focus, blur, keydown and keyup event handler for each mouse event handler.

Get CSS Sprites2 for Prototype and script.aculo.us.

Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

July 3, 2008 - 2 comments

CSS variables in WebKit

via Webmonkey:

Variables in cascading stylesheets are now available in the nightly WebKit build.

CSS without variables:
//Sets the background of the page and tables to the hex code for the color grey
body {
   background-color: #eceae1;
}
table {
   background-color: #eceae1;
}

With CSS variables:
//Defines "DefaultBGColor" to light gray
@variables {
   DefaultBGColor: #eceae1;
}
//Sets the background and any table on the page to the default background color
body {
   background-color: var(DefaultBGColor);
}
table {
   background-color: var(DefaultBGColor);
}

Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

June 11, 2008 - Comments Off on Custom cursors and pseudo-class descendant selectors in IE 6

Custom cursors and pseudo-class descendant selectors in IE 6

Cursors

It's been awhile since I had to implement a custom cursor, but I figured it wouldn't be a problem—just set the cursor property to url(path/to/cursor.cur), right? Of course it's never that simple…

The full scoop can be found here, but in summary we need three rules:

cursor: url(cursor.cur), url(cursor/cursor.cur), default;

cursor: url(cursor.cur); works in Safari, but we need to add default to make it work in Firefox. url(cursor/cursor.cur) is for IE, since the base URI is the source element, not the style sheet.

A nice table/demo of CSS2 and CSS3 cursors can be found at http://www.worldtimzone.com/mozilla/testcase/css3cursors.html

Pseudo-class descendant selectors in IE 6

I just discovered that it is possible to use pseudo-class descendant selectors in IE 6 and put together a demo/tutorial.

Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,