CSS validieren

Das Überprüfen von Formatvorlagen in Form von Cascading Style Sheets (CSS) bleibt im Alltag oft links liegen. Mit den beiden Programmen Csstidy [28] und Cssed [29] kommen Sie Fehlern in diesen Dateien allerdings schnell und ohne viel Arbeit auf die Spur. Während Sie beim Kommandozeilenwerkzeug Csstidy im Terminal arbeiten, liefert Cssed eine grafische Oberfläche (Abbildung 3). Die Validierung starten Sie hier über die Schaltfläche mit dem grünen Haken.

Abbildung 3: Der grafische CSS-Validator Cssed bietet beim Überprüfen von CSS-Dateien viel Komfort und zahlreiche weitere Funktionen.

Csstidy validiert den CSS-Code nicht nur, sondern analysiert ihn und optimiert die darin benutzten Schlüsselbegriffe. So wandelt das Programm etwa Farben in Wortform in den entsprechenden Farbcode in RGB-Notation um, etwa "white" nach "#FFF". Darüber hinaus entfernt Csstidy überflüssige Leerzeichen, Semikolons und Mehrfachzuweisungen. Die Ausgabe in Listing 1 zeigt das anhand eines Beispielaufrufs. Insgesamt verkleinert Csstidy das Beispiel um mehr als 25 Prozent.

Listing 1

$ csstidy style.css
Selectors: 24 | Properties: 100
Input size: 2.922KiB  Output size: 2.134KiB  Compression ratio: 26.97%
-----------------------------------
body {
background:#FFF;
color:#000;
font-size:medium;
}
img {
border:none;
}
[...]
3: Optimised color: Changed "white" to "#FFF"
4: Optimised color: Changed "black" to "#000"
20: Optimised color: Changed "#DD0000" to "#D00"
38: Optimised color: Changed "white" to "#FFF"
46: Optimised color: Changed "white" to "#FFF"
47: Optimised font-weight: Changed "normal" to "400"

Kombiniert

Viele Webpräsenzen gliedern die Formatvorlagen in unterschiedliche Dateien und binden diese zu einem späteren Zeitpunkt wieder ein. Sie sollten diese Einzel-Dateien soweit wie möglich zu einer einzigen Formatvorlage zusammenfassen: So muss der Browser nicht für jede weitere CSS-Datei eine neue Verbindung öffnen. Da moderne Webbrowser versuchen, die referenzierten Daten parallel zu laden, sollten Sie zudem darauf achten, die Formatvorlagen im Kopf der HTML-Datei zu referenzieren. Dabei spielt auch der Cache des Webbrowsers eine Rolle – dort puffert der Browser externe Dateien. Nur bei einem expliziten Reload lädt er alle Daten erneut von der Originalquelle.

Prüfen Sie dabei am besten gleich mit, ob sich der Inhalt der Webseite auch ohne Formatvorlage dem Betrachter erschließt. Möglicherweise nutzten manche Leser Ihres Angebots Text-Browser, andere haben eventuell die Darstellung von CSS im Webbrowser deaktiviert, oder die Formatvorlage ging bei der Übertragung gleich ganz verloren. Beachten Sie auch, dass sich die Webcrawler der Suchmaschinenbetreiber nur für die Inhalte der Webseite interessieren und CSS ebenfalls wenig Beachtung schenken.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • out of the box
    Unsicher, ob das HTML der eigenen Webseiten richtig ist? Hat der HTML-Export der Textverarbeitung oder der HTML-Editor Unfug produziert? Mit tidy räumen Sie auf.
  • Expressversand
    Durchdachte Einstellungen beim Webserver und kleine Tricks beim Optimieren machen lahmen Webseiten Beine.
  • Links auf Webseiten überprüfen mit Linkchecker
    Manche Domains sterben einen leisen Tod – zurück bleiben verwaiste Links, die dorthin zeigen. Mit Linkchecker identifizieren Sie solche Sackgassen in Ihrer Webpräsenz.
  • HTML-Editoren
    Der Weg zur eigenen Internetseite gerät ohne passendes Werkzeug recht steinig. Während Einsteiger ohne HTML-Kenntnisse nach einer komfortablen Layout-Hilfe verlangen, stoßen Kenner schnell an die Grenzen eines einfachen Texteditors. Für beide Welten stehen unter Linux gleich mehrere Programme bereit, die antreten das Designerleben zu erleichtern.
  • Interessante Tool für HTML5-Entwickler
    "HMTL5 rocks" – das findet nicht nur Google, und so gibt es bereits eine erkleckliche Anzahl von Ressourcen, Frameworks und Werkzeugen rund um den brandneuen Web-Standard.
Kommentare

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Broadcom Adapter 802.11n nachinstallieren
Thomas Mengel, 31.10.2017 20:06, 2 Antworten
Hallo, kann man nachträglich auf einer Liveversion, MX Linux auf einem USB-Stick, nachträglich...
RUN fsck Manually / Stromausfall
Arno Krug, 29.10.2017 12:51, 1 Antworten
Hallo, nach Absturz des Rechners aufgrund fehlendem Stroms startet Linux nicht mehr wie gewohn...
source.list öffnet sich nicht
sebastian reimann, 27.10.2017 09:32, 2 Antworten
hallo Zusammen Ich habe das problem Das ich meine source.list nicht öffnen kann weiß vlt jemman...
Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 6 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...