Hej Smashing Friends,

I remember the good ol’ days when I just started tinkering with HTML and CSS. I was utterly confused and excited about relative positioning within an absolutely positioned container. I would try to float to the top and bottom like I’d float to the left and right.

Years later, I’d struggle with the SVG viewbox, then continue with article vs. section tags, and then try to grasp the cascade layers, sibling combinator, relationships, and container queries. Looking back, I realize that I’ve always gone through so many moments of experimentation, frustration, and delight once I realized how to get it all right. That’s how I learn, and maybe that’s how you learn, too.

In today’s newsletter, we continue exploring some of the useful HTML and CSS features that might help you in your day-to-day work. From relative color to reliable dialogs and popover, with better keyboard layout and focus styles.

Join us next week for a Smashing Hour with Alex Russell — register your ticket here and bring your friends along (it’s free)!

On Tuesday, November 19 (check your timezone), we are hosting a Smashing Hour with our guest, Alex Russell.

And: we also have friendly bundles of Smashing books and workshops to help you build your skill set and dive deep into the subjects you care about most. Let’s bundle up and save!

Happy reading, everyone!
— Vitaly

1. High-Definition Colors

Color-wise, we are living in exciting times. With high-definition colors with LCH, okLCH, LAB, and okLAB that give us access to 50% more colors available in modern browsers, the times of RGB/HSL might be over soon. To get you familiar with the new color spaces, Vitaly wrote a quick overview of what you need to know.

Both OKLCH and OKLAB are based on human perception and can specify any color the human eye can see. While OKLAB works best for rich gradients, OKLCH is a fantastic fit for color palettes in design systems. OKLCH/OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera. (cm)

2. The Right Virtual Keyboard On Mobile

It’s a small detail, but one that adds to a well-considered user experience: displaying the most comfortable touchscreen keyboard to help a user enter their information without having to switch back and forth to insert numbers, punctuation, or special characters like an @ symbol.

To show the right keyboard layout, we can use inputmode. It instructs the browser which keyboard to display and supports values for numeric, telephone, decimal, email, URL, and search keyboards. To further improve the UX, we can add the enterkeyhint attribute: it adjusts the text on the Enter key. If no enterkeyhint is used, the user agent might use contextual information from the inputmode attribute. A powerful duo. (cm)

3. Bundle Up And Save On Smashing Books And Workshops 📚

The end of the year is usually the time when we ask ourselves: What would we like to get better at next year? To help everyone in our community get ready for the year ahead, we are offering friendly discounts on books, eBooks, and online workshops throughout the month of November. It’s the perfect occasion to build your skill set and dive deep into the subjects you care about most.

To set yourself up for a year of learning in 2025, you can now bundle up your favorite books and eBooks. When you purchase 3 or more books and eBooks, you save 30%. (Please note that this discount can’t be combined with other discounts).

And we have a bundle option for online workshops for you, too: Book three or more workshops, and save 30%. Happy learning!

4. The Power Of CSS :has

Historically, CSS selectors have worked in a top-down fashion, allowing us to style a child based on its parent. The new CSS pseudo-class :has works the other way round: We can now style a parent based on its children. But that’s not all yet. Josh W. Comeau wrote a fantastic introduction to :has in which he explores real-world use cases and mind-blowing experiments that show what the pseudo-class is capable of.

As Josh shows, :has is not limited to parent-child relationships or direct siblings. Instead, it lets us style one element based on the properties or status of any other element in a totally different container. And it can be used as a sort of global event listener — to disable scrolling on a page when a modal is open or to create a JavaScript-free dark mode toggle, for example. (cm)

From our sponsor

Monitor Website Performance And Speed Up Your Website

DebugBear is a page speed monitoring tool that combines in-depth on-demand tests with real user data. Provide a better user experience and pass Google’s Core Web Vitals assessment. Start your free trial!

5. Making Focus Visible

Focus styles are essential to help keyboard users navigate a page. However, for mouse users, it can be irritating when a focus ring appears around a button or link as they click on it. :focus-visible is here to help us create the best experience for both user groups: It displays focus styles for keyboard users and hides them for mouse users.

:focus-visible applies while an element matches the :focus pseudo-class and the User Agent determines via heuristics that the focus should be made visible on the element. Curious how it works in practice? MDN Web Docs highlights the differences between :focus and :focus-visible, what you need to consider accessibility-wise, and how to provide a fallback for old browser versions that don’t support :focus-visible. (cm)

6. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

• Figma Workflow Masterclass design
  with Christine Vallaure. Nov 13–22
• How To Measure UX and Design Impact ux
  with Vitaly Friedman. Dec 4–12
• Hybrid Apps with Web and Native Technologies dev
  with Átila Fassina. Jan 9–17
• The Power of Storytelling ux
  with Chiara Aliotta. Jan 20 – Feb 3
• Design Patterns for AI Interfaces ux
  with Vitaly Friedman. Jan 22 – Feb 5
• New Front-End Adventures, 2025 Edition ux
  with Vitaly Friedman. Jan 27 – Feb 10
• Accessible Typography for Web & UI Design Masterclass design
  with Oliver Schöndorfer. Feb 10–18
• Building Modern HTML Emails dev
  with Rémi Parmentier. Mar 3–11
• Measure UX and Design Impact UX (video course)
  with Vitaly Friedman.
• Jump to all workshops →

7. Deriving Colors From Colors

Let’s say you have a background color and want to reduce its luminosity by 25%, or you want to use a complementary color without having to calculate it yourself. The relative color syntax (RCS) makes it possible to create a new color based on a given color.

To derive and compute a new color, we can use the from keyword for color functions (color(), hsl(), oklch(), etc.) to modify the values of the input color. Adam Argyle shares some code snippets of what this looks like in practice, or check the spec for more details. The Relative Color Syntax is supported in all modern browsers. (cm)

From our sponsor

It’s Time To Change The Way We Build Digital Products

Consistently align your people to the most strategic priorities, discover product opportunities from deep customer insights, and gain total visibility on execution with Airtable ProductCentral, the complete operating system for Product teams, built on Airtable’s powerful platform.

8. Reliable Dialog And Popover

If you’re looking for a quick way to create a modal or popup, the <dialog> HTML element finally offers a native (and accessible!) solution to help you get the job done. It represents a modal or non-modal dialog box or other interactive component, such as a confirmation prompt or a subwindow used to enter data.

While modal dialog boxes interrupt interaction with a page, non-modal dialog boxes allow interaction with the page while the dialog is open. Adam Argyle published some code snippets that show how <dialog> can block pop-ups and popovers for non-blocking menus, out of the box. (cm)

Recent Smashing Articles

• Alternatives To Typical Technical Illustrations And Data Visualisations
• Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website
• Ingredients For A Cozy November (2024 Wallpapers)
• Designing For Gen Z: Expectations And UX Guidelines

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook