Jonathan Harrell | Front-End Engineer RSS Feed

Advanced CSS-Only HTML Form Styling

Tue, 31 Oct 2017 20:17:00 GMT

HTML form inputs have always been notoriously difficult to style with CSS, but there are several little-used selectors that give us significant power to style inputs and surrounding elements. Some of these are relatively new, while others have been available for quite some time.

:placeholder-shown

The first selector is relatively new and doesn’t have complete browser support yet. However, this seems like something that could easily work as a progressive enhancement. The selector allows us to detect whether a placeholder is currently visible to the user. This could come in handy if we want to dynamically hide and show the input’s associated label.

Here I am hiding the label until the user types in the input, thus hiding the placeholder. I use a nice transition effect to display the label. Note that for this to work, the label must come after the input.


  
  Enter some text

.form-group {
  position: relative;
  padding-top: 1.5rem;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease-out;
}

input:placeholder-shown + label {
  opacity: 0;
  transform: translateY(1rem);
}

:required

Use this selector to indicate that an input has the required attribute. Here I am using an empty .help-text span and placing some content dynamically using the ::before pseudo-element. Realistically, this would be done with JavaScript, but I am including here to demonstrate a pure CSS approach.

Required input

input:required + .help-text::before {
  content: '*Required';
}

:optional

This selector does the opposite of :required. I am again using an empty .help-text span to display some optional text if the required attribute is NOT present.

input:optional + .help-text::before {
  content: '*Optional';
}

:disabled

This one should be familiar to most of you, but still important to remember. It’s pretty essential to display whether or not an input is disabled to a user.

&:disabled {
  border-color: var(--gray-lighter);
  background-color: var(--gray-lightest);
  color: var(--gray-light);
}

:read-only

An input with the readonly attribute should convey a slightly different meaning than a disabled input. Thankfully we have this selector to help with that.

input:read-only {
  border-color: var(--gray-lighter);
  color: var(--gray);
  cursor: not-allowed;
}

:valid

While much form validation will happen with JavaScript, we are able to take advantage of HTML form validation and style inputs accordingly. This selector gives us the chance to style any input which is currently passing the native browser validation rules.

Here I am encoding an svg to display a checkbox in the input using the background-image property.

input:valid {
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,...");
}

:invalid

This selector checks if an input is currently NOT passing the native browser validation rules (for example, if an email input does not contain a real email).

Again, I am encoding an svg to display an ‘x’ in the input.

input:invalid {
  border-color: var(--color-error);
  background-image: url("data:image/svg+xml,...");
}

I can also customize some validation messages for each input type using the .help-text span and the ::before pseudo-element.

Invalid input

input[type='email']:invalid + .help-text::before {
  content: 'You must enter a valid email.'
}

:in-range/:out-of-range

These selectors detect whether the value of a number input is within the min/max values specified or not.

Out-of-range input

(value must be between 1 and 10)

input:out-of-range + .help-text::before {
  content: 'Out of range';
}

:checked

Most of you will be familiar with this selector. It gives us the ability to apply custom styles to checkboxes and radio buttons when checked. My technique for styling checkboxes involves creating a wrapper element and placing the label after the input.

I visually hide the input so that it disappears from view but is still clickable. Then I style label::before to look like the checkbox input and label::after to look like a checkmark. I use the :checked selector to style these two pseudo-elements appropriately:


  
  Option

&:checked + label::before {
  background-color: var(--color-primary);
}

&:checked + label::after {
  display: block;
  position: absolute;
  top: 0.2rem;
  left: 0.375rem;
  width: 0.25rem;
  height: 0.5rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: '';
}

Better Typography with Font Variants

Sun, 07 Jan 2018 20:17:00 GMT

Typography on the web has always lagged behind its expression in print. This makes sense, as type on the printed page developed over centuries to a point of complexity that has been hard to replicate within the confines of a browser.

However, this is quickly changing thanks to the increasing availability of OpenType features in web fonts and the ability to control those features with CSS.

This article is an overview of how to control OpenType features using CSS, but remember that whatever web font you are using will also need to support these features.

The font-variant- Properties

You can control most OpenType features using various properties beginning with font-variant-. There is also a low-level property font-feature-settings which can be used to support legacy browsers. Whenever possible, however, you should use the more modern font-variant properties. One solution is to use an @supports rule to check if a font-variant property is supported and otherwise use font-feature-settings.

body {
  font-feature-settings: "liga" 1;
}

@supports (font-variant-ligatures: common-ligatures) {
  body {
    font-feature-settings: normal;
    font-variant-ligatures: common-ligatures;
  }
}

font-variant-ligatures

Ligatures are single glyphs made from two or more characters. They typically prevent ugly or awkward letter collisions and, therefore, aid legibility.

common-ligatures

These are ligatures that the type designer has decided should be used in normal conditions. In most circumstances you should use these. Most browsers enable them by default.

font-variant-ligatures: common-ligatures; /* enable */
font-variant-ligatures: no-common-ligatures; /* disable */

font-feature-settings: 'liga' 1; /* low-level enable */
font-feature-settings: 'liga' 0; /* low-level disable */

discretionary-ligatures

These are ligatures which can be used for typographic purposes, for example to achieve a special effect. These are disabled by default.

font-variant-ligatures: discretionary-ligatures; /* enable */
font-variant-ligatures: no-discretionary-ligatures; /* disable */

font-feature-settings: 'dlig' 1; /* low-level enable */
font-feature-settings: 'dlig' 0; /* low-level disable */

contextual

These are alternate ligatures that are affected by their surrounding context. They often harmonize the shapes of grouped glyphs. These are enabled by default.

font-variant-ligatures: contextual; /* enable */
font-variant-ligatures: no-contextual; /* disable */

font-feature-settings: 'calt' 1; /* low-level enable */
font-feature-settings: 'calt' 0; /* low-level disable */

historical-ligatures

These are ligatures which could be considered a subset of discretionary, but are specifically used to achieve a historical effect. These are disabled by default.

font-variant-ligatures: historical-ligatures; /* enable */
font-variant-ligatures: no-historical-ligatures; /* disable */

font-feature-settings: 'hlig' 1; /* low-level enable */
font-feature-settings: 'hlig' 0; /* low-level disable */

font-variant-position

The proper markup for subscripts and superscripts uses the sub and sup elements. By default, browsers take a regular numeral character, make it smaller using font-size, and raise or lower it with vertical-align. These are not true subscript and superscript characters and typically appear quite ugly, not to mention they can mess up line height.

Thankfully, there is now a way to enable true subscripts and superscripts with font-variant-position. Note that currently only Firefox supports this.

sub

This enables true subscript characters, which are positioned specifically for use in footnotes and scientific formulas.

font-variant-position: sub; /* enable */
font-variant-position: normal; /* disable both variants */

font-feature-settings: 'subs' 1; /* low-level enable */
font-feature-settings: 'subs' 0; /* low-level disable */

super

This enables true superscript characters, which are sized and positioned specifically for use in mathematical expressions and scientific formulas.

font-variant-position: super; /* enable */
font-variant-position: normal; /* disable both variants */

font-feature-settings: 'sups' 1; /* low-level enable */
font-feature-settings: 'sups' 0; /* low-level disable */

font-variant-caps

A capital is not a capital is not a capital. The most significant use of font-variant-caps is to enable small caps, although there are several other options available.

small-caps

Small caps are designed to be the same height as lowercase letters and are used to capitalize words within running text. They make for a more cohesive and readable paragraph.

font-variant-caps: small-caps;  /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'smcp' 1; /* low-level enable */
font-feature-settings: 'smcp' 0; /* low-level disable */

all-small-caps

The small-caps value will only replace lowercase letters with small caps. To replace all letters with small caps (which is probably what you want) you need to use all-small-caps.

font-variant-caps: all-small-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'smcp' 1, 'c2sc' 1; /* low-level enable */
font-feature-settings: 'smcp' 1, 'c2sc' 0; /* low-level disable */

petite-caps

Standard small caps will typically appear slightly larger than the x-height of the font. Some typefaces have additional small caps that match the x-height. These are called petite-caps.

font-variant-caps: petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'pcap' 1; /* low-level enable */
font-feature-settings: 'pcap' 0; /* low-level disable */

all-petite-caps

Similarly to all-small-caps, this converts all letters, both lower and uppercase, to petite caps.

font-variant-caps: all-petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'pcap' 1, 'c2pc' 1; /* low-level enable */
font-feature-settings: 'pcap' 1, 'c2pc' 0; /* low-level disable */

unicase

This feature maps upper and lowercase letters to a mixed set of lowercase and small capital forms, creating a single case alphabet. Sometimes the small capitals used are actual small cap glyphs and sometimes they are specially designed unicase forms. The implementation of this feature varies greatly from font to font.

font-variant-caps: unicase; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'unic' 1; /* low-level enable */
font-feature-settings: 'unic' 0; /* low-level disable */

titling-caps

Standard uppercase letters are designed for use alongside lowercase letters and when they are used in strings of all uppercase letters they can appear too strong. Some fonts include titling capitals specifically for this situation.

font-variant-caps: titling-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'titl' 1; /* low-level enable */
font-feature-settings: 'titl' 0; /* low-level disable */

font-variant-numeric

The proper display of numerals varies greatly depending on context. Here are some general rules:

In running/body text, use proportional old-style numerals
For headings, use proportional lining numerals
Within numeric tables, use tabular lining numerals

You can combine values to achieve, for example, tabular lining numerals like this:

font-variant-numeric: lining-nums tabular-nums;

lining-nums

Lining numerals approximate capital letters and are uniform in height. They should be used in headings or numeric tables. Usually numbers are lining figures by default.

font-variant-numeric: lining-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'lnum' 1; /* low-level enable */
font-feature-settings: 'lnum' 0; /* low-level disable */

oldstyle-nums

Old-style numerals have varying heights and alignments and are therefore more similar to lowercase letters. They should be used in running text.

font-variant-numeric: oldstyle-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'onum' 1; /* low-level enable */
font-feature-settings: 'onum' 0; /* low-level disable */

proportional-nums

Proportional numerals have variable spacing and blend in with horizontal text. They should be used in most situations, other than numeric tables where vertical alignment is important. Usually numbers are proportional figures by default.

font-variant-numeric: proportional-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'pnum' 1; /* low-level enable */
font-feature-settings: 'pnum' 0; /* low-level disable */

tabular-nums

Tabular numerals have the same width and should be used in numeric tables to allow vertical alignment of numbers.

font-variant-numeric: tabular-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'tnum' 1; /* low-level enable */
font-feature-settings: 'tnum' 0; /* low-level disable */

diagonal-fractions

By default, fractions will display as lowercase letters with a slash. Proper fractions will be formatted to match the height of a lining figure and can be either diagonal or stacked.

font-variant-numeric: diagonal-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'frac' 1; /* low-level enable */
font-feature-settings: 'frac' 0; /* low-level disable */

stacked-fractions

Stacked fractions are not as common of a feature in most web fonts as diagonal fractions, but should prove useful with heavily scientific or mathematical content.

font-variant-numeric: stacked-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'afrc' 1; /* low-level enable */
font-feature-settings: 'afrc' 0; /* low-level disable */

ordinal

Ordinals like st, nd, rd, and th will appear as standard lowercase letters by default. However, these should ideally appear as smaller raised numbers following the numeral. The ordinal value enables that.

font-variant-numeric: ordinal; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'ordn' 1; /* low-level enable */
font-feature-settings: 'ordn' 0; /* low-level disable */

slashed-zero

This enables an alternate zero character with a slash through it.

font-variant-numeric: slashed-zero; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'zero' 1; /* low-level enable */
font-feature-settings: 'zero' 0; /* low-level disable */

font-variant-alternates

Fonts can provide a variety of alternates for any character. The font-variant-alternates property provides many ways of controlling this character substitution.

historical-forms

Historical alternates can be used for a “period” effect. Note the difference between this and historical ligatures. Historical ligatures are historical character combinations, whereas historical forms are substitutions for individual characters.

font-variant-alternates: historical-forms; /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: 'hist' 1; /* low-level enable */
font-feature-settings: 'hist' 0; /* low-level disable */

stylistic(feature-value-name)

Use this to select stylistic features on an individual basis. In order to use this and several of the following font-variant-alternates functions, you must define a font-feature-value using the @font-feature-values rule. For example, if you wanted to select stylistic feature number 1 in the font you are using, you would first define the feature value, and then use it within the font-variant-alternates: stylistic() function.

@font-feature-values 'typeface-name' {
  @stylistic { inscriptional-g: 1 }
}

font-variant-alternates: stylistic(inscriptional-g); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: salt 1; /* low-level enable */
font-feature-settings: salt 0; /* low-level disable */

styleset(feature-value-name)

Use this to select an entire set of alternative glyphs. The glyphs in a set are often designed to work together. Select a particular set by defining a font-feature-values rule using the set’s number.

@font-feature-values 'typeface-name' {
  @styleset { special-styleset: 1 }
}

font-variant-alternates: styleset(special-styleset); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: ss01; /* low-level enable */

character-variant(feature-value-name)

Use this to select specific character variants. Select a particular variant by defining a font-feature-values rule using the variant’s number.

@font-feature-values 'typeface-name' {
  @character-variant { special-variant: 1 }
}

font-variant-alternates: character-variant(special-variant); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: cv01; /* low-level enable */

swash(feature-value-name)

Swashes can be used to provide typographic interest to headings or more artistic settings of text. They are typically exaggerated alternative character designs, or have some sort of typographic flourish. Select a particular swash by defining a font-feature-values rule using the set’s number.

@font-feature-values 'typeface-name' {
  @swash { flourish: 1 }
}

font-variant-alternates: swash(flourish); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: swsh 1; /* low-level enable */
font-feature-settings: swsh 0; /* low-level disable */

ornaments(feature-value-name)

This replaces default glyphs with ornaments, if they are provided in the font.

@font-feature-values 'typeface-name' {
  @ornaments { fleurons: 1 }
}

font-variant-alternates: ornaments(fleurons); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: ornm 1; /* low-level enable */
font-feature-settings: ornm 0; /* low-level disable */

annotation(feature-value-name)

Annotations are notational forms of glyphs (for example, glyphs placed in open or solid circles, squares, parentheses, diamonds, rounded boxes. etc.).

@font-feature-values 'typeface-name' {
  @ornaments { circles: 1 }
}

font-variant-alternates: annotation(circles); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: nalt 1; /* low-level enable */
font-feature-settings: nalt 0; /* low-level disable */

Further Resources

There is a huge amount to learn about typography on the web including font variants and much more. Check out the following excellent resources for more information:

Component Reusability in React & Vue

Mon, 06 Aug 2018 19:55:00 GMT

One of the issues all front-end developers face is how to make UI components reusable. How do we craft components in such a way that satisfies the narrow use case that is clear to us now, while also making them reusable enough to work in a variety of circumstances? Render props and scoped slots provide a solution.

Let’s say we are building an autocomplete component:

Take a look at the initial React component code:

class Autocomplete extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      results: props.options
    }
  }

  searchList(event) {
    const results = this.props.options
      .filter(option =>
        option.toLowerCase().includes(
          event.target.value.toLowerCase()
        )
      )
    this.setState({ results })
  }

  render() {
    return (
      
        
        
          
            {this.state.results.map(option => (
              
                {option}
              
            ))}
          
        
      
    )
  }
}

In this component, we have some logic that controls the core search behavior, but we also specify how the input and search results will be rendered. In this instance, we render a div that serves as a dropdown container and an unordered list containing a list item for each result within it.

Think about how you would reuse this component. Sure, you could use this very same component if you want to reproduce exactly the same behavioral and visual result. But what if you want to reuse the same behavior, but visualize the component slightly differently? What if you want to reuse the core search behavior but add a few modifications for a slightly different use case?

Imagine that instead of a dropdown containing the search results, you want a tag-like list of search results that always display:

At their core, the functionality of these two components is very similar: type into an input to filter a list.

This is a perfect use case for some relatively new tools that modern JavaScript frameworks now provide. These are render props in React and scoped slots in Vue. They work very similarly and provide a way to separate the behavior of a component from its presentation.

Render props in React

First, let’s look at how we would restructure our autocomplete component using render props in React. We will now have two components — one for our Autocomplete component and one for a core SearchSelect component.

Let’s look at the SearchSelect component first:

class SearchSelect extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      results: props.options
    }
  }

  searchList(event) {
    const results = this.props
      .filterMethod(
        this.props.options,
        event.target.value
      )
    this.setState({ results })
  }

  render() {
    return this.props.render({
      results: this.state.results,
      searchList: (event) => this.searchList(event)
    })
  }
}

This is a renderless component (one that doesn’t render any markup of its own). Rather, it returns the result of a special prop called a render prop. This render prop accepts an object, into which you can pass any data that you would like the parent component to have access to.

Our SearchSelect component is handling the lowest level functionality — filtering a list of options based on a query string. It is then using the special render prop to render an element.

In the parent, we pass a function to the render prop of the SearchSelect component. This function returns a React element, which we can hydrate with state and behavior from the SearchSelect component itself. Basically, this means we are able to access data from the child component in the parent.

import SearchSelect from './search-select'

class Autocomplete extends React.Component {
  constructor(props) {
    super(props)
  }

  filterMethod (options, query) {
    return options.filter(option =>
      option.toLowerCase().includes(
        query.toLowerCase()
      )
    )
  }

  render() {
    return (
       (
          
            
            
              {results.map(option => (
                {option}
              ))}
            
          
        )}
      />
    )
  }
}

The key to making this work is the arguments we pass to the render prop function. See how we are destructuring a single object and using those destructured properties inside our markup? This object should be passed as an argument when you call this.props.render() in the child component.

All this means that we can write whatever markup we want, as long as we properly hydrate it with the data and behavior exposed by the SearchSelect component.

Also, note how we are passing the method for filtering our list in as a prop. This will allow us to change the way our list of options is filtered, while still using the SearchSelect component.

Implementing the Tag List Variant

Let’s look at how we would implement our tag-like list component. We use the same SearchSelect core component and just change the markup rendered by the render prop:

import SearchSelect from './search-select'

class TagListSearch extends React.Component {
  constructor(props) {
    super(props)
  }

  filterMethod(options, query) {
    return options.filter(option =>
      option.toLowerCase().includes(
        query.toLowerCase()
      )
    )
  }

  render() {
    return (
       (
          
            
            
              {results.map(result => (
                
                  {result}
                
              ))}
            
          
        )}
      />
    )
  }
}

Scoped slots in Vue

Now let’s look at how we would implement this in Vue using scoped slots. First, here’s our search select component (for this example I am using globally registered components but you should probably use single file components in a real project):

Vue.component('search-select', {
  props: [
    'options',
    'filterMethod'
  ],

  data() {
    return {
      query: ''
    }
  },

  computed: {
    results() {
      return this.filterMethod(
        this.options,
        this.query
      )
    }
  },

  methods: {
    setQuery(event) {
      this.query = event.target.value
    }
  },

  render() {
    return this.$scopedSlots.default({
      results: this.results,
      searchList: (event) => {
        this.setQuery(event)
      }
    })
  }
})

As you can see, this looks very similar to the render prop in our React component. Here, we are returning a default scoped slot, which passes along an object with whatever we want. Here, we give it the results and our search method.

In our autocomplete component, we use the slot-scope attribute to get access to the data from the child component. We can destructure the properties that come through for easier access, in much the same way as in our React render prop argument:

Vue.component('autocomplete', {
  data() {
    return {
      dropdownVisible: false
    }
  },

  methods: {
    filterMethod(options, query) {
      return options.filter(option =>
        option.toLowerCase().includes(
          query.toLowerCase()
        )
      )
    },

    showDropdown() {
      this.dropdownVisible = true
    },

    hideDropdown() {
      this.dropdownVisible = false
    }
  },

  template: html`
    
      
        
          
          
            
              
                {{ result }}
              
            
          
        
      
    
  `
})

Other uses for render props & scoped slots

Creating reusable interface components isn’t the only use for render props and scoped slots. Here are some other ideas for how you can use them to encapsulate reusable behavior in a component that can then be exposed to its parent.

Data provider components

You can use render props/scoped slots to create a component that handles asynchronously fetching data and exposing that data to its parent. This allows you to hide the logic for hitting an endpoint, getting the result and handling possible errors, as well as displaying a loading state to users while the data fetch is in progress.

Here’s what the base component could look like:

class FetchData extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      results: [],
      error: false
    }
  }

  componentDidMount() {
    this.fetchData(this.props.url)
  }

  fetchData(url) {
    this.setState({ loading: true })

    fetch(url)
      .then(data => data.json())
      .then(json => {
        this.setState({
          loading: false,
          results: json
        })
      })
      .catch(error => {
        this.setState({
          loading: false,
          error: true
        })
      })
  }

  render() {
    return this.props.render({
      loading: this.state.loading,
      results: this.state.results,
      error: this.state.error
    })
  }
}

It accepts a URL as a prop and handles the actual fetching logic. Then, we use it in a parent component:

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      
         (
            
              {loading && (
                Loading...
              )}
              {results.length > 0 && (
                
                  {results.map(result => (
                    
                      {result.title}
                    
                  ))}
                
              )}
              {error && (
                There was a problem loading.
              )}
            
          )}
        />
      
    )
  }
}

Observers (resize, intersection, etc.)

You can also use render props/scoped slots to create a component that acts as a wrapper around resize or intersection observers. This component can simply expose the current size or intersection point of an element to a parent component. You can then perform whatever logic you need based on that data in the parent, preserving a nice separation of concerns.

Here is a base component that observes its own size and exposes its height and width to its parent:

class ObserveDimensions extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      width: null,
      height: null
    }
    this.elementToObserve = React.createRef()
  }

  componentDidMount(nextProps) {
    const erd = elementResizeDetectorMaker({
      strategy: 'scroll'
    })

    erd.listenTo(
      this.elementToObserve.current,
        element => {
        this.setState({
          width: element.offsetWidth,
          height: element.offsetHeight
        })
      }
    )
  }

  render() {
    return (
      
        {this.props.render({
          width: this.state.width,
          height: this.state.height
        })}
      
    )
  }
}

We are using the Element Resize Detector library to listen to changes in our element size, and a React ref to get a reference to the actual DOM node.

We can then use this component quite easily in our app:

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      
         (
            
              Width: {width}px
              Height: {height}px
            
          )}
        />
      
    )
  }
}

Conclusion

The key to successfully creating reusable components using both render props and scoped slots is being able to correctly separate behavior from presentation. Each time you create a new UI component, think “What is the core behavior of this component? Can I use this anywhere else?”

Having a core set of renderless components that use render props or scoped slots can help you cut down on code duplication in your app and think more carefully about your core interface behaviors.

Component Variants with Scoped CSS Variables

Thu, 12 Oct 2017 20:17:00 GMT

Generating variants of common interface components like buttons, inputs, cards, etc., has typically involved multiple class names, pre-processor mixins, or repeated code. Now, component variants can be created in a clean and straightforward manner using CSS variables.

Let’s take buttons as an example. I want to create a set of different buttons, including common variants like “primary” and “secondary”.

Base Styling

I’m going to start by giving these buttons some base styling. I can give the button a base class and then add additional classes for each variant.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 4px;
}

Defining Variables

Next, I’m going to define some variables on the :root. These will be the properties that need to change with each variant.

:root {
  --button-background-color: gray;
  --button-border-color: gray;
  --button-text-color: black;
}

I will use these to add color to my base styling:

.button {
  /* ... */
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  color: var(--button-text-color);
}

Overriding Variables for Component Variants

Finally, I will override these variable values within each variant selector.

.button.is-primary {
  --button-background-color: orange;
  --button-border-color: orange;
  --button-text-color: white;
}

.button.is-secondary {
  --button-background-color: black;
  --button-border-color: black;
  --button-text-color: white;
}

Alternate Selector Scheme

If I wanted to simplify my classes further, I could use only one class to define both the base styling and the variants.

Here I’m nesting variant selectors with PostCSS:

[class^='button'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 1rem;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  color: var(--button-text-color);

  &[class*='primary'] {
    --button-background-color: orange;
    --button-border-color: orange;
    --button-text-color: white;
  }

  &[class*='secondary'] {
    --button-background-color: black;
    --button-border-color: black;
    --button-text-color: white;
  }
}

Browser Support for CSS Variables

For browsers that do not support custom properties, you can use the PostCSS custom properties plugin. This will compile the CSS variables as static values.

Keep in mind, however, that this will not allow you to override the variable values, as the variables will no longer exist in the browser, having already been evaluated during the CSS build.

The technique for component variants described in this article is future-looking and, as more and more browsers fully support custom properties, will be able to be used in production sites.

Contextual Callouts with CSS Grid

Thu, 10 Aug 2017 20:17:00 GMT

At long last, contextual callouts are possible with CSS grid. Contextual callouts are small paragraphs that sit beside primary text and offer secondary information to a reader. They have long been a feature of books, magazines and other printed materials. I enjoy coming across these small asides while reading, as they add texture and interest to the content.

I've been searching for a while now for a way to bring these to the web with pure CSS. The solutions in the past have typically been fairly messy, requiring complex floats and clearing, or manual absolute positioning. That is changing now, thanks to CSS grid.

The Grid Markup

Say I’m building a blog post template. First, I’ll need a header to contain the title. Then I’ll need the primary blog content, consisting of headings, paragraphs, images, and callouts. First let’s write some semantic markup:


  
    Article Heading
  
  Paragraph text
  
    
  
  Section Heading
  Paragraph text
  
    Callout text
  
  Paragraph text

The article element contains the header and all post content as direct children. This will be important as we apply CSS grid styles to the post. Callouts are written using aside elements, perfect for content that is connected tangentially to the rest of the document, and appear in the document directly before the paragraph they are connected to. Note that each aside contains a child paragraph of its own.

Fallback Styling

Next, we’ll apply some basic styles for browsers that don’t yet support CSS grid. We’ll set a max-width of 70 characters using the ch unit:

.blog-post {
  max-width: 70ch;
}

Using CSS Grid

Now, let’s progressively enhance for browsers that do support CSS grid using a @supports query:

@supports(display: grid) {
  .blog-post {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 2rem;
  }
}

Now it’s time to start placing content on the grid:

.blog-post header {
  grid-column-start: 3;
  grid-column-end: span 2;
}

.blog-post h2,
.blog-post p,
.blog-post figure {
  grid-column-start: 5;
  grid-column-end: span 4;
}

The post header and content now sit next to each other in a row. The callouts are up next:

.blog-post aside {
  position: relative;
  grid-column-start: 3;
  grid-column-end: 5;
}

.blog-post aside p {
  position: absolute;
}

The asides are now pulled to the left of the paragraph immediately following them, looking exactly like callouts. The paragraphs within each callout have absolute positioning applied so that they don’t force the proceeding paragraph down if they are taller than the adjacent content.

Since setting up asides requires using absolute positioning, you need to be careful that one aside does not overlap the proceeding one.

Bonus: Full-Width Figures

I can easily style figures within the post so that they stretch across the full width of the grid container. The rest of the content remains at a narrower width.

.blog-post figure {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 2rem;
  grid-column-start: 1;
  grid-column-end: -1;
}

.blog-post figure img {
  grid-column-start: 1;
  grid-column-end: -1;
}

.blog-post figure figcaption {
  grid-column-start: 5;
  grid-column-end: span 4;
}

The figure now spans all 12 columns of the parent grid. I set up a nested grid within the figure with the same number of columns and spacing as the parent. This allows me to have the img element span the full width, while the figcaption is aligned with the narrower post content.

Controlling Element Visibility with the Intersection Observer API

Wed, 18 Oct 2017 20:17:00 GMT

Controlling the display of elements based on their visibility within the viewport has typically been a rather messy affair, involving calculations using window height and getBoundingClientRect(). There is now a new API that makes this much simpler called Intersection Observer. It is now supported in Chrome, Firefox, Opera and Edge.

I decided to experiment and push IntersectionObserver to its limits.

The HTML and CSS

I have a simple grid of cards that is styled using CSS grid:

...

.card-grid {
  display: grid;
  grid-template-columns: repeat(
      auto-fill,
      minmax(100px, 1fr)
  );
  grid-gap: 45px;
}

Creating the Observers

I loop over each card and create an observer. The observer accepts a callback and an options object. Note that in options I am setting the rootMargin to a negative value. This insets the intersection point in from the viewport on all sides by 100px. So a card can be up to 100px in the viewport before the observer will read it as intersected.

I have also set the threshold option as an array with two numeric values. These are essentially the percentages of intersection at which the observer will respond. So, when a card is 50% in the viewport and when it is 100% in, the observer will fire the callback.

const options = {
  rootMargin: '-100px',
  threshold: [0.5, 1]
}

const observer = new IntersectionObserver(callback, options);

const targets = document.querySelectorAll('.card');
targets.forEach(target => observer.observe(target));

Setup the Callback

The callback function gives me an array of entries—each entry is essentially an intersection change. I can check the intersectionRatio on each entry and apply some styling appropriately.

const callback = entries => {
  entries.forEach(entry => {
    const ratio = entry.intersectionRatio;

    // look at the ratio and do stuff to each element
  });
}

I use a switch statement to apply different styling for different ratios:

switch (true) {
  case (ratio === 1):
    entry.target.style.opacity = 1;
    entry.target.style.transform = 'scale(1.25)';
    return;

  case (ratio < 1 && ratio >= 0.5):
    entry.target.style.opacity = 0.5;
    entry.target.style.transform = 'scale(1.1)';
    return;

  case (ratio < 0.5):
    entry.target.style.opacity = 0.15;
    entry.target.style.transform = 'scale(1.0)';
    return;

  default:
    return;
}

Conclusion

The Intersection Observer API provides a more straightforward and powerful method for checking element visibility relative to the viewport. Hopefully browser support continues to improve and we’ll be able to use it soon in production sites without needing a polyfill.

Implicit State Sharing in React & Vue

Mon, 05 Nov 2018 22:14:59 GMT

Imagine you are creating an accordion component that you want to distribute publicly through an npm package. You would like the users of this accordion to be able to use the component in a very flexible way, by composing multiple components together. React Context and provide/inject in Vue provide a solution.

Imagine this is your ideal API:


  
    
      Header content
    
    
      Panel content

AccordionItem will contain each section of the accordion that can be expanded or collapsed, AccordionHeader will be the place where the user can click to expand or collapse, and AccordionPanel will contain the content to be shown or hidden.

Each AccordionItem will need to maintain some state — whether it is expanded or not. But AccordionHeader will also need access to this value, so that it can show the appropriate toggle button. And AccordionPanel may also need to access this, since it is the thing being expanded and collapsed.

One possibility is exposing the expanded value to your user through render props and making sure your documentation lets them know that they need to pass that down to the header and panel components.


   (
    
      Header content
    
    
      Panel content
    
  )} />

While this may seem like a decent solution at first, it’s not ideal that the consumer of our component has to worry about the component internals. The fact that AccordionHeader and AccordionPanel need access to the expanded state should not be something our user has to be concerned about.

It should also be noted that while this is a trivial example, your component may be far more complex, with multiple levels of nested components, in which case prop drilling may become quite tedious.

What we really need is a way to implicitly pass down props.

Using React Context

There is a better solution for cases like this: React Context. We can use the Context API to create some state and provide it where needed behind the scenes, removing this concern from our public-facing API.

First, we will create a context and define the shape of that context. We will start with an expanded value and a toggleExpansion method. We are defining this context as specifically relevant to our accordion item:

const AccordionItemContext = React.createContext({
  expanded: false,
  toggleExpansion: () => {}
})

Now, inside our AccordionItem component, we will define the expanded and toggleExpansion values and feed them in as the value of the Provider component.

class AccordionItem extends React.Component {
  constructor(props) {
    super(props)

    this.toggleExpansion = () => {
      this.setState({
        expanded: !this.state.expanded
      });
    }

    this.state = {
      expanded: false,
      toggleExpansion: this.toggleExpansion
    }
  }

  render() {
    return (
      
        
          {this.props.children}
        
      
    )
  }
}

The Provider is one half of the React Context equation. The other half is the Consumer. The Provider allows the Consumer to subscribe to context changes, as we will see soon.

Next, we need to set up AccordionHeader and AccordionPanel as consumers of this context:

const AccordionHeader = props => {
  return (
    
      {({ expanded, toggleExpansion }) => (
        
          
        
      )}
    
  )
}

The Consumer component requires a function as its child. This function will receive the context value, which we are destructuring into expanded and toggleExpansion. Our component is then able to use these values in its template.

We will similarly use Consumer to give AccordionPanel access to the context value:

const AccordionPanel = props => {
  return (
    
      {({ expanded }) =>
        
          {props.children}
        
      }
    
  )
}

Now, we really can achieve our ideal API for the accordion component. Users of our component won’t have to worry about passing state up or down the component tree. Those component internals are hidden from them:


  
    
      Header content
    
    
      Panel content

Provide/Inject in Vue

Vue provides a similar tool to React’s Context API, called provide/inject. To use this, we will use the provide method on our accordion-item Vue component:

Vue.component('accordion-item', {
  data() {
    return {
      sharedState: {
        expanded: false
      }
    }
  },

  provide() {
    return {
      accordionItemState: this.sharedState
    }
  },

  render(createElement) {
    return createElement(
      'div',
      { class: 'accordion-item' },
      this.$slots.default
    )
  }
})

We return an object from provide() that contains the state we want to provide to other components. Note that we are passing an object to accordionItemState, rather than simply passing the expanded value. In order to be reactive, provide must pass an object.

Note that we are using a render function here to create this component, but this is not necessary to use provide/inject.

Now, we will inject this state into our child components. We will simply use the inject property, which accepts an array of strings corresponding to the properties of the object we defined in provide.

Vue.component('accordion-header', {
  inject: ['accordionItemState'],

  template: html`
    
      
    
  `
})

Once we include the property name in inject, we have access to those values in our template.

Vue.component('accordion-panel', {
  inject: ['accordionItemState'],

  template: html`
    
      
    
  `
})

Use with Caution

It’s worth noting that you should only implicitly pass down props when it really makes sense. Doing this too much can obfuscate the real behavior of your components and cause confusion for other developers who may be working on your project.

A component library that is packaged up and distributed for use in other applications is a perfect use case for this, since the internal props of the components really don’t need to be exposed to the end user.

React Context and Vue’s provide/inject feature both make it possible to do this through implicit state sharing.

Input Types Cheat Sheet

Fri, 20 Jun 2025 19:59:00 GMT

The humble input field. Or maybe not so humble… This handy cheat sheet will help you quickly reference all the different text and temporal input types available in HTML. The next time you need to collect information from your users, make sure you are using the right input for the job.

Text Inputs

Name	Code	Example
Text input
Search input
Number input
Email input
Password input
Telephone input
URL input

Temporal Inputs

Name	Code	Example
Date input
Time input
Month input (Chrome/Edge only)
Week input (Chrome/Edge only)
Datetime input

Dynamic SVGs in Light & Dark Mode

Sun, 25 May 2025 12:55:00 GMT

When supporting light and dark mode, you likely want your images to respond accordingly, showing both a light and dark version. The easiest way to do this is by providing two image sources and using the picture element to switch between them.

However, this requires exporting and maintaining two versions of the image. When the image needs an update, you need to update and export two files. Additionally, if you ever decide to change your color scheme, you will need to update all of your image source files and export them again.

For SVGs in particular, there is a better way to respond to theme changes using CSS variables. The SVG must be loaded inline within your page’s HTML.

Here is an SVG I’ve exported from a graphics program (I’m using Sketch):

I want to replace the hex codes in this SVG with CSS variables that can respond to theme changes. However, I may need to re-export this image in the future, so I don’t want to do this manually. I need a repeatable way to easily replace the hex codes.

I’ve written a script to be run via the command line that will go through at all the SVGs in a particular directory, look for certain hex codes, and replace those with references to CSS variables.

const fs = require("fs");
const path = require("path");

const hexToCssVariables = {
  "#fafafa": "#27272a",
  "#262626": "#f5f5f5",
  "#d4d4d4": "#525252",
  "#e6594c": "#e6594c"
};

const inputDir = path.join(
  __dirname,
  "../content/illustrations"
);
const outputDir = path.join(
  __dirname,
  "../public/assets/illustrations"
);

// Ensure output directory exists
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// Read all images from the input directory
fs.readdirSync(inputDir).forEach((file) => {
  const inputFile = path.join(inputDir, file);
  const outputFile = path.join(outputDir, file);

  if (inputFile.endsWith(".svg")) {
    fs.readFile(
      inputFile,
      "utf-8",
      function (err, data) {
        if (err) throw err;

        let svgContent = data;

        // replace each hex code with a CSS variable reference
        Object.keys(hexToCssVariables).forEach((hex) => {
          const cssVar = hexToCssVariables[hex];
          const regex = new RegExp(hex, "gi");
          svgContent = svgContent.replace(regex, cssVar);
        });

        // generate the new SVG file
        fs.writeFile(
          outputFile,
          svgContent,
          "utf-8",
          function (err) {
            if (err) throw err;
          }
        );
      }
    );
  }
});

I have the CSS variables defined in my styles and have set them up to change based on the presence of a dark class on my root element.

:root {
  --accent: #ff6354;

  --illustration-accent: var(--accent);
  --illustration-background: #fafafa;
  --illustration-black: #262626;
  --illustration-gray: #d4d4d4;
}

.dark {
  --accent: #e6594c;

  --illustration-background: #27272a;
  --illustration-black: #f5f5f5;
  --illustration-gray: #525252;
}

Now, the SVG will respond perfectly to changes in my theme, and I only have to maintain a single file for each image. I export all my SVGs to a content directory, then run my script to generate the final files in the public directory. If I decide to drastically update my theme in the future, I don’t have to manually update all the source files; just a quick change of a few variables, and I’m good to go!

Live Theming with CSS Variables

Sat, 19 Aug 2017 20:17:00 GMT

CSS variables, now enjoying fairly good browser support, are opening up exciting possibilities for more dynamic styling. Having true CSS variables means that we can get and set their values using JavaScript, allowing us to build exciting features like live theming.

The process is fairly simple—set up initial variable values in CSS, mark up some inputs, add event listeners and set the values in JavaScript. Let’s get started!

Set Up Initial Values

First we’ll set up the variables and their initial values in the :root pseudo-class. In HTML, :root represents the html element.

:root {
  --background-color: #FFFFFF;
  --text-color: #101727;
}

Now we can write some styles using these variables. Think about using these values as a base and generating other values in your styles from them. This will let you create fewer variables while still giving the user the power to affect the entire document.

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

You may also want to add some transitions for the properties that will be changing to smooth out the theme editing experience.

Create Some Inputs

Now it’s time to create the form that the user will be interacting with to customize their theme. I’m using color inputs for the color options and range inputs for the font size and line height.

Set your initial input values to match the starting values of your CSS variables. You could also set these through JavaScript on page load to remain DRY.

Set up Event Listeners

I’m setting up listeners for the “change” event for color inputs, and the “input” event for range inputs. I’ve extracted the logic to a separate function called handleInputChange so that I can reuse it for all the inputs.

const handleInputChange = (event, property) => {
  document.documentElement.style.setProperty(
    `--${property}`,
    event.target.value
  );
};

document.getElementById('background-color')
  .addEventListener('change', event => {
    handleInputChange('background-color');
  });

That’s all it takes to set up basic interactive theming with CSS variables. We can go a step further and keep these values in localStorage so the theme settings will persist on refresh.

Store Values in localStorage

I’ll edit my handleInputChange function to store values in localStorage:

const handleInputChange = (event, property) => {
  document.documentElement.style.setProperty(
    `--${property}`,
    event.target.value
  );

  localStorage.setItem(property, newValue);
};

Next, I’ll need to add some functionality to grab the values from localStorage and set them on page load. I will need to set both the CSS variable and the input value so that everything is consistent. Once again, I’ve extracted the logic to a separate function.

const setValueFromLocalStorage = property => {
  const value = localStorage.getItem(property);
  document.documentElement.style.setProperty(
    `--${property}`,
    value
  );

  const input = document.getElementById(property);
  input.value = value;
}

document.addEventListener('DOMContentLoaded', () => {
  setValueFromLocalStorage('background-color');
});

Now, refresh your page to see a persistent theme!

Bonus: Pre-Defined Themes

If you want to offer some pre-defined themes, in addition to the free-form inputs, simply create a method that sets all the variables to pre-defined values and hook it up to an event listener.

I’ve created a setTheme function that accepts an options object, loops through the object keys, and sets the values. I’ve reworked the function that actually sets the values a bit so it’s more generic.

Now, I just need to call this function with the values I want to set on the appropriate trigger:

setTheme({
  'background-color': '#FFFFFF',
  'text-color': '#101727'
});

CSS variables make live theming easy. Hopefully this gets you started playing around with the fun things that CSS variables make possible. You can learn more about CSS variables in my article here.

Semantic Image Overlays With Object-Fit

Sun, 27 Aug 2017 20:17:00 GMT

Think of how many times you have coded a grid of images with an overlay that appears on hover and displays some sort of text. With the object-fit property getting wider support, there is now a clean, semantic way to do this.

Without object-fit

Here’s how I used to accomplish this:


  
  
    
      
        Article Title

The markup involved an article containing a div with a background image applied, and an overlay div that contained the text that needed to sit on top of the image. I would then absolutely position both the image and the overlay. The size of the div would be determined by a percentage padding trick on the article:

.blog-post-teaser {
  position: relative;
  padding: 30% 0;
}

.blog-post-teaser .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-post-teaser .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The key downside with this approach is that it’s not as semantic as it could be. The image for each article seems like a pretty important piece of content, and the browser doesn’t know that it’s an image. And we can’t feed in alt tags to help with SEO.

How do we improve semantics while retaining control of the image sizing? Enter object-fit.

With object-fit

Here’s what my markup looks like now:


  
    
    
      
        
          Article Title

Now the browser knows we’re serving up an image. It even knows that the article title is both a heading for the article and a caption for the image. Search engines can now access alt text. Let’s look at the styling:

.blog-post-teaser figure {
  position: relative;
  padding: 30% 0;
}

.blog-post-teaser figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-post-teaser img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

It’s almost identical, only that now we’re using the img element and applying the object-fit property. This works the exact same way as setting background-size: cover. The image will fill the specified space.

Now the browser knows we’re serving up an image. Search engines can properly access alternative text.

System-Based Theming with Styled Components

Thu, 09 Apr 2020 20:18:26 GMT

Most operating systems these days support a system-wide light/dark mode toggle, and we may want our web sites and applications to take on a corresponding mode, essentially inheriting their color scheme from the system on which they are being viewed. Let’s take a look at how to implement this, and how it would integrate with a CSS-in-JS theming system such as Styled Components.

Detecting a user’s system theme involves either using the prefers-color-scheme media query in CSS, or checking the media feature in JavaScript. Browser support for these features is fairly good.

Basic System Theming

Let’s look at a basic implementation where we swap the theme object passed to Styled Component’s ThemeProvider component based on the detected system theme.

import { useState, useEffect } from "react";
const { ThemeProvider } from "styled-components";

// set up theme colors
const themes = {
  light: {
    colors: {
      text: "black",
      background: "white"
    }
  },
  dark: {
    colors: {
      text: "white",
      background: "black"
    }
  }
};

// set up styled components to use theme colors
const Wrap = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
`;

const Heading = styled.h1`
  color: ${({ theme }) => theme.colors.text};
`;

const P = styled.p`
  color: ${({ theme }) => theme.colors.text};
`;

// set up detection of system dark mode
const darkModeQuery = window.matchMedia(
  "(prefers-color-scheme: dark)"
);

const App = () => {
  // perform an initial detection of system theme
  const [theme, setTheme] = useState(
    darkModeQuery.matches ? "dark" : "light"
  );


  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setTheme(event.matches ? "dark" : "light");
    });
  });

  // pass the correct theme object to the provider
  return (
    
      
        System Theming
        Change your system theme to see this page respond
      
    
  );
};

export default App;

This approach is straightforward and feels very natural to Styled Components. However, if our app is server-side rendered but a user has JavaScript disabled, the app will not respond to system theme changes.

Supporting Disabled JavaScript with CSS Variables

We can enable our app to respond to the system theme even without JavaScript enabled (in cases where the app is server-side rendered) by taking a slightly different approach. Instead of storing our light and dark theme as separate styled component themes, we will use CSS variables, and override them with a media query.

import { useState, useEffect } from "react";
import { createGlobalStyle, ThemeProvider, css } from "styled-components";

// set up color values that will be used across both light and dark themes
const theme = {
  colors: {
    black: "black",
    white: "white"
  }
};

// set up light theme CSS variables
const lightValues = css`
  --text: ${({ theme }) => theme.colors.black};
  --background: ${({ theme }) => theme.colors.white};
`;

// set up dark theme CSS variables
const darkValues = css`
  --text: ${({ theme }) => theme.colors.white};
  --background: ${({ theme }) => theme.colors.black};
`;

const GlobalStyle = createGlobalStyle`
  :root {
    /* define light theme values as the defaults within the root selector */
    ${lightValues}

    /* override with dark theme values within media query */
    @media (prefers-color-scheme: dark) {
      ${darkValues}
    }
  }
`;

// set up styled components to use CSS variables
const Wrap = styled.div`
  background-color: var(--background);
`;

const Heading = styled.h1`
  color: var(--text);
`;

const P = styled.p`
  color: var(--text);
`;

const App = () => (
  
    <>
      
      
        System Theming
        Change your system theme to see this page respond
      
    
  
);

export default App;

Now, when server-side rendered, our theme will change even without JavaScript enabled, since a CSS media query is now controlling the theme values.

Custom Theme Overrides

There are some cases where you may want to allow a user to manually change the theme, overriding what the app inherited from the system by default. Let’s look at how we might achieve this using our initial simpler example. We will need to add a theme toggle method that will update our theme state.

import { useState, useEffect } from "react";
import { ThemeProvider } from "styled-components";

// ...set up themes and styled components

// set up detection of system dark mode
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");

const App = () => {
  // perform an initial detection of system theme
  const [activeTheme, setActiveTheme] = useState(
    darkModeQuery.matches ? "dark" : "light"
  );

  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setActiveTheme(
        event.matches ? "dark" : "light"
      );
    });
  });

  // set up a theme toggle method that will update our state when a user clicks the button
  const toggleTheme = () => {
    setActiveTheme(
      activeTheme === "dark" ? "light" : "dark"
    )
  }

  // pass the correct theme object to the provider
  return (
    
      
        System Theming
        
      
    
  );
};

export default App;

Persistent Custom Theme Overrides

What if we want the user’s custom theme override to be persisted between sessions? We’ll need to bring in some logic to interact with localStorage in order to set and retrieve the user’s preference.

Let’s look at a full example that uses CSS variables, supports custom overrides, and persists those overrides between sessions:

import { useState, useEffect } from "react";
import { createGlobalStyle, ThemeProvider, css } from "styled-components";

// set up color values that will be used across both light and dark themes
const theme = {
  colors: {
    black: "black",
    white: "white"
  }
};

// set up light theme CSS variables
const lightValues = css`
  --text: ${({ theme }) => theme.colors.black};
  --background: ${({ theme }) => theme.colors.white};
`;

// set up dark theme CSS variables
const darkValues = css`
  --text: ${({ theme }) => theme.colors.white};
  --background: ${({ theme }) => theme.colors.black};
`;

const GlobalStyle = createGlobalStyle`
  :root {
    /* define light theme values as the defaults within the root selector */
    ${lightValues}

    /* override with dark theme values if theme data attribute is set to dark */
    [data-theme="dark"] {
      ${darkValues}
    }

    /* support no JavaScript scenario by using media query */
    &.no-js {
      @media (prefers-color-scheme: dark) {
        ${darkValues}
      }
    }
  }
`;

// set up styled components to use CSS variables
const Wrap = styled.div`background-color: var(--background);`;

const Heading = styled.h1`
  color: var(--text);
`;

const P = styled.p`
  color: var(--text);
`;

// set up detection of system dark mode
const darkModeQuery = window.matchMedia(
  "(prefers-color-scheme: dark)"
);

// find saved theme
const savedTheme = localStorage.getItem("theme");

const App = () => {
  // set active theme to saved theme, if there is one
  // otherwise, set to system theme
  const [activeTheme, setActiveTheme] = useState(
    savedTheme
      ? savedTheme
      : darkModeQuery.matches ? "dark" : "light"
  );

  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setActiveTheme(
        event.matches ? "dark" : "light"
      );
    });
  }, []);

  // every time the active theme changes, set the theme data attribute
  useEffect(() => {
    document.body.setAttribute(
      "data-theme",
      activeTheme
    );
  }, [activeTheme]);

  // set up a theme toggle method that will update our state when a user clicks the button
  // and save the new theme in localStorage
  const toggleTheme = () => {
    const newTheme = activeTheme === "light"
      ? "dark"
      : "light";

    setActiveTheme(newTheme);
    localStorage.setItem("theme", newTheme);
  };

  return (
    
      <>
        
        
          System Theming
          
          Refresh to see the persisted preference
        
      
    
  );
};

Now, instead of using a media query to override CSS variable values, we use a data attribute set on the document body. This allows theme overrides to work.

Note that we support responding to system theme changes without JavaScript by using a no-js class and falling back to a media query. Of course, this won’t support custom overrides of the theme.

Preventing the Default Theme Flash

There is one remaining problem with this implementation when used with server-side rendering. Since we are no longer using a media query, but rather a data attribute to set the theme, we get an initial default themed flash of content, before our app has a chance to actually detect and set the theme. We will need to relocate our theme-setting code to the head of the document, before the HTML has actually rendered.

We can store the theme and the theme toggle method on the window so that our React app will then have access to it. This code looks a bit messier, but it supports all of our use cases and prevents the annoying default themed flash.

In head:

(function () {
  // set up method to set theme value on window, set data attribute,
  // and dispatch a custom event indicating the theme change
  function setTheme(newTheme) {
    window.__theme = newTheme;
    preferredTheme = newTheme;

    document.body.setAttribute(
      "data-theme",
      newTheme
    );

    window.dispatchEvent(
      new CustomEvent("themeChange", {
        detail: newTheme
      })
    );
  }

  // grab the saved theme
  var preferredTheme = localStorage.getItem("theme");

  // set up method to set the active theme to the user’s preferred theme
  // and save that theme for persistence
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme);
  };

  // set up detection of system dark mode
  var darkModeQuery = window.matchMedia(
    "(prefers-color-scheme: dark)"
  );

  // set up a listener to respond to future changes of system theme
  darkModeQuery.addListener(function (event) {
    window.__setPreferredTheme(
      event.matches ? "dark" : "light"
    );
  });

  // set active theme to saved theme, if there is one, or the system theme
  setTheme(
    preferredTheme ||
    (darkModeQuery.matches ? "dark" : "light")
  );
})();

In our app:

import { useState, useEffect } from "react";

// ...set up CSS variables and styled components

const App = () => {
  const [activeTheme, setActiveTheme] = useState();

  useEffect(() => {
    // set initial theme based on value set on window
    setActiveTheme(window.__theme);

    // set up listener for custom theme change event
    window.addEventListener("themeChange", (event) => {
      setActiveTheme(event.detail);
    });
  }, []);

  // allow user to manually change their theme
  const toggleTheme = (theme) => {
    window.__setPreferredTheme(theme);
  };

  // ...render content
});

export default App;

Conclusion

Thanks to improving browser support for the detection of system themes, it has never been easier to implement a theme for your application or website that responds to your users’ operating system themes. With a bit of extra code, you can also enable user-chosen theme overrides. This will go a long way in creating a more customizable and comfortable experience for your users.

Typographic Details - Using Correct Spaces and Punctuation

Sun, 20 Apr 2025 11:57:00 GMT

One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy. Robert Bringhurst

Welcome to this quick cheat sheet that will you help you know which spaces, punctuation and characters to use to make your web typography great! Much of this content has been adapted from Richard Rutter's excellent handbook Web Typography.

Use the right spaces

Non-breaking space

Use a non-breaking space to keep words together on the same line. This prevents awkward line breaks between closely related elements, such as labels and numbers.

Page 2.

Thin space

Use a thin space to separate characters when a regular space is too big. This maintains typographic rhythm by creating subtle breathing room but avoiding excessive spacing.

Looking up he said, “She mouthed ‘I love you’ ” and then returned to his book.

Hair space

Use a hair space to prevent adjacent characters touching. This adds just enough separation to avoid visual collisions between initials without disrupting flow.

D. H. Lawrence.

Narrow no-break space

Use a narrow no-break space to prevent initials or numbers and their units from wrapping across two lines.

A hair space is 1/24 em wide.

Use the right punctuation marks

Hyphen

Use a hyphen for one of the following:

joining words to indicate they have a combined meaning
indicating missing words shared by a series of compounds
indicating stuttering speech
splitting words when breaking them across lines

Example: She wore a well-tailored jacket.

Figure dash

A figure dash has the same width as a numerical digit and is used within numbers to maintain alignment.

Example: (800‒555‒1212)

En dash

An en dash indicates range with spacing that visually balances the digits it connects.

Example: 4–5 minutes.

Em dash

Use an em dash to set off phrases. Separate em dashes from phrases with hair spaces. You can also use to indicate attribution after a quote, followed by a full space.

Example: this and that — that and this.

Minus symbol

The minus symbol is longer and sits at the mathematical midpoint—unlike the shorter hyphen.

Multiplication symbol

A proper multiplication sign avoids confusion with the letter “x” and aligns better with numerals.

Obelus

The obelus is the correct symbol for division, with visual weight that centers between operands.

Quotation marks & apostrophes

Use proper quotation marks and apostrophes (not straight marks).

Ellipsis

The proper ellipsis character (instead of three individual dots) ensures consistent spacing and baseline alignment across typefaces.

Primes

Prime marks indicate units like inches and minutes; straight apostrophes are typographic imposters.

Degree symbol

The proper degree symbol is smaller and raised—distinct from a lowercase o.

Parentheses

Parentheses and brackets are not designed to be italicized; they retain proper shape and spacing when set in roman.

Use the right characters

To learn what characters to use, read my article about better typography with font variants.

Unlocking the Benefits of CSS Variables

Tue, 24 Oct 2017 20:17:00 GMT

More and more developers are starting to use CSS variables, or as they are more correctly known, custom properties. Native CSS custom properties provide several clear benefits over preprocessor variables. They provide the power to achieve things like live theming which were previously much more difficult.

I want to take a quick look at the benefits of CSS custom properties and go over some lesser known features that may come in handy.

Benefits of CSS Custom Properties

They’re Native

This one is obvious, but important. You can use CSS custom properties without the need for a preprocessor. The tooling around CSS has grown in complexity over the last several years. We may now be looking at a simplification as more features are adopted into CSS proper.

They’re Live

Preprocessor variables are not actually live in the browser. They are evaluated when the CSS is compiled. Redefining a variable within a media query will do nothing. With CSS custom properties, the property actually lives in the browser so it can be redefined in media queries, or with JavaScript.

This also means that all variable expressions and calc statements using CSS custom properties will be recalculated when the variable is redefined.

Here we are redefining a grid gutter within a media query and using that custom property inside calc() statements:

:root {
  --grid-gutter: 1rem;
}

@media (min-width: 600px) {
  :root {
    --grid-gutter: 1.25rem;
  }
}

.grid {
  display: grid;
  grid-gap: var(--grid-gutter);
  margin-left: calc(-1 * var(--grid-gutter));
  margin-right: calc(-1 * var(--grid-gutter));
}

They Cascade

Since preprocessor variables don’t run in the browser, they have no knowledge of the DOM. Therefore they cannot be scoped to DOM elements. CSS custom properties, on the other hand, do have this knowledge. CSS custom properties can be scoped to particular elements, or classes on elements.

A clear use case for this is theme switching:

:root {
  --body-background-color: white;
  --body-text-color: black;
}

body {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}

.dark {
  --body-background-color: black;
  --body-text-color: white;
}

They Work Anywhere

Preprocessor variables do not work in plain CSS or with other preprocessors so their shareability is limited. Because custom properties are native, they can be used with any preprocessor. They can also be accessed and defined through JavaScript.

Here’s an example of overriding default Bootstrap Sass typography variables to use custom properties.

$font-size-h1: calc(var(--font-size-base) * 2.6) !default;
$font-size-h2: calc(var(--font-size-base) * 2.15) !default;
$font-size-h3: calc(var(--font-size-base) * 1.7) !default;
$font-size-h4: calc(var(--font-size-base) * 1.25) !default;
$font-size-h5: var(--font-size-base) !default;
$font-size-h6: calc(var(--font-size-base) * 0.85) !default;

Using Fallback Values

If you aren’t sure if a particular custom property exists, you can provide a default value for a particular property. This can be especially useful if you are creating a component that will be packaged up and imported as part of a library.

Simply pass in the default value as the second argument of the var() function:

/* single fallback */
.button {
  background-color: var(--button-background-color, gray);
}

You can provide multiple fallbacks by nesting multiple var() functions inside of each other:

/* multiple fallbacks */
.button-primary {
  background-color: var(
    --primary-button-background-color,
    var(
      --button-background-color,
      gray
    )
  );
}

Converting Unitless Values

There may be times when you need to define a custom property as a unitless value and then tack on a unit. This can often be the case when dealing with responsive typography. To accommodate this, simply write a calc() expression where you multiply the custom property value by the unit you wish to add onto it.

Here’s an example of a complex responsive font size calculation using custom properties:

:root {
  /* unitless base font size variables in px */
  --unitless-min-font-size: 15;
  --unitless-max-font-size: 18;

  /* unitless viewport widths in px */
  --unitless-lower-font-range: 460;
  --unitless-upper-font-range: 1200;

  --font-size-difference: calc(
    var(--unitless-max-font-size) -
    var(--unitless-min-font-size)
  );
  --font-range-difference: calc(
    var(--unitless-upper-font-range) -
    var(--unitless-lower-font-range)
  );
  --viewport-difference: calc(
    100vw -
    (var(--unitless-lower-font-range) * 1px)
  );
}

html {
  font-size: calc(
    (var(--unitless-min-font-size) * 1px) +
    var(--font-size-difference) *
    var(--viewport-difference) /
    var(--font-range-difference)
  );
}

Redefining Custom Properties in Media Queries

Remember that you can redefine custom properties within media queries. Margins, padding, and grid gutters are particularly good use cases for this. Imagine a condensed view of a grid on mobile, a slightly more spaced out view on tablet, and a view with even more space on desktop. This is possible very simply with custom properties. Instead of redefining the spacing properties on the element, just redefine the custom properties within the media queries.

:root {
  --card-padding: 1rem;
}

@media (min-width: 600px) {
  :root {
    --card-padding: 1.25rem;
  }
}

@media (min-width: 1000px) {
  :root {
    --card-padding: 1.5rem;
  }
}

.card {
  padding: var(--card-padding);
}

Learn how to use custom properties to enable live theming in my article Live Theming with CSS Variables.

What’s the Deal with Margin Collapse?

Sun, 11 Mar 2018 20:17:00 GMT

The concept of margin collapse is foundational to an understanding of the box model in CSS, but it is actually quite complex and potentially confusing. The spec describing how it works is thorough but difficult to understand. This article is an attempt to give some visual examples to the concepts from the specs.

The basic idea is that if two margins are adjoining, they will collapse into one margin, which will have the greater of the two margin values (it will be the more negative of the margins if both margins are negative).

What makes margins adjoining?

The key is understanding when two margins are adjoining. Here are the basic situations:

Sibling Elements

The bottom margin of an element collapses with the top margin of its proceeding sibling.

Child Elements

The top margin of an element collapses with the top margin of its first child element.

The bottom margin of an element collapses with the bottom margin of its last child element.

An Element’s Own Top and Bottom Margins

The top and bottom margins of an element collapse if the element has no height, padding, or border and all of its children elements’ margins collapse (height is represented here only for clarity).

When does margin collapse not occur?

There are several exceptions to these rules. This is where things can get hard to follow. Following are some visual examples of situations where margins would not collapse. For a more complete understanding, refer to the spec.

If the parent element has a top border or padding, the parent’s top margin does not collapse with the first child’s top margin.

If the parent element has a bottom border or padding, the parent’s bottom margin does not collapse with the last child’s bottom margin.

Further Resources

There are some additional, more complex scenarios that prevent collapse that aren’t covered here. For updated and complete information, see the CSS Box Model Spec.

Advanced CSS-Only HTML Form Styling

Tue, 31 Oct 2017 20:17:00 GMT

:placeholder-shown


  
  Enter some text

.form-group {
  position: relative;
  padding-top: 1.5rem;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease-out;
}

input:placeholder-shown + label {
  opacity: 0;
  transform: translateY(1rem);
}

:required

Required input

input:required + .help-text::before {
  content: '*Required';
}

:optional

This selector does the opposite of :required. I am again using an empty .help-text span to display some optional text if the required attribute is NOT present.

input:optional + .help-text::before {
  content: '*Optional';
}

:disabled

This one should be familiar to most of you, but still important to remember. It’s pretty essential to display whether or not an input is disabled to a user.

&:disabled {
  border-color: var(--gray-lighter);
  background-color: var(--gray-lightest);
  color: var(--gray-light);
}

:read-only

An input with the readonly attribute should convey a slightly different meaning than a disabled input. Thankfully we have this selector to help with that.

input:read-only {
  border-color: var(--gray-lighter);
  color: var(--gray);
  cursor: not-allowed;
}

:valid

Here I am encoding an svg to display a checkbox in the input using the background-image property.

input:valid {
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,...");
}

:invalid

This selector checks if an input is currently NOT passing the native browser validation rules (for example, if an email input does not contain a real email).

Again, I am encoding an svg to display an ‘x’ in the input.

input:invalid {
  border-color: var(--color-error);
  background-image: url("data:image/svg+xml,...");
}

I can also customize some validation messages for each input type using the .help-text span and the ::before pseudo-element.

Invalid input

input[type='email']:invalid + .help-text::before {
  content: 'You must enter a valid email.'
}

:in-range/:out-of-range

These selectors detect whether the value of a number input is within the min/max values specified or not.

Out-of-range input

(value must be between 1 and 10)

input:out-of-range + .help-text::before {
  content: 'Out of range';
}

:checked


  
  Option

&:checked + label::before {
  background-color: var(--color-primary);
}

&:checked + label::after {
  display: block;
  position: absolute;
  top: 0.2rem;
  left: 0.375rem;
  width: 0.25rem;
  height: 0.5rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: '';
}

Better Typography with Font Variants

Sun, 07 Jan 2018 20:17:00 GMT

However, this is quickly changing thanks to the increasing availability of OpenType features in web fonts and the ability to control those features with CSS.

This article is an overview of how to control OpenType features using CSS, but remember that whatever web font you are using will also need to support these features.

The font-variant- Properties

body {
  font-feature-settings: "liga" 1;
}

@supports (font-variant-ligatures: common-ligatures) {
  body {
    font-feature-settings: normal;
    font-variant-ligatures: common-ligatures;
  }
}

font-variant-ligatures

Ligatures are single glyphs made from two or more characters. They typically prevent ugly or awkward letter collisions and, therefore, aid legibility.

common-ligatures

These are ligatures that the type designer has decided should be used in normal conditions. In most circumstances you should use these. Most browsers enable them by default.

font-variant-ligatures: common-ligatures; /* enable */
font-variant-ligatures: no-common-ligatures; /* disable */

font-feature-settings: 'liga' 1; /* low-level enable */
font-feature-settings: 'liga' 0; /* low-level disable */

discretionary-ligatures

These are ligatures which can be used for typographic purposes, for example to achieve a special effect. These are disabled by default.

font-variant-ligatures: discretionary-ligatures; /* enable */
font-variant-ligatures: no-discretionary-ligatures; /* disable */

font-feature-settings: 'dlig' 1; /* low-level enable */
font-feature-settings: 'dlig' 0; /* low-level disable */

contextual

These are alternate ligatures that are affected by their surrounding context. They often harmonize the shapes of grouped glyphs. These are enabled by default.

font-variant-ligatures: contextual; /* enable */
font-variant-ligatures: no-contextual; /* disable */

font-feature-settings: 'calt' 1; /* low-level enable */
font-feature-settings: 'calt' 0; /* low-level disable */

historical-ligatures

These are ligatures which could be considered a subset of discretionary, but are specifically used to achieve a historical effect. These are disabled by default.

font-variant-ligatures: historical-ligatures; /* enable */
font-variant-ligatures: no-historical-ligatures; /* disable */

font-feature-settings: 'hlig' 1; /* low-level enable */
font-feature-settings: 'hlig' 0; /* low-level disable */

font-variant-position

Thankfully, there is now a way to enable true subscripts and superscripts with font-variant-position. Note that currently only Firefox supports this.

sub

This enables true subscript characters, which are positioned specifically for use in footnotes and scientific formulas.

font-variant-position: sub; /* enable */
font-variant-position: normal; /* disable both variants */

font-feature-settings: 'subs' 1; /* low-level enable */
font-feature-settings: 'subs' 0; /* low-level disable */

super

This enables true superscript characters, which are sized and positioned specifically for use in mathematical expressions and scientific formulas.

font-variant-position: super; /* enable */
font-variant-position: normal; /* disable both variants */

font-feature-settings: 'sups' 1; /* low-level enable */
font-feature-settings: 'sups' 0; /* low-level disable */

font-variant-caps

A capital is not a capital is not a capital. The most significant use of font-variant-caps is to enable small caps, although there are several other options available.

small-caps

Small caps are designed to be the same height as lowercase letters and are used to capitalize words within running text. They make for a more cohesive and readable paragraph.

font-variant-caps: small-caps;  /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'smcp' 1; /* low-level enable */
font-feature-settings: 'smcp' 0; /* low-level disable */

all-small-caps

The small-caps value will only replace lowercase letters with small caps. To replace all letters with small caps (which is probably what you want) you need to use all-small-caps.

font-variant-caps: all-small-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'smcp' 1, 'c2sc' 1; /* low-level enable */
font-feature-settings: 'smcp' 1, 'c2sc' 0; /* low-level disable */

petite-caps

Standard small caps will typically appear slightly larger than the x-height of the font. Some typefaces have additional small caps that match the x-height. These are called petite-caps.

font-variant-caps: petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'pcap' 1; /* low-level enable */
font-feature-settings: 'pcap' 0; /* low-level disable */

all-petite-caps

Similarly to all-small-caps, this converts all letters, both lower and uppercase, to petite caps.

font-variant-caps: all-petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'pcap' 1, 'c2pc' 1; /* low-level enable */
font-feature-settings: 'pcap' 1, 'c2pc' 0; /* low-level disable */

unicase

font-variant-caps: unicase; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'unic' 1; /* low-level enable */
font-feature-settings: 'unic' 0; /* low-level disable */

titling-caps

font-variant-caps: titling-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'titl' 1; /* low-level enable */
font-feature-settings: 'titl' 0; /* low-level disable */

font-variant-numeric

The proper display of numerals varies greatly depending on context. Here are some general rules:

In running/body text, use proportional old-style numerals
For headings, use proportional lining numerals
Within numeric tables, use tabular lining numerals

You can combine values to achieve, for example, tabular lining numerals like this:

font-variant-numeric: lining-nums tabular-nums;

lining-nums

Lining numerals approximate capital letters and are uniform in height. They should be used in headings or numeric tables. Usually numbers are lining figures by default.

font-variant-numeric: lining-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'lnum' 1; /* low-level enable */
font-feature-settings: 'lnum' 0; /* low-level disable */

oldstyle-nums

Old-style numerals have varying heights and alignments and are therefore more similar to lowercase letters. They should be used in running text.

font-variant-numeric: oldstyle-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'onum' 1; /* low-level enable */
font-feature-settings: 'onum' 0; /* low-level disable */

proportional-nums

font-variant-numeric: proportional-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'pnum' 1; /* low-level enable */
font-feature-settings: 'pnum' 0; /* low-level disable */

tabular-nums

Tabular numerals have the same width and should be used in numeric tables to allow vertical alignment of numbers.

font-variant-numeric: tabular-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'tnum' 1; /* low-level enable */
font-feature-settings: 'tnum' 0; /* low-level disable */

diagonal-fractions

By default, fractions will display as lowercase letters with a slash. Proper fractions will be formatted to match the height of a lining figure and can be either diagonal or stacked.

font-variant-numeric: diagonal-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'frac' 1; /* low-level enable */
font-feature-settings: 'frac' 0; /* low-level disable */

stacked-fractions

Stacked fractions are not as common of a feature in most web fonts as diagonal fractions, but should prove useful with heavily scientific or mathematical content.

font-variant-numeric: stacked-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'afrc' 1; /* low-level enable */
font-feature-settings: 'afrc' 0; /* low-level disable */

ordinal

font-variant-numeric: ordinal; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'ordn' 1; /* low-level enable */
font-feature-settings: 'ordn' 0; /* low-level disable */

slashed-zero

This enables an alternate zero character with a slash through it.

font-variant-numeric: slashed-zero; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'zero' 1; /* low-level enable */
font-feature-settings: 'zero' 0; /* low-level disable */

font-variant-alternates

Fonts can provide a variety of alternates for any character. The font-variant-alternates property provides many ways of controlling this character substitution.

historical-forms

font-variant-alternates: historical-forms; /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: 'hist' 1; /* low-level enable */
font-feature-settings: 'hist' 0; /* low-level disable */

stylistic(feature-value-name)

@font-feature-values 'typeface-name' {
  @stylistic { inscriptional-g: 1 }
}

font-variant-alternates: stylistic(inscriptional-g); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: salt 1; /* low-level enable */
font-feature-settings: salt 0; /* low-level disable */

styleset(feature-value-name)

@font-feature-values 'typeface-name' {
  @styleset { special-styleset: 1 }
}

font-variant-alternates: styleset(special-styleset); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: ss01; /* low-level enable */

character-variant(feature-value-name)

Use this to select specific character variants. Select a particular variant by defining a font-feature-values rule using the variant’s number.

@font-feature-values 'typeface-name' {
  @character-variant { special-variant: 1 }
}

font-variant-alternates: character-variant(special-variant); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: cv01; /* low-level enable */

swash(feature-value-name)

@font-feature-values 'typeface-name' {
  @swash { flourish: 1 }
}

font-variant-alternates: swash(flourish); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: swsh 1; /* low-level enable */
font-feature-settings: swsh 0; /* low-level disable */

ornaments(feature-value-name)

This replaces default glyphs with ornaments, if they are provided in the font.

@font-feature-values 'typeface-name' {
  @ornaments { fleurons: 1 }
}

font-variant-alternates: ornaments(fleurons); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: ornm 1; /* low-level enable */
font-feature-settings: ornm 0; /* low-level disable */

annotation(feature-value-name)

Annotations are notational forms of glyphs (for example, glyphs placed in open or solid circles, squares, parentheses, diamonds, rounded boxes. etc.).

@font-feature-values 'typeface-name' {
  @ornaments { circles: 1 }
}

font-variant-alternates: annotation(circles); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: nalt 1; /* low-level enable */
font-feature-settings: nalt 0; /* low-level disable */

Further Resources

There is a huge amount to learn about typography on the web including font variants and much more. Check out the following excellent resources for more information:

Component Reusability in React & Vue

Mon, 06 Aug 2018 19:55:00 GMT

Let’s say we are building an autocomplete component:

Take a look at the initial React component code:

class Autocomplete extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      results: props.options
    }
  }

  searchList(event) {
    const results = this.props.options
      .filter(option =>
        option.toLowerCase().includes(
          event.target.value.toLowerCase()
        )
      )
    this.setState({ results })
  }

  render() {
    return (
      
        
        
          
            {this.state.results.map(option => (
              
                {option}
              
            ))}
          
        
      
    )
  }
}

Imagine that instead of a dropdown containing the search results, you want a tag-like list of search results that always display:

At their core, the functionality of these two components is very similar: type into an input to filter a list.

Render props in React

Let’s look at the SearchSelect component first:

class SearchSelect extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      results: props.options
    }
  }

  searchList(event) {
    const results = this.props
      .filterMethod(
        this.props.options,
        event.target.value
      )
    this.setState({ results })
  }

  render() {
    return this.props.render({
      results: this.state.results,
      searchList: (event) => this.searchList(event)
    })
  }
}

Our SearchSelect component is handling the lowest level functionality — filtering a list of options based on a query string. It is then using the special render prop to render an element.

import SearchSelect from './search-select'

class Autocomplete extends React.Component {
  constructor(props) {
    super(props)
  }

  filterMethod (options, query) {
    return options.filter(option =>
      option.toLowerCase().includes(
        query.toLowerCase()
      )
    )
  }

  render() {
    return (
       (
          
            
            
              {results.map(option => (
                {option}
              ))}
            
          
        )}
      />
    )
  }
}

All this means that we can write whatever markup we want, as long as we properly hydrate it with the data and behavior exposed by the SearchSelect component.

Also, note how we are passing the method for filtering our list in as a prop. This will allow us to change the way our list of options is filtered, while still using the SearchSelect component.

Implementing the Tag List Variant

Let’s look at how we would implement our tag-like list component. We use the same SearchSelect core component and just change the markup rendered by the render prop:

import SearchSelect from './search-select'

class TagListSearch extends React.Component {
  constructor(props) {
    super(props)
  }

  filterMethod(options, query) {
    return options.filter(option =>
      option.toLowerCase().includes(
        query.toLowerCase()
      )
    )
  }

  render() {
    return (
       (
          
            
            
              {results.map(result => (
                
                  {result}
                
              ))}
            
          
        )}
      />
    )
  }
}

Scoped slots in Vue

Vue.component('search-select', {
  props: [
    'options',
    'filterMethod'
  ],

  data() {
    return {
      query: ''
    }
  },

  computed: {
    results() {
      return this.filterMethod(
        this.options,
        this.query
      )
    }
  },

  methods: {
    setQuery(event) {
      this.query = event.target.value
    }
  },

  render() {
    return this.$scopedSlots.default({
      results: this.results,
      searchList: (event) => {
        this.setQuery(event)
      }
    })
  }
})

Vue.component('autocomplete', {
  data() {
    return {
      dropdownVisible: false
    }
  },

  methods: {
    filterMethod(options, query) {
      return options.filter(option =>
        option.toLowerCase().includes(
          query.toLowerCase()
        )
      )
    },

    showDropdown() {
      this.dropdownVisible = true
    },

    hideDropdown() {
      this.dropdownVisible = false
    }
  },

  template: html`
    
      
        
          
          
            
              
                {{ result }}
              
            
          
        
      
    
  `
})

Other uses for render props & scoped slots

Data provider components

Here’s what the base component could look like:

class FetchData extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      results: [],
      error: false
    }
  }

  componentDidMount() {
    this.fetchData(this.props.url)
  }

  fetchData(url) {
    this.setState({ loading: true })

    fetch(url)
      .then(data => data.json())
      .then(json => {
        this.setState({
          loading: false,
          results: json
        })
      })
      .catch(error => {
        this.setState({
          loading: false,
          error: true
        })
      })
  }

  render() {
    return this.props.render({
      loading: this.state.loading,
      results: this.state.results,
      error: this.state.error
    })
  }
}

It accepts a URL as a prop and handles the actual fetching logic. Then, we use it in a parent component:

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      
         (
            
              {loading && (
                Loading...
              )}
              {results.length > 0 && (
                
                  {results.map(result => (
                    
                      {result.title}
                    
                  ))}
                
              )}
              {error && (
                There was a problem loading.
              )}
            
          )}
        />
      
    )
  }
}

Observers (resize, intersection, etc.)

Here is a base component that observes its own size and exposes its height and width to its parent:

class ObserveDimensions extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      width: null,
      height: null
    }
    this.elementToObserve = React.createRef()
  }

  componentDidMount(nextProps) {
    const erd = elementResizeDetectorMaker({
      strategy: 'scroll'
    })

    erd.listenTo(
      this.elementToObserve.current,
        element => {
        this.setState({
          width: element.offsetWidth,
          height: element.offsetHeight
        })
      }
    )
  }

  render() {
    return (
      
        {this.props.render({
          width: this.state.width,
          height: this.state.height
        })}
      
    )
  }
}

We are using the Element Resize Detector library to listen to changes in our element size, and a React ref to get a reference to the actual DOM node.

We can then use this component quite easily in our app:

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      
         (
            
              Width: {width}px
              Height: {height}px
            
          )}
        />
      
    )
  }
}

Conclusion

Having a core set of renderless components that use render props or scoped slots can help you cut down on code duplication in your app and think more carefully about your core interface behaviors.

Component Variants with Scoped CSS Variables

Thu, 12 Oct 2017 20:17:00 GMT

Let’s take buttons as an example. I want to create a set of different buttons, including common variants like “primary” and “secondary”.

Base Styling

I’m going to start by giving these buttons some base styling. I can give the button a base class and then add additional classes for each variant.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 4px;
}

Defining Variables

Next, I’m going to define some variables on the :root. These will be the properties that need to change with each variant.

:root {
  --button-background-color: gray;
  --button-border-color: gray;
  --button-text-color: black;
}

I will use these to add color to my base styling:

.button {
  /* ... */
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  color: var(--button-text-color);
}

Overriding Variables for Component Variants

Finally, I will override these variable values within each variant selector.

.button.is-primary {
  --button-background-color: orange;
  --button-border-color: orange;
  --button-text-color: white;
}

.button.is-secondary {
  --button-background-color: black;
  --button-border-color: black;
  --button-text-color: white;
}

Alternate Selector Scheme

If I wanted to simplify my classes further, I could use only one class to define both the base styling and the variants.

Here I’m nesting variant selectors with PostCSS:

[class^='button'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 1rem;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  color: var(--button-text-color);

  &[class*='primary'] {
    --button-background-color: orange;
    --button-border-color: orange;
    --button-text-color: white;
  }

  &[class*='secondary'] {
    --button-background-color: black;
    --button-border-color: black;
    --button-text-color: white;
  }
}

Browser Support for CSS Variables

For browsers that do not support custom properties, you can use the PostCSS custom properties plugin. This will compile the CSS variables as static values.

Keep in mind, however, that this will not allow you to override the variable values, as the variables will no longer exist in the browser, having already been evaluated during the CSS build.

The technique for component variants described in this article is future-looking and, as more and more browsers fully support custom properties, will be able to be used in production sites.

Contextual Callouts with CSS Grid

Thu, 10 Aug 2017 20:17:00 GMT

The Grid Markup


  
    Article Heading
  
  Paragraph text
  
    
  
  Section Heading
  Paragraph text
  
    Callout text
  
  Paragraph text

Fallback Styling

Next, we’ll apply some basic styles for browsers that don’t yet support CSS grid. We’ll set a max-width of 70 characters using the ch unit:

.blog-post {
  max-width: 70ch;
}

Using CSS Grid

Now, let’s progressively enhance for browsers that do support CSS grid using a @supports query:

@supports(display: grid) {
  .blog-post {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 2rem;
  }
}

Now it’s time to start placing content on the grid:

.blog-post header {
  grid-column-start: 3;
  grid-column-end: span 2;
}

.blog-post h2,
.blog-post p,
.blog-post figure {
  grid-column-start: 5;
  grid-column-end: span 4;
}

The post header and content now sit next to each other in a row. The callouts are up next:

.blog-post aside {
  position: relative;
  grid-column-start: 3;
  grid-column-end: 5;
}

.blog-post aside p {
  position: absolute;
}

Since setting up asides requires using absolute positioning, you need to be careful that one aside does not overlap the proceeding one.

Bonus: Full-Width Figures

I can easily style figures within the post so that they stretch across the full width of the grid container. The rest of the content remains at a narrower width.

.blog-post figure {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 2rem;
  grid-column-start: 1;
  grid-column-end: -1;
}

.blog-post figure img {
  grid-column-start: 1;
  grid-column-end: -1;
}

.blog-post figure figcaption {
  grid-column-start: 5;
  grid-column-end: span 4;
}

Controlling Element Visibility with the Intersection Observer API

Wed, 18 Oct 2017 20:17:00 GMT

I decided to experiment and push IntersectionObserver to its limits.

The HTML and CSS

I have a simple grid of cards that is styled using CSS grid:

...

.card-grid {
  display: grid;
  grid-template-columns: repeat(
      auto-fill,
      minmax(100px, 1fr)
  );
  grid-gap: 45px;
}

Creating the Observers

const options = {
  rootMargin: '-100px',
  threshold: [0.5, 1]
}

const observer = new IntersectionObserver(callback, options);

const targets = document.querySelectorAll('.card');
targets.forEach(target => observer.observe(target));

Setup the Callback

The callback function gives me an array of entries—each entry is essentially an intersection change. I can check the intersectionRatio on each entry and apply some styling appropriately.

const callback = entries => {
  entries.forEach(entry => {
    const ratio = entry.intersectionRatio;

    // look at the ratio and do stuff to each element
  });
}

I use a switch statement to apply different styling for different ratios:

switch (true) {
  case (ratio === 1):
    entry.target.style.opacity = 1;
    entry.target.style.transform = 'scale(1.25)';
    return;

  case (ratio < 1 && ratio >= 0.5):
    entry.target.style.opacity = 0.5;
    entry.target.style.transform = 'scale(1.1)';
    return;

  case (ratio < 0.5):
    entry.target.style.opacity = 0.15;
    entry.target.style.transform = 'scale(1.0)';
    return;

  default:
    return;
}

Conclusion

Implicit State Sharing in React & Vue

Mon, 05 Nov 2018 22:14:59 GMT

Imagine this is your ideal API:


  
    
      Header content
    
    
      Panel content

One possibility is exposing the expanded value to your user through render props and making sure your documentation lets them know that they need to pass that down to the header and panel components.


   (
    
      Header content
    
    
      Panel content
    
  )} />

It should also be noted that while this is a trivial example, your component may be far more complex, with multiple levels of nested components, in which case prop drilling may become quite tedious.

What we really need is a way to implicitly pass down props.

Using React Context

const AccordionItemContext = React.createContext({
  expanded: false,
  toggleExpansion: () => {}
})

Now, inside our AccordionItem component, we will define the expanded and toggleExpansion values and feed them in as the value of the Provider component.

class AccordionItem extends React.Component {
  constructor(props) {
    super(props)

    this.toggleExpansion = () => {
      this.setState({
        expanded: !this.state.expanded
      });
    }

    this.state = {
      expanded: false,
      toggleExpansion: this.toggleExpansion
    }
  }

  render() {
    return (
      
        
          {this.props.children}
        
      
    )
  }
}

The Provider is one half of the React Context equation. The other half is the Consumer. The Provider allows the Consumer to subscribe to context changes, as we will see soon.

Next, we need to set up AccordionHeader and AccordionPanel as consumers of this context:

const AccordionHeader = props => {
  return (
    
      {({ expanded, toggleExpansion }) => (
        
          
        
      )}
    
  )
}

We will similarly use Consumer to give AccordionPanel access to the context value:

const AccordionPanel = props => {
  return (
    
      {({ expanded }) =>
        
          {props.children}
        
      }
    
  )
}


  
    
      Header content
    
    
      Panel content

Provide/Inject in Vue

Vue provides a similar tool to React’s Context API, called provide/inject. To use this, we will use the provide method on our accordion-item Vue component:

Vue.component('accordion-item', {
  data() {
    return {
      sharedState: {
        expanded: false
      }
    }
  },

  provide() {
    return {
      accordionItemState: this.sharedState
    }
  },

  render(createElement) {
    return createElement(
      'div',
      { class: 'accordion-item' },
      this.$slots.default
    )
  }
})

Note that we are using a render function here to create this component, but this is not necessary to use provide/inject.

Vue.component('accordion-header', {
  inject: ['accordionItemState'],

  template: html`
    
      
    
  `
})

Once we include the property name in inject, we have access to those values in our template.

Vue.component('accordion-panel', {
  inject: ['accordionItemState'],

  template: html`
    
      
    
  `
})

Use with Caution

React Context and Vue’s provide/inject feature both make it possible to do this through implicit state sharing.

Input Types Cheat Sheet

Fri, 20 Jun 2025 19:59:00 GMT

Text Inputs

Name	Code	Example
Text input
Search input
Number input
Email input
Password input
Telephone input
URL input

Temporal Inputs

Name	Code	Example
Date input
Time input
Month input (Chrome/Edge only)
Week input (Chrome/Edge only)
Datetime input

Dynamic SVGs in Light & Dark Mode

Sun, 25 May 2025 12:55:00 GMT

For SVGs in particular, there is a better way to respond to theme changes using CSS variables. The SVG must be loaded inline within your page’s HTML.

Here is an SVG I’ve exported from a graphics program (I’m using Sketch):

I’ve written a script to be run via the command line that will go through at all the SVGs in a particular directory, look for certain hex codes, and replace those with references to CSS variables.

const fs = require("fs");
const path = require("path");

const hexToCssVariables = {
  "#fafafa": "#27272a",
  "#262626": "#f5f5f5",
  "#d4d4d4": "#525252",
  "#e6594c": "#e6594c"
};

const inputDir = path.join(
  __dirname,
  "../content/illustrations"
);
const outputDir = path.join(
  __dirname,
  "../public/assets/illustrations"
);

// Ensure output directory exists
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// Read all images from the input directory
fs.readdirSync(inputDir).forEach((file) => {
  const inputFile = path.join(inputDir, file);
  const outputFile = path.join(outputDir, file);

  if (inputFile.endsWith(".svg")) {
    fs.readFile(
      inputFile,
      "utf-8",
      function (err, data) {
        if (err) throw err;

        let svgContent = data;

        // replace each hex code with a CSS variable reference
        Object.keys(hexToCssVariables).forEach((hex) => {
          const cssVar = hexToCssVariables[hex];
          const regex = new RegExp(hex, "gi");
          svgContent = svgContent.replace(regex, cssVar);
        });

        // generate the new SVG file
        fs.writeFile(
          outputFile,
          svgContent,
          "utf-8",
          function (err) {
            if (err) throw err;
          }
        );
      }
    );
  }
});

I have the CSS variables defined in my styles and have set them up to change based on the presence of a dark class on my root element.

:root {
  --accent: #ff6354;

  --illustration-accent: var(--accent);
  --illustration-background: #fafafa;
  --illustration-black: #262626;
  --illustration-gray: #d4d4d4;
}

.dark {
  --accent: #e6594c;

  --illustration-background: #27272a;
  --illustration-black: #f5f5f5;
  --illustration-gray: #525252;
}

Live Theming with CSS Variables

Sat, 19 Aug 2017 20:17:00 GMT

The process is fairly simple—set up initial variable values in CSS, mark up some inputs, add event listeners and set the values in JavaScript. Let’s get started!

Set Up Initial Values

First we’ll set up the variables and their initial values in the :root pseudo-class. In HTML, :root represents the html element.

:root {
  --background-color: #FFFFFF;
  --text-color: #101727;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

You may also want to add some transitions for the properties that will be changing to smooth out the theme editing experience.

Create Some Inputs

Now it’s time to create the form that the user will be interacting with to customize their theme. I’m using color inputs for the color options and range inputs for the font size and line height.

Set your initial input values to match the starting values of your CSS variables. You could also set these through JavaScript on page load to remain DRY.

Set up Event Listeners

const handleInputChange = (event, property) => {
  document.documentElement.style.setProperty(
    `--${property}`,
    event.target.value
  );
};

document.getElementById('background-color')
  .addEventListener('change', event => {
    handleInputChange('background-color');
  });

That’s all it takes to set up basic interactive theming with CSS variables. We can go a step further and keep these values in localStorage so the theme settings will persist on refresh.

Store Values in localStorage

I’ll edit my handleInputChange function to store values in localStorage:

const handleInputChange = (event, property) => {
  document.documentElement.style.setProperty(
    `--${property}`,
    event.target.value
  );

  localStorage.setItem(property, newValue);
};

const setValueFromLocalStorage = property => {
  const value = localStorage.getItem(property);
  document.documentElement.style.setProperty(
    `--${property}`,
    value
  );

  const input = document.getElementById(property);
  input.value = value;
}

document.addEventListener('DOMContentLoaded', () => {
  setValueFromLocalStorage('background-color');
});

Now, refresh your page to see a persistent theme!

Bonus: Pre-Defined Themes

If you want to offer some pre-defined themes, in addition to the free-form inputs, simply create a method that sets all the variables to pre-defined values and hook it up to an event listener.

Now, I just need to call this function with the values I want to set on the appropriate trigger:

setTheme({
  'background-color': '#FFFFFF',
  'text-color': '#101727'
});

CSS variables make live theming easy. Hopefully this gets you started playing around with the fun things that CSS variables make possible. You can learn more about CSS variables in my article here.

Semantic Image Overlays With Object-Fit

Sun, 27 Aug 2017 20:17:00 GMT

Without object-fit

Here’s how I used to accomplish this:


  
  
    
      
        Article Title

.blog-post-teaser {
  position: relative;
  padding: 30% 0;
}

.blog-post-teaser .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-post-teaser .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

How do we improve semantics while retaining control of the image sizing? Enter object-fit.

With object-fit

Here’s what my markup looks like now:


  
    
    
      
        
          Article Title

.blog-post-teaser figure {
  position: relative;
  padding: 30% 0;
}

.blog-post-teaser figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-post-teaser img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Now the browser knows we’re serving up an image. Search engines can properly access alternative text.

System-Based Theming with Styled Components

Thu, 09 Apr 2020 20:18:26 GMT

Detecting a user’s system theme involves either using the prefers-color-scheme media query in CSS, or checking the media feature in JavaScript. Browser support for these features is fairly good.

Basic System Theming

Let’s look at a basic implementation where we swap the theme object passed to Styled Component’s ThemeProvider component based on the detected system theme.

import { useState, useEffect } from "react";
const { ThemeProvider } from "styled-components";

// set up theme colors
const themes = {
  light: {
    colors: {
      text: "black",
      background: "white"
    }
  },
  dark: {
    colors: {
      text: "white",
      background: "black"
    }
  }
};

// set up styled components to use theme colors
const Wrap = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
`;

const Heading = styled.h1`
  color: ${({ theme }) => theme.colors.text};
`;

const P = styled.p`
  color: ${({ theme }) => theme.colors.text};
`;

// set up detection of system dark mode
const darkModeQuery = window.matchMedia(
  "(prefers-color-scheme: dark)"
);

const App = () => {
  // perform an initial detection of system theme
  const [theme, setTheme] = useState(
    darkModeQuery.matches ? "dark" : "light"
  );


  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setTheme(event.matches ? "dark" : "light");
    });
  });

  // pass the correct theme object to the provider
  return (
    
      
        System Theming
        Change your system theme to see this page respond
      
    
  );
};

export default App;

Supporting Disabled JavaScript with CSS Variables

import { useState, useEffect } from "react";
import { createGlobalStyle, ThemeProvider, css } from "styled-components";

// set up color values that will be used across both light and dark themes
const theme = {
  colors: {
    black: "black",
    white: "white"
  }
};

// set up light theme CSS variables
const lightValues = css`
  --text: ${({ theme }) => theme.colors.black};
  --background: ${({ theme }) => theme.colors.white};
`;

// set up dark theme CSS variables
const darkValues = css`
  --text: ${({ theme }) => theme.colors.white};
  --background: ${({ theme }) => theme.colors.black};
`;

const GlobalStyle = createGlobalStyle`
  :root {
    /* define light theme values as the defaults within the root selector */
    ${lightValues}

    /* override with dark theme values within media query */
    @media (prefers-color-scheme: dark) {
      ${darkValues}
    }
  }
`;

// set up styled components to use CSS variables
const Wrap = styled.div`
  background-color: var(--background);
`;

const Heading = styled.h1`
  color: var(--text);
`;

const P = styled.p`
  color: var(--text);
`;

const App = () => (
  
    <>
      
      
        System Theming
        Change your system theme to see this page respond
      
    
  
);

export default App;

Now, when server-side rendered, our theme will change even without JavaScript enabled, since a CSS media query is now controlling the theme values.

Custom Theme Overrides

import { useState, useEffect } from "react";
import { ThemeProvider } from "styled-components";

// ...set up themes and styled components

// set up detection of system dark mode
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");

const App = () => {
  // perform an initial detection of system theme
  const [activeTheme, setActiveTheme] = useState(
    darkModeQuery.matches ? "dark" : "light"
  );

  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setActiveTheme(
        event.matches ? "dark" : "light"
      );
    });
  });

  // set up a theme toggle method that will update our state when a user clicks the button
  const toggleTheme = () => {
    setActiveTheme(
      activeTheme === "dark" ? "light" : "dark"
    )
  }

  // pass the correct theme object to the provider
  return (
    
      
        System Theming
        
      
    
  );
};

export default App;

Persistent Custom Theme Overrides

Let’s look at a full example that uses CSS variables, supports custom overrides, and persists those overrides between sessions:

import { useState, useEffect } from "react";
import { createGlobalStyle, ThemeProvider, css } from "styled-components";

// set up color values that will be used across both light and dark themes
const theme = {
  colors: {
    black: "black",
    white: "white"
  }
};

// set up light theme CSS variables
const lightValues = css`
  --text: ${({ theme }) => theme.colors.black};
  --background: ${({ theme }) => theme.colors.white};
`;

// set up dark theme CSS variables
const darkValues = css`
  --text: ${({ theme }) => theme.colors.white};
  --background: ${({ theme }) => theme.colors.black};
`;

const GlobalStyle = createGlobalStyle`
  :root {
    /* define light theme values as the defaults within the root selector */
    ${lightValues}

    /* override with dark theme values if theme data attribute is set to dark */
    [data-theme="dark"] {
      ${darkValues}
    }

    /* support no JavaScript scenario by using media query */
    &.no-js {
      @media (prefers-color-scheme: dark) {
        ${darkValues}
      }
    }
  }
`;

// set up styled components to use CSS variables
const Wrap = styled.div`background-color: var(--background);`;

const Heading = styled.h1`
  color: var(--text);
`;

const P = styled.p`
  color: var(--text);
`;

// set up detection of system dark mode
const darkModeQuery = window.matchMedia(
  "(prefers-color-scheme: dark)"
);

// find saved theme
const savedTheme = localStorage.getItem("theme");

const App = () => {
  // set active theme to saved theme, if there is one
  // otherwise, set to system theme
  const [activeTheme, setActiveTheme] = useState(
    savedTheme
      ? savedTheme
      : darkModeQuery.matches ? "dark" : "light"
  );

  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setActiveTheme(
        event.matches ? "dark" : "light"
      );
    });
  }, []);

  // every time the active theme changes, set the theme data attribute
  useEffect(() => {
    document.body.setAttribute(
      "data-theme",
      activeTheme
    );
  }, [activeTheme]);

  // set up a theme toggle method that will update our state when a user clicks the button
  // and save the new theme in localStorage
  const toggleTheme = () => {
    const newTheme = activeTheme === "light"
      ? "dark"
      : "light";

    setActiveTheme(newTheme);
    localStorage.setItem("theme", newTheme);
  };

  return (
    
      <>
        
        
          System Theming
          
          Refresh to see the persisted preference
        
      
    
  );
};

Now, instead of using a media query to override CSS variable values, we use a data attribute set on the document body. This allows theme overrides to work.

Note that we support responding to system theme changes without JavaScript by using a no-js class and falling back to a media query. Of course, this won’t support custom overrides of the theme.

Preventing the Default Theme Flash

In head:

(function () {
  // set up method to set theme value on window, set data attribute,
  // and dispatch a custom event indicating the theme change
  function setTheme(newTheme) {
    window.__theme = newTheme;
    preferredTheme = newTheme;

    document.body.setAttribute(
      "data-theme",
      newTheme
    );

    window.dispatchEvent(
      new CustomEvent("themeChange", {
        detail: newTheme
      })
    );
  }

  // grab the saved theme
  var preferredTheme = localStorage.getItem("theme");

  // set up method to set the active theme to the user’s preferred theme
  // and save that theme for persistence
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme);
  };

  // set up detection of system dark mode
  var darkModeQuery = window.matchMedia(
    "(prefers-color-scheme: dark)"
  );

  // set up a listener to respond to future changes of system theme
  darkModeQuery.addListener(function (event) {
    window.__setPreferredTheme(
      event.matches ? "dark" : "light"
    );
  });

  // set active theme to saved theme, if there is one, or the system theme
  setTheme(
    preferredTheme ||
    (darkModeQuery.matches ? "dark" : "light")
  );
})();

In our app:

import { useState, useEffect } from "react";

// ...set up CSS variables and styled components

const App = () => {
  const [activeTheme, setActiveTheme] = useState();

  useEffect(() => {
    // set initial theme based on value set on window
    setActiveTheme(window.__theme);

    // set up listener for custom theme change event
    window.addEventListener("themeChange", (event) => {
      setActiveTheme(event.detail);
    });
  }, []);

  // allow user to manually change their theme
  const toggleTheme = (theme) => {
    window.__setPreferredTheme(theme);
  };

  // ...render content
});

export default App;

Conclusion

Typographic Details - Using Correct Spaces and Punctuation

Sun, 20 Apr 2025 11:57:00 GMT

One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy. Robert Bringhurst

Use the right spaces

Non-breaking space

Use a non-breaking space to keep words together on the same line. This prevents awkward line breaks between closely related elements, such as labels and numbers.

Page 2.

Thin space

Use a thin space to separate characters when a regular space is too big. This maintains typographic rhythm by creating subtle breathing room but avoiding excessive spacing.

Looking up he said, “She mouthed ‘I love you’ ” and then returned to his book.

Hair space

Use a hair space to prevent adjacent characters touching. This adds just enough separation to avoid visual collisions between initials without disrupting flow.

D. H. Lawrence.

Narrow no-break space

Use a narrow no-break space to prevent initials or numbers and their units from wrapping across two lines.

A hair space is 1/24 em wide.

Use the right punctuation marks

Hyphen

Use a hyphen for one of the following:

joining words to indicate they have a combined meaning
indicating missing words shared by a series of compounds
indicating stuttering speech
splitting words when breaking them across lines

Example: She wore a well-tailored jacket.

Figure dash

A figure dash has the same width as a numerical digit and is used within numbers to maintain alignment.

Example: (800‒555‒1212)

En dash

An en dash indicates range with spacing that visually balances the digits it connects.

Example: 4–5 minutes.

Em dash

Use an em dash to set off phrases. Separate em dashes from phrases with hair spaces. You can also use to indicate attribution after a quote, followed by a full space.

Example: this and that — that and this.

Minus symbol

The minus symbol is longer and sits at the mathematical midpoint—unlike the shorter hyphen.

Multiplication symbol

A proper multiplication sign avoids confusion with the letter “x” and aligns better with numerals.

Obelus

The obelus is the correct symbol for division, with visual weight that centers between operands.

Quotation marks & apostrophes

Use proper quotation marks and apostrophes (not straight marks).

Ellipsis

The proper ellipsis character (instead of three individual dots) ensures consistent spacing and baseline alignment across typefaces.

Primes

Prime marks indicate units like inches and minutes; straight apostrophes are typographic imposters.

Degree symbol

The proper degree symbol is smaller and raised—distinct from a lowercase o.

Parentheses

Parentheses and brackets are not designed to be italicized; they retain proper shape and spacing when set in roman.

Use the right characters

To learn what characters to use, read my article about better typography with font variants.

Unlocking the Benefits of CSS Variables

Tue, 24 Oct 2017 20:17:00 GMT

I want to take a quick look at the benefits of CSS custom properties and go over some lesser known features that may come in handy.

Benefits of CSS Custom Properties

They’re Native

They’re Live

This also means that all variable expressions and calc statements using CSS custom properties will be recalculated when the variable is redefined.

Here we are redefining a grid gutter within a media query and using that custom property inside calc() statements:

:root {
  --grid-gutter: 1rem;
}

@media (min-width: 600px) {
  :root {
    --grid-gutter: 1.25rem;
  }
}

.grid {
  display: grid;
  grid-gap: var(--grid-gutter);
  margin-left: calc(-1 * var(--grid-gutter));
  margin-right: calc(-1 * var(--grid-gutter));
}

They Cascade

A clear use case for this is theme switching:

:root {
  --body-background-color: white;
  --body-text-color: black;
}

body {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}

.dark {
  --body-background-color: black;
  --body-text-color: white;
}

They Work Anywhere

Here’s an example of overriding default Bootstrap Sass typography variables to use custom properties.

$font-size-h1: calc(var(--font-size-base) * 2.6) !default;
$font-size-h2: calc(var(--font-size-base) * 2.15) !default;
$font-size-h3: calc(var(--font-size-base) * 1.7) !default;
$font-size-h4: calc(var(--font-size-base) * 1.25) !default;
$font-size-h5: var(--font-size-base) !default;
$font-size-h6: calc(var(--font-size-base) * 0.85) !default;

Using Fallback Values

Simply pass in the default value as the second argument of the var() function:

/* single fallback */
.button {
  background-color: var(--button-background-color, gray);
}

You can provide multiple fallbacks by nesting multiple var() functions inside of each other:

/* multiple fallbacks */
.button-primary {
  background-color: var(
    --primary-button-background-color,
    var(
      --button-background-color,
      gray
    )
  );
}

Converting Unitless Values

Here’s an example of a complex responsive font size calculation using custom properties:

:root {
  /* unitless base font size variables in px */
  --unitless-min-font-size: 15;
  --unitless-max-font-size: 18;

  /* unitless viewport widths in px */
  --unitless-lower-font-range: 460;
  --unitless-upper-font-range: 1200;

  --font-size-difference: calc(
    var(--unitless-max-font-size) -
    var(--unitless-min-font-size)
  );
  --font-range-difference: calc(
    var(--unitless-upper-font-range) -
    var(--unitless-lower-font-range)
  );
  --viewport-difference: calc(
    100vw -
    (var(--unitless-lower-font-range) * 1px)
  );
}

html {
  font-size: calc(
    (var(--unitless-min-font-size) * 1px) +
    var(--font-size-difference) *
    var(--viewport-difference) /
    var(--font-range-difference)
  );
}

Redefining Custom Properties in Media Queries

:root {
  --card-padding: 1rem;
}

@media (min-width: 600px) {
  :root {
    --card-padding: 1.25rem;
  }
}

@media (min-width: 1000px) {
  :root {
    --card-padding: 1.5rem;
  }
}

.card {
  padding: var(--card-padding);
}

Learn how to use custom properties to enable live theming in my article Live Theming with CSS Variables.

What’s the Deal with Margin Collapse?

Sun, 11 Mar 2018 20:17:00 GMT

What makes margins adjoining?

The key is understanding when two margins are adjoining. Here are the basic situations:

Sibling Elements

The bottom margin of an element collapses with the top margin of its proceeding sibling.

Child Elements

The top margin of an element collapses with the top margin of its first child element.

The bottom margin of an element collapses with the bottom margin of its last child element.

An Element’s Own Top and Bottom Margins

The top and bottom margins of an element collapse if the element has no height, padding, or border and all of its children elements’ margins collapse (height is represented here only for clarity).

When does margin collapse not occur?

If the parent element has a top border or padding, the parent’s top margin does not collapse with the first child’s top margin.

If the parent element has a bottom border or padding, the parent’s bottom margin does not collapse with the last child’s bottom margin.

Further Resources

There are some additional, more complex scenarios that prevent collapse that aren’t covered here. For updated and complete information, see the CSS Box Model Spec.

Advanced CSS-Only HTML Form Styling

Tue, 31 Oct 2017 20:17:00 GMT

:placeholder-shown


  
  Enter some text

.form-group {
  position: relative;
  padding-top: 1.5rem;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease-out;
}

input:placeholder-shown + label {
  opacity: 0;
  transform: translateY(1rem);
}

:required

Required input

input:required + .help-text::before {
  content: '*Required';
}

:optional

This selector does the opposite of :required. I am again using an empty .help-text span to display some optional text if the required attribute is NOT present.

input:optional + .help-text::before {
  content: '*Optional';
}

:disabled

This one should be familiar to most of you, but still important to remember. It’s pretty essential to display whether or not an input is disabled to a user.

&:disabled {
  border-color: var(--gray-lighter);
  background-color: var(--gray-lightest);
  color: var(--gray-light);
}

:read-only

An input with the readonly attribute should convey a slightly different meaning than a disabled input. Thankfully we have this selector to help with that.

input:read-only {
  border-color: var(--gray-lighter);
  color: var(--gray);
  cursor: not-allowed;
}

:valid

Here I am encoding an svg to display a checkbox in the input using the background-image property.

input:valid {
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,...");
}

:invalid

This selector checks if an input is currently NOT passing the native browser validation rules (for example, if an email input does not contain a real email).

Again, I am encoding an svg to display an ‘x’ in the input.

input:invalid {
  border-color: var(--color-error);
  background-image: url("data:image/svg+xml,...");
}

I can also customize some validation messages for each input type using the .help-text span and the ::before pseudo-element.

Invalid input

input[type='email']:invalid + .help-text::before {
  content: 'You must enter a valid email.'
}

:in-range/:out-of-range

These selectors detect whether the value of a number input is within the min/max values specified or not.

Out-of-range input

(value must be between 1 and 10)

input:out-of-range + .help-text::before {
  content: 'Out of range';
}

:checked


  
  Option

&:checked + label::before {
  background-color: var(--color-primary);
}

&:checked + label::after {
  display: block;
  position: absolute;
  top: 0.2rem;
  left: 0.375rem;
  width: 0.25rem;
  height: 0.5rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: '';
}

Better Typography with Font Variants

Sun, 07 Jan 2018 20:17:00 GMT

However, this is quickly changing thanks to the increasing availability of OpenType features in web fonts and the ability to control those features with CSS.

This article is an overview of how to control OpenType features using CSS, but remember that whatever web font you are using will also need to support these features.

The font-variant- Properties

body {
  font-feature-settings: "liga" 1;
}

@supports (font-variant-ligatures: common-ligatures) {
  body {
    font-feature-settings: normal;
    font-variant-ligatures: common-ligatures;
  }
}

font-variant-ligatures

Ligatures are single glyphs made from two or more characters. They typically prevent ugly or awkward letter collisions and, therefore, aid legibility.

common-ligatures

These are ligatures that the type designer has decided should be used in normal conditions. In most circumstances you should use these. Most browsers enable them by default.

font-variant-ligatures: common-ligatures; /* enable */
font-variant-ligatures: no-common-ligatures; /* disable */

font-feature-settings: 'liga' 1; /* low-level enable */
font-feature-settings: 'liga' 0; /* low-level disable */

discretionary-ligatures

These are ligatures which can be used for typographic purposes, for example to achieve a special effect. These are disabled by default.

font-variant-ligatures: discretionary-ligatures; /* enable */
font-variant-ligatures: no-discretionary-ligatures; /* disable */

font-feature-settings: 'dlig' 1; /* low-level enable */
font-feature-settings: 'dlig' 0; /* low-level disable */

contextual

These are alternate ligatures that are affected by their surrounding context. They often harmonize the shapes of grouped glyphs. These are enabled by default.

font-variant-ligatures: contextual; /* enable */
font-variant-ligatures: no-contextual; /* disable */

font-feature-settings: 'calt' 1; /* low-level enable */
font-feature-settings: 'calt' 0; /* low-level disable */

historical-ligatures

These are ligatures which could be considered a subset of discretionary, but are specifically used to achieve a historical effect. These are disabled by default.

font-variant-ligatures: historical-ligatures; /* enable */
font-variant-ligatures: no-historical-ligatures; /* disable */

font-feature-settings: 'hlig' 1; /* low-level enable */
font-feature-settings: 'hlig' 0; /* low-level disable */

font-variant-position

Thankfully, there is now a way to enable true subscripts and superscripts with font-variant-position. Note that currently only Firefox supports this.

sub

This enables true subscript characters, which are positioned specifically for use in footnotes and scientific formulas.

font-variant-position: sub; /* enable */
font-variant-position: normal; /* disable both variants */

font-feature-settings: 'subs' 1; /* low-level enable */
font-feature-settings: 'subs' 0; /* low-level disable */

super

This enables true superscript characters, which are sized and positioned specifically for use in mathematical expressions and scientific formulas.

font-variant-position: super; /* enable */
font-variant-position: normal; /* disable both variants */

font-feature-settings: 'sups' 1; /* low-level enable */
font-feature-settings: 'sups' 0; /* low-level disable */

font-variant-caps

A capital is not a capital is not a capital. The most significant use of font-variant-caps is to enable small caps, although there are several other options available.

small-caps

Small caps are designed to be the same height as lowercase letters and are used to capitalize words within running text. They make for a more cohesive and readable paragraph.

font-variant-caps: small-caps;  /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'smcp' 1; /* low-level enable */
font-feature-settings: 'smcp' 0; /* low-level disable */

all-small-caps

The small-caps value will only replace lowercase letters with small caps. To replace all letters with small caps (which is probably what you want) you need to use all-small-caps.

font-variant-caps: all-small-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'smcp' 1, 'c2sc' 1; /* low-level enable */
font-feature-settings: 'smcp' 1, 'c2sc' 0; /* low-level disable */

petite-caps

Standard small caps will typically appear slightly larger than the x-height of the font. Some typefaces have additional small caps that match the x-height. These are called petite-caps.

font-variant-caps: petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'pcap' 1; /* low-level enable */
font-feature-settings: 'pcap' 0; /* low-level disable */

all-petite-caps

Similarly to all-small-caps, this converts all letters, both lower and uppercase, to petite caps.

font-variant-caps: all-petite-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'pcap' 1, 'c2pc' 1; /* low-level enable */
font-feature-settings: 'pcap' 1, 'c2pc' 0; /* low-level disable */

unicase

font-variant-caps: unicase; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'unic' 1; /* low-level enable */
font-feature-settings: 'unic' 0; /* low-level disable */

titling-caps

font-variant-caps: titling-caps; /* enable */
font-variant-caps: normal; /* disable all variants */

font-feature-settings: 'titl' 1; /* low-level enable */
font-feature-settings: 'titl' 0; /* low-level disable */

font-variant-numeric

The proper display of numerals varies greatly depending on context. Here are some general rules:

In running/body text, use proportional old-style numerals
For headings, use proportional lining numerals
Within numeric tables, use tabular lining numerals

You can combine values to achieve, for example, tabular lining numerals like this:

font-variant-numeric: lining-nums tabular-nums;

lining-nums

Lining numerals approximate capital letters and are uniform in height. They should be used in headings or numeric tables. Usually numbers are lining figures by default.

font-variant-numeric: lining-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'lnum' 1; /* low-level enable */
font-feature-settings: 'lnum' 0; /* low-level disable */

oldstyle-nums

Old-style numerals have varying heights and alignments and are therefore more similar to lowercase letters. They should be used in running text.

font-variant-numeric: oldstyle-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'onum' 1; /* low-level enable */
font-feature-settings: 'onum' 0; /* low-level disable */

proportional-nums

font-variant-numeric: proportional-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'pnum' 1; /* low-level enable */
font-feature-settings: 'pnum' 0; /* low-level disable */

tabular-nums

Tabular numerals have the same width and should be used in numeric tables to allow vertical alignment of numbers.

font-variant-numeric: tabular-nums; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'tnum' 1; /* low-level enable */
font-feature-settings: 'tnum' 0; /* low-level disable */

diagonal-fractions

By default, fractions will display as lowercase letters with a slash. Proper fractions will be formatted to match the height of a lining figure and can be either diagonal or stacked.

font-variant-numeric: diagonal-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'frac' 1; /* low-level enable */
font-feature-settings: 'frac' 0; /* low-level disable */

stacked-fractions

Stacked fractions are not as common of a feature in most web fonts as diagonal fractions, but should prove useful with heavily scientific or mathematical content.

font-variant-numeric: stacked-fractions; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'afrc' 1; /* low-level enable */
font-feature-settings: 'afrc' 0; /* low-level disable */

ordinal

font-variant-numeric: ordinal; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'ordn' 1; /* low-level enable */
font-feature-settings: 'ordn' 0; /* low-level disable */

slashed-zero

This enables an alternate zero character with a slash through it.

font-variant-numeric: slashed-zero; /* enable */
font-variant-numeric: normal; /* disable all variants */

font-feature-settings: 'zero' 1; /* low-level enable */
font-feature-settings: 'zero' 0; /* low-level disable */

font-variant-alternates

Fonts can provide a variety of alternates for any character. The font-variant-alternates property provides many ways of controlling this character substitution.

historical-forms

font-variant-alternates: historical-forms; /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: 'hist' 1; /* low-level enable */
font-feature-settings: 'hist' 0; /* low-level disable */

stylistic(feature-value-name)

@font-feature-values 'typeface-name' {
  @stylistic { inscriptional-g: 1 }
}

font-variant-alternates: stylistic(inscriptional-g); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: salt 1; /* low-level enable */
font-feature-settings: salt 0; /* low-level disable */

styleset(feature-value-name)

@font-feature-values 'typeface-name' {
  @styleset { special-styleset: 1 }
}

font-variant-alternates: styleset(special-styleset); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: ss01; /* low-level enable */

character-variant(feature-value-name)

Use this to select specific character variants. Select a particular variant by defining a font-feature-values rule using the variant’s number.

@font-feature-values 'typeface-name' {
  @character-variant { special-variant: 1 }
}

font-variant-alternates: character-variant(special-variant); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: cv01; /* low-level enable */

swash(feature-value-name)

@font-feature-values 'typeface-name' {
  @swash { flourish: 1 }
}

font-variant-alternates: swash(flourish); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: swsh 1; /* low-level enable */
font-feature-settings: swsh 0; /* low-level disable */

ornaments(feature-value-name)

This replaces default glyphs with ornaments, if they are provided in the font.

@font-feature-values 'typeface-name' {
  @ornaments { fleurons: 1 }
}

font-variant-alternates: ornaments(fleurons); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: ornm 1; /* low-level enable */
font-feature-settings: ornm 0; /* low-level disable */

annotation(feature-value-name)

Annotations are notational forms of glyphs (for example, glyphs placed in open or solid circles, squares, parentheses, diamonds, rounded boxes. etc.).

@font-feature-values 'typeface-name' {
  @ornaments { circles: 1 }
}

font-variant-alternates: annotation(circles); /* enable */
font-variant-alternates: normal; /* disable all variants */

font-feature-settings: nalt 1; /* low-level enable */
font-feature-settings: nalt 0; /* low-level disable */

Further Resources

There is a huge amount to learn about typography on the web including font variants and much more. Check out the following excellent resources for more information:

Component Reusability in React & Vue

Mon, 06 Aug 2018 19:55:00 GMT

Let’s say we are building an autocomplete component:

Take a look at the initial React component code:

class Autocomplete extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      results: props.options
    }
  }

  searchList(event) {
    const results = this.props.options
      .filter(option =>
        option.toLowerCase().includes(
          event.target.value.toLowerCase()
        )
      )
    this.setState({ results })
  }

  render() {
    return (
      
        
        
          
            {this.state.results.map(option => (
              
                {option}
              
            ))}
          
        
      
    )
  }
}

Imagine that instead of a dropdown containing the search results, you want a tag-like list of search results that always display:

At their core, the functionality of these two components is very similar: type into an input to filter a list.

Render props in React

Let’s look at the SearchSelect component first:

class SearchSelect extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      results: props.options
    }
  }

  searchList(event) {
    const results = this.props
      .filterMethod(
        this.props.options,
        event.target.value
      )
    this.setState({ results })
  }

  render() {
    return this.props.render({
      results: this.state.results,
      searchList: (event) => this.searchList(event)
    })
  }
}

Our SearchSelect component is handling the lowest level functionality — filtering a list of options based on a query string. It is then using the special render prop to render an element.

import SearchSelect from './search-select'

class Autocomplete extends React.Component {
  constructor(props) {
    super(props)
  }

  filterMethod (options, query) {
    return options.filter(option =>
      option.toLowerCase().includes(
        query.toLowerCase()
      )
    )
  }

  render() {
    return (
       (
          
            
            
              {results.map(option => (
                {option}
              ))}
            
          
        )}
      />
    )
  }
}

All this means that we can write whatever markup we want, as long as we properly hydrate it with the data and behavior exposed by the SearchSelect component.

Also, note how we are passing the method for filtering our list in as a prop. This will allow us to change the way our list of options is filtered, while still using the SearchSelect component.

Implementing the Tag List Variant

Let’s look at how we would implement our tag-like list component. We use the same SearchSelect core component and just change the markup rendered by the render prop:

import SearchSelect from './search-select'

class TagListSearch extends React.Component {
  constructor(props) {
    super(props)
  }

  filterMethod(options, query) {
    return options.filter(option =>
      option.toLowerCase().includes(
        query.toLowerCase()
      )
    )
  }

  render() {
    return (
       (
          
            
            
              {results.map(result => (
                
                  {result}
                
              ))}
            
          
        )}
      />
    )
  }
}

Scoped slots in Vue

Vue.component('search-select', {
  props: [
    'options',
    'filterMethod'
  ],

  data() {
    return {
      query: ''
    }
  },

  computed: {
    results() {
      return this.filterMethod(
        this.options,
        this.query
      )
    }
  },

  methods: {
    setQuery(event) {
      this.query = event.target.value
    }
  },

  render() {
    return this.$scopedSlots.default({
      results: this.results,
      searchList: (event) => {
        this.setQuery(event)
      }
    })
  }
})

Vue.component('autocomplete', {
  data() {
    return {
      dropdownVisible: false
    }
  },

  methods: {
    filterMethod(options, query) {
      return options.filter(option =>
        option.toLowerCase().includes(
          query.toLowerCase()
        )
      )
    },

    showDropdown() {
      this.dropdownVisible = true
    },

    hideDropdown() {
      this.dropdownVisible = false
    }
  },

  template: html`
    
      
        
          
          
            
              
                {{ result }}
              
            
          
        
      
    
  `
})

Other uses for render props & scoped slots

Data provider components

Here’s what the base component could look like:

class FetchData extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      results: [],
      error: false
    }
  }

  componentDidMount() {
    this.fetchData(this.props.url)
  }

  fetchData(url) {
    this.setState({ loading: true })

    fetch(url)
      .then(data => data.json())
      .then(json => {
        this.setState({
          loading: false,
          results: json
        })
      })
      .catch(error => {
        this.setState({
          loading: false,
          error: true
        })
      })
  }

  render() {
    return this.props.render({
      loading: this.state.loading,
      results: this.state.results,
      error: this.state.error
    })
  }
}

It accepts a URL as a prop and handles the actual fetching logic. Then, we use it in a parent component:

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      
         (
            
              {loading && (
                Loading...
              )}
              {results.length > 0 && (
                
                  {results.map(result => (
                    
                      {result.title}
                    
                  ))}
                
              )}
              {error && (
                There was a problem loading.
              )}
            
          )}
        />
      
    )
  }
}

Observers (resize, intersection, etc.)

Here is a base component that observes its own size and exposes its height and width to its parent:

class ObserveDimensions extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      width: null,
      height: null
    }
    this.elementToObserve = React.createRef()
  }

  componentDidMount(nextProps) {
    const erd = elementResizeDetectorMaker({
      strategy: 'scroll'
    })

    erd.listenTo(
      this.elementToObserve.current,
        element => {
        this.setState({
          width: element.offsetWidth,
          height: element.offsetHeight
        })
      }
    )
  }

  render() {
    return (
      
        {this.props.render({
          width: this.state.width,
          height: this.state.height
        })}
      
    )
  }
}

We are using the Element Resize Detector library to listen to changes in our element size, and a React ref to get a reference to the actual DOM node.

We can then use this component quite easily in our app:

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      
         (
            
              Width: {width}px
              Height: {height}px
            
          )}
        />
      
    )
  }
}

Conclusion

Having a core set of renderless components that use render props or scoped slots can help you cut down on code duplication in your app and think more carefully about your core interface behaviors.

Component Variants with Scoped CSS Variables

Thu, 12 Oct 2017 20:17:00 GMT

Let’s take buttons as an example. I want to create a set of different buttons, including common variants like “primary” and “secondary”.

Base Styling

I’m going to start by giving these buttons some base styling. I can give the button a base class and then add additional classes for each variant.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 4px;
}

Defining Variables

Next, I’m going to define some variables on the :root. These will be the properties that need to change with each variant.

:root {
  --button-background-color: gray;
  --button-border-color: gray;
  --button-text-color: black;
}

I will use these to add color to my base styling:

.button {
  /* ... */
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  color: var(--button-text-color);
}

Overriding Variables for Component Variants

Finally, I will override these variable values within each variant selector.

.button.is-primary {
  --button-background-color: orange;
  --button-border-color: orange;
  --button-text-color: white;
}

.button.is-secondary {
  --button-background-color: black;
  --button-border-color: black;
  --button-text-color: white;
}

Alternate Selector Scheme

If I wanted to simplify my classes further, I could use only one class to define both the base styling and the variants.

Here I’m nesting variant selectors with PostCSS:

[class^='button'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.5rem;
  padding: 0 1rem;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  color: var(--button-text-color);

  &[class*='primary'] {
    --button-background-color: orange;
    --button-border-color: orange;
    --button-text-color: white;
  }

  &[class*='secondary'] {
    --button-background-color: black;
    --button-border-color: black;
    --button-text-color: white;
  }
}

Browser Support for CSS Variables

For browsers that do not support custom properties, you can use the PostCSS custom properties plugin. This will compile the CSS variables as static values.

Keep in mind, however, that this will not allow you to override the variable values, as the variables will no longer exist in the browser, having already been evaluated during the CSS build.

The technique for component variants described in this article is future-looking and, as more and more browsers fully support custom properties, will be able to be used in production sites.

Contextual Callouts with CSS Grid

Thu, 10 Aug 2017 20:17:00 GMT

The Grid Markup


  
    Article Heading
  
  Paragraph text
  
    
  
  Section Heading
  Paragraph text
  
    Callout text
  
  Paragraph text

Fallback Styling

Next, we’ll apply some basic styles for browsers that don’t yet support CSS grid. We’ll set a max-width of 70 characters using the ch unit:

.blog-post {
  max-width: 70ch;
}

Using CSS Grid

Now, let’s progressively enhance for browsers that do support CSS grid using a @supports query:

@supports(display: grid) {
  .blog-post {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 2rem;
  }
}

Now it’s time to start placing content on the grid:

.blog-post header {
  grid-column-start: 3;
  grid-column-end: span 2;
}

.blog-post h2,
.blog-post p,
.blog-post figure {
  grid-column-start: 5;
  grid-column-end: span 4;
}

The post header and content now sit next to each other in a row. The callouts are up next:

.blog-post aside {
  position: relative;
  grid-column-start: 3;
  grid-column-end: 5;
}

.blog-post aside p {
  position: absolute;
}

Since setting up asides requires using absolute positioning, you need to be careful that one aside does not overlap the proceeding one.

Bonus: Full-Width Figures

I can easily style figures within the post so that they stretch across the full width of the grid container. The rest of the content remains at a narrower width.

.blog-post figure {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 2rem;
  grid-column-start: 1;
  grid-column-end: -1;
}

.blog-post figure img {
  grid-column-start: 1;
  grid-column-end: -1;
}

.blog-post figure figcaption {
  grid-column-start: 5;
  grid-column-end: span 4;
}

Controlling Element Visibility with the Intersection Observer API

Wed, 18 Oct 2017 20:17:00 GMT

I decided to experiment and push IntersectionObserver to its limits.

The HTML and CSS

I have a simple grid of cards that is styled using CSS grid:

...

.card-grid {
  display: grid;
  grid-template-columns: repeat(
      auto-fill,
      minmax(100px, 1fr)
  );
  grid-gap: 45px;
}

Creating the Observers

const options = {
  rootMargin: '-100px',
  threshold: [0.5, 1]
}

const observer = new IntersectionObserver(callback, options);

const targets = document.querySelectorAll('.card');
targets.forEach(target => observer.observe(target));

Setup the Callback

The callback function gives me an array of entries—each entry is essentially an intersection change. I can check the intersectionRatio on each entry and apply some styling appropriately.

const callback = entries => {
  entries.forEach(entry => {
    const ratio = entry.intersectionRatio;

    // look at the ratio and do stuff to each element
  });
}

I use a switch statement to apply different styling for different ratios:

switch (true) {
  case (ratio === 1):
    entry.target.style.opacity = 1;
    entry.target.style.transform = 'scale(1.25)';
    return;

  case (ratio < 1 && ratio >= 0.5):
    entry.target.style.opacity = 0.5;
    entry.target.style.transform = 'scale(1.1)';
    return;

  case (ratio < 0.5):
    entry.target.style.opacity = 0.15;
    entry.target.style.transform = 'scale(1.0)';
    return;

  default:
    return;
}

Conclusion

Implicit State Sharing in React & Vue

Mon, 05 Nov 2018 22:14:59 GMT

Imagine this is your ideal API:


  
    
      Header content
    
    
      Panel content

One possibility is exposing the expanded value to your user through render props and making sure your documentation lets them know that they need to pass that down to the header and panel components.


   (
    
      Header content
    
    
      Panel content
    
  )} />

It should also be noted that while this is a trivial example, your component may be far more complex, with multiple levels of nested components, in which case prop drilling may become quite tedious.

What we really need is a way to implicitly pass down props.

Using React Context

const AccordionItemContext = React.createContext({
  expanded: false,
  toggleExpansion: () => {}
})

Now, inside our AccordionItem component, we will define the expanded and toggleExpansion values and feed them in as the value of the Provider component.

class AccordionItem extends React.Component {
  constructor(props) {
    super(props)

    this.toggleExpansion = () => {
      this.setState({
        expanded: !this.state.expanded
      });
    }

    this.state = {
      expanded: false,
      toggleExpansion: this.toggleExpansion
    }
  }

  render() {
    return (
      
        
          {this.props.children}
        
      
    )
  }
}

The Provider is one half of the React Context equation. The other half is the Consumer. The Provider allows the Consumer to subscribe to context changes, as we will see soon.

Next, we need to set up AccordionHeader and AccordionPanel as consumers of this context:

const AccordionHeader = props => {
  return (
    
      {({ expanded, toggleExpansion }) => (
        
          
        
      )}
    
  )
}

We will similarly use Consumer to give AccordionPanel access to the context value:

const AccordionPanel = props => {
  return (
    
      {({ expanded }) =>
        
          {props.children}
        
      }
    
  )
}


  
    
      Header content
    
    
      Panel content

Provide/Inject in Vue

Vue provides a similar tool to React’s Context API, called provide/inject. To use this, we will use the provide method on our accordion-item Vue component:

Vue.component('accordion-item', {
  data() {
    return {
      sharedState: {
        expanded: false
      }
    }
  },

  provide() {
    return {
      accordionItemState: this.sharedState
    }
  },

  render(createElement) {
    return createElement(
      'div',
      { class: 'accordion-item' },
      this.$slots.default
    )
  }
})

Note that we are using a render function here to create this component, but this is not necessary to use provide/inject.

Vue.component('accordion-header', {
  inject: ['accordionItemState'],

  template: html`
    
      
    
  `
})

Once we include the property name in inject, we have access to those values in our template.

Vue.component('accordion-panel', {
  inject: ['accordionItemState'],

  template: html`
    
      
    
  `
})

Use with Caution

React Context and Vue’s provide/inject feature both make it possible to do this through implicit state sharing.

Input Types Cheat Sheet

Fri, 20 Jun 2025 19:59:00 GMT

Text Inputs

Name	Code	Example
Text input
Search input
Number input
Email input
Password input
Telephone input
URL input

Temporal Inputs

Name	Code	Example
Date input
Time input
Month input (Chrome/Edge only)
Week input (Chrome/Edge only)
Datetime input

Dynamic SVGs in Light & Dark Mode

Sun, 25 May 2025 12:55:00 GMT

For SVGs in particular, there is a better way to respond to theme changes using CSS variables. The SVG must be loaded inline within your page’s HTML.

Here is an SVG I’ve exported from a graphics program (I’m using Sketch):

I’ve written a script to be run via the command line that will go through at all the SVGs in a particular directory, look for certain hex codes, and replace those with references to CSS variables.

const fs = require("fs");
const path = require("path");

const hexToCssVariables = {
  "#fafafa": "#27272a",
  "#262626": "#f5f5f5",
  "#d4d4d4": "#525252",
  "#e6594c": "#e6594c"
};

const inputDir = path.join(
  __dirname,
  "../content/illustrations"
);
const outputDir = path.join(
  __dirname,
  "../public/assets/illustrations"
);

// Ensure output directory exists
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// Read all images from the input directory
fs.readdirSync(inputDir).forEach((file) => {
  const inputFile = path.join(inputDir, file);
  const outputFile = path.join(outputDir, file);

  if (inputFile.endsWith(".svg")) {
    fs.readFile(
      inputFile,
      "utf-8",
      function (err, data) {
        if (err) throw err;

        let svgContent = data;

        // replace each hex code with a CSS variable reference
        Object.keys(hexToCssVariables).forEach((hex) => {
          const cssVar = hexToCssVariables[hex];
          const regex = new RegExp(hex, "gi");
          svgContent = svgContent.replace(regex, cssVar);
        });

        // generate the new SVG file
        fs.writeFile(
          outputFile,
          svgContent,
          "utf-8",
          function (err) {
            if (err) throw err;
          }
        );
      }
    );
  }
});

I have the CSS variables defined in my styles and have set them up to change based on the presence of a dark class on my root element.

:root {
  --accent: #ff6354;

  --illustration-accent: var(--accent);
  --illustration-background: #fafafa;
  --illustration-black: #262626;
  --illustration-gray: #d4d4d4;
}

.dark {
  --accent: #e6594c;

  --illustration-background: #27272a;
  --illustration-black: #f5f5f5;
  --illustration-gray: #525252;
}

Live Theming with CSS Variables

Sat, 19 Aug 2017 20:17:00 GMT

The process is fairly simple—set up initial variable values in CSS, mark up some inputs, add event listeners and set the values in JavaScript. Let’s get started!

Set Up Initial Values

First we’ll set up the variables and their initial values in the :root pseudo-class. In HTML, :root represents the html element.

:root {
  --background-color: #FFFFFF;
  --text-color: #101727;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

You may also want to add some transitions for the properties that will be changing to smooth out the theme editing experience.

Create Some Inputs

Now it’s time to create the form that the user will be interacting with to customize their theme. I’m using color inputs for the color options and range inputs for the font size and line height.

Set your initial input values to match the starting values of your CSS variables. You could also set these through JavaScript on page load to remain DRY.

Set up Event Listeners

const handleInputChange = (event, property) => {
  document.documentElement.style.setProperty(
    `--${property}`,
    event.target.value
  );
};

document.getElementById('background-color')
  .addEventListener('change', event => {
    handleInputChange('background-color');
  });

That’s all it takes to set up basic interactive theming with CSS variables. We can go a step further and keep these values in localStorage so the theme settings will persist on refresh.

Store Values in localStorage

I’ll edit my handleInputChange function to store values in localStorage:

const handleInputChange = (event, property) => {
  document.documentElement.style.setProperty(
    `--${property}`,
    event.target.value
  );

  localStorage.setItem(property, newValue);
};

const setValueFromLocalStorage = property => {
  const value = localStorage.getItem(property);
  document.documentElement.style.setProperty(
    `--${property}`,
    value
  );

  const input = document.getElementById(property);
  input.value = value;
}

document.addEventListener('DOMContentLoaded', () => {
  setValueFromLocalStorage('background-color');
});

Now, refresh your page to see a persistent theme!

Bonus: Pre-Defined Themes

If you want to offer some pre-defined themes, in addition to the free-form inputs, simply create a method that sets all the variables to pre-defined values and hook it up to an event listener.

Now, I just need to call this function with the values I want to set on the appropriate trigger:

setTheme({
  'background-color': '#FFFFFF',
  'text-color': '#101727'
});

CSS variables make live theming easy. Hopefully this gets you started playing around with the fun things that CSS variables make possible. You can learn more about CSS variables in my article here.

Semantic Image Overlays With Object-Fit

Sun, 27 Aug 2017 20:17:00 GMT

Without object-fit

Here’s how I used to accomplish this:


  
  
    
      
        Article Title

.blog-post-teaser {
  position: relative;
  padding: 30% 0;
}

.blog-post-teaser .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-post-teaser .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

How do we improve semantics while retaining control of the image sizing? Enter object-fit.

With object-fit

Here’s what my markup looks like now:


  
    
    
      
        
          Article Title

.blog-post-teaser figure {
  position: relative;
  padding: 30% 0;
}

.blog-post-teaser figcaption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.blog-post-teaser img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Now the browser knows we’re serving up an image. Search engines can properly access alternative text.

System-Based Theming with Styled Components

Thu, 09 Apr 2020 20:18:26 GMT

Detecting a user’s system theme involves either using the prefers-color-scheme media query in CSS, or checking the media feature in JavaScript. Browser support for these features is fairly good.

Basic System Theming

Let’s look at a basic implementation where we swap the theme object passed to Styled Component’s ThemeProvider component based on the detected system theme.

import { useState, useEffect } from "react";
const { ThemeProvider } from "styled-components";

// set up theme colors
const themes = {
  light: {
    colors: {
      text: "black",
      background: "white"
    }
  },
  dark: {
    colors: {
      text: "white",
      background: "black"
    }
  }
};

// set up styled components to use theme colors
const Wrap = styled.div`
  background-color: ${({ theme }) => theme.colors.background};
`;

const Heading = styled.h1`
  color: ${({ theme }) => theme.colors.text};
`;

const P = styled.p`
  color: ${({ theme }) => theme.colors.text};
`;

// set up detection of system dark mode
const darkModeQuery = window.matchMedia(
  "(prefers-color-scheme: dark)"
);

const App = () => {
  // perform an initial detection of system theme
  const [theme, setTheme] = useState(
    darkModeQuery.matches ? "dark" : "light"
  );


  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setTheme(event.matches ? "dark" : "light");
    });
  });

  // pass the correct theme object to the provider
  return (
    
      
        System Theming
        Change your system theme to see this page respond
      
    
  );
};

export default App;

Supporting Disabled JavaScript with CSS Variables

import { useState, useEffect } from "react";
import { createGlobalStyle, ThemeProvider, css } from "styled-components";

// set up color values that will be used across both light and dark themes
const theme = {
  colors: {
    black: "black",
    white: "white"
  }
};

// set up light theme CSS variables
const lightValues = css`
  --text: ${({ theme }) => theme.colors.black};
  --background: ${({ theme }) => theme.colors.white};
`;

// set up dark theme CSS variables
const darkValues = css`
  --text: ${({ theme }) => theme.colors.white};
  --background: ${({ theme }) => theme.colors.black};
`;

const GlobalStyle = createGlobalStyle`
  :root {
    /* define light theme values as the defaults within the root selector */
    ${lightValues}

    /* override with dark theme values within media query */
    @media (prefers-color-scheme: dark) {
      ${darkValues}
    }
  }
`;

// set up styled components to use CSS variables
const Wrap = styled.div`
  background-color: var(--background);
`;

const Heading = styled.h1`
  color: var(--text);
`;

const P = styled.p`
  color: var(--text);
`;

const App = () => (
  
    <>
      
      
        System Theming
        Change your system theme to see this page respond
      
    
  
);

export default App;

Now, when server-side rendered, our theme will change even without JavaScript enabled, since a CSS media query is now controlling the theme values.

Custom Theme Overrides

import { useState, useEffect } from "react";
import { ThemeProvider } from "styled-components";

// ...set up themes and styled components

// set up detection of system dark mode
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");

const App = () => {
  // perform an initial detection of system theme
  const [activeTheme, setActiveTheme] = useState(
    darkModeQuery.matches ? "dark" : "light"
  );

  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setActiveTheme(
        event.matches ? "dark" : "light"
      );
    });
  });

  // set up a theme toggle method that will update our state when a user clicks the button
  const toggleTheme = () => {
    setActiveTheme(
      activeTheme === "dark" ? "light" : "dark"
    )
  }

  // pass the correct theme object to the provider
  return (
    
      
        System Theming
        
      
    
  );
};

export default App;

Persistent Custom Theme Overrides

Let’s look at a full example that uses CSS variables, supports custom overrides, and persists those overrides between sessions:

import { useState, useEffect } from "react";
import { createGlobalStyle, ThemeProvider, css } from "styled-components";

// set up color values that will be used across both light and dark themes
const theme = {
  colors: {
    black: "black",
    white: "white"
  }
};

// set up light theme CSS variables
const lightValues = css`
  --text: ${({ theme }) => theme.colors.black};
  --background: ${({ theme }) => theme.colors.white};
`;

// set up dark theme CSS variables
const darkValues = css`
  --text: ${({ theme }) => theme.colors.white};
  --background: ${({ theme }) => theme.colors.black};
`;

const GlobalStyle = createGlobalStyle`
  :root {
    /* define light theme values as the defaults within the root selector */
    ${lightValues}

    /* override with dark theme values if theme data attribute is set to dark */
    [data-theme="dark"] {
      ${darkValues}
    }

    /* support no JavaScript scenario by using media query */
    &.no-js {
      @media (prefers-color-scheme: dark) {
        ${darkValues}
      }
    }
  }
`;

// set up styled components to use CSS variables
const Wrap = styled.div`background-color: var(--background);`;

const Heading = styled.h1`
  color: var(--text);
`;

const P = styled.p`
  color: var(--text);
`;

// set up detection of system dark mode
const darkModeQuery = window.matchMedia(
  "(prefers-color-scheme: dark)"
);

// find saved theme
const savedTheme = localStorage.getItem("theme");

const App = () => {
  // set active theme to saved theme, if there is one
  // otherwise, set to system theme
  const [activeTheme, setActiveTheme] = useState(
    savedTheme
      ? savedTheme
      : darkModeQuery.matches ? "dark" : "light"
  );

  // set up a listener to respond to future changes of system theme
  useEffect(() => {
    darkModeQuery.addListener((event) => {
      setActiveTheme(
        event.matches ? "dark" : "light"
      );
    });
  }, []);

  // every time the active theme changes, set the theme data attribute
  useEffect(() => {
    document.body.setAttribute(
      "data-theme",
      activeTheme
    );
  }, [activeTheme]);

  // set up a theme toggle method that will update our state when a user clicks the button
  // and save the new theme in localStorage
  const toggleTheme = () => {
    const newTheme = activeTheme === "light"
      ? "dark"
      : "light";

    setActiveTheme(newTheme);
    localStorage.setItem("theme", newTheme);
  };

  return (
    
      <>
        
        
          System Theming
          
          Refresh to see the persisted preference
        
      
    
  );
};

Now, instead of using a media query to override CSS variable values, we use a data attribute set on the document body. This allows theme overrides to work.

Note that we support responding to system theme changes without JavaScript by using a no-js class and falling back to a media query. Of course, this won’t support custom overrides of the theme.

Preventing the Default Theme Flash

In head:

(function () {
  // set up method to set theme value on window, set data attribute,
  // and dispatch a custom event indicating the theme change
  function setTheme(newTheme) {
    window.__theme = newTheme;
    preferredTheme = newTheme;

    document.body.setAttribute(
      "data-theme",
      newTheme
    );

    window.dispatchEvent(
      new CustomEvent("themeChange", {
        detail: newTheme
      })
    );
  }

  // grab the saved theme
  var preferredTheme = localStorage.getItem("theme");

  // set up method to set the active theme to the user’s preferred theme
  // and save that theme for persistence
  window.__setPreferredTheme = function (newTheme) {
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme);
  };

  // set up detection of system dark mode
  var darkModeQuery = window.matchMedia(
    "(prefers-color-scheme: dark)"
  );

  // set up a listener to respond to future changes of system theme
  darkModeQuery.addListener(function (event) {
    window.__setPreferredTheme(
      event.matches ? "dark" : "light"
    );
  });

  // set active theme to saved theme, if there is one, or the system theme
  setTheme(
    preferredTheme ||
    (darkModeQuery.matches ? "dark" : "light")
  );
})();

In our app:

import { useState, useEffect } from "react";

// ...set up CSS variables and styled components

const App = () => {
  const [activeTheme, setActiveTheme] = useState();

  useEffect(() => {
    // set initial theme based on value set on window
    setActiveTheme(window.__theme);

    // set up listener for custom theme change event
    window.addEventListener("themeChange", (event) => {
      setActiveTheme(event.detail);
    });
  }, []);

  // allow user to manually change their theme
  const toggleTheme = (theme) => {
    window.__setPreferredTheme(theme);
  };

  // ...render content
});

export default App;

Conclusion

Typographic Details - Using Correct Spaces and Punctuation

Sun, 20 Apr 2025 11:57:00 GMT

One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy. Robert Bringhurst

Use the right spaces

Non-breaking space

Use a non-breaking space to keep words together on the same line. This prevents awkward line breaks between closely related elements, such as labels and numbers.

Page 2.

Thin space

Use a thin space to separate characters when a regular space is too big. This maintains typographic rhythm by creating subtle breathing room but avoiding excessive spacing.

Looking up he said, “She mouthed ‘I love you’ ” and then returned to his book.

Hair space

Use a hair space to prevent adjacent characters touching. This adds just enough separation to avoid visual collisions between initials without disrupting flow.

D. H. Lawrence.

Narrow no-break space

Use a narrow no-break space to prevent initials or numbers and their units from wrapping across two lines.

A hair space is 1/24 em wide.

Use the right punctuation marks

Hyphen

Use a hyphen for one of the following:

joining words to indicate they have a combined meaning
indicating missing words shared by a series of compounds
indicating stuttering speech
splitting words when breaking them across lines

Example: She wore a well-tailored jacket.

Figure dash

A figure dash has the same width as a numerical digit and is used within numbers to maintain alignment.

Example: (800‒555‒1212)

En dash

An en dash indicates range with spacing that visually balances the digits it connects.

Example: 4–5 minutes.

Em dash

Use an em dash to set off phrases. Separate em dashes from phrases with hair spaces. You can also use to indicate attribution after a quote, followed by a full space.

Example: this and that — that and this.

Minus symbol

The minus symbol is longer and sits at the mathematical midpoint—unlike the shorter hyphen.

Multiplication symbol

A proper multiplication sign avoids confusion with the letter “x” and aligns better with numerals.

Obelus

The obelus is the correct symbol for division, with visual weight that centers between operands.

Quotation marks & apostrophes

Use proper quotation marks and apostrophes (not straight marks).

Ellipsis

The proper ellipsis character (instead of three individual dots) ensures consistent spacing and baseline alignment across typefaces.

Primes

Prime marks indicate units like inches and minutes; straight apostrophes are typographic imposters.

Degree symbol

The proper degree symbol is smaller and raised—distinct from a lowercase o.

Parentheses

Parentheses and brackets are not designed to be italicized; they retain proper shape and spacing when set in roman.

Use the right characters

To learn what characters to use, read my article about better typography with font variants.

Unlocking the Benefits of CSS Variables

Tue, 24 Oct 2017 20:17:00 GMT

I want to take a quick look at the benefits of CSS custom properties and go over some lesser known features that may come in handy.

Benefits of CSS Custom Properties

They’re Native

They’re Live

This also means that all variable expressions and calc statements using CSS custom properties will be recalculated when the variable is redefined.

Here we are redefining a grid gutter within a media query and using that custom property inside calc() statements:

:root {
  --grid-gutter: 1rem;
}

@media (min-width: 600px) {
  :root {
    --grid-gutter: 1.25rem;
  }
}

.grid {
  display: grid;
  grid-gap: var(--grid-gutter);
  margin-left: calc(-1 * var(--grid-gutter));
  margin-right: calc(-1 * var(--grid-gutter));
}

They Cascade

A clear use case for this is theme switching:

:root {
  --body-background-color: white;
  --body-text-color: black;
}

body {
  background-color: var(--body-background-color);
  color: var(--body-text-color);
}

.dark {
  --body-background-color: black;
  --body-text-color: white;
}

They Work Anywhere

Here’s an example of overriding default Bootstrap Sass typography variables to use custom properties.

$font-size-h1: calc(var(--font-size-base) * 2.6) !default;
$font-size-h2: calc(var(--font-size-base) * 2.15) !default;
$font-size-h3: calc(var(--font-size-base) * 1.7) !default;
$font-size-h4: calc(var(--font-size-base) * 1.25) !default;
$font-size-h5: var(--font-size-base) !default;
$font-size-h6: calc(var(--font-size-base) * 0.85) !default;

Using Fallback Values

Simply pass in the default value as the second argument of the var() function:

/* single fallback */
.button {
  background-color: var(--button-background-color, gray);
}

You can provide multiple fallbacks by nesting multiple var() functions inside of each other:

/* multiple fallbacks */
.button-primary {
  background-color: var(
    --primary-button-background-color,
    var(
      --button-background-color,
      gray
    )
  );
}

Converting Unitless Values

Here’s an example of a complex responsive font size calculation using custom properties:

:root {
  /* unitless base font size variables in px */
  --unitless-min-font-size: 15;
  --unitless-max-font-size: 18;

  /* unitless viewport widths in px */
  --unitless-lower-font-range: 460;
  --unitless-upper-font-range: 1200;

  --font-size-difference: calc(
    var(--unitless-max-font-size) -
    var(--unitless-min-font-size)
  );
  --font-range-difference: calc(
    var(--unitless-upper-font-range) -
    var(--unitless-lower-font-range)
  );
  --viewport-difference: calc(
    100vw -
    (var(--unitless-lower-font-range) * 1px)
  );
}

html {
  font-size: calc(
    (var(--unitless-min-font-size) * 1px) +
    var(--font-size-difference) *
    var(--viewport-difference) /
    var(--font-range-difference)
  );
}

Redefining Custom Properties in Media Queries

:root {
  --card-padding: 1rem;
}

@media (min-width: 600px) {
  :root {
    --card-padding: 1.25rem;
  }
}

@media (min-width: 1000px) {
  :root {
    --card-padding: 1.5rem;
  }
}

.card {
  padding: var(--card-padding);
}

Learn how to use custom properties to enable live theming in my article Live Theming with CSS Variables.

What’s the Deal with Margin Collapse?

Sun, 11 Mar 2018 20:17:00 GMT

What makes margins adjoining?

The key is understanding when two margins are adjoining. Here are the basic situations:

Sibling Elements

The bottom margin of an element collapses with the top margin of its proceeding sibling.

Child Elements

The top margin of an element collapses with the top margin of its first child element.

The bottom margin of an element collapses with the bottom margin of its last child element.

An Element’s Own Top and Bottom Margins

The top and bottom margins of an element collapse if the element has no height, padding, or border and all of its children elements’ margins collapse (height is represented here only for clarity).

When does margin collapse not occur?

If the parent element has a top border or padding, the parent’s top margin does not collapse with the first child’s top margin.

If the parent element has a bottom border or padding, the parent’s bottom margin does not collapse with the last child’s bottom margin.

Further Resources

There are some additional, more complex scenarios that prevent collapse that aren’t covered here. For updated and complete information, see the CSS Box Model Spec.

Jonathan Harrell | Front-End Engineer RSS Feed

Advanced CSS-Only HTML Form Styling

:placeholder-shown

:required

:optional

:disabled

:read-only

:valid

:invalid

:in-range/:out-of-range

:checked

Better Typography with Font Variants

The font-variant- Properties

font-variant-ligatures

common-ligatures

discretionary-ligatures

contextual

historical-ligatures

font-variant-position

sub

super

font-variant-caps

small-caps

all-small-caps

petite-caps

all-petite-caps

unicase

titling-caps

font-variant-numeric

lining-nums

oldstyle-nums

proportional-nums

tabular-nums

diagonal-fractions

stacked-fractions

ordinal

slashed-zero

font-variant-alternates

historical-forms

stylistic(feature-value-name)

styleset(feature-value-name)

character-variant(feature-value-name)

swash(feature-value-name)

ornaments(feature-value-name)

annotation(feature-value-name)

Further Resources

Component Reusability in React & Vue

Render props in React

Implementing the Tag List Variant

Scoped slots in Vue

Other uses for render props & scoped slots

Data provider components

Observers (resize, intersection, etc.)

Conclusion

Component Variants with Scoped CSS Variables

Base Styling

Defining Variables

Overriding Variables for Component Variants

Alternate Selector Scheme

Browser Support for CSS Variables

Contextual Callouts with CSS Grid

The Grid Markup

Section Heading

Fallback Styling

Using CSS Grid

Bonus: Full-Width Figures

Controlling Element Visibility with the Intersection Observer API

The HTML and CSS

Creating the Observers

Setup the Callback

Conclusion

Implicit State Sharing in React & Vue

Using React Context

{expanded ? '→ ' : '↓ '} {props.children}

Provide/Inject in Vue

{{ accordionItemState.expanded ? '→' : '→' }}

Use with Caution

Input Types Cheat Sheet

Text Inputs

Temporal Inputs