Houdini's Animation Worklet
Animation Worklet allows you to write imperative animations that run at the device's native frame rate for that extra buttery jank-free smoothness™, make your animations more resilient against main thread jank and are linkable to scroll instead of time.
Well-Controlled Scrolling with CSS Scroll Snap
Working with the new CSS Typed Object Model
CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.
New in Chrome 65
Chrome 65 adds support for the new CSS Paint API, which allows you to programmatically generate an image. You can use the Server Timing API to provide server performance timing information via HTTP headers, and the new CSS display: contents property can make boxes disappear! Let’s dive in and see what’s new for developers in Chrome 65!
CSS Paint API
Houdini’s CSS Paint API allows you to programmatically draw CSS images.
New in Chrome 63
Take control of your scroll: customizing pull-to-refresh and overflow effects
The CSS overscroll-behavior property allows developers to override the browser's overflow scroll effects when reaching the top/bottom of content. It can be used to customize or prevent the mobile pull-to-refresh action.
Removing ::shadow and /deep/ in Chrome 63
Say goodbye to shadow-piercing CSS selectors.
An event for CSS position:sticky
position: sticky and
IntersectionObserver together to determine when elements become sticky. Apply scroll effects without scroll events!
New in Chrome 57
With Chrome 57, you can now use
display: grid for grid based layouts, use the media session API to customize the lock screen and notifications with information about the media being played, and more. Pete LePage has all the details and how you can use these new developer features in Chrome 57!
CSS Grid – Table layout is back. Be there and be square.
CSS Grid Layout makes creating two dimensional grid based layouts easy. It's been in development for over 5 years, but is now available in Chrome and coming to other browsers soon. Let's take a peek at what's new and how you can use it on your sites!
New In Chrome 56
With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API. CSS
position: sticky; is back - making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.
position:sticky is back in Chrome
After a long time absent from Chrome, position:sticky is back.
When used judiciously paralaxing can add of depth and subtlety to a web app.
Manage Hyphens with CSS
Chrome 55 implements the hyphens property to control when soft hyphens appear and how they behave.
Re-rastering Composited Layers on Scale Change
Starting in Chrome 53, all content is re-rastered when its transform scale changes, if it does not have the
will-change: transform CSS property. In other words,
will-change: transform means "please animate it fast".
Complexities of an Infinite Scroller
Infinite scrollers are a common UI pattern. Here we explore how to implement this pattern in a memory conservative way that performs at 60fps.
Flexbox Gets New Behavior for absolute-positioned Children
A previous version of the CSS Flexible Box Layout specification set the static position of absolute-positioned children as though they were a flex item whose size is 0px by 0px. The latest version of the spec takes them fully out of flow and sets the static position based on align and justify properties.
Houdini: Demystifying CSS
Houdini is a collection of APIs that expose the CSS engine’s internals to developers
Controlling Font Performance with font-display
The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending on how long it takes for them to load.
CSS Variables: Why Should You Care?
CSS variables, more accurately known as CSS custom properties, are landing in Chrome 49. They can be useful for reducing repetition in CSS, and also for powerful runtime effects like theme switching and potentially extending/polyfilling future CSS features.
Pixelation of the nation. Now in Chrome 41
Get on the CSS Grid!
CSS Grid Layout is a new CSS3 module that provides new layout primitives that are ideal for web applications.
New Web Animations engine in Blink drives CSS Animations & Transitions
An implementation of Web Animations 1.0 has landed in Blink powering CSS Animations and Transitions.
Flexbox layout isn't slow
Good news: new flexbox (display: flex) is 2.3x faster than old flexbox (display: box)!
Introduction to Custom Filters (aka CSS Shaders)
CSS Background shorthand coming to mobile WebKit browsers
Canvas-driven background images
Powering a css background using canvas or webgl