Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL that the future :has already begun

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

Gunnar Bittersmann

February 10, 2023
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. TIL that the future

    :has already begun

    View Slide

  2. TIL that the future

    :has already begun

    View Slide

  3. View Slide

  4. View Slide

  5. .haystack .needle

    View Slide

  6. .haystack .needle

    View Slide

  7. .needle:has(.haystack)
    .haystack .needle

    View Slide

  8. .needle:has(.haystack)
    .haystack .needle

    View Slide

  9. View Slide

  10. View Slide

  11. Progressive enhancement

    ⚬ ⚬⚬
    “When I say ‘this is an enhancement’,


    don’t think I’m saying ‘this is just an enhancement’.”


    — Jeremy Keith

    View Slide

  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

    View Slide

  13. TIL that the future

    :has already begun

    View Slide

  14. TIL that the future

    :has already begun

    View Slide