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

17 CSS-Eigenschaften, die wir noch nicht kannten

Folge №28 · Veröffentlicht am: · Spielzeit: 133 Minuten

Jenseits von Grid, Color und Width tauchen wir ein, in die dunkle Welt der wenig bekannten CSS-Features. Kennst du z.B. schon „image-rendering“, „aspect-ratio“, „touch-action“, oder „overscroll-behavior“? Wir auch erst seit dieser Sendung. Dazu kündigen wir noch unser offizielles Merch an und erklären, warum die Tech-Commuity vermutlich vor allen anderen geimpft sein wird. Fun Fun Fun!

Shownotes

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

Retro

  • Constantin: Stack Overflow für 1,8 Milliarden US-Dollar verkauft – [00:02:20]
  • Moritz: CSS Café – [00:08:38]
  • Constantin: Gute Arbeit, die keiner bezahlen will – [00:11:48]
  • WWSIV-Merch! – [00:26:35]

Tagesthema: State of CSS revisited – [00:29:10]

  1. text-align-last: MDN / caniuse – [00:30:16]
  2. initial-letter: MDN / caniuse – [00:35:24]
  3. font-variant-numeric: MDN / caniuse – [00:38:57]
  4. font-display: MDN / caniuse – [00:42:51]
  5. image-rendering: MDN / caniuse – [00:49:12]
  6. CSS Subgrid: MDN / caniuse – [00:52:57]
  7. CSS Writing Modes: MDN / caniuse – [00:59:17]
  8. CSS Exclusions: caniuse – [01:01:24]
  9. aspect-ratio: MDN / caniuse – [01:06:39]
  10. backdrop-filter: MDN / caniuse – [01:09:07]
  11. overscroll-behavior: MDN / caniuse – [01:13:01]
  12. content-visibility: MDN / caniuse – [01:19:37]
  13. CSS Containment: MDN / caniuse – [01:24:09]
  14. touch-action: MDN / caniuse – [01:30:33]
  15. :any-link: MDN / caniuse – [01:42:33]
  16. :default: MDN / caniuse – [01:43:52]
  17. :indeterminate: MDN – [01:30:33]
  18. (overflow-anchor – hatten wir schon in Folge № 20) – [01:52:56]

Eigenwerbung – [01:55:42]

GeilTeil

Verabschiedung – [02:05:28]

Kommentare

Name

Lars Pourlardkommentierte

am

Ich mal wieder, so am Rande: bei „Free Tier“ reimt sich das englische „Tier“ (= Abstufung) tatsächlich auf das deutsche „Tier“ (= animal), eine Aussprache von „Tier“ wie „Buyer“ würde jemand bezeichnen, der z.B. freundlicherweise anderen die Schuhe bindet („to tie your laces“), das macht aber z.B. https://aws.amazon.com/free (glaube ich) nicht.

Name

Lars Pourlardkommentierte

am

Ah, gerade mal gekuckt: auf Deutsch sagt Amazon „Kostenloses Kontingent“, auf Englisch ist es der „Free Tier“

Name

Constantinkommentierte

am

Danke! Dabei bin ich sonst eigentlich immer selbst die Sprachpolizei! 🚨😄

Name

Meise2000kommentierte

am

Also die indeterminate-Checkbox setzt man z.B. bei Tabellen, wo jede Zeile einzeln per Checkbox auswählbar ist, in einer Checkbox in der Spaltenüberschrift der Checkbox-Spalte. Das kennt man z.B. bei webbasierten Mailprogrammen. Die Idee ist, dass man mit der Checkbox in der Spaltenüberschrift alle Zeilen an- bzw. abwählen kann. Wann man aber nicht alle Zeilen ausgewählt hat, muss die Checkbox in der Spaltenüberschrift genau den Zustand indeterminate bekommen…
Merken kann man sich immer den letzten klaren Zustand dieser Checkbox, wenn man eine Tabelle mit sehr vielen Einträgen hat, die nicht alle gleichzeitig im Browser angezeigt werden, sondern per Chunk geladen werden. Man kann damit z.B. eine Art Black- und Whitelist unterscheiden. Also: Ich hab eine Liste mit 100.000 Einträgen. Im Browser sind aber nur 100 geladen. Jetzt klickt der User auf die Checkbox in der Spaltenüberschrift und wählt damit alle 100.000 aus. Nun wählt er in der Liste 5 Einträge wieder ab und sagt damit „alle 100.000 außer den 5“. Zum Server muss man dann die 5 nicht ausgewählten Einträge übertragen, zusammen mit der Info, dass der Übergang der Checkbox in der Spaltenüberschrift von ausgewählt auf indeterminate gegangen ist (Blacklist).

Name

Constantinkommentierte

am

Cool, danke für dieses praktische Anwendungsbeispiel!

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!