New in Chrome 78
Chrome 78 is rolling out now! You can now provide “types” for CSS variables. You get fresher service workers because byte-for-byte checks are now performed for scripts imported by importScripts(). And I’ve got details for two new origin trials that provide some neat new functionality including the Native File System and the SMS Receiver. Plus the Chrome DevSummit is happening November 11-12, 2019. Let’s dive in and see what’s new for developers in Chrome 78!
chrome78 new-in-chrome chromedevsummit css serviceworker origintrials native-file-system sms-receiver
New in Chrome 76
Chrome 76 is rolling out now! It adds support for the prefers-color-scheme media query, bringing dark mode to websites. An install button in the omnibox to make installation of Progressive Web Apps on desktop easier. A way to prevent the mini-infobar from appearing on mobile. Increases the frequency with which WebAPKs are updated. And plenty more. Let’s dive in and see what’s new for developers in Chrome 76!
chrome76 new-in-chrome mobile install addtohomescreen progressive-web-apps webapk css desktop
New in Chrome 74
Just in time for Google I/O, Chrome 74 is landing now! It adds support for private class fields; allows you to detect when the user has requested a reduced motion experience; adds support for CSS transition events, and plenty more. Let’s dive in and see what’s new for developers in Chrome 74!
chrome74 new-in-chrome css feature-policy media-queries es6 accessibility
New in Chrome 73
Chrome 73 makes creating portable content easier with signed HTTP exchanges. Dynamically changing styles becomes way easier with constructable style sheets. And adds support for Progressive Web Apps on Mac, bringing support for PWAs to all desktop and mobile platforms, making it easy to create installable apps, delivered through the web. Let’s dive in and see what’s new for developers in Chrome 73!
chrome73 new-in-chrome desktop progressive-web-apps webpackage css regex
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.
New in Chrome 71
Chrome 71 makes displaying relative time values easier with the new Intl.RelativeTimeFormat() API. You can specify which side of the text the underline should appear on for text that flows vertically. And using the speech synthesis API now requires user activation before your computer starts talking to you! Let’s dive in and see what’s new for developers in Chrome 71!
chrome71 new-in-chrome intl css vertical-text speech synthesis
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
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!
chrome65 new-in-chrome css layout performance
CSS Paint API
Houdini’s CSS Paint API allows you to programmatically draw CSS images.
css style houdini javascript chrome65
New in Chrome 63
Chrome 63 allows you to import JavaScript modules dynamically. My favorite interview coding question becomes a piece of cake with async iterators and generators. And you can override the browser's default overflow scroll behavior with the CSS overscroll-behavior property.
chrome63 new-in-chrome css overscroll scroll android async await es6 generators iterators modules permissions streams
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
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!
chrome57 new-in-chrome css progressive-web-apps media grids
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.
chrome55 new-in-chrome css layout html5 flash webbluetooth webvr
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
