Das heutige App kommt von MacRabbit und dreht ganz und allein um CSS.
CSS ist ja bekannter Weise fantastisch, nur nicht immer einfach. Klar margin-right und margin-left sind Standards die jeder Webdesigner im Kopf haben sollte aber bei Befehlen wie Schriftschatten, verschachtelte Anweisungen oder solchen Exoten hört die Erinnerung gerne mal auf und man muss erst einmal wieder Google bemühen um an das nötige Code Snippet zu gelangen. Auch wenn es anschließend wieder ein „achja“ im Kopf gibt 🙂
CssEdit ist ein Programm für den Mac (und nur für diesen) welches einem das Bearbeiten von CSS sehr erleichtert, denn die Sytelsheet Datei kann direkt ausgelesen und bearbeitet werden. Und nur die Stylesheet Datei.
Eine weitere Besonderheit an CssEdit ist, dass ich auf jeder x-beliebigen Website mir den Code der Styledatei auslesen lassen und direkt Änderungen vornehmen kann, die in einer Live Preview angezeigt werden. So kann ich natürlich Styles aus fremden Webseiten für meine eigene klauen – äh weiterverwenden 🙂
Das ganze funktioniert wie folgt:
Wenn ich das Programm starte habe ich zwei Fenster, eins dient als Browser und das zweite als Baustelle für den Quellcode.
Läuft eine Webseite mit mehreren Styledateien kann ich mir diese anzeigen lassen und dann die richtige auswählen:
Nur, wie komme ich an die richtige Datei?
Dafür hilft einem die X-ray (Röntgenstrahl) und Inspector Funktion ungemein.
Aktiviert man den X-ray verwandelt sich der Preview-Browser in eine Art Untersuchungstool, ähnlich wie man das bei dem Firefoxtool Firebug kennt.
Nun brauche ich mit der Maus nur noch die gewünschte Stelle auf der Webseite anklicken und schon werden mir im Inspektorfenster die Angaben geliefert um welche Datei es sich handelt und welcher Codeabschnitt ausgewählt wurde.
Im Inspector-Fenster sehe ich also nun welchen Abschnitt in der CSS Datei ich bearbeiten muss um dieses Stück Webseite zu verändern.
Um die CSS Datei ändern zu können, einfach nur einen Doppelklick im Inspector-Fenster auf den Codesnippet und schon öffnet sich das Coder-Fenster.
Im Coder-Fenster (nenne ich jetzt einfach mal so) habe ich links eine Übersicht aller CSS Anweisungen, den gesamten Quellcode und rechts CSS-Funktionen die ich durch einfaches klicken auf der Webseite einbauen kann.
Sollte einem der Quellcode zu stark durcheinander sein (kann ja mal vorkommen :-)), dann kann man mit einem Klick in der Menüzeile auf Format – Re-Ident alles schön und sauber ordnen lassen, klasse!
Für die Verwendung des Editors nun ein kleines, sehr simples Beispiel:
Ich möchte nun die Farbe des Links einer jeden Überschrift ändern.
Dazu einfach im Inspector Fenster die gewünschte Zeile, also a anklicken. Die Markierung im Editor springt selbstständig an die richtige Position und markiert den ausgewählten Codesnippet leicht grau.
Nun kann ich entweder als Profi im Quellcode direkt den Code eintippen, also color: xxx durch eine andere Farbe ersetzen oder im rechten Feld die gewünschte CSS Funktion einfach durch klicken verändern.
Das ganze ist so unglaublich einfach dass man quasi als Anfänger ohne Probleme seine Styles aufbauen kann.
Die Änderungen an der Styledatei werden direkt im Browser angezeigt. Aber keine Angst, das ganze ist nur eine Preview, die Anzeige auf der wirklichen Website sind noch immer die gleichen.
Wenn man also mit seinen Änderungen zufrieden ist muss man die CSS-Datei noch auf dem Server übertragen. Vorher kann man mit der Funktion Validate seine Datei auch noch checken lassen ob alles in Ordnung ist.
FAZIT:
Das Programm ist sehr umfangreich, man kann sich sehr schnell einarbeiten wenn man schon mit CSS gearbeitet hat und es erleichtert einem die Arbeit sehr. Für Anfänger auf jeden Fall geeignet, da sich die Styles einfach zusammen klicken lassen und quasi keine Programmierkenntnisse vorhanden sein müssen.
Die Software kostet als Einzelplatzversion 39,95 Dollar (ca. 27,45 Euro) und kann hier gekauft werden.