Isolation

Set whether an element must create a new stacking context.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari
Something went wrong while fetching the data.

Usage

Auto

Allow the element to use the default isolation behavior.

<div class="is-auto ..."></div>

Isolate

Create a new stacking context for the element.

<div class="is-i ..."></div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:is-*
Small640px
md:is-*
Medium768px
lg:is-*
Large1024px
xxl:is-*
Extra Large1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:is-*