CSS Layout News - Issue 300

We made it to issue 300. This week: custom properties, CLS, breakpoints.
 

CSS Layout News

 

ISSUE 300  27th April 2021

 

News

 

Issue 300

It's issue 300! I've been sending a weekly CSS Layout News since the 4th August, 2015. If you need a reminder about how very long ago that was, the issue led with the release notes for Chrome 44! I announced Grid Layout shipping in Firefox in issue 84 and Chrome in issue 85, over 4 years ago.

I noted last week, as I was preparing an update to my talk on new things in CSS, how quickly things are shipping into browsers now. Things that I included as coming soon features, have landed in browsers by the time I give the talk again, and new things have started to show up. I started this newsletter to help promote the upcoming grid spec, and it's very cool that there are still plenty of new layout and layout-adjacent things happening to let me make it to issue 300—and beyond!

Rachel Andrew, CSS Layout News

 
 

Learn

 

Understanding Display

Slides and resources for my talk at Web Directions hover, a conference just about CSS.

noti.st

 

Don't you forget about me: overlooked breakpoints in responsive design.

An article about some breakpoints that you might want to pay a little more attention to.

polypane.app

 

Sortable Table Columns | Adrian Roselli

Another excellent article from Adrian, covering a design pattern that many of us will have had to deal with at one time or another.

adrianroselli.com

 

Getting started with CSS Custom Properties - Tutorial - Piccalilli

Custom properties in CSS are exceptionally useful, not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces. This short guide will get you up to speed with how they work and how to use them.

piccalil.li

 

A Complete Guide to Custom Properties | CSS-Tricks

After reading the earlier short primer, here's a complete guide to custom properties to help you take the next step!

css-tricks.com

 

Exploring color-contrast() for the First Time | CSS-Tricks

Chris takes a good look at the upcoming color-contrast() function.

css-tricks.com

 

The Almost-Complete Guide to Cumulative Layout Shift

A solid guide to Cumulative Layout Shift (CLS). This is a measurement of the annoying experience of a layout shifting around as you try to use it, leading you to click on the wrong things or lose your place.

jessbpeck.com

 
You received this email because you subscribed via the CSS Layout News site.
We'll be sorry to see you go but you can unsubscribe instantly.
 
Spike Island 133 Cumberland Rd Bristol BS1 6UX
 
 

 
 
©2021 CSS Layout News | Privacy Policy | Curated by Rachel Andrew.
 
Published with Curated

Older messages

CSS Layout News - Issue 299

Tuesday, April 20, 2021

Safari Grid Inspector, Firefox 88, understanding CSS. View on the Web Archives ISSUE 299 20th April 2021 News Issue 299 A slightly shorter email this week as I was out this morning driving to another

CSS Layout News - Issue 298

Wednesday, April 14, 2021

More on Container Queries, clipping and masking, accessible components View on the Web Archives ISSUE 298 14th April 2021 News Issue 298 Last week I spent a bit of time digging into container queries

CSS Layout News - Issue 297

Tuesday, April 6, 2021

Horizontal rules, SVG grids, or build your own web browser View on the Web Archives ISSUE 297 6th April 2021 News Issue 297 I hope those of you who celebrate (the Western church) Easter, had a good

CSS Layout News - Issue 296

Wednesday, March 31, 2021

Container Queries, CSS Performance, and more interesting things about color. View on the Web Archives ISSUE 296 30th March 2021 News Issue 296 I've still not moved platform for this newsletter yet,

CSS Layout News - Issue 295

Tuesday, March 23, 2021

Fixing compat pain points, color-mix(), blend modes and masking. View on the Web Archives ISSUE 295 23rd March 2021 News Issue 295 Today marks a year since the first lockdown here in the UK, I just had

The Biggest Paint Trend News of 2021 (So Far)

Wednesday, June 23, 2021

Plus, 17 boldly beautiful dining room ideas from the pages of AD (image) Architectural Digest AD PRO Logo wooden drinks cabinet With Its IPO, Will 1stDibs Become the eBay of Luxury Design? Read More →

✏ How Performance Affects SEO, RWD in a Component World, Coded Illustrations, and more…

Wednesday, June 23, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU How your Website Performance Affects your SEO Rankings BOOTSTRAPBAY.COM COMMENTS Soft UI: Making Sense of the Latest

NYC Votes, Coded Illustrations, Motion & Accessibility, Custom Scrollbars, UCD

Wednesday, June 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 23 2021 Vela: Identity Design Process mattyow.medium.com

Issue 308

Wednesday, June 23, 2021

Information as more of the new rendering engine for Chromium lands. Explaining interesting CSS Grid examples, CSS masking, and serving sharp images. CSS Layout News Issue 308 By Rachel Andrew – 23 Jun

Vela Identity, Safari 15, Cars Data, New Responsive, Styled-components

Wednesday, June 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 23 2021 Vela: Identity Design Process mattyow.medium.com

The Pandemic-Inspired Design Trends That Are Sure to Stick Around

Tuesday, June 22, 2021

Plus, 40 of the best home decor stores in America (image) Architectural Digest AD PRO Logo Artist studio with easel 4 Pandemic-Inspired Design Trends That Are Sure to Stick Around Read More → Nickey

✏ 20 Best New Fonts, 6 Levels of UX Maturity, State of Windows, and more…

Tuesday, June 22, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU The 6 Levels of UX Maturity NNGROUP.COM COMMENTS Google Top Stories Carousel Now Showing Non-AMP Listings

Smashing Newsletter #306: Front-End Accessibility

Tuesday, June 22, 2021

With accessible toggles, navigation, disabled buttons, hidden content and media scroller component. Applicable to your projects right away. Issue #306 • June 22, 2021 • View in the browser 💨 Smashing

Hollywood Regency Meets the Upper East Side in Manolo Blahnik's New Manhattan Flagship

Monday, June 21, 2021

Plus, 7 ways to save a project before things start to go wrong (image) Architectural Digest AD PRO Logo Image may contain: Grass, Plant, and Lawn Move Over, Marie Antoinette—These Giant Animal

✏ What’s Coming in WordPress 5.8, Free Developer Stuff, 12 CSS Parallax Effects, and more...

Monday, June 21, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU What's Coming in WordPress 5.8 (Features and Screenshots) WPBEGINNER.COM COMMENTS How to Use Dynamic Imports in