Utilities

For the minor alterations to the default look that make all the difference, missing.css has a collection of classes and custom elements.

Contents:

.vh, <v-h>: Visually hide content without hiding it from assistive software.

This is often used in conjunction with the <sub-title> element. Other uses include providing instructions for interactive elements or detailed descriptions of complex charts.

§ Container

.container: Imposes a maximum width on an element and centers it.

The <main> element does the same, but carries semantic baggage that might not be appropriate for all contexts.

§ Density

The density utilities set the --density CSS variable, which controls the amount of spacing between elements. The default value of --density is 1, which means the spacing between paragraphs is equal to the height of 1 line.

We provide the following utility classes that set --density:

Class	Density
`.packed`	`--density` = 0
`.crowded`	`--density` = 0.5
`.dense`	`--density` = 1 (same as default)
`.spacious`	`--density` = 2
`.airy`	`--density` = 3
`.autodensity`	sets density based on viewport width

You can also use the following classes to set density on child elements while maintaining a separate density for the containing element:

You can set --density yourself in inline styles or your own CSS:

Example: Setting --density with inline styles

<section id=tagline style="--density: 2">
  <h1>So easy, even a programmer can do it.</h1>
  <p>
      Missing.css makes it easy to ship beautiful applications without
      locking yourself into classless libraries.
  </p>
</section>

Example: Setting --density in a stylesheet

.link-embed {
    --density: .5; /* Embeds shouldn't take up too much space */
}

§ Typography

.bold: Sets text in boldface.
.italic: Sets text in italics. Nested italic elements (, <cite>, <dfn>, <var>, , <address>) will be set in roman instead.
.allcaps: Sets text in all caps and adds appropriate letter spacing.
.main-font: Renders the text in the main font (--main-font).
~~.primary-font~~: Deprecated: Will be removed in version 2.0. Use .main-font instead.
.secondary-font: Renders the text in the secondary font (--secondary-font).
.display-font: Renders the text in the display font (--display-font).
.mono-font: Renders the text in the monospace font (--mono-font).
.massivetext: Makes the font size really big. Scales based on line length.
.background-clip:text: Clips the background to the foreground text.

Info: You must specify the background using either the background-color or background-image CSS properties; using the short-hand background property will result in overwriting the background-clip property set by the class.

.text-stroke: Adds a stroke to the text, dictated by the --stroke-width and --stroke-color variables. By default, --stroke-color attempts to calculate a color with sufficient contrast to the currentcolor of the text, but you might need to set it explicitly.

Warning: Due to the current browser implementation of -webkit-text-stroke, the resulting effect is highly dependent on the particular font used.

.aestheticbreak: A line break added for aesthetic purposes. Usage: 
.list-of-links: Removes underlines from all links inside an element -- sometimes advisable for lists of links.

Example: Background clip markup

.gradient {
  background-image: linear-gradient(
    90deg,
    rgba(42, 123, 155, 1) 0%,
    rgba(87, 199, 133, 1) 50%,
    rgba(237, 221, 83, 1) 100%
  ); /* Note: must use the `background-image` property, not just `background` */

  --stroke-width: 2px;
  --stroke-color: black;
}

<div class="packed" style="color: var(--bg); --display-font: Georgia">
  <h2 class="massivetext text-stroke background-clip:text gradient display-font">
    Serif stroke
  </h2>
  <h2 class="massivetext text-stroke background-clip:text gradient mono-font">
    Mono stroke
  </h2>
</div>

Serif stroke

Mono stroke

§ Masquerades

The following classes can be used to make one element look like another:

To get a smaller font size, use the . masquerade.

The .<big> class makes things bigger, with special treatment for some elements. Deprecated: We have converted our .big class to a masquerade in honor of W3C deprecating the <big> HTML tag. The .big class will be removed in version 2.0.

Example: Masquerade markups

<p>This is a paragraph.</p>
<p class="<big>">This is a big paragraph.</p>

<div class="flex-row align-items:center">
  <button class="<big> bad">Big Bad Button</button>
  <a class="bad <button>" href=#>&lt;a&gt; Bad Button</a>
</div>

<aside class="<big>">
  An `<aside>` with the `.<big>` class becomes a pull quote.
</aside>

This is a paragraph

This is a big paragraph

<a> Bad Button

§ Theme selection

By default, missing.css applies a light or dark theme based on the visitor's OS settings. To force the theme independently of @prefers-color-scheme you can use the following:

~~Add the .-dark-theme class to your root element to use the dark theme.~~ Deprecated: Will be removed in version 2.0. Use <meta name=color-scheme content=dark> instead.

~~Add the .-no-dark-theme class to your root element to use the light theme.~~ Deprecated: Will be removed in version 2.0. Use <meta name=color-scheme content=light> instead.

Example: Theme toggle markup

:root:has([name=theme][value=light]:checked) { color-scheme: light      }
:root:has([name=theme][value=dark]:checked)  { color-scheme: dark       }
:root:has([name=theme][value=auto]:checked)  { color-scheme: light dark }

<fieldset>
  <legend>Select theme</legend>
  <div>
  <div><label><input type=radio name=theme value=light> Light</label></div>
  <div><label><input type=radio name=theme value=dark> Dark</label></div>
  <div><label><input type=radio name=theme value=auto> Auto</label></div>
  </div>
</fieldset>

Select theme

Light

Dark

Auto

§ Reset

~~Use the .all:initial class to reset all CSS properties on an element and return it to its browser-default styles.~~ Deprecated: Will be removed in version 2.0.

§ Print

The following utilities can be used to fine-tune the display of your webpage when it is being printed. Generally speaking, browsers have poor support for specifying page breaks inside of elements with display:flex or display:grid. We recommend using the .block@print utility class when reaching for any of the page break utilities.