Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

All Updates tagged: css

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!

local_offer chrome71 new-in-chrome intl css vertical-text speech synthesis

Read article

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.

local_offer houdini css

Read article

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.

local_offer chrome69 css snap scroll

Read article

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.

local_offer css style cssom houdini chrome66

Read article

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!

local_offer chrome65 new-in-chrome css layout performance

Read article

CSS Paint API

Houdini’s CSS Paint API allows you to programmatically draw CSS images.

local_offer css style houdini javascript chrome65

Read article

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.

local_offer chrome63 new-in-chrome css overscroll scroll android async await es6 generators iterators modules permissions streams

Read article

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.

local_offer chrome63 css overscroll scroll

Read article

Removing ::shadow and /deep/ in Chrome 63

Say goodbye to shadow-piercing CSS selectors.

local_offer webcomponents shadowdom style css deprecations removals chrome63

Read article

An event for CSS position:sticky

Using position: sticky and IntersectionObserver together to determine when elements become sticky. Apply scroll effects without scroll events!

local_offer css intersectionobserver stickyposition

Read article

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!

local_offer chrome57 new-in-chrome css progressive-web-apps media grids

Read article

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!

local_offer css layout grids

Read article

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.

local_offer chrome55 new-in-chrome css layout html5 flash webbluetooth webvr

Read article

position:sticky is back in Chrome

After a long time absent from Chrome, position:sticky is back.

local_offer performance css style

Read article

Performant Parallaxing

When used judiciously paralaxing can add of depth and subtlety to a web app.

local_offer performance parallax css 3d style

Read article

Manage Hyphens with CSS

Chrome 55 implements the hyphens property to control when soft hyphens appear and how they behave.

local_offer chrome55 css

Read article

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".

local_offer css webanimations chrome53

Read article

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.

local_offer javascript css

Read article

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.

local_offer css flexbox chrome52 absolute-positioned

Read article

Houdini: Demystifying CSS

Houdini is a collection of APIs that expose the CSS engine’s internals to developers

local_offer houdini css

Read article

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.

local_offer css fonts chrome49

Read article

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.

local_offer css chrome49

Read article

image-rendering: pixelated

Pixelation of the nation. Now in Chrome 41

local_offer news css pixelated image-rendering

Read article

Get on the CSS Grid!

CSS Grid Layout is a new CSS3 module that provides new layout primitives that are ideal for web applications.

local_offer news layout css grids

Read article

An implementation of Web Animations 1.0 has landed in Blink powering CSS Animations and Transitions.

local_offer news webanimations css

Read article

Flexbox layout isn't slow

Good news: new flexbox (display: flex) is 2.3x faster than old flexbox (display: box)!

local_offer news performance layout css

Read article

Introduction to Custom Filters (aka CSS Shaders)

local_offer news webgl shaders css filters

Read article

CSS Background shorthand coming to mobile WebKit browsers

local_offer news mobile graphics css

Read article

Canvas-driven background images

Powering a css background using canvas or webgl

local_offer news canvas css graphics

Read article

Interactive Globe with CSS shaders & Google Maps

local_offer news graphics shaders css

Read article

Stacking Changes Coming to position:fixed elements

local_offer news stacking css

Read article

Stick your landings! position: sticky lands in WebKit

local_offer news performance css

Read article

Writing a flippable book using CSS Regions and 3D transforms

local_offer news regions css

Read article

The amazing powers of CSS

local_offer news css

Read article

CSS layout gets smarter with calc()

local_offer news presentation css

Read article

A New Experimental Feature: scoped stylesheets

local_offer news css dom

Read article

CSS Filter Effects Landing in WebKit

local_offer news presentation css filters graphics

Read article

HTML5 Libraries - Late June

local_offer news canvas css

Read article

Subscribe