Issue #518

August 23, 2022

Use the Right Container Query Syntax

Miriam Suzanne gives an excellent introduction to Container Queries.

Using :has() as a CSS Parent Selector and Much More

Jen Simmons shares a step-by-step, hands-on look at what you can do with :has() pseudo-class.

Take your UX and front-end skill set to the next level

Looking to up your UX design game?

Join us at An Event Apart Denver this coming October 10–12 for three days of expert sessions on:

New CSS features
Accessibility
Responsive Animation
Design system tooling
Global design
SEO+UX

And more!

As a CSS Weekly subscriber, you can save $100 on any multi-day pass with promo code AEACSSW22.

See the agenda and register now!

Articles & Tutorials

CSS Grid and Custom Shapes, Part 2

Temani Afif demonstrates different ways to arrange images on the grid, including some rad hover effects that make for an authentic, interactive experience to view pictures.

Understanding and Using the New CSS Style Queries

Fimber Elemuwa explains in detail how Container Queries work.

Modern CSS Selectors

Craig Buckler shows how to use the :is, :where, and :has CSS selectors.

Quick Tip: Negative Animation Delay

Michelle Barker gives a tiny CSS tip for making staggered animations feel more natural by adding negative animation delay.

An Interactive Guide To Color & Contrast

Nate Baldwin shares a comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

Open-source, end-to-end encrypted, and 100% secure, Internxt is a cloud storage suite that puts you back in control of your data. Fight back against Big Tech, store and share files with Internxt Drive, Photos, and Send.

Protect your files, privacy, and peace of mind.