CSS image-set in Webkit (Safari/Chrome)

Safari 6 and Chrome 21 added vendor-prefixed support for the proposed CSS4 image-set specification. This proposed specification is designed to support displays with different pixel densities (read: retina displays).

background-image: url(image.jpg);
background-image: -webkit-image-set(url(image.jpg) 1x, url([email protected]) 2x);
/* Also include other prefixed versions of this ... */
background-image: image-set(url(image.jpg) 1x, url([email protected]) 2x);

Safari 6 and Chrome 21 add image-set to support retina images →
Related: High DPI images for variable pixel densities →

Meny — An experimental CSS 3D fold-in menu

A UI experiment with a 3D fold-in menu. Move your mouse to the left edge of this page — or swipe in from the left edge if you’re on a touch device — to expand the menu.

A refreshing alternative to the already overly common left nav flyout which Facebook introduced in their mobile app.

Meny Demo →
Meny Source (GitHub) →

Related: Responsive navigation patterns

jQuery Transit

jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

Include the plugin and you can use code like this to perform transformations:

$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });

To animate use use $.fn.transition instead of jQuery’s $.fn.animate:

$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Works fine in all browsers that support it (be it prefixed, or unprefixed)

jQuery Transit →

Note that this plugin will become obsolete once the new animation code lands in jQuery 1.8

Vendor Prefix Drama

Grab a bucket of popcorn and start reading. “YHWH” clearly doesn’t get it (UA sniffing, only prefixed properties, inline JS, …)

Hundreds of pages in our 16 plus domains DO NOT fade images on mouseover anymore, because the -moz-opacity:0.7 reading function is GONE.

Seems like he’s also forgetting the fact it only works used to work in Firefox and none of the other browers out there. #facepalm

Bugzilla Bug #765645: Millions of web pages use the -moz-opacity:0.7 tag and in javascript. It’s broken now since FF 13.01. Please can you “alias” it back into your main browser code. Thanks. →

Related: JSDrama

IE10 CSS Support

The following W3C draft standard features match these criteria and IE10 now supports them in their unprefixed form:

IE10 also supports the following W3C draft standards in vendor-prefixed form.

Looks like IE10 is on the right track 🙂

Moving the Stable Web Forward in IE10 Release Preview →