November 12, 2024 Smashing Newsletter: Issue #482
This newsletter issue was sent out to 193,942 subscribers on Tuesday, November 12, 2024.
Editorial
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.
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)
Monitor Website Performance And Speed Up Your Website
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 highlight 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.
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(), and so on) 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)
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)
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.