Shipping in Chrome 73, Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
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.
CSS Typed Object Model (Typed OM) brings types, methods, and a flexible object model to working with CSS values. Shipped in Chrome 66.
Houdini’s CSS Paint API allows you to programmatically draw CSS images.
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.
Say goodbye to shadow-piercing CSS selectors.
position: sticky and
IntersectionObserver together to determine when elements become sticky. Apply scroll effects without scroll events!
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!
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.
Chrome 55 implements the hyphens property to control when soft hyphens appear and how they behave.
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".
Infinite scrollers are a common UI pattern. Here we explore how to implement this pattern in a memory conservative way that performs at 60fps.
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 is a collection of APIs that expose the CSS engine’s internals to developers
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, 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
CSS Grid Layout is a new CSS3 module that provides new layout primitives that are ideal for web applications.
An implementation of Web Animations 1.0 has landed in Blink powering CSS Animations and Transitions.
Good news: new flexbox (display: flex) is 2.3x faster than old flexbox (display: box)!
Powering a css background using canvas or webgl