Anchor link to top of page
railroad 1701738 1920

HTML5 und CSS3 haben sich mittlerweile breit etabliert und bewährt. Neue Websites werden immer häufiger auf Basis dieser neuen Standards gelauncht. Durch die hohe Bandbreite im Einsatz befindlicher Clienttechnologien die teilweise modern sind, teilweise aber noch so alt, dass sie nicht mal bisher gültige Standards ausreichend unterstützen, muss man als progressiver Webentwickler eine ziemliche Grätsche machen um auch die älteren unter den gängigen Browsermodellen noch zu berücksichtigen.

CSS-Angaben die ein Browser nicht umsetzen kann, werden von ihm einfach ignoriert. Mit Hilfe der HTML5- und CSS3-Feature-Detection Library Modernizr können Browser gezielt auf ihre CSS3 Fähigkeiten „angesprochen“ werden, oder mit alternativen Stilen versorgt (beispielsweise um die Lesbarkeit von mit Schatteneffekten versehenen Schriften zu gewährleisten).

Am Beispiel meines aktuellen Browsers sehen die zusätzlichen CSS-Klassen auf Basis entdeckter Browserfeatures so aus: html class="js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths".

Nachteil: unterstüzt der Clientbrowser Javascript nicht, ist die gezielte Ansprache mittels javascriptgenerierter Klassen vergebens. Mit (noch) einer Javascript-Datei wird die Performance auch nicht unbedingt besser. CSS wird schneller interpretiert und umgesetzt.

Hier soll die CSS @supports-Regel ins Spiel kommen, die wie ein Mediaquery funktioniert und CSS-seitig klärt, welche Feauteres ein Browser unterstützt und welche nicht (not-Operator). Übrigens kann die aktuelle Version von modernizr auch herausfinden, ob ein Browser die @support-Regel unterstützt oder nicht. Für eine Ablöse der Javascript-Library modernizr ist es am derzeitgen Stand der Unterstützung zu früh.

Quellen

blog.teamtreehouse.com/thinking-ahead-native-css-feature-detection
Polyfill drop-in fill for Feature Queries

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht