Font Squirrel

Manchmal möchte man ja gerne eine bestimmte Schritfart beim Design einer Website nutzen, hat aber dann das Problem, dass nicht jeder Besucher auch genau diese Schrift installiert hat. Mittlerweile gibt es für dieses Problem verschiedene Lösungen. Eine davon ist die Nutzung des font-face Generators von Font Squirrel.

Der Online-Dienst wandelt beliebige Schriftarten in verschiedene Formate um die man dann mit der font-face CSS-Eigenschaft nutzen kann um sie auf einer Homepage zu nutzen.

Wenn man die Dateien die Font Squirrel zurückliefert auf den eigenen Server hochgeladen hat kann man sie wie folgt in CSS bekanntmachen:

@font-face {
    font-family: 'KomikaTitleRegular';
    src: url('KomikaTitle-webfont.eot');
    src: url('KomikaTitle-webfont.eot?#iefix') format('embedded-opentype'),
         url('KomikaTitle-webfont.woff') format('woff'),
         url('KomikaTitle-webfont.ttf') format('truetype'),
         url('KomikaTitle-webfont.svg#KomikaTitleRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

und dann ganz normal benutzen:

.test {
    font-family: KomikaTitleRegular;
}

Man sollte allerdings immer im Hinterkopf behalten, dass sich doch solche Konstruktionen die Ladezeiten einer Seite verlängern und nicht 100% garantiert ist, dass die Fonts auf allen Browsern funktionieren.

Besten dank an Andi für den Tipp

CSS3 Buttonize Framework

Da die Standard-HTML-Formularbuttons ja "netterweise" je nach Betriebssystem und verwendetem Browser unterschiedlich aussehen nutzen viele Leute heutzutage eigene Buttons für die Navigation und für Formulare.

Das CSS3 Buttonize Framework ist ein CSS3-Framework welches die Erstellung von gut aussehenden Buttons sehr erleichtert. Man kann damit sehr einfach Buttons erstellen die auf allen modernen Browsern gleich aussehen. Dabei kann man einfach über diverse CSS-Klassen bestimmen welche Farbe ein Button hat, ob ein Icon angezeigt werden soll und Einiges mehr.

Wen die "Einschränkung" auf moderne Browser nicht stört sollte sich die Buttons anschauen – praktisch sind sie auf jeden Fall.

Sprite Cow

Wer das Blog schon ein wenig länger liest wird bemerkt haben, dass ich mich im Allgemeinen bemühe Lösungen vorzustellen die auf möglichst allen grossen Browsern funktionieren. Bei Sprite Cow mache ich da mal eine kleine Ausnahme weil die Seite einfach zu praktisch ist um sie nicht vorzustellen

Bei Sprite Cow kann man ein Bild hochladen und daraus dann CSS-Sprites generieren (wenn man Firefox oder Chrome benutzt!). Das Ganze funktioniert dabei halb-automatisch. Angenommen man lädt eine PNG-Datei hoch auf der Sprites mit transparentem Hintergrund platziert sind und klickt nun eine der Grafiken an, dann ermittelt Sprite Cow automatisch die genaue Höhe und Breite und gibt die entsprechende CSS-Definition aus. Das ist ungemein praktisch wenn man eine Grafik mit unterschiedlich grossen Sprites hat. Je nach Grafik klickt man einfach nur kurz eines der Elemente an oder legt einen groben Rahmen per Drag & Drop um den Teil einer Grafik den man als Sprite nutzen möchte und Sprite Cow ermittelt die genaue Grösse.

Am Besten ihr geht einfach mal auf die Seite und klickt auf den "Load Example" Button – dann wird ganz schnell klar wie es funktioniert

CSS Lint

Dem Einen oder Anderen von Euch wird Lint sicher schonmal im Umfeld von Programmiersprachen wie C untergekommen sein. Lint ist/war (im Grunde ist es heute für die meisten Programmiersprachen überflüssig) ein Tool zur statischen Code-Analyse und dient z.B. dafür nicht initialisierte Variablen oder Ähnliches zu finden.

CSS Lint überträgt dieses Prinzip nun auf CSS-Dateien. Man übergibt der Website eine beliebige CSS-Datei und diese wird dann analysiert. Das Tool erkennt dann z.B. logische Fehler wie die Nutzung von “padding-right” bei “display: inline” Elementen, leere Elemente und vieles mehr.

Wer wert auf saubere CSS-Definitionen legt sollte die Seite mal ausprobieren

Seit Ende letzten Jahres gibt es von ihm und Clemens Gull das "HTML5 Handbuch" zu kaufen. Allerdings gibt es auch von diesem Buch eine komplett lesbare Online-Version.

Das Buch dreht sich ausschliesslich um HTML5, das Thema JavaScript wird diesmal nicht mit behandelt!

Wer sich für das Thema interessiert sollte definitiv mal in das Buch reinschauen (und am Besten auch das Buch kaufen ) wenn es Euch weiterhilft.