+++LIVE+++ #WWSIV heute gegen 20:00 Uhr LIVE auf Twitch! +++LIVE+++

Die blutige Kante von CSS

Folge №45 · Veröffentlicht am: · Spielzeit: 109 Minuten

Der 🔥te 💩 aus der aktuellen „State of CSS“-Umfrage kompiliert in ein bitgewordenes Audioerlebnis! U.A.: neue CSS-Einheiten für Viewports, einfärbbare Schriftarten, Trigonometrie mit CSS, Nesting, neue Möglichkeiten Bilder zu beschneiden, HDR-Farben und vieles vieles mehr! Dazu reichen wir einen einfachen Trick Google-Font DSGVO Abmahnungen zu vermeiden + Serien und Filmempfehlungen. BÄM!

Shownotes

Begrüßung – [00:00:54]

Retro

  • Constantin: DSGVO und Google Fonts – [00:04:15]
  • Moritz: Web Views in MacOS – [00:10:34]
  • Constantin: Sovereign Tech Fund – [00:15:56]
  • Moritz: Niemals nachträglich die Größe von Buttons ändern – [00:22:28]
  • Moritz: Worms WMD – [00:25:42]

Property der Woche: document.currentScript – [00:29:22]

Tagesthema: Neues aus „The State of CSS“ – [00:33:33]

  1. object-view-box – [00:35:25]
  2. Viewport-Percentage Length Units – [00:37:27]
  3. Media Queries Range Contexts – [00:42:40]
  4. currentColor – [00:46:12]
  5. color-mix() – [00:50:17]
  6. Wide Gamut Colors – [00:51:30]
  7. Relative Colors – [00:54:39]
  8. Gradient Color Spaces – [00:57:21]
  9. scroll-behavior – [01:00:00]
  10. scrollbar-gutter – [01:01:37]
  11. font-palette – [01:12:18]
  12. prefers-contrast und forced-colors – [00:1:17:27]
  13. :focus-visible – [00:1:19:41]
  14. :has() – [01:21:45]
  15. :where() – [01:22:02]
  16. Cascade Layers – [01:22:43]
  17. Shadow DOM ::part() – [01:25:06]
  18. Trigonometric Functions – [01:26:18]
    1. Artikel von Michelle Barker
  19. Nesting – [01:28:13]
  20. image-set() – [01:32:28]
  21. image() – [01:34:29]

WEEERBUUUNG – [01:38:24]

GeilTeil: BBC „Ghosts“ – [01:39:16]

Das Ende – [01:45:51]

Kommentare

Name

Scheppkommentierte

am

`document.currentScript` haben wir bei der Rheinischen Post genutzt, um responsiv das passende Werbemittel zu aktivieren (https://schepp.dev/posts/ad-integration-in-2020/#ads-%26-responsiveness) und um `document.write` asynchron und damit lazy-fähig zu machen: https://schepp.dev/posts/ad-integration-in-2020/#lazy-loading-ads-for-better-performance

Der IE hatte dafür schon seit jeher die `.readyState`-Eigenschaft für Script-Elemente, die für das momentan aktive Script ein ‚interactive‘ zurück gab. Leider wurde die proprietäre Eigenschaft in IE 11 abgeschafft, das standardkonforme `document.currentScript` aber erst eine Version später in Edge 12 eingebaut, weshalb man die Lücke mit einem schlau konzipierten Polyfill überbrücken musste: https://github.com/amiller-gh/currentScript-polyfill

Kommentiere!
Folgendes HTML erlaubt
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

Die E-Mail-Adresse wird nicht öffentlich angezeigt.

Wir sind im Moment live auf Twitch!