Smashing Magazine - #482: New Front-End Techniques

With high-definition colors, virtual keyboard on mobile, CSS and reliable dialog in HTML. Issue #482 Nov 12, 2024 View in the browser

Smashing Newsletter

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.

A Smashing Hour with… Alex Russell
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.

High-Definition Colors

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.

Everything You Ever Wanted to Know About inputmode

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.

Bundle up and save. Save more when you bundle Smashing stuff.

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.

The Undeniable Utility Of CSS has

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
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

: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.

Smashing Online Events
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:


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.

Relative 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

Airtable
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.

Dialog

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


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

unsubscribe update preferences view in your browser

Older messages

#481: Front-End Techniques

Tuesday, November 5, 2024

With text balancing, exclusive accordions, CSS-only validation, responsive video and audio. Issue #481 • Nov 5, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, As we keep searching

#480: Design & UX Gems

Tuesday, October 29, 2024

Exploring fluid ways to interact with users, interactive cursors, common mistakes in software architecture and inspiring principles from nature. Issue #480 • Oct 29, 2024 • View in the browser Smashing

#479: New Front-End Adventures In 2025

Tuesday, October 22, 2024

CSS style queries, auto field-sizing for forms, simpler snapping, anchor positioning, smooth transitions with View Transitions API. Issue #479 • Oct 22, 2024 • View in the browser Smashing Newsletter

#478: Inclusive Design

Sunday, October 20, 2024

Accessible numbers, ADHD, readability guidelines, neurodiversity design system and inclusive mindset workbook. Issue #478 • Oct 15, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends,

#477: UX Kits, Tools & Methods

Tuesday, October 8, 2024

Playbook for universal design, UX deliverables glossary, UX toolts for better thinking and better design workshops. Issue #477 • Oct 8, 2024 • View in the browser Smashing Newsletter Hello Smashing

You Might Also Like

The One Bank Account Every Designer Should Have

Tuesday, December 3, 2024

View in your browser | Update your preferences ADPro Designers are highly attentive to details—from finishes and trims to the just-right proportions. But what about those tedious ones tied to billing,

#485: UX Research

Tuesday, December 3, 2024

How to measure UX impact, research templates, UX research field guide and research methods. Issue #485 • Dec 3, 2024 • View in the browser Smashing Newsletter Jó estét Smashing Friends, In many

176 / Time tools to eliminate distractions, stories about humanity and more…

Tuesday, December 3, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Nov 2024 • Part 2 View in browser Welcome to Issue 176 On 29th Nov, I celebrated my five years in Berlin. Moving to this city changed my life. Every

Accessibility Weekly #425: If Not React, Then What?

Monday, December 2, 2024

December 2, 2024 • Issue #425 View this issue online or browse the full issue archive. Featured: If not React, then what? "Frameworkism isn't delivering. The answer isn't a different tool,

DH's gifts for thought 2024

Sunday, December 1, 2024

Issue 222: Holiday gift ideas for your loved ones (or yourself) ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

It’s a once-a-year opportunity—get a full year of email design and website building.

Friday, November 29, 2024

Only 57 coupon codes remaining—grab yours now and save 40%!͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

The Tablescapes We Can’t Stop Thinking About

Wednesday, November 27, 2024

View in your browser | Update your preferences ADPro Feast Your Eyes Thanksgiving is nearly here. Sure, your turkey might still be basting—but how's your tablescape? If you're searching for

Breaking analysis paralysis: a guide to using data in product management

Wednesday, November 27, 2024

How to use data for product management ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Your UI is costing you—here’s how to fix it

Tuesday, November 26, 2024

The Everything Trap ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Sam Cochran Tours a Designer’s Delightful Home

Tuesday, November 26, 2024

View in your browser | Update your preferences ADPro Pizza Party A picture, so the saying goes, tells a thousand words. But images alone can't ever capture the full experience of a home, as I was