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

Polyfills eller andre teknikker

Polyfills eller andre teknikker

Crafting UI: Progressive Enhancement

By Dannie Vinther

Crafting UI: Progressive Enhancement

Crafting UI w/ CSS

  • 130

More from Dannie Vinther