CSS Layout News - Issue 315

Popping my head out of a giant pile of editing work, to bring you CSS Layout News this week.

A big thank you to An Event Apart for sponsoring the newsletter, the line-up for the online Fall Summit looks great, use the code in the footer of this email for a discount and to let them know I sent you!

Rachel Andrew

News

accent-color

The CSS accent-color property will land in the next versions of Chrome and Firefox. I do like it when things release in more than one user-agent at a time. In this post find out how the property can help to add your brand color to elements that are typically hard to style.

Bootstrap adds CSS Grid support

An experimental feature for now, if you do use Bootstrap try out the new CSS Grid support and let them know if you encounter any problems.

Learn

Exploring the CSS Paint API: Image Fragmentation Effect

There have been a few articles covering Houdini APIs recently. This one explains how to create an image fragmentation effect by using the Paint API.

Using CSS Shapes for Interesting User Controls and Navigation

A fun article with ideas for using CSS Shapes to create interesting navigation effects.

Horizontal scrolling in a centered max-width container

A nice little demo of a scrolling panel within a centered container.

Chrome DevTools: Better accessibility inspection with the Source Order Viewer

In particular, when using grid and flexbox it is possible to move the display order away from the logical order defined in the source. This can lead to an unexpected, and difficult-to-use experience when navigating a document using the keyboard. Chrome DevTools can help you to identify places where this might be happening.

This week's sponsor

Fall Summit 2021 — An (ONLINE!) web design conference for UX & front-end experts

Learn what’s next in web design by participating in An Event Apart Online Together: Fall Summit 2021, a three-day conference with an intense focus on digital design, UX, content, code, and more, coming to a device near you October 11–13.

Fall Summit 2021 features fifteen in-depth sessions, each followed by a live, moderated Q&A session with the speaker, plus a special session at the end of each day.

Attending An Event Apart inspires your creativity, adds to your skillset, and increases your value to your teammates, employers, and clients. With three days filled with expert sessions, community networking and sharing, and six months to re-watch the entire conference on demand, Fall Summit 2021 is the ultimate AEA Online Together experience.

CSS Layout subscribers can save $100 off any multi-day pass with promo code: AEACSSL21

Don’t miss out—see our detailed three-day schedule and register today!