Bootstrap – Twitters UI-Framework sehr beliebt
Twitter ist populär. Da wird mir niemand groß widersprechen. Doch nur wenige wissen, dass nicht nur Twitter, sondern auch sein CSS-/HTML-Framework Bootstrap sehr beliebt ist … bei Web-Entwicklern. Der Open-Source Frontend-Entwicklungswerkzeugkasten gehört zu den am meisten frequentierten Quellcode-Sammlung beim Hosting-Dienst für Software-Entwicklungsprojekte GitHub.
Das heißt, immer mehr Website-Element, wie Buttons oder Eingabefelder, werden uns in Zukunft an die von Twitter erinnern oder auf dem gleichen Framework basieren. Twitter Bootstrap enthält auf HTML5 und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-System, Navigations- und andere Gestaltungselemente für Oberflächen, sowie optional JavaScript-Erweiterungen. Und wie es sich für ein modernes Framework gehört, unterstützt es nicht nur alle gängigen Browser, sondern bietet auch Gestaltungselemente für Smartphones und Tablets an.
Wer mehr zu Bootstrap erfahren möchte, sollte den entsprechenden Artikel bei t3n lesen oder einfach bei Wikipedia vorbeischauen. Es runterladen, forken oder die Neuerungen zu Bootstrap beobachten, könnt ihr bei GitHub.
von Matthias Zellmer
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
Stylesheet-Sprache Sass bringt CSS Variablen bei
Wenn man das Programmieren erlernt, dann bekommt man es sofort mit Variablen zu tun. Und das auch aus gutem Grund. Besonders zu schätzen wusste ich zu Zeiten, als ich selbst noch regelmäßig programmierte, immer die globalen Variablen. Auf die war in aller Regel verlass. Da wusste man, wenn ich deren Wert an der Stelle, wo dieser zugewiesen wurde, verändere, dann kann ich sicher sein, dass das auch an allen Stellen, wo sie verwendet werden, ihre Wirkung zeigt. Bei der für das Web so immens wichtigen Stylesheet-Sprache CSS gibt es keine Variablen. Was mich schon immer gestört hat.
Darum (na gut, sicher auch noch aus anderen Gründen) verwenden einige Web-Entwickler Sass. Sass steht für Syntactically Awesome Stylesheets und ist im Prinzip eine syntaktische Vereinfachung von CSS, wie ein Beispiel zeigt, dass ich im zugehörigen Wikipedia-Artikel gefunden habe. Zunächst der Sass-Code:
!link_color = #00F
a
:color = !link_color
Da seht ihr auch schon den Einsatz von Variablen in Sass. Und das wird daraus, wenn Sass nach dem Coden zu CSS-Code kompiliert wurde:
a {
color: #00F
}
Sass wird in der Regel gemeinsam mit Haml (HTML Abstraction Markup Language) eingesetzt, was ihrerseits wieder eine in der Syntax vereinfachte Variante von HTML ist. Beide haben gemeinsam, dass die Sprachen nicht nur eine Vereinfachung der Syntax mit sich bringen, sondern auch noch ein paar andere nette Sachen. Bei Sass ist das z.B. das Nesting oder die Mixins. Nestings sind im Prinzip in Selektoren geschachtelte Unter-Selektoren, die bei herkömmlichem CSS unzusammenhängend auf gleicher Ebene im Code untergebracht wurden. Was meiner Ansicht nach alles andere als gut überschaubaren Code erzeugte. Mixins wiederum sind Code-Schnipsel, die man in seinem Code wiederverwenden kann, sogar mit der Möglichkeit Parameter zu übergeben. Obendrein kann man bei Sass auch die Eigenschaften bestimmtet Selektoren an andere vererben.
Alles in allem ein feine Sache, die vor allem das Schreiben von Stylesheet-Code eleganter und schlanker macht. Ambitionierte Entwickler stehen doch auf so etwas, oder?
von Matthias Zellmer
CSS3 Pie – CSS-Workarounds für alte IEs
Noch vor ein paar Jahren war es hauptsächlich der Netscape 4, der die Web-Entwickler regelmäßig zu irgendwelchen Hacks und Workarounds getrieben hat. In den letzten Jahren hat sich der Internet Explorer (IE), vor allem in der Version 6, zu dessen legitimen Nachfolger gemausert.
Eine neue Website, die Workarounds für alte IEs anbietet, ist CSS3 Pie. Derzeit ist dort nur eine Demo für einen Workaround zu Farbverläufen, Schatten und abgerundete Ecken, aber wenn ich die Ankündigung auf der Site richtig interpretieren, können wir schon bald mit weiteren Sachen rechnen.
von Matthias Zellmer
css-tricks.com … Coder-Website mit Tipps, Tricks und feinen Gestaltungstools
Der Name hat sicher historische Gründe, denn auf css-tricks.com gibt es weit mehr als nur Tricks zum Thema CSS. Besonders interessant finde ich den Download-Bereich. Dort findet man feine Tools zur Gestaltung von Websites aus den Bereichen JavaScript, Layouts/Templates, PHP und natürlich CSS.
Im Bereich JavaScript gibt es zum Beispiel das oben abgebildete InfoGrid, das mir ausgesprochen gut gefällt. Es liefert nämlich einen guten Lösungsansatz für das Problem, wenn eine Info-Tabelle eigentlich zu breit für das Layout der Content-Spalte ist. Weiter gibt es etwa bei den PHP-Sachen eine schicke Darstellung von RSS-Feeds für das iPhone und die Editable CSS3 Photo Gallery liefert eine hübsche Galerie-Ansicht, die auch Menschen mit ästhetischen Ansprüchen gefallen könnte.
Alles in allem ein sehr inspirierende Site, auch außerhalb es Download-Bereichs. Denn dort finden sich interessante Artikel und Screencasts zum Themenbereich, sowie eine ganzer Haufen an so genannten Snippets; das sind kleine, hilfreiche Code-Schnipsel für Entwickler. Außerdem gibt es noch ein Coder-Forum, in das ich aber noch nicht reingeschaut habe.
von Matthias Zellmer
Checkliste für Webdesigner
Auf findmebyip.com gibt es eine ganz ansehnlich HTML5/CSS3-Checkliste für Webdesigner. Mit ihr lässt sich recht schnell abchecken, was im Bezug auf HTML5 und CSS3 in den verschiedenen Browsern bei Mac und Windows-Rechnern alles funktioniert und vor allem, was nicht.
Es ist dabei keine große Überraschung, dass vor allem die Internet Explorer (IE 6-8) dabei nicht gerade gut abschneiden. Bleibt zu hoffen, dass der für Ende 2010 erwartete IE 9 da einiges an Boden wieder wettmacht. In der im März veröffentlichen Entwickler-Version des IE 9 soll ja gerade im Bezug auf CSS3 schon einiges möglich sein.
Gefunden habe ich den Link zu der Webdesigner’s Checklist in einem auch interessanten Dr.Web-Magazin-Artikel zum Thema Web-Typografie.
von Matthias Zellmer
