Seit HTML5 und CSS3 zum fest zum Alltag eines Webdesigners gehören, stellt sich immer wieder die Frage, welche Browser heute schon bestimmte CSS3 Anweisungen unterstützen und welche noch nicht. Wer heute bereits HTML5 und CSS3 Elemente einsetzt, muss wissen, ob und wie die einzelnen Browser die erstellten Websites anzeigen.
Überblick über Unterstützung von CSS3 und HTML5: findmebyIP
findmebyIP ist ein Web-Tool, welches eine grosse Anzahl von HTML5 und CSS3 Techniken und deren Unterstützung in den einzelnen Webbrowsern übersichtlich darstellt. Unter der Rubrik „Web Design“ findet man unter anderem die folgende Liste, in der die Eigenschaften für die verschiedenen Browser bequem nachgeschlagen werden können.
Die Liste ist nicht nur für Windows-, sondern auch für Mac-Browser vorhanden und bietet einen perfekten Überblick, wenn man sich überlegt, eine bestimmte Technik in einer Website einzusetzen.
Dynamische Infos zum aktuell verwendeten Browser
Das Web-Tool umfasst aber nicht nur die Übersicht zum Nachschlagen, sondern kann alle Informationen auch dynamisch aus dem aktuell verwendeten Browser herauslesen. Wenn man die Webseite findmebyIP beispielsweise mit dem Browser Chrome öffnet, werden alle Parameter, unterstützten Techniken, etc. per Javascript ausgelesen, und ebenfalls in einer übersichtlichen Tabelle dargestellt.
Zusätzlich zu den genauen Browser- HTML5- und CSS4-Informationen werden auch allgemeine Informationen zum Computer, wie IP Adresse, Land, Stadt sowie Koordinaten angegeben.
Beispiel: Unterstützung der CSS3 Eigenschaft „border-radius“
Eine gerne benutzte neue CSS3 Eigenschaft ist das Abrunden von Ecken. Bis anhin musste man dafür Bilder verwenden. Wenn man das ganze mit einer CSS Anweisung lösen kann, wird damit natürlich das Laden der entsprechenden Bilder vermieden. Ein kurzer Blick in die Tabelle von findmebyIP zeigt, welche Browser das Abrunden von Ecken per CSS unterstüzten:
Wie man sieht, werden die abgerundeten Ecken von allen modernen Browsern ausser dem Internet Explorer (zumindest bis Version 8 ) unterstützt. Wir haben die abgerundeten Ecken zum Beispiel in diesem Blog eingesetzt. Wir können deshalb in den verschiedenen Browsern kontrollieren, ob sich diese auch gemäss dieser Übersicht verhalten.
Wie man sieht, werden die Ecken in allen Browsern aussern im Internet Explorer (hier in der Version 8 verwendet) abgerundet (die abgerundeten Ecken des Headerbildes wurden im Bild selber gestaltet und gespeichert, weshalb diese abgerundeten Ecken natürlich auch im Internet Explorer dargestellt werden). Dieses Beispiel zeigt, dass CSS3 Anweisungen auch heute schon ohne Bedenken verwendet werden können. Besucher mit älteren Browsern (oder dem Internet Explorer :)) werden von der zusätzlichen Gestaltung einfach nichts mitkriegen, und wie gewohnt die nicht abgerundeten Ecken sehen. Dies ist auch ein einleuchtender Grund, weshalb es empfehlenswert ist, mit einem modernen Browser (zum Beispiel Safari) zu surfen. Man erhält bei zahlreichen mit modernen Mitteln und Techniken erstellten Webseiten zusätzliche Funktionen und Darstellungen, welche einem sonst unter Umständen entgehen würden.