Skip to content



The :is() function takes a list of selectors as its argument, and selects any element that matches.

/* Original CSS */
.site-branding a:hover path,
#menu-modal a:hover path,
#menu-modal button:hover path {
  @apply transition-opacity opacity-70;

/* Rewritten to use is() */
  .site-branding a, 
  #menu-modal a, 
  #menu-modal button
  ):hover path {
  @apply transition-opacity opacity-70;


The selector with the most specificity in the is pseudo-class is used to calculate the specificity.


To avoid specificity issues, :where() can be used.

More in depth article on :where() :is() :has().


Video explainer:


Use custom images for bullet points. This example also inlines the svg image.

Note the inline svg code must not have any line breaks. It also must not have any # symbols (for example in the fill color), instead use something like fill="rgb(50, 50, 50)". Use a hex to rgb converter.

.li-bullet {
  @apply pl-10 md:pl-14 pb-5 bg-no-repeat;
  background-image: url('data:image/svg+xml; utf8, <svg width="25" height="2" viewBox="0 0 25 2" fill="none" xmlns=""><line x1="0.983398" y1="1.13074" x2="24.9834" y2="1.13074" stroke="rgb(18, 18, 18)"/></svg>');

  background-position: left 9px;

  @media (min-width: 768px) {
    background-position: left 14px;

mailto or tel selectors







scroll-behavior (Smooth Scroll)

Make the browser scroll in a smooth fashion using a browser defined timing function. Normally useful for in-page links to anchor points. This relies on the font itself having this feature added.

html {
  scroll-behavior: smooth;

More examples, including javascript window.scroll().<br />


Supported by Safari 15.4 (13 March 2022). Otherwise Safari Polyfill is required:

<script defer src=""></script>

Older example (2017)<br /> The jQuery example on this page worked for Maude The Store page. Having anchor links with smooth scroll and padding offset (don’t use margin on the html elements, only padding)


Add an offset to the viewable area. Useful when you have a sticky menu and are scrolling to anchor points.

html {
  scroll-padding-top: 20px;

Supported in Safari from 14.1 (April 25 2021).

WordPress example.

 <?php if(is_user_logged_in()): ?>
   html {
     scroll-padding-top: calc( var(--header-height) + 32px);
   @media screen and (max-width: 782px) {
     scroll-padding-top: calc( var(--header-height) + 46px);
 <?php else: ?>
   html {
     scroll-padding-top: var(--header-height);
 <?php endif; ?>


tabular-nums will format numbers with a fixed width, which is useful for things like displaying time/clocks.

font-variant-numeric: tabular-nums; 

Other options include ordinal, slashed-zero and diagonal-fractions.

Tailwind: tabular-nums

Other Tailwind options:


Create a new stacking context.

isolation: isolate;


Support for this was introduced in browsers from around March 2022.

An overview, also including Container Queries (@container) and Scoped Styles:


CSS Container Queries

Finding Unintended Body Overflow

How to find the cause of horizontal scrollbars

document.querySelectorAll("*").forEach(el => {
  if(el.offsetWidth > document.documentElement.offsetWidth) {

If an element on the page is wider than the document, it’ll get logged to the console.

Bonus: Most browsers allow you to right click on the elements that were printed to the console and scroll them into view.

Credit: Bytes newsletter

Similar to above:

More suggestions here:


Ten tips for better CSS transitions and animations






Fontaine<br /> Automatic font fallback based on font metrics (have not used this, but looks worth checking out)

MDN: CSS Selectors

Open Props

Open Color

3D Transforms

CSS background mesher

Documentation<br /> W3C's overview of Web style sheets: CSS.<br /> A list of all completed specifications and drafts by the CSS Working Group.<br /> Interop 2022 and beyond. Exhaustive CSS reference for seasoned web developers describes every property and concept of CSS.<br /> A comprehensive list of CSS features and their positions in the process of becoming implemented web standards. (HTML)