TIL that the future :has already begun

The CSS pseudoclass :has() and progressive enhancement

For codepens and resources, see https://noti.st/gunnarbittersmann/xhyfOR/til-that-the-future-has-already-begun

Transcript

1. TIL that the future 
 :has already begun
2. TIL that the future 
 :has already begun
5. .haystack .needle
6. .haystack .needle
7. .needle:has(.haystack) .haystack .needle
8. .needle:has(.haystack) .haystack .needle
11. Progressive enhancement ⚬ ⚬ ⚬⚬ “When I say ‘this is an enhancement’, don’t think I’m saying ‘this is just an enhancement’.” — Jeremy Keith
12. Der Schlüssel zu diesem Ansatz der Webentwicklung ist die Er- kenntnis, dass es nicht ein ein- ziges Nutzerinterface gibt – es kann viele leicht verschiedene Interfaces geben, abhängig von den Eigenschaften und Fähig- keiten des jeweiligen Browsers und Gerätes zum jeweiligen Zeitpunkt. Und das ist auch völlig in Ordnung. Webseiten müssen nicht in jedem Browser gleich aussehen. „ Wenn man das so akzeptiert, ist das ein wahrhaft befreiender Gedanke. Anstatt seine Zeit mit dem Versuch zu verbringen, Webseiten in den verschieden- sten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren sicherzustellen, dass die Kernfunktion dessen, was man baut, überall funktio- niert, und gleichzeitig in fähige- ren Browsern die bestmögliche Nutzungserfahrung zu bieten.“ — Jeremy Keith
13. TIL that the future 
 :has already begun
14. TIL that the future 
 :has already begun