CSS Editoren (Freeware)

• web­de­sign
• soft­ware

Kürz­lich wurde auf pixel​gra​phix​.de dis­ku­tiert, ob die Pre–CSS–Ära mitt­ler­weile über­wun­den ist und wir mit­ten drin sind, statt nur dabei. Durch die rasante Ver­brei­tung von Weblog-​Software alá Word­Press, Text­pat­tern & Co., ist es auch für Quer– und Neu­ein­stei­ger bei wei­tem nicht mehr so schwie­rig, stan­dard­kon­forme, valide, bar­rie­re­är­mere Web­sei­ten zu kre­ie­ren. Oder zumin­dest etwas ähnli­ches. Die heu­ti­gen Skripte brin­gen alles not­wen­dige mit. Ver­füg­bare Tem­pla­tes lie­gen in der Regel schon im XHTML–Markup vor und die Tren­nung des Designs vom Inhalt wird in gro­ßen Tei­len auf Casca­ding Style­s­heets aus­ge­la­gert. The way it should be.

Natür­lich ist nicht alles W3C-​Edelmetall was glänzt, aber wenn man sich in Support-​Foren wie z.B. auf word​press​.de umschaut, sind auch und gerade New­co­mer wil­lens, sich den klei­nen Pro­ble­men des CSS–All­tags zu stel­len. Da nicht jeder sofort mit Klas­sen, Selek­to­ren usw. auf Du und Du steht und das Edi­tie­ren von CSS–Dateien oft der klas­si­schen »Trial & Error» Tech­nik gleicht, ist zumin­dest am Anfang der Ein­satz eines CSS–Edi­tors keine schlechte Lösung. Aller­dings ist die Aus­wahl an kos­ten­lo­sen Edi­to­ren auf die­sem Gebiet recht begrenzt. Wer Zugriff auf kom­mer­zi­elle Soft­ware wie Dream­wea­ver, GoLive u.ä. hat, möge sich an den inte­grier­ten Pro­gram­men ver­su­chen, wobei mir die dor­tige CSS–Unter­stüt­zung nie wirk­lich smart erschien. Auch der »CSS–Edi­tor« in NVU ist m. E. kom­pli­ziert gelöst. Aus die­sem Grund stelle ich hier mal einige Freeware-​Editoren vor, die über ein ein­fa­ches Syntax-​Highlighting hinausgehen:

Top­Style Light

Die mitt­ler­weile von News­ga­tor über­nom­mene Soft­ware Top­Style dürfte die bekann­teste und wohl auch beste Appli­ka­tion auf die­sem Gebiet sein. Als Voll­ver­sion kos­ten­pflich­tig, ist neben­her auch Top­Style Light ver­füg­bar, eine im Umfang zwar redu­zierte Ver­sion, die sich jedoch durch­aus sinn­voll zum Erstel­len von Style­s­heets ver­wen­den läßt. Das drei­ge­teilte Pro­gramm­fens­ter zeigt gleich­zei­tig den CSS–Quell­text (mit Syntax-​Hervorhebung!), die ver­füg­ba­ren Attri­bute und (das Wich­tigste an die­ser Art Edi­to­ren) ein for­ma­tierte Vor­schau des aktu­el­len (X)HTML-Elements. Ein sehr smar­tes Pro­gramm und auf die­sem Gebiet wohl erste Wahl. (englisch)

CSS Editor

Auch in deut­schen Lan­den hat man sich über eine ein­fa­che Bear­bei­tung der Style­s­heets Gedan­ken gemacht. Aus­fluß des­sen z.B. der CSS–Edi­tor von Tho­mas Rudolph. In der Auf­ma­chung ähnelt er Top­Style, ist sehr durch­dacht auf­ge­baut und auch der CSS–Neu­ling fin­det sich bei die­ser Soft­ware schnell zurecht. Das Style­s­heet kann auch hier auf ein­fachste Weise zusam­men­ge­klickt wer­den, ein ein­ge­bau­ter Par­ser weist auf etwaige Feh­ler hin und im unte­ren Bereich des Pro­gramm­fens­ters erhält man eine Vor­schau des betref­fen­den (X)HTML Ele­ments. Der CSS–Edi­tor ist für den pri­va­ten Gebrauch kos­ten­los, beim Pro­gramm­start erscheint jedoch für 10 Sekun­den ein Info-​Fenster mit der Bitte um Regis­trie­rung. Mit 5 Euro sind sie dabei und unter­stüt­zen den Autor bei der Wei­ter­ent­wick­lung der Soft­ware. (deutsch)

StyleAs­sis­tant

Von Dr. Tho­mas Mei­nike wurde der StyleAs­sis­tant pro­gram­miert, der jedoch mitt­ler­weile nicht mehr wei­ter­ent­wi­ckelt wird. Nicht ganz so kom­for­ta­bel wie die vor­ge­nann­ten Anwen­dun­gen, eig­net er sich u.U. für abso­lute New­bies, die noch mit dem Ver­ständ­nis für border-​style, line-​height & Co. kämp­fen. Alle gän­gi­gen CSS–Attri­bute sind auf einen Blick ersicht­lich und per One-​Click las­sen sich die For­ma­tie­run­gen in einer Browser-​Vorschau betrach­ten. (englisch)

Bal­t­hi­sar Cascade

Bal­t­hi­sar Cascasde ist ein sehr umfang­rei­ches und etwas kom­pli­zier­ter zu bedie­nen­des Pro­gramm, also eher dem tippfau­len CSS–Ken­ner zu emp­feh­len. Bal­t­hi­sar bie­tet zwar keine direkte Vor­schau des for­ma­tier­ten Ele­ments, ent­hält dafür aber den vol­len Befehls­um­fang von CSS 2 und nach etwas Ein­ar­bei­tung läßt sich sehr zügig damit arbei­ten. Im mitt­le­ren Bereich des (fixen) Pro­gramm­fens­ters sind die Layout-​Attribute unter Kar­tei­rei­tern geord­net, links wer­den die for­ma­tier­ten Ele­mente auf­ge­lis­tet und rechts erhhält man einen Pre­view auf den CSS–Quell­text Bal­t­hi­sar Cascade war augen­schein­lich mal als Ent­wick­lungs­tufe einer kom­mer­zi­el­ler Soft­ware geplant, wird aber seit 2001 nicht mehr wei­ter­ent­wi­ckelt. (englisch)

Sim­ple CSS

Vie­len Dank an Manuela für den Tipp! Sim­ple CSS ist für Win­dows und Mac erhält­lich und äußerst kom­for­ta­bel zu bedie­nen. Nach einen ers­tem Test gefällt mir die­ser Edi­tor sogar am bes­ten. Im lin­ken Bereich kön­nen die Selek­to­ren aus einer Liste gewählt wer­den, im rech­ten Haupt­be­reich wer­den die Attri­bute aus Dropdown-​Feldern aus­ge­wählt und im unte­ren Teil zeigt wie­derum eine Vor­schau das Ergeb­nis der For­ma­tie­run­gen an. Ein sehr ele­gan­ter Edi­tor, der mir durch­aus all­tags­taug­lich erscheint und eine echte Alter­na­tive zum rei­nen »coding by hand« zu sein scheint. (englisch)

CssEd

Die­sen Tipp von isinkwa (Danke!) habe ich noch nicht getes­tet, aber die Screen­shots und die Beschrei­bung des Funk­ti­ons­um­fangs ver­hei­ßen eini­ges. CssEd läuft unter Linux und Win­dows, benö­tigt beim letz­te­ren alle­rings die GTK–Library. Auch hier ist eine Aus­wahl der Attri­bute mög­lich und den Quell­text des Style­s­heets kann man nach Ele­men­ten zusam­men klap­pen (Fol­ding), was die Über­sich­lich­keit erhöht. (englisch)

- – -

Für wei­tere Tipps bezüg­lich kos­ten­lo­ser CSS–Edi­to­ren bin ich dank­bar und nehme sie gerne in diese Liste auf.

Kommentare können mit (X)HTML-Elementen oder mit Textile ausgezeichnet werden. Es werden nicht alle Elemente unterstützt. Diesbezüglich gilt: »Weniger ist mehr.«

Smallprint

Impressum & Co.

• Feeds
• About
• Impressum
• Feedback

HA·BÁ·RI