Skip to content

Features

Anton edited this page Feb 10, 2020 · 1 revision

TrapCSS supports all CSS selectors.

  • Supported selectors

    Common Attribute Positional Positional (of-type) Other
    * - universal
    <tag> - tag
    # - id
    . - class
      - descendant
    > - child
    + - adjacent sibling
    ~ - general sibling
    [attr]
    [attr=val]
    [attr*=val]
    [attr^=val]
    [attr$=val]
    [attr~=val]
    :first-child
    :last-child
    :only-child
    :nth-child()
    :nth-last-child()
    :first-of-type
    :last-of-type
    :only-of-type
    :nth-of-type()
    :nth-last-of-type()
    :not()
  • Retention of all transient pseudo-class and pseudo-element selectors which cannot be deterministically checked from the parsed HTML.

  • Removal of unused @font-face and @keyframes blocks.

  • Removal of unused CSS variables.

  • Deep resolution of composite CSS variables, e.g:

    :root {
      --font-style: italic;
      --font-weight: bold;
      --line-height: var(--height)em;
      --font-family: 'Open Sans';
      --font: var(--font-style) var(--font-weight) 1em/var(--line-height) var(--font-family);
      --height: 1.6;
    }
    
    @font-face {
      font-family: var(--font-family);
      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }
    
    body {
      font: var(--font);
    }