Beim surfen durch das Internet habe ich gestern ein sehr interessantes Tool gefunden. CSScomb sortiert die CSS-Attribute innerhalb von Klassen und IDs einer CSS Datei nach festgelegten Regeln. Dieses Tool ermöglicht also eine einheitliche Sortierung und bringt somit mehr Übersicht und bessere Lesbarkeit in das CSS File.

Diesen Service kann man direkt online nutzen oder alternativ in den Editoren CODA 2 und SublimeText 2 als Plugin einrichten. Ich habe das SublimeText 2 Plugin getestet und bin begeistert, mit Sicherheit werde ich CSScomb in meinen Arbeitsalltag integrieren.Yesterday during surfing thru the web I found a very interesting Tool. CSScomb, it sorts CSS_Attributes inside of Classes and IDs of an CSS-File according to fixed rules. This tool brings the ability of a better overview and readability by sorting the attributes uniform.

You can use the service online or as an alternative in the Coda2 and SublimeText2 as Plugin. I tested the SublimeText2 Plugin and I am very happy with it. Assuredly I will include this tool in my daily workflow.

Heut wurde CSS-Lint OpenSource veröffentlicht, so dass es wohl in der nächsten Zeit noch einige Verbesserungen erfahren wird und man kann es jetzt auch lokal installieren. Doch was ist CSS-Lint?

CSS Lint ist ein Tool welches dabei hilft eventuelle Probleme im CSS-Code aufzuzeigen. Dabei testet es auf Syntax sowie auf einige Regeln die später problematisch oder ineffizient werden könnten.

Die Regeln nach denen CSS Lint testet:

Parsing-Fehler welche gefixt werden söllten

CSS Lint zeigt standardmäßig jeden Parsing-Fehler an. Parsing-Fehler sind zum Beispiel falsch geschriebene Charakter, welche den Browser evt. dazu bringen die CSS-Eigenschaft zu ignorieren. Diese Parsing-Fehler werden als Error (Fehler) angezeigt und sind die wichtigsten Hinweise die gefixt werden sollten.

Keine angrenzenden Klassen verwenden

Angrenzende Klassen wie .foo.bar sind zwar technisch in CSS erlaubt aber werden schlecht von IE 7 und frühreren IE Versionen geparst.

Entferne leere Deklarationen

Zeigt jede Deklaration ohne Werte an.

.foo {}

Benutze korrekte Werte für display

Einige Werte werden in Verbindung mit display ignoriert. Hier checkt Lint folgendes:

• display: inline sollte nicht mit width, height, margin, padding oder float verwendet werden
• display: inline-block sollte nicht mit float genutzt werden
• display: block sollte nicht mit vertical-align genutzt werden
• display: table-* sollte nicht mit margin oder float genutzt werden.

Diese Probleme zu entfernen verkleinert die Dateigröße und verbessert die Performance.

Nicht zu viele floats nutzen

Für das Layout float zu nutzen ist nicht die beste Idee aber manchmal muss man dies tun. Lint checkt ob float mehr als 10 mal genutzt wurde und wenn dies so ist gibt es eine Warnung aus. Mit zu vielen floats erreicht man schnell eine Art Abstraktion im Layout.

Nicht zu viele Web-Fonts nutzen

Web-Fonts haben Auswirkungen auf die Leistung denn Font-Dateien können sehr groß sein und einige Browser blockieren das Rendering, während sie herunterzuladen. Aus diesem Grund wird CSS Lint warnen, wenn es mehr als fünf Web-Fonts in ein Stylesheet sind.

Nicht zu viele font-size Deklarationen verwenden

Wenn man mehr als 10 font-sizes deklariert hat gibt CSS Lint eine Warnung aus, da es besser ist font-size Klassen anzuwenden , diese kann man dann im Markup verwenden.

Keine IDs in Selektoren benutzen

IDs sollten nicht in Selektoren verwendet werden, da diese Regeln zu eng mit dem HTML gekoppelt sind und keine Möglichkeit der Wiederverwendung bieten. Es ist viel besser Klassen in Selektoren zu verwenden und dann eine Klasse auf ein Element in der Seite zu setzen. (aus meiner Sicht nicht so tragisch kommt aber auf den Fall an)

Nicht qualifizierte Überschriften

Überschriften-Elemente (h1-h6) sollten als Top-Level Styles deklariert sein und nicht innerhalb von Bereichen der Seite.
Hier ein Beispiel einer unqualifizierten Überschrift:

.foo h1 {  font-size:110%;}

Überschriften sollten nur einmal definiert sein

Überschriften-Elemente (h1-h6) sollten nur einmal im CSS definiert sein. CSS Lint warnt wenn es mehr findet.

Vorsichtig mit der Verwendung von width: 100% sein

Bei einem Element dessen Eltern-Element padding hat sollte man width: 100% nicht anwenden, da das Kind dann außerhalb des Eltern-Elements gezogen wird.

Null-Werte brauchen keine Einheiten

Ein Wert 0 braucht keine px-Angabe also kann man Bytes sparen indem man nicht 0px sondern nur 0 schreibt.

Hersteller-Prefixe Eigenschaften sollten auch den Standard haben

Nutzt man Hersteller Präfixe wie -moz-border-radius sollte man auch den Standard-Präfix border-radius mit angeben.

CSS-Verläufe brauchen alle Browser Präfixe

Momentan gibt es keine standardisierte Verlaufsintegration, was also bedeutet um Cross-Browser Kompatibilität zu gewährleisten muss der Verlauf für jeden Browser mit dem jeweiligen Präfix angegeben werden.

Ich denke CSS Lint bietet eine super Möglichkeit den CSS-Code auf Konsistenz zu testen und ggf. Fehler zu eliminieren.

Vermeiden Sie Selektoren die wie reguläre Ausdrücke aussehen

CSS3 fügt komplexe Attribut-Selektoren wie ~ = diese sind langsam. Bei der Verwendung von Attribut-Selektoren, verwenden Sie nicht die komplexen Gleichheitsoperatoren um Performance-Einbußen zu vermeiden.

Achten auf kaputte Box-Modelle

Borders und padding fügen Raum außerhalb des Inhalt’s eines Elements hinzu. Definieren von width oder height zusammen mit border und padding ist in der Regel ein Fehler, weil man nicht das visuelle Ergebnis bekommen, welches man erwartet. CSS Lint warnt, wenn eine Regel width oder height neben padding und / oder border verwendet. 

Welcher Designer kennt das nicht, eine top Idee für ein Screendesign aber dann kommen die Einschränkungen.

Mit dem @font-face Attribut fällt eine dieser Einschränkungen weg, denn selbst der Internet Explorer bringt die Fähigkeit für alternative Schriften per @font-face mit.

Voraussetzungen für @font-face

• TrueType oder OpenType Schrift für Firefox 3.5+ , Opera 10+, Safari 3.1+ und Chrome 4.0.249.4+
• EOT Schrift für Internet Explorer ab Version 4+

Verwendung von @font-face

1. Zuerst kopiert man die Schriften z.B. in den css Order in dem sich auch die CSS Datei befindet.
2. Nun initialisiert man die Schriften folgendermaßen in der CSS Datei:@font-face {
   font-family: ‚AeroviasBrasilNFRegular‘;
   src: url(‚aerovias_brasil_nf-webfont.eot‘);
   src: local(‚☺‘), url(‚aerovias_brasil_nf-webfont.woff‘) format(‚woff‘), url(‚aerovias_brasil_nf-webfont.ttf‘) format(‚truetype‘), url(‚aerovias_brasil_nf-webfont.svg#webfont‘) format(’svg‘);
   font-weight: normal;
   font-style: normal;
   }
3. Nun ist die Schrift (in diesem Fall AeroviasBrasilNFRegular) per @font-face „registriert“ und kann folgendermaßen aufgerufen werden:h1 {
   font-family:AeroviasBrasilNFRegular,Verdana,sans-serif;
   font-size:12px;
   }

   Nun wird die Überschrift h1 in den Browsern die @font-face unterstützen angezeigt.
   Bei Browsern die @font-face noch nicht unterstützen wird Verdana verwendet, so dass eine einwandfreie Anzeige möglich ist.

Wo komm ich an @font-face fähige Schriften?

Ich persönlich bevorzuge die Seite fontsquirrel.com, bei dieser gibt es die Möglichkeit fertige @font-face Kits (also Schriften fertig im Paketverpackt) zum Download. Alternativ zu den genannten fertigen Kits kann man einen Font hochladen und die Seite erstellt automatisch ein @font-face Kit mit diesem samt Beispieldateien im CSS- und HTML-Format. (hier ist auf den folgenden genannten Punkt mit den Rechten zu achten)

Welche Einschränkungen gibt es?

Man darf nicht jede beliebige Schrift verwenden, da die Schriften öffentlich auf dem Server liegen und von diesem heruntergeladen werden können. Es gilt also zu beachten das es sich um freie Schriften handelt die keiner Lizenz, die die kostenfreie Weitergabe untersagt bzw. nicht explizit erlaubt, unterliegt.

Ich hoffe diese Informationen waren hilfreich für euch, denn es ist eine wirklich schöne Technik die Designern neue Möglichkeiten gibt.

P.S. Auf diesem Blog kommt auch @font-face im Headerbereich, beim ART-ifact-Schriftzug, zum Einsatz.