Constructable Stylesheets: seamless reusable styles
Shipping in Chrome 73, Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
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
CSS Scroll Snap allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. This enables common UX scroll patterns without the need for JavaScript.
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.
css style cssom houdini chrome66
CSS Paint API
Houdini’s CSS Paint API allows you to programmatically draw CSS images.
css style houdini javascript chrome65
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.
chrome63 css overscroll scroll
Removing ::shadow and /deep/ in Chrome 63
Say goodbye to shadow-piercing CSS selectors.
webcomponents shadowdom style css deprecations removals chrome63
An event for CSS position:sticky
Using position: sticky and IntersectionObserver together to determine when elements become sticky. Apply scroll effects without scroll events!
css intersectionobserver stickyposition
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!
position:sticky is back in Chrome
After a long time absent from Chrome, position:sticky is back.
Performant Parallaxing
When used judiciously paralaxing can add of depth and subtlety to a web app.
performance parallax css 3d style
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.
css flexbox chrome52 absolute-positioned
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.
image-rendering: pixelated
Pixelation of the nation. Now in Chrome 41
news css pixelated image-rendering
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)
news webgl shaders css filters
CSS Background shorthand coming to mobile WebKit browsers
Canvas-driven background images
Powering a css background using canvas or webgl
Interactive Globe with CSS shaders & Google Maps
Stacking Changes Coming to position:fixed elements
Stick your landings! position: sticky lands in WebKit
Writing a flippable book using CSS Regions and 3D transforms
The amazing powers of CSS
CSS layout gets smarter with calc()
A New Experimental Feature: scoped stylesheets
CSS Filter Effects Landing in WebKit
news presentation css filters graphics
HTML5 Libraries - Late June
