November 24, 2020 Smashing Newsletter: Issue #276

Editorial

The subject of the newsletter today is CSS — very much my favorite subject! We have plenty of CSS-related material in our Guide to CSS Layout and a good number of useful articles that we’ve published in the past (e.g. “How To Learn CSS” would be a good place to start).

But in case you’re looking to dive in even more into the world of CSS, there’s still time to book one of the final remaining tickets for our workshop with Andy Bell on “Building A Design System With CSS”. He’ll be showing you how to create a resilient and scalable design system using CUBE CSS, and so much more!

Also, we have just announced that this December 17, we are organizing another community-based Smashing Meets event! This time, it’ll be a nice and cozy ‘Happy Holidays’ edition to celebrate the holiday season of this interesting year with a few hours of Smashing fun! There will be three talks and some fun side events, too. Tickets are only 10 USD, and our Smashing Members get in for free.

I hope that our American readers have a good Thanksgiving, and while it may be a bit different compared to the previous years, hopefully you’ll still manage to celebrate and have some time to relax.

Stay safe,
Rachel Andrew (@rachelandrew)

1. Preventing Layout Shifts With CSS Grid
2. Fluid Typography With clamp()
3. New Front-End & UX Workshops
4. A Clever Solution For Autogrowing Textareas
5. Custom List Markers
6. Fixing Headers And Jump Links

1. Preventing Layout Shifts With CSS Grid

It’s no news that CSS Grid is a fantastic tool to build complex layouts. But did you know that it can help you prevent layout shifts, too? When Hubert Sablonnière discovered a layout shift problem with a toggling state on a UI component he worked on, he came up with a solution: the “Anti Layout Shift Grid Stacking Technique”.

Compared to solving the layout shift with absolute positioning, Hubert’s Grid-based technique supports complex situations that require more than two panels. Another benefit: You don’t need to assume which panel should guide the size of the whole component. If you want to dive in deeper, Hubert wrote up everything you need to know to prevent both vertical and horizontal shifts in a practical blog post. (cm)

2. Fluid Typography With clamp()

When it comes to fluid scaling, CSS has some exciting new features: clamp(), min(), and max(). They cap and scale values as the browser grows and shrinks. min() and max() return the respective minimum and maximum values at any given time while clamp lets you you pass in both a minimum and maximum plus a preferred size for the browser to use.

As Trys Mudford points out, clamp() comes in particularly handy when you want broadly fluid typography without being 100% specific about the relationship between the varying sizes. In his in-depth article about the new feature, he shares valuable hands-on tips for using clamp() effectively. (cm)

3. New Front-End & UX Workshops

We’ve been running online workshops since April this year, and it’s always an incredible experience with wonderful attendees from all over the world coming together to learn something together. That’s Smashing Workshops: live 2.5h-sessions with practical examples, video recordings and a friendly Q&A.

We’ve just announced our new front-end & UX workshops on front-end in 2021, forms, SVG animation, CSS and HTML email. There are still some early-birds left, with a lil’ friendly discount, so take a look and perhaps join us as well.

4. A Clever Solution For Autogrowing Textareas

There’s no native solution for an autogrowing <textarea> that expands in height as much as it needs to in order to contain the current value. Based on an idea by Stephen Shaw, Chris Coyier shares a very clever workaround for autogrowing textareas that achieves the desired effect until we get something better and native.

The trick is that you replicate the content of the <textarea> in an element that can auto-expand height, and match its sizing. Then hide the replica visually. Whichever of the children is tallest will push the parent to that height, and the other child will follow. The minimum height of the <textarea> serves as the base height, but as soon as the replicated text element grows taller, everything will grow taller with it. Nice! (cm)

5. Custom List Markers

There are ordered lists and unordered lists, each of them giving us the standard styling we expect. However, there’s more to lists than that, and thanks to CSS we have more styling options than you may think. How about starting a list of pros and cons with thumbs up and thumbs down emoji, for example?

Lea Verou did exactly that with the help of ::marker { content: var(–marker); }. The ::marker pseudo-element allows us to have custom markers (emoji, for example) with just one property, either on the <li> or an ancestor. Browser support for the feature is constantly improving. If you want to learn more about markers, counters, and how to tailor CSS lists to your need, Rachel Andrew’s article takes a closer look at the CSS Lists specification and the possibilities it brings along. (cm)

6. Fixing Headers And Jump Links

Jump links in combination with fixed headers can cause quite some frustration. Maybe you’ve run into the same issue before: When clicked, your jump link takes you to the desired element, but a fixed header is hiding it. In the past, wild hacks were required to solve the issue. Luckily, there’s now a straightforward and well-supported CSS solution.

The trick: scroll-margin-top. Assign it to your headers, and the position: fixed header won’t get into their way anymore when you navigate to them with a jump link. A short line of code that makes a huge difference. (cm)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.