Unleashing the Power of CSS

By Stephanie Eckles

Many new and improved features have landed in CSS over the past few years, and a cross- browser effort to improve compatibility has made the language more stable than ever! The coordinated implementation of new features across browsers these days means we can start to use these features pretty much as soon as they appear, which is great for keeping our stylesheets as simple as possible. A few, single-line properties can now replace multi-line, hacky solutions. In some cases, newly available features may even mean we can remove JavaScript workarounds we once needed to get around old limitations!

In this tutorial, we'll review these enhancements to layout, responsive design, element styling, properties, and selectors, and also peek at upcoming features; we'll take a deep-dive into using the CSS :has() selector for scaling reusable components; discover the practical uses of container queries; and also learn how to create responsive CSS layouts without using media queries

• Language: English
• Publisher: SitePoint
• Release date: May 15, 2023
• ISBN: 9781925836561

Stephanie Eckles

Stephanie Eckles is the author of in-depth tutorials on ModernCSS.dev, and the creator of StyleStage.dev, SmolCSS.dev, and 11ty.Rocks. Steph has well over a decade of webdev experience that she enjoys sharing as an author, egghead and workshop instructor, podcast host, Twitch streamer, and conference speaker. She's an advocate for accessibility, scalable CSS, and the Jamstack. Offline, she's mom to two girls and a cowboy corgi and enjoys baking.

Book preview

Preface

Who Should Read This Book?

This book is for anyone who wants to better understand the new and improved features have landed in CSS over the past few years. It's assumed you have some prior experience with CSS.

Conventions Used

Code Samples

Code in this book is displayed using a fixed-width font, like so:

A Perfect Summer's Day

It was a lovely day for a walk in the park.

The birds were singing and the kids were all back at school.

You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

Tips, Notes, and Warnings

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.

Supplementary Materials

https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky problems.

[e-mail] is our email address, should you need to contact us to report a problem, or for any other reason.

Chapter 1: What You’ve Missed in CSS Land

Many new and improved features have landed in CSS over the past few years, and a cross-browser effort to improve compatibility has made the language more stable than ever! Let’s review these enhancements to layout, responsive design, element styling, properties, and selectors, and also peek at upcoming features.

The coordinated implementation of new features across browsers these days means we can start to use these features pretty much as soon as they appear, which is great for keeping our stylesheets as simple as possible. A few, single-line properties can now replace multi-line, hacky solutions. In some cases, newly available features may even mean we can remove JavaScript workarounds we once needed to get around old limitations!

The CSS Working Group (CSSWG)—the body responsible for updates to the language—has been taking feedback from developers and drawing inspiration from community solutions. The improvements described below provide an exciting glimpse into what’s now possible with CSS. There’s never been a better time to get (back) into learning CSS!

New and Enhanced Properties

In this first section, we’ll review some exciting new properties that have landed in CSS in recent times.

Custom Properties

With the end-of-life timeline started for Internet Explorer 11, it’s high time to use custom properties! Also referred to as CSS variables, custom properties allow us to define values that are reusable across our stylesheets. Custom properties can be used as an entire value for a property or as partial values, like the h in an hsl() definition. We can also modify custom properties in JavaScript. Check out my overview of how custom properties can be used.

Since custom properties aren’t static like Sass or other preprocessor variables, they open up a lot of opportunities for more flexible, dynamic styles. Custom properties offer far more than just being CSS variables, as Lea Verou explains in her incredible presentation at CSS Day 2022.

aspect-ratio

A new property that eliminates the padding hack is aspect-ratio. This does what its name suggests, allowing us to define an aspect ratio for sizing an element. The hack I referred to was commonly used to maintain a 16:9 ratio for video embeds. Now that ratio can be achieved through this one property and the declaration aspect-ratio: 16/9. It’s also a quick way to achieve a perfect square with aspect-ratio: 1.

Here’s a CodePen demo of how to use aspect-ratio in conjunction with the older property object-fit to keep a consistent avatar size regardless of the original image ratio and without distorting the image.

Individual Transform Properties

Also newly implemented across browsers are individual transform properties. Previously, if we wanted to redefine the rotate() value within the transform property, we would have to duplicate the definition (or leverage custom properties). As of Chromium 104, we can now use the individual properties of translate, rotate, and scale.

Logical Properties

If we’re managing content for an international audience, we can consider using logical properties. Available for most CSS 2.1 properties, logical variants consider the writing mode and flow of text. For standard English text, we would trade left/right for inline, and top/bottom for block:

.element {

  margin-block: 2rem;

}

As in the example above, logical properties also offer shorthands for setting two sides at once, where margin-block for horizontal writing modes is equivalent to setting margin-top and margin-bottom.

The inset Shorthand

Another useful logical shorthand is inset, which sets top, right, bottom and left at once.

New and Extended Selectors

Three of the most influential changes to CSS