Simon Willison’s Weblog

Visualizing WebKit’s hardware acceleration. Command line flags for launching Safari (and the iOS simulator) in a way that highlights areas of the screen that are being hardware accelerated—particularly useful if you are using the “-webkit-transform: translate3d(0,0,0)” trick.

# 27th June 2011, 10:31 am / css, safari, webkit, ios, recovered

Going Nuts with CSS Transitions. Nat’s article for this year’s 24ways—adding special effects to images using CSS rotation, box shadows and the magical -webkit-transition property.

# 14th December 2009, 1:16 pm / 24-ways, animation, css, natalie-downe, rotation, webkit

CSS 3: Progress! Alex Russell on the new exciting stuff going in to CSS 3 based on real-world implementations in the modern set of browsers. Of particular interest is the new Flexible Box specification, which specifies new layout primitives hbox and vbox (as seen in XUL) and is already supported by both WebKit and Gecko.

# 22nd August 2009, 11:52 am / alex-russell, browsers, css, css3, flexiblebox, gecko, hbox, standards, vbox, webkit

Dinky pocketbooks with WebKit transforms. Nat used 90 degree CSS transform rotations in print stylesheets for WebKit and Safari to create printable cut-out-and-fold pocketbooks from A4 pages. Very neat.

# 22nd May 2009, 12:33 am / css, csstransforms, natalie-downe, pocketbooks, printstyles, rotation, safari, webkit

CSS Variables. Hooray! My number one requested CSS feature (and I know I’m not alone), proposed by Daniel Glazman and David Hyatt so I imagine we’ll see it trialled in WebKit pretty soon.

# 25th April 2008, 11:26 pm / css, daniel-glazman, david-hyatt, variables, webkit, css-custom-properties

Safari CSS Reference. Official documentation covering the CSS properties supported by Safari, including the -webkit proprietary extensions.

# 22nd November 2007, 11:51 pm / browsers, css, documentation, safari, webkit

CSS Transforms. WebKit can now do transforms (scale, rotate, translate and skew) in CSS via a new -webkit-transform property. Transforms behave like position relative in that they don’t affect the layout of the page. You can also provide a full affine transform matrix as a shortcut.

# 26th October 2007, 9:45 pm / affinetransformation, apple, browsers, css, graphics, matrix, safari, transforms, webkit

Introducing text-stroke. Webkit has some sexy new CSS properties: -webkit-text-fill-color, -webkit-text-stroke-color, -webkit-text-stroke-width.

# 21st December 2006, 10:34 am / css, webkit