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!
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!
Shipping in Chrome 73, Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
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!
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.
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!
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!
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 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!
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.
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