Profile cover photo
Profile photo
Neil Carpenter
66 followers
66 followers
About
Neil's posts

Post has attachment

Post has attachment

Post has attachment

Post has attachment

Post has attachment

Post has attachment

Post has attachment

Post has shared content
Of interest for web designers: fixed position elements will create their own stacking contexts in Chrome 22 and later, which subtly changes some layout. You don’t want a broken site, so check your layouts with a new flag in Chrome.

Long version:

The Chrome team will soon be making a change to the way fixed position elements are handled to match a recent spec change -- these elements will create their own stacking contexts which means that stacking order (think z-index) may be affected in certain layouts.

Breakage should be rare, but if you're doing things like setting z-indexes of children of a fixed position element but have these z-indexes interleaved with content outside of the fixed element, you should worry (see below on how to easily check). You should be able to achieve almost all of the same effects with minimal CSS changes.

To check whether your layouts continue to work as you expect them to in Chrome, please test pages with the "Fixed position elements create stacking contexts" flag turned on. For the uninitiated, flags are easy to access via the special about:flags URL.

Why are we doing this? Mobile WebKit browsers already behave this way because it allows for significant scrolling speed optimizations. So if your site looks correct in e.g. iOS Safari, you needn't worry (provided you're serving identical layout on mobile, which you probably aren't). The upshot is that we're going to be able to make pages with fixed position elements scroll much faster, which is good for your web app's users, and we're going to unify layout behavior on mobile and desktop Chrome.

If you’re curious, the relevant spec is here: http://www.w3.org/TR/CSS21/zindex.html but it's, ah, a little dense.

Cheers!

Post has attachment

Post has attachment
Color picker in webkit dev tools, super useful. Can also cycle through color formats http://bricss.net/post/18791100366/say-hello-to-the-color-picker-in-webkit-inspector
Wait while more posts are being loaded