Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Die meisten Webdesigner werden in ihrem Stylesheet einen sog. CSS-Reset verwenden. Dieser Codeabschnitt zu Beginn des Dokuments, normt die unterschiedlichen Grundeinstellungen verschiedener Browser und erleichtert dadurch die Arbeit mit CSS enorm. Wenn allerdings einmal etwas nicht funktioniert, kann es schwierig werden herauszufinden welche Eigenschaft des Resets den Fehler verursacht hat. Der Decompactor hilft.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Wofür ein CSS Decompactor?

CSS-Resets werden in der Regel stark komprimiert geschrieben. Viele Selektoren werden gemeinsam angesprochen und mit den neuen Eigenschaften überschrieben. Das spart Dateigröße und ist übersichtlicher.
Beim Bugfixing hingegen kann diese Zusammenfassung lästig werden, denn es ist nicht sofort klar welcher Bestandteil des Resets den Fehler verursacht hat. Tools wie Firebug erleichtern die Arbeit leider auch nicht, da die Eigenschaften für mehrere Selektoren gemeinsam geändert werden. Um schnell zu einer Lösung zu kommen, müsste der CSS-Reset in seine Einzelteile aufgelöst werden – und genau das macht der Decompactor.

Wie arbeitet der Decompactor?

Ihr kopiert einen beliebigen CSS-Codeabschnitt in den Decompactor und erhaltet als Ausgabe ein aufgeschlüsseltes Dokument.

Mit diesem Code überschreibt ihr anschließend den Reset-Bereich eures Stylesheets, könnt den Fehler nun schnell mit Firebug & Co. beheben und im letzten Schritt den Reset wieder komprimieren.

johndyer.name/lab/cssdecompactor

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 2 Kommentare

  1. Manfred
    schrieb am 05.03.2012 um 12:15 Uhr:

    aus diesem Grund werden bei unseren Projekten die CSS/JS-Dateien grundsätzlich nicht komprimiert, sondern die Daten via PHP (minify –> http://code.google.com/p/minify/ ) komprimiert an den Client gesendet.

    Antworten
  2. Daniel
    schrieb am 05.03.2012 um 11:04 Uhr:

    Wie konnte dein Blog bis jetzt an mir vorbei gehen? Ein neuer Platz in meinem Feed-Reader ist belegt :-)

    Aber darum geht es ja hier nicht. Danke für diesen Tipp, den erst letztens als ich das Aussehen eines jQuery-Plugins ändern wollte, hätte ich dieses Toll gebraucht. Da war der ganze CSS-Code nicht nur nebeneinander sondern auch super verschachtelt!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: