Now that 3D transform support has landed in Firefox Aurora, it’s prime time to go back and revise any previous WebKit-only demos for other browsers.

Paul Rouget:

Please use “px” at the end of the perspective values. If you don’t, this will only works with Webkit (your examples don’t work correctly with Firefox because of that).

You got it, Paul.

#my-3d-environment {
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
      -ms-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}

Along with WebKit hardware-accelerated anti-aliasing, CSS 3D transforms can have adverse effects on type rendering when translate X/Y values have subpixel, or decimal values.

View fiddle: Subpixel type rendering. Hover over elements to disable transforms.

In WebKit, the first two elements will have fuzzy type and borders, as rendered elements don’t exactly line up with pixels on the screen.

Just to be thorough, I took a look at 2D subpixel translation transforms (i.e. translateX(0.5px)). In WebKit, the type seems to render appropriately with the subpixel values. However the borders don’t look so good. They get positioned in between pixel spaces, rendering a 1px border with 2 pixels. Firefox doesn’t have any issues with borders.

The fix is to prevent decimal values when using translate and round those values to the nearest integer.

<figure> elements a good amount of margin from Firefox and WebKit’s user agent styles.

figure {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

See fiddle figure margin

This is a new style within the past year, as 3dtransforms use <figure>s for the panels of the 3D objects. The default margin was offsetting all the panels.

normalize.css already has the situation under control, setting figure { margin: 0; }.

Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. WebKit composites the element so that when rendering the transform, it doesn’t have to re-render sub-pixel anti-aliasing for every frame. This feature is a good thing in that vastly improves performance of transitions and transforms in WebKit.

But this affects anti-aliasing when there is no actual transform and hardware-acceleration is active on a element. i.e. banal 3D transforms like translate3d( 0, 0, 0) or scale3d( 1, 1, 1 ).

The solution is the same one for IE’s opacity bug: add a matching background to the affected background.

View fiddle: resolving anti-aliasing with hardware acceleration.

Hover over the image below to see the comparison for TUAW.

See also Webkit Hardware acceleration bleeding into subsequent elements, and how to fix it - The Official Posterous Tech Blog.

Re: sans-serif differences, as of version 11.10, Opera now uses Helvetica as the default font for sans-serif for Macs. See changelog for Opera 11.10 beta. I’ve updated the previous post accordingly.

Thanks to Divya Manian for confirming the change and tracking down the changelog and being the awes.

Speaking of Helvetica, the current typography solution on the Boilerplate is to use just sans-serif for the base font-family. See Issue 42 on their reasoning. Windows gets its best sans-serif, Arial. Mac gets its champ, Helvetica. Or so you would think. On the Mac, it’s a bit of a mix.

• Chrome uses Helvetica Neue
• Firefox uses Helvetica
• Safari uses Helvetica
• Opera 11.0 and earlier uses Lucida Grande edited 19 Apr 2011
• Opera 11.10 and later uses Helvetica edited 19 Apr 2011

See sans-serif fiddle

The differences aren’t too drastic, but they’re enough that you should be aware of them. Usually I run into issues when some text is wrapping differently between browsers, and throwing off an elements height. I’m surprised by the difference between WebKit cousins Chrome and Safari. Helvetica Neue line-height is taller, and has tighter kerning.

Personally, my go-to sans-serif font stack is:

font-family: 'Helvetica Neue', Arial, sans-serif;

Kevin at minimali.st details why to use it in Better Helvetica Font Stack. I can’t definitively say it’s a better solution that vanilla sans-serif, but at least I know what to expect.

You can stack multiple values on a CSS transition declaration, much like you would with text-shadow or multiple backgrounds.

transition: left 1s, opacity 1s;

See double transition value fiddle

Playing around with gradient backgrounds after Lea Verou and Benjamin De Cock’s demos. Gradients don’t render with perfect anti-aliasing if two color-stops share are especially close to one another. Circles are rendered with pixelated edges. It’s probably better just to use an image here, or if it needs to be dynamic, perhaps generate the image via <canvas>.

Fiddle: Polka dot background with gradients

So many gems within Jordan Dobson’s animated border demo, but I especially like his use of positioning with all four directions.

left: 0;
top: 0;
right: 0;
bottom: 0;

With no size dimensions set, the child element stretches to the size of its parent. Typically, when I want a absolutely-positioned element to match its parent, I’ll use left: 0; top: 0; width: 100%; height: 100%;. The pattern employed by Mr. Dobson affords calculated margins, i.e. the child element can extend to within 10px of its parent.

View “left / top / right / bottom positioning” fiddle

Chrome renders ::-webkit-scrollbar styles on the body in Chrome.

See ::-webkit-scrollbar demo

::-webkit-scrollbar fiddle

WebKit parses #colorkeyword values as valid colors. background: #yellow renders as yellow.

#color fiddle

Being thorough, I also tested other color values with an extra # in front. No dice, only keywords get parsed.

Typically, I’ve only seen outline used for :active styles, i.e. a:active { outline: none; }. Smartypants Piotr Petrus clued me in to using outline for offset borders with outline-offset.

outline fiddle

Note that outline does not inherit border-radius. Firefox does have -moz-outline-radius just for this. No outline-radius in other browsers currently.

Some browsers max-out border-width. In the fiddle below, where I set border-bottom-width: 9999px, WebKit browsers render only 1807px, Opera renders 2407px. Like a mad scientist, Firefox renders all ten-thousand-minus-one pixels.

Max border-width fiddle

Going through last year’s 24ways, I caught this nugget.

Natalie Downe:

Rotations can be specified in degrees, radians (rads) or grads). WebKit also supports turns unfortunately Firefox doesn’t just yet.

turn is a valid CSS3 angle unit. A year later after Ms. Downe’s article, WebKit is still the only platform to support it.

turn angle unit fiddle

For formatting code blocks, white-space: pre-wrap will preserve white spaces and also wrap lines inside the container.

white-space: pre-wrap fiddle