CSS Layout News - CSS Layout News - Issue 272

Interesting techniques with grid, subgrid, flexbox, and custom properties.
 

CSS Layout News

 

ISSUE 272  13th October 2020

 

News

 

Issue 272

Late sending this today as I've had one of those days where nothing went to plan, and I'm writing late in the evening with one ear on SmashingConf Austin online. I'll be speaking tomorrow about new things in CSS. Some nice techniques in the articles I'm sharing today however, so I hope you find something interesting among them.

Also in the last week, Smashing pre-launched the book Typescript in 50 Lessons. I edited the book, and while it's not CSS I imagine there is some crossover of readers here and folk who want to learn Typescript. It's a friendly introduction to the subject, if it is something you would like to learn.

Rachel Andrew, CSS Layout News

 

Release Notes for Safari Technology Preview 114 | WebKit

Includes the flow-relative shorthand properties, among other layout updates.

webkit.org

 
 

Learn

 

AddyOsmani.com - Preload late-discovered Hero images faster

Using link rel="preload" to load primary images more quickly.

addyosmani.com

 

The -​-var: ; hack to toggle multiple values with one custom property – Lea Verou

A neat idea from Lea Verou, to change multiple values across multiple properties.

verou.me

 

Balancing on a Pivot with Flexbox | CSS-Tricks

This is a clever technique, using flexbox to centre a bunch of things around a pivot.

css-tricks.com

 

Achieving Vertical Alignment (Thanks, Subgrid!) | CSS-Tricks

An article about vertical alignment which finds the solution in subgrid. Great to see more people starting to think about how the feature can help their layout challenges.

css-tricks.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
 
 

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

Older messages

CSS Layout News - Issue 271

Tuesday, October 6, 2020

Flexbox gaps, DevTools, accessibility resources, and media queries View on the web Archives ISSUE 271 6th October 2020 News Issue 271 Lots of interesting things today, perhaps everyone is back from

CSS Layout News - Issue 270

Tuesday, September 29, 2020

MDN Browser Compat Report, accessibility, animation, font-size with clamp() View on the web Archives ISSUE 270 29th September 2020 News Issue 270 Animation and accessibility feature heavily this week,

CSS Layout News - Issue 269

Tuesday, September 22, 2020

In-depth with the display specification, sortable tables, and accessible navigation View on the web Archives ISSUE 269 22nd September 2020 News Issue 269 Being a bit light on content this week, mostly

CSS Layout News - Issue 268

Tuesday, September 15, 2020

CSS Clipping and Masking, a free 24 hour Inclusive Design event, Interaction Media Features View on the web Archives ISSUE 268 15th September 2020 News Issue 268 It's a little strange as we head

CSS Layout News - Issue 267

Tuesday, September 8, 2020

Custom list bullets, browser diversity, JavaScript Media Queries. View on the web Archives ISSUE 267 8th September 2020 News Issue 267 I am writing this while waiting to present at the online

You Might Also Like

It's Officially Show House Season

Thursday, May 2, 2024

View in your browser | Update your preferences ADPro Showing Up, and Showing Off One of the traditions design aficionados look forward to the most each year is the return of decorator show houses. In

Zelman Meats, AI Feedback Loop, Figma Variables, CSS Masonry, Passkeys

Thursday, May 2, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 2 2024 Zelman Meats logo by Red Dot Studio logodesignlove.

Every viral brand has these 5 things in common ⚡️

Wednesday, May 1, 2024

See if your brand checks all the boxes... Branding, branding, branding. Like, PR, it's an oft-misunderstood area of business building. Many people think a logo, some colors, and a font constitute

inherit(), Polish, Picture-Superiority Effect, Music Notation, Multi-Brand Design System

Wednesday, May 1, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 1 2024 Self-Modifying Variables: the inherit() Workaround

164 / What if you could talk to Scarlett Johansson from the movie Her?

Tuesday, April 30, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 2 View in browser Welcome to Issue 164! Standing out in today's competitive market is hard, really hard. But side projects can help

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

Mayer Rus on L.A.’s Great Gallery Migration

Tuesday, April 30, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party For this week's edition

Head of Typography, Centering Things, 3D Badge, Alternating Style Queries, Hate Speech

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 30 2024 Detect JavaScript Support in CSS ryanmulligan.dev

JavaScript Support, AI in UI/UX, Deja Vu, Nature of Code, Clubhouse

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 29 2024 Detect JavaScript Support in CSS ryanmulligan.dev

Accessibility Weekly #394: Images as the First Thing in a Button or Link

Monday, April 29, 2024

April 29, 2024 • Issue #394 View this issue online or browse the full issue archive. Featured: Images as the first thing in a button or link "An accessibility problem I encounter regularly is