Chrome Dev Summit is back! Visit goo.gle/cds2021 to secure your spot in workshops, office hours and learning lounges!

All Updates tagged: css

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.

chrome73 css style

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.

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.

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.

css style cssom houdini chrome66

Read article

CSS Paint API

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

css style houdini javascript chrome65

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.

chrome63 css overscroll scroll

Read article

Removing ::shadow and /deep/ in Chrome 63

Say goodbye to shadow-piercing CSS selectors.

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!

css intersectionobserver stickyposition

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!

css layout grids

Read article

position:sticky is back in Chrome

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

performance css style

Read article

Performant Parallaxing

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

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.

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

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.

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.

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

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.

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.

css chrome49

Read article

image-rendering: pixelated

Pixelation of the nation. Now in Chrome 41

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.

news layout css grids

Read article

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

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)!

news performance layout css

Read article

Introduction to Custom Filters (aka CSS Shaders)

news webgl shaders css filters

Read article

CSS Background shorthand coming to mobile WebKit browsers

news mobile graphics css

Read article

Canvas-driven background images

Powering a css background using canvas or webgl

news canvas css graphics

Read article

Interactive Globe with CSS shaders & Google Maps

news graphics shaders css

Read article

Stacking Changes Coming to position:fixed elements

news stacking css

Read article

Stick your landings! position: sticky lands in WebKit

news performance css

Read article

Writing a flippable book using CSS Regions and 3D transforms

news regions css

Read article

The amazing powers of CSS

news css

Read article

CSS layout gets smarter with calc()

news presentation css

Read article

A New Experimental Feature: scoped stylesheets

news css dom

Read article

CSS Filter Effects Landing in WebKit

news presentation css filters graphics

Read article

HTML5 Libraries - Late June

news canvas css

Read article

Subscribe