Crafting UI

Browser compatibility & Progressive enhancement

Bleeding Edge CSS

Adopting modern CSS features enable developers to:

Reduce development time.
Improve code efficiency, readability, and maintainability.
Improve performance.
Create beautiful user interfaces that are seamless, efficient, and accessible.

https://developer.chrome.com/blog/css-ui-ecommerce

Kompatibilitet

Mål: Vide, hvordan vi håndterer det

caniuse

Kompatibilitet

Strategier

Progressive enhancement
- Sikrer en basisoplevelse for alle og forbedrer, hvor muligt
Graceful degradation
- Implementér det bedste først og fald elegant tilbage

.element {
  background: #0000ff;
  background: color(rec2020 0 0 1);
}

fallbacks

ikke-kritiske forbedringer

p {
  text-wrap: pretty;
}

ikke-kritiske forbedringer

html {
  interpolate-size: allow-keywords;
}

:open::details-content {
  block-size: auto;
}

ikke-kritiske forbedringer

@view-transition {
  navigation: auto;
}

https://una.im/select-updates/

<select>

https://una.im/select-updates/

<select>

ikke-kritiske forbedringer

p {
  text-wrap: pretty;
}

select,
::picker(select){
  appearance: base-select;
}

@view-transition {
  navigation: auto;
}

details {
  interpolate-size: allow-keywords;
}

:open::details-content {
  block-size: calc-size(auto, size);
}

Se efter understøttelse

h1 {
  text-box: trim-start cap alphabetic;

  @supports not (text-box-trim: trim-both) {
    margin-top: calc(.5cap - .5lh);
  }
}

Se efter understøttelse

@supports (view-timeline: --my-timeline) {
  ...
}

@supports selector(::details-content) {
  
}

@supports not (interpolate-size: allow-keywords) {
  [open]::details-content {
    ...
  }
}

@supports

<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

Polyfills eller andre teknikker

.element {
  animation: --move linear both;
  animation-timeline: view();
}

Polyfills eller andre teknikker

if (!CSS.supports('animation-timeline: scroll()')) {
  // importer GSAP