Wie viel CSS3 kann dein Browser?
Das Webtool The CSS3 Test zeigt nicht nur recht plakativ an, wie viel Prozent der CSS3-Features der Browser unterstützt, mit dem man gerade diese Test-Website aufruft, sondern vor allem auch, welche nicht … und welche nur zum Teil. Gerade für Entwickler von Web-Oberflächen, sollte diese Website ein echte Hilfe sein.
Die 60% oben in der Grafik beziehen sich übrigens auf den Firefox 10.0 (Mac), und gerade bei der Darstellungsmanipulation von Grafiken, erreicht der aktuelle Firefox wirklich unterirdische Werte (10%). Aber auch bei Text, Schriftarten, usw. schneidet der Firefox nicht gerade gut ab. Aber auch die aktuellen Mac-Versionen von Google Chrom und Apples Safari, schaffen es nur, insgesamt gerade mal 62% der möglichen CSS3-Features zu unterstützen. Opera kommt insgesamt gar nur auf 56%.
— via Netzpiloten —
von Matthias Zellmer
Kurzvortrag: Wie wir 2016 Websites aufbauen werden
Bei einem London Web Standards Treffen, hat Peter Gasston einen interessanten Lightning Talk mit dem Titel How we’ll lay out websites in 2016 gehalten. Er stellt darin vor allem drei Varianten vor, die aktuell vom W3C zur Diskussion gestellt sind: Flexible Box Layout, Template Layout und Grid Positioning.
Die Folien zu seinem Vortrag gibt es auch online:
von Matthias Zellmer
CSS1K … auf den Spuren des CSS Zen Garden
Als 2003 der CSS Zen Garden veröffentlicht wurde, war er meiner Ansicht nach eine große Hilfe bei einer mittleren Revolution. Damit konnte man nämlich, den an HTML-Tabellen-Layout gewöhnten Entscheidern zeigen, dass es eine bessere Möglichkeit gibt, das Layout von Webseiten zu gestalten.
Doch auch der CSS Zen Garden ist inzwischen in die Jahre gekommen, und die CSS Cracks dieser Welt brauchten wohl mal wieder eine neue Plattform, um ihre Kunstfertigkeit unter Beweis zu stellen. Denn die auch als Reminiszenz an den CSS Zen Garden gedachte Website CSS1K will aufzeigen, was mit nur 1 K (1 Kibibyte = 1024 Byte) im Bezug auf die Darstellungsvielfalt mit CSS inzwischen möglich ist.
Mit JS1K gibt es so etwas auch für JavaScript …
von Matthias Zellmer
Texte im Web … mal anders
Kürzlich wurde ich mit der Frage konfrontiert, inwiefern sich auf Websites auch Schriftarten nutzen lassen, die nicht zu den üblichen Verdächtigen wie etwa Arial, Verdana oder Times New Roman zählen. In der Folge nun der Versuch einer allgemeinverständlichen Antwort.
De facto war es bis vor kurzem so, dass auf den Websites nur Schriften für die Darstellung von reinem Text genutzt wurden, die auch auf den Rechnern der Nutzer lagen. Da es ein paar Schriftarten gibt, die bei jedem Betriebssystem standardmäßig mit ausgeliefert werden, wie z.B. Arial, Times New Roman, etc., gelten diese als “websicher”.
In jedem Browser sind Schriftarten als Standard-Schriftarten voreingestellt. D.h., wenn man in eine HTML-Datei einfach nur einen Text reinschreibt und für diesen nicht via CSS speziell eine andere Schriftart angibt, dann wird dieser Text im Browser in der voreingestellten Standard-Schriftart dargestellt.
CSS gibt einem zudem noch die Möglichkeit eine Art Schriftarten-Favoriten-Liste anzugeben. Das sieht dann z.B. folgendermaßen aus:
font-family: Helvetica, Arial, sans-serif;
Diese Angabe interpretiert der Browser, in dem er von vorne nach hinten schaut, ob eine der Schriftarten auf dem Computer installiert ist und sobald er eine findet, stellt er den dazugehörigen Text in dieser dar. In dem Beispiel oben, schaut er zunächst, ob die Schriftart Helvetica installiert ist. Hat der User einen Mac, so ist dies in aller Regel der Fall. Bei einem Windows-Rechner eher nicht. Hat der User also einen Windows-Rechner, so wird der Text höchstwahrscheinlich in Arial dargestellt werden. Sollte auf dem benutzten Rechner weder Helvetica noch Arial installiert sein, so greift der Browser in der Darstellung des Textes auf die in seinen Einstellung als Standardschriftart für eine Sans-Serif-Schriftart zurück.
So ist sichergestellt, dass der Text im Normalfall in einer Schriftart dargestellt wird, die auch zum Design passt. D.h. wahrscheinlich sieht die Website mit der Schriftart Helvetica genau so aus, wie es sich der Designer gewünscht hat. Da aber Arial zwar nicht so gut aussieht, aber zumindest die Gesamtoptik nicht empfindlich stören wird, wurde diese als erste Fallback-Schriftart gewählt. Da viele Browser für Fließtext meist eine Serifen-Schriftart als Standard-Schriftart definiert haben, kann man mit sans-serif als der zweiten Fallback-Angabe immerhin noch beeinflussen, dass der Text zumindest in einer serifenfreien Schriftart dargestellt wird.
Via CSS hat man jedoch eine interessante Möglichkeit, Text in einer selbst gewählten Schriftart darzustellen, in dem man @font-face nutzt. Damit kann man eine auf einem Webserver liegende Schrift-Datei einbinden, auf die man dann in in der CSS-Eigenschaft font-face zugreifen kann. Im CSS-Code sieht dies z.B. so aus:
@font-face {
font-family: 'XYZschrift';
src: local('XYZschrift'), url('XYZschrift.ttf') format('truetype');
}
Und das Beispiel von oben lässt sich dann folgendermaßen erweitern:
font-family: XYZschrift, Helvetica, Arial, sans-serif;
In diesem Beispiel versucht der Browser zunächst die Schriftart XYZschrift zur Darstellung des entsprechenden Textes zu nutzen. Bei modernen Systemen und Browsern wird dies auch gelingen. Dort wo dies nicht gelingt, wird wieder der Reihe nach versucht werden eine Schriftart zu finden, in der sich der Text darstellen lässt.
Da es bei der Nutzung einer Schriftart auch auf die entsprechenden Lizenzen zu achten gilt, muss man beim Erwerb einer Schriftart auch darauf achten, dass man auch die Nutzungsrechte fürs Web mit erwirbt. Zudem gibt es inzwischen auch Webschrift-Anbieter, bei denen man das Recht eine Schriftart auf der Website erwerben kann, die Schriftarten jedoch auf deren Servern verbleiben. Zu diesen Anbietern gehören u.a. Typekit oder Typotheque. Auch Google gehört zu diesen Anbietern, meines Wissens muss man dort aber für die Nutzung nichts zahlen.
von Matthias Zellmer
Ceaser – Animationen via CSS
Vorgestern hab ich mit dem CSS3 Generator eine Web-Anwendung vorgestellt, die aufzeigt, was bei den modernen Browsern bei der Gestaltung von Elementen via CSS inzwischen möglich ist. Heute möchte ich da noch etwas nach reichen und Ceaser vorstellen.
Ceaser ist ein Tool, mit dem sich via CSS Elemente animieren lassen. Und auch hier kann man sich direkt den notwendigen CSS-Code generieren lassen, um die dort erzeugten Effekte direkt im eigenen Web-Projekt einsetzen zu können.
Besonders interessant an Ceaser ist allerdings, dass man hier einen Eindruck davon bekommt, was inzwischen auch ohne Flash schon möglich ist. Mir ist dazu in den Sinn gekommen, dass es sich bei Flash irgendwie nur noch um eine Brückentechnologie handelt. Aber diese Behauptung ist bestimmt nicht P.C., oder?!
von Matthias Zellmer
Die neusten Beiträge
Die neusten Kommentare
