CSS Layout News - CSS Layout News - Issue 276

A container query-like solution with CSS math functions, detecting sticky items, :focus-within
 

CSS Layout News

 

ISSUE 276  10th November 2020

 

News

 

Issue 276

It's Tuesday again and I'm writing this before heading over to help out with the last SmashingConf of the year. I'll be speaking tomorrow on new things in CSS, after I've updated my slides as new things keep happening that I need to include or update! Not a bad problem to have.

Loads of useful ideas and tips this week, a really nice collection of layout-related stuff to look through. Thanks to sponsor An Event Apart!

Rachel Andrew, CSS Layout News

 
 

Learn

 

The Raven Technique: One Step Closer to Container Queries | CSS-Tricks

This is incredibly detailed and I will be giving it a second read. How to use math functions in CSS to create container-query like solutions.

css-tricks.com

 

How to Detect When a Sticky Element Gets Pinned

This is an answer to something I have been asked a few times. Use IntersectionObserver to know when an item has become sticky.

davidwalsh.name

 

Bidirectional scrolling: what’s not to like? by Adam Silver – Designer, London, UK.

An article about bidirectional scrolling patterns.

adamsilver.io

 

Designing User-Friendly Data Tables | UX Booth

Some tips for designing attractive and user-friendly data tables.

uxbooth.com

 

Grab your user's attention with the :focus-within CSS selector - DEV

A useful tip, demonstrating how to use :focus-within to highlight an element when any field in the form inside it is focused.

dev.to

 

Chasing the Pixel-Perfect Dream · Josh W Comeau

An article about why spacing and consistency matters in design, and why designers sometimes get annoyed with developers who don't seem to care about this stuff. We've got so many more tools today to get this stuff right in CSS than we did in the past too.

joshwcomeau.com

 

Effective Skeleton Screens - Web Performance Consulting | TimKadlec.com

Some good thinking on the subject of skeleton screens, and how to use them well.

timkadlec.com

 
 

Our Sponsor

 

Articles, Links, and Tools from An Event Apart Online Together: Fall Summit

An Event Apart just wrapped up their Fall Summit conference, and it was a huge success! Attendees and speakers from around the world took in dozens of inspiring sessions full of deep insights into where we are now and where things are going next.

If you weren’t able to participate, don’t worry—we’ve got your back! Start by exploring the compendium of articles, links, tools, and other resources from 20+ experts.

Next, boost your skills and inspire your creativity with a Fall Summit On-Demand Pass.

aneventapart.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 275

Tuesday, November 3, 2020

Masonry, content-visibility, and hiding things with CSS View on the Web Archives ISSUE 275 3rd November 2020 News Issue 275 I'd seen a few people mention the publication of a Grid Level 3 draft

CSS Layout News - Issue 274

Tuesday, October 27, 2020

A grid solution to layout shifts, CSS Shapes and emoji, grid sites that don't look so griddy. View on the web Archives ISSUE 274 27th October 2020 News Issue 274 Hello! Here we are with another

CSS Layout News - Issue 272

Tuesday, October 13, 2020

Interesting techniques with grid, subgrid, flexbox, and custom properties. View on the web Archives ISSUE 272 13th October 2020 News Issue 272 Late sending this today as I've had one of those days

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,

You Might Also Like

#489: Web Performance

Tuesday, January 7, 2025

Instant navigation, Web Almanac 2024, INP debugging, font-face fallbacks and compression dictionaries. Issue #489 • Jan 7, 2025 • View in the browser Smashing Newsletter Hello Smashing Friends, Web

The Beautiful House That Made Mayer Rus Anxious—At First

Tuesday, January 7, 2025

View in your browser | Update your preferences ADPro Concrete Box Supreme I confess, I was a bit intimidated by the prospect of writing about the work of architect Tadao Ando for the first time in my

New Updates and a Sneak Peek into 2025

Tuesday, January 7, 2025

Both our email builder and website builder are getting significant upgrades to enhance your experience.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

🐺Get ready to get press in 2025!

Tuesday, January 7, 2025

Since you asked, we extended the sale! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #430: FTC Orders AccessiBe to Pay $1M

Monday, January 6, 2025

January 6, 2025 • Issue #430 View this issue online or browse the full issue archive. Featured: FTC orders AI accessibility startup AccessiBe to pay $1M for misleading advertising "The US Federal

Getting ready for 2025

Sunday, January 5, 2025

Issue 227: Key focuses in the new year ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Want to Scale Your Firm in 2025? Start Here

Thursday, January 2, 2025

View in your browser | Update your preferences ADPro Build Your Best Team Yet A new calendar year presents an opportunity to wipe the slate clean, and your approach, whether slapdash or carefully

Our Must-Reads of 2024

Tuesday, December 31, 2024

View in your browser | Update your preferences ADPro Year in Review Well, we made it. It's the last day of 2024, so today, we're taking a walk down memory lane to bring you some of our

Accessibility Weekly #429: Broken Frames

Monday, December 30, 2024

December 30, 2024 • Issue #429 View this issue online or browse the full issue archive. Featured: Navigating imperfect accessibility frameworks for trauma-informed outcomes "So what is it then? Am

Top issues from 2024

Sunday, December 29, 2024

Issue 226: Looking back at the most resonating topics ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏