Support CSS

1 Reply

5t3ph has way too much time at her hands...😁 Got this since Modernizr times in my projects with a custom set per project. Props become html.className. That's in essence what 5t3ph's site does.

//excerpt and helper functions not included
//tests must return a Boolean
const UAFeatures = {
  'container': ('CSSContainerRule' in window),
  'layer': ('CSSLayerRule' in window),
  'selector': supports('selector(a > b)', undefined),
  'sel-where': !!cssFindSelector(['where'], true),
  'sel-has': !!cssFindSelector(['has'], true),
  'css-clamp': supports('top', 'clamp(1px,2px,3px)'), // SF 13.4+
  'css-max': supports('top', 'max(1px,2px)'),
  'css-min': supports('top', 'min(1px,2px)'),
  'css-cq': supports('container-type', 'inline-size') && ('CSSContainerRule' in window),
  'css-logical': supports('padding-inline', '1px'),
  'css-backdrop': supports('backdrop-filter', 'blur(1px)') || supports('-webkit-backdrop-filter', 'blur(1px)'),
  'css-scheme': supports('color-scheme', 'dark'),
  'css-contain': supports("contain", "size"),
  'css-vu': supports("height", "1dvh"),
  'css-grid': supports("display", "grid"),
  'css-flex': supports("display", "flex"),
  'flex-gap': checkFlexGap(),
  'fonts': ('FontFace' in window) && !!document['fonts'],
  'dialog': ('HTMLDialogElement' in window),
  'backdrop': supports('dialog::backdrop'),
  'api-ro': ('ResizeObserver' in window),
  'api-io': ('IntersectionObserver' in window),
  'touch': ('ontouchstart' in ROOT),
  'api-vkey': ('virtualKeyboard' in navigator),
  'dark-mode': darkMode(),
  'data-save': ('connection' in navigator) && (navigator.connection.saveData === true),
  'pdf': ('pdfViewerEnabled' in navigator),
  'api-share': ('share' in navigator),
  'gecko': supports("background:-moz-element(#fu)"),
}

//excerpt and helper functions not included
//tests must return a Boolean
const UAFeatures = {
  'container': ('CSSContainerRule' in window),
  'layer': ('CSSLayerRule' in window),
  'selector': supports('selector(a > b)', undefined),
  'sel-where': !!cssFindSelector(['where'], true),
  'sel-has': !!cssFindSelector(['has'], true),
  'css-clamp': supports('top', 'clamp(1px,2px,3px)'), // SF 13.4+
  'css-max': supports('top', 'max(1px,2px)'),
  'css-min': supports('top', 'min(1px,2px)'),
  'css-cq': supports('container-type', 'inline-size') && ('CSSContainerRule' in window),
  'css-logical': supports('padding-inline', '1px'),
  'css-backdrop': supports('backdrop-filter', 'blur(1px)') || supports('-webkit-backdrop-filter', 'blur(1px)'),
  'css-scheme': supports('color-scheme', 'dark'),
  'css-contain': supports("contain", "size"),
  'css-vu': supports("height", "1dvh"),
  'css-grid': supports("display", "grid"),
  'css-flex': supports("display", "flex"),
  'flex-gap': checkFlexGap(),
  'fonts': ('FontFace' in window) && !!document['fonts'],
  'dialog': ('HTMLDialogElement' in window),
  'backdrop': supports('dialog::backdrop'),
  'api-ro': ('ResizeObserver' in window),
  'api-io': ('IntersectionObserver' in window),
  'touch': ('ontouchstart' in ROOT),
  'api-vkey': ('virtualKeyboard' in navigator),
  'dark-mode': darkMode(),
  'data-save': ('connection' in navigator) && (navigator.connection.saveData === true),
  'pdf': ('pdfViewerEnabled' in navigator),
  'api-share': ('share' in navigator),
  'gecko': supports("background:-moz-element(#fu)"),
}

This allows to write conditional CSS that goes beyond @support + provides a single source for JS to "lookup" features w/o testing for them again. Maybe I should also put the lot on Github ..? 🙄

Gaming

Programming

Support CSS