--- title: What’s !important #17: Custom Highlight API, CSS... description: A roundup of recent CSS discoveries and techniques: using the CSS Custom Highlight API (now supported across major browsers) to style text ranges via... canonical: https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More | daily.dev og:description: A roundup of recent CSS discoveries and techniques: using the CSS Custom Highlight API (now supported across major browsers) to style text ranges via... og:url: https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx og:image: https://api.daily.dev/og/posts/alg764Vfx.png og:image:alt: What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 3 min read · 7 upvotes · 0 comments ## Summary A roundup of recent CSS discoveries and techniques: using the CSS Custom Highlight API (now supported across major browsers) to style text ranges via JavaScript and ::highlight(), how the img element's replaced content can overflow its box, a paint-order fix for the long-standing inside-half rendering issue with text-stroke, community ideas for styling skeleton UIs with CSS (including box-decoration-break: clone), creative uses of the lh unit, a new scroll-axis-lock property enabling diagonal scrolling, and an introduction to CSS navigation matching for styling elements based on navigation direction. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I fix the inner half of a CSS text-stroke looking bad? Use the paint-order property to make the text fill paint over the inside half of the stroke. Text-stroke is center-aligned by default, so half the stroke sits outside the letterforms and half sits inside, and the inside half often looks messy; paint-order doesn't change the alignment but hides that inner half beneath the fill. Note that -webkit-text-stroke is still required across browser vendors. _Developers polishing text effects can track CSS fixes like this one on daily.dev._ ### What does the CSS scroll-axis-lock property do? The scroll-axis-lock property changes the default scroll behavior, which normally locks scrolling to a single axis at a time, so that diagonal scrolling becomes possible. It was demonstrated as a way to unlock free two-axis scrolling instead of forcing users into strictly horizontal or vertical movement. _Anyone experimenting with scroll interactions can follow new CSS scrolling capabilities on daily.dev._ ### Is the CSS Custom Highlight API supported in all major browsers? Yes, the CSS Custom Highlight API is now supported by all major web browsers. Despite having 'CSS' in the name, the highlighting logic is driven by JavaScript, while the actual styling of highlighted ranges is applied through the ::highlight() pseudo-element function. _Front-end developers adopting new text-highlighting techniques can follow browser support updates on daily.dev._ ## Similar posts on daily.dev - [What’s \!important \#6: :heading, border-shape, Truncating Text From the Middle, and More](https://daily.dev/posts/what-s-important-6-heading-border-shape-truncating-text-from-the-middle-and-more-4aztpdkzy) · CSS-Tricks · 2 upvotes · 0 comments - [css custom highlight api javascript Tutorial](https://daily.dev/posts/css-custom-highlight-api-javascript-tutorial-zer4jpppo) · SitePoint · 5 upvotes · 1 comments - [Working with ::highlight\(\) using progressive enhancement](https://daily.dev/posts/working-with-highlight-using-progressive-enhancement-svttq0eh5) · Piccalilli · 1 upvotes · 0 comments - [7 Game-Changing Web UI Features You Can Start Using Today](https://daily.dev/posts/7-game-changing-web-ui-features-you-can-start-using-today-lanxczirv) · Amit Merchant · 1 upvotes · 0 comments - [Issue \#754: Five CSS properties for eye-catching text designs — Frontend Focus](https://daily.dev/posts/issue-754-five-css-properties-for-eye-catching-text-designs-frontend-focus-vlexqgptd) · Frontend Focus · 6 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More","url":"https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx"},"datePublished":"2026-08-14T14:02:13.204Z","dateModified":"2026-09-13T19:31:59.548Z","description":"A roundup of recent CSS discoveries and techniques: using the CSS Custom Highlight API (now supported across major browsers) to style text ranges via...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/08/wi17.png","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/08/wi17.png","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/what-s-important-17-custom-highlight-api-css-navigation-matching-fixing-text-stroke-and-more-alg764vfx#faq","mainEntity":[{"@type":"Question","name":"How do I fix the inner half of a CSS text-stroke looking bad?","acceptedAnswer":{"@type":"Answer","text":"Use the paint-order property to make the text fill paint over the inside half of the stroke. Text-stroke is center-aligned by default, so half the stroke sits outside the letterforms and half sits inside, and the inside half often looks messy; paint-order doesn't change the alignment but hides that inner half beneath the fill. Note that -webkit-text-stroke is still required across browser vendors. Developers polishing text effects can track CSS fixes like this one on daily.dev."}},{"@type":"Question","name":"What does the CSS scroll-axis-lock property do?","acceptedAnswer":{"@type":"Answer","text":"The scroll-axis-lock property changes the default scroll behavior, which normally locks scrolling to a single axis at a time, so that diagonal scrolling becomes possible. It was demonstrated as a way to unlock free two-axis scrolling instead of forcing users into strictly horizontal or vertical movement. Anyone experimenting with scroll interactions can follow new CSS scrolling capabilities on daily.dev."}},{"@type":"Question","name":"Is the CSS Custom Highlight API supported in all major browsers?","acceptedAnswer":{"@type":"Answer","text":"Yes, the CSS Custom Highlight API is now supported by all major web browsers. Despite having 'CSS' in the name, the highlighting logic is driven by JavaScript, while the actual styling of highlighted ranges is applied through the ::highlight() pseudo-element function. Front-end developers adopting new text-highlighting techniques can follow browser support updates on daily.dev."}}]} ```