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
Schreibe einen Kommentar