Modern CSS Techniques You Should Be Using: Custom Highlight API, Navigation Matching, and More

CSS continues to evolve quickly, giving small businesses and developers more tools to create polished, high-performance interfaces without heavy JavaScript. From custom highlights to navigation matching and improved text rendering, there are powerful features landing in browsers that can make your site feel more modern, accessible, and engaging.

This article walks through several practical CSS capabilities you can start exploring today: the Custom Highlight API, navigation styling with :has(), better text outlines, skeleton loading states, diagonal scrolling, and controlling image overflow. Each section focuses on how these ideas can improve real-world sites and front-end workflows.

Key Takeaways

Use the Custom Highlight API to style text selections, search results, or in-page annotations without complex JavaScript.
Leverage navigation-matching patterns (with :has() and URL-aware classes) to keep menus automatically in sync with the current page.
Apply modern workarounds and properties for crisp, legible text outlines across browsers.
Design skeleton UIs that improve perceived performance and keep users engaged while content loads.
Experiment with scroll-linked layouts (like diagonal scrolling) in a controlled, accessible way.
Prevent layout bugs by understanding how and when images can overflow their containers.

Custom Highlight API: Smarter Text Highlighting in the Browser

The Custom Highlight API is a relatively new browser feature that lets you define and style ranges of text as reusable highlights. Unlike the basic browser selection styling or wrapping text with <mark> tags, this API works at the range level and is accessible via JavaScript and CSS.

What Problem Does It Solve?

If you have ever built:

A sitewide search with highlighted matches
An in-browser reader that lets users annotate passages
Text-based dashboards that call out critical values inline

you know how messy it can be to inject markup around every match or annotation. The Custom Highlight API keeps your DOM cleaner and gives you more control over how text is visually emphasized.

How It Works at a High Level

At a conceptual level, the flow looks like this:

Use JavaScript to create ranges of text nodes you want to highlight.
Register those ranges with CSS.highlights under a custom name.
Style that highlight name in CSS with ::highlight(your-name).

The benefit is that your styling stays entirely in CSS, and the highlight ranges are managed in JavaScript. You can create different highlight types (e.g., “search-match”, “note”, “warning”) and style them independently.

For small business sites, this can power advanced product search, documentation viewers, or educational content with annotations—without turning your HTML into an unreadable mess of spans.

CSS Navigation Matching: Keeping Menus in Sync With the Current Page

Clear navigation is critical for any business website. Visitors should always know where they are and how to get to other key pages. CSS is getting better at helping you keep navigation states (like “current page” or “current section”) in sync with the URL and link structure.

Using `:has()` for Smarter Menus

The relational selector :has() opens up powerful patterns for navigation styling. While older approaches rely heavily on server-rendered “active” classes or JavaScript, :has() lets you express some of this logic in pure CSS.

A few patterns you can implement:

Highlight the current menu item when its link matches the current page or contains an active sub-link.
Expand parent menus when a descendant link is active, ideal for nested sidebar navigation.
Style breadcrumbs dynamically based on which links are present in a container.

In practice, you will often combine :has() with server-side logic or router-aware classes (e.g., setting aria-current="page" or an .is-active class on the correct link). Then :has() lets the container respond visually when it contains that active element.

For small business owners using WordPress or similar CMSs, this can simplify your themes: fewer conditional classes sprinkled in templates, and more behavior handled in stylesheet logic that is easier to maintain.

Fixing and Improving `text-stroke` for Outlined Typography

Outlined text—where text appears with a stroke around each character—can be a powerful design element, especially for headings and branding. But achieving consistent, legible text outlines across browsers has historically been difficult.

The Reality of `-webkit-text-stroke`

The de facto property for stroked text has long been -webkit-text-stroke, which works well in WebKit/Blink-based browsers and has some support in others. However, it is not fully standardized and can behave differently from browser to browser.

When you use stroked text:

Be cautious about thin strokes or light-on-light combinations that reduce readability.
Combine strokes with text-shadow or solid fill color to preserve contrast.
Test across major browsers to confirm stroke alignment and thickness appear as intended.

For many brands, a subtle outer glow or layered text-shadow can achieve a similar effect in a more predictable, accessible way. Reserve aggressive text outlines for large display headings, not body copy.

Designing Skeleton UIs: Better Loading States

Skeleton UIs are placeholder shapes that mimic your final layout while content is loading. You have seen them on large platforms: gray boxes where images will appear, faded bars where text will load, and so on. They make interfaces feel faster by giving users an immediate structure instead of a blank page or generic spinner.

Skeletons vs. Spinners

Skeleton screens offer several advantages over traditional loading indicators:

Reduced perceived wait time: Users see progress and layout immediately.
Fewer layout shifts: The skeleton occupies roughly the same space as the eventual content.
More brand control: You can style skeletons to match your design system.

Practical Styling Tips

When you style skeleton UIs:

Use neutral background colors with slightly darker “shimmer” or gradient effects to indicate loading.
Match skeleton dimensions to the typical size of the final components (e.g., cards, avatars, headings).
Ensure accessible contrast for any text placeholders and provide ARIA labels or roles so assistive technologies understand that content is loading.

On a small business site, skeletons can be especially effective on product grids, blog lists, and dashboards, where users expect content but can tolerate a short wait. They help your site feel more professional and modern without complex JavaScript frameworks.

Diagonal Scrolling and Non-Standard Scroll Patterns

Vertical scrolling is the default for a reason: it is intuitive and works across devices. That said, there are times when alternative scroll directions—like horizontal or diagonal—can enhance specific storytelling or data visualizations.

When Diagonal Scrolling Makes Sense

Diagonal or “off-axis” scrolling is occasionally used for:

Interactive portfolios and landing pages with a narrative sequence.
Data visualizations or timelines that span both axes.
Artistic or experimental microsites.

CSS positioning, transforms, and scroll snapping can be combined to create the illusion of diagonal movement. However, you should weigh this against user expectations and accessibility. Many visitors use touchpads, trackpads, or keyboards, and they may find unconventional scroll behavior disorienting.

If you explore this pattern, provide clear cues (arrows, instructions) and consider offering a simpler fallback on mobile or for reduced-motion preferences.

How Images Overflow Their Containers (and How to Control It)

Unexpected image overflow is a frequent source of broken layouts—especially on responsive sites. Understanding the interaction between intrinsic image size, container dimensions, and CSS properties can help you prevent layout bugs before they ship.

Common Overflow Scenarios

Typical causes of unwanted overflow include:

Images with a fixed width greater than their container on small screens.
Missing or incorrect max-width rules on images within flexible layouts.
Transforms or absolute positioning that move images outside their natural flow.

In many designs, adding max-width: 100% and height: auto to images is an essential baseline. From there, you can selectively choose when images should crop, scale, or maintain aspect ratios for different screen sizes.

For image-heavy small business sites—think portfolios, restaurants, real estate listings—taking the time to test overflow behavior on phones, tablets, and large displays avoids awkward edge cases that undermine your brand.

Bringing It Together: Modern CSS for Better User Experiences

While each of these CSS capabilities tackles a different challenge, they all point toward the same goal: delivering more polished, resilient, and engaging interfaces with less complexity.

The Custom Highlight API helps you create rich, interactive text experiences for search, reading, and annotations.
CSS navigation matching using :has() keeps your menus more consistent and maintainable.
Improved handling of outlined text ensures your brand elements stay legible and accessible.
Skeleton UIs improve perceived performance and keep users oriented during loading.
Thoughtful scroll design balances creative layouts with usability and accessibility.
Careful management of image overflow preserves clean, responsive layouts across devices.

You do not need to adopt all these techniques at once. Start with one area that directly improves your current site—like skeleton loading states on a slow product listing or navigation styling that helps visitors see exactly where they are. As browsers continue to standardize modern CSS, these techniques become more stable and easier to integrate into WordPress themes and custom builds.

Next Steps for Your Site

If you are planning a redesign or new build for your business site, it is worth exploring how modern CSS can simplify your stack while raising the bar for user experience. Cleaner CSS and more native capabilities often mean faster pages, fewer dependencies, and a more maintainable codebase over time.

Izende Studio Web helps small businesses and creators design and implement modern, performant WordPress experiences that use current CSS techniques thoughtfully and responsibly. If you are considering an upgrade or new project, learn more about our services:

Explore WordPress and front-end services at Izende Studio Web