EW-CSSDesigner

[MasterEvil]

Hi leutz,

will hier mein momentanes Main-Project vorstellen.
Es handelt sich um einen CSS Designer (Cascading Style Sheets).

Er verfügt über die normale Code Ansicht und über eine spezielle Baumansicht.
In der Baumansicht werden alle Klassen mit ihren Properties angezeigt.
Wenn man in eine Klasse klickt werden alle Properties in einen PropertiesEditor (wie der ObjectInspector in Delphi) geladen und können dort editiert, bzw neue hinzugefügt werden.
So bekommt man eine wunderbare Übersicht und es lassen sich leicht alle Sachen ändern und neu hinzufügen.

Der Designer verfügt noch über eine Menge mehr Funktionen, steht aber noch am Anfang.

Eine detailliertere Beschreibung findet ihr hier.
Mehr Projekte von mir: www.ew-projects.de

Download und Screenshot sind im Anhang.

Ich hoffe ich bekomme viele Kommentare von euch
Ideen, Kritiken und Verbesserungsvorschläge sind mir immer sehr willkommen.

Update (25.02.2005):
Neue Version hochgeladen (0.6) und neuer Screenshot
- Validator
- viele, viele kleinere Änderungen

Update (04.03.2005):
Neue Version hochgeladen
- Interne Preview
- Validator checkt jetzt auch Values
- Validatorfiles stark verbessert
- viele, viele kleinere Änderungen

Update (24.04.2005):
Nach langer Pause und Entwicklungszeit eine neue Version (0.7)
- komplette überarbeitung des parsens
- preview jetzt auch mit Mozilla/Gecko Engine
- Validatorfiles überarbeitet
- Bei einem doppelklich auf einen fehler springt er zu der betreffenden zeile
- viele änderungen mit dem PropertiesEditor
- design änderungen

Mehr zu den Updates in den Posts weiter unten.

greetz
Steffen

[Meflin]

Hi,

der validator meckert, wenn man negative pixelwerte angibt, z.b. bei margin-top oder margin-left.
die werden aber von jedem browser korrekt interpretiert und ich denke auch dass sie nicht als invalid gelten. da bin ich mir aber nicht ganz sicher, der w3c validator jedenfalls meckert da nicht.

ausserdem kann man in deinen eingabefeldern im property editor auch keine minuswerte eingeben.

also das würde ich an deiner stelle noch ändern

[MasterEvil]

ohh ja, danke
dadran hab ich noch gar net gedacht
wird eingebaut.

greetz
Steffen

[mh166]

Mir is noch was aufgefallen: er kennt min-height und co nich. Und er kennt die Maßeinheit em nicht! Am besten du schaust dich auf www.css4you.de nochn bissel nach neuen attribs und den entsprechenden Eigenschaften um!

Wegen dem Doppelklick und dann Sprung zur Zeile: Wenn du das CSS validierst kannste doch zu jeder Fehlermeldung die Zeilenzahl im Code hinzufügen, also z.B. ins Tag der Liste. Sollte doch kein Problem sein, oder? Und wenn man dann Doppelklick macht, dann liest du die Zeilennummer aus und springst da hin.

Und noch was: wenn man verschachtelte Klassen nutzt (also z.B. ".content .heading h1") wäre es schön, wenn diese auch dementsprechend verschachtelt angezeigt werden würden.

mfg, mh166

[MasterEvil]

Ein paar Sachen fehlen noch. Das ist wahr. Arbeite ja dran

Wegen Zeilenspringen:
Das ginge ja wunderschön, wäre mir auch klar.
Nur ist da wieder das problem mit den Kommentaren.
Ich mach es momentan so, dass ich, bevor ich für validieren parse, erstmal alle Kommentare rausnehmen.
Und schwubs: da stimmen die zeilen nicht mehr.
Sprich: um das mit den Zeilen einzubaun muss ich erstmal mein Kommentar Problem lösen.

Verschachtelte Klasse:
Was genau meinst du damit?

greetz
Steffen

[mh166]

Zitat von MasterEvil:

Ich mach es momentan so, dass ich, bevor ich für validieren parse, erstmal alle Kommentare rausnehmen.
Und schwubs: da stimmen die zeilen nicht mehr.

Ich versteh das irgendwie nich: wo is das Problem bei der Sache ein bestimmtes Pattern für die Kommentare einfach vom "richtigen" Parsen bzw. validieren auszunehmen. Es gibt ja nich so viele Möglichkeiten Kommentare zu verwenden...

Zitat:

Verschachtelte Klasse:
Was genau meinst du damit?

Naja, angenommen ich hab folgende Style Definitionen:

Code:

.content {
  ..Attributes..
}
.content .heading {
  ..Attributes..
}
.content .heading h1 {
  ..Attributes..
}

Dann isses ja im Prinzip so, dass diese Klassen verschachtelt sind. Also wäre es doch schön, wenn du es so machen könntest, dass nun .heading als Unterelement von .content und h1 als Child von .heading in deinem TreeView angezeigt werden würde. Das würde die Semantik noch mehr verdeutlichen. Außerdem kann man dann noch eifacher nicht benötigte Blöcke ausblenden. In diesem Falle wären bspw. mit dem Ausblenden von .content auch die beiden anderen Definitionen verschwunden.

Hoffe du verstehst, was ich meine.

mfg, mh166

[mh166]

Ich hab noch ne Seite gefunden, die für dich sicher sehr hilfreich sein könnte, um die CSS-Tag-Liste zu vervollständigen. Insbesondere ist hier auch die Kompatibilität der verschiedenen Browser mit aufgeführt: http://www.biene-award.de/award/index.html

mfg, mh166

[MasterEvil]

das prob mit den kommentaren liegt in meiner momentanen art es zu parsen, ich muss alles neuschreiben.
das prob ist, da hängt sehr viel mittlerweile schon drin.
also muss man sich erstmal aufraffen

kommt aber noch.

das mit den verschachtelten klassen überleg ich mir noch.
da müsste ich nämlich ebenfalls eine menge konzepte umwerfen
und ich weiss nicht obs das wert ist.

ich selber seh die form grade das erste mal ausserhalb der theorie.
weiss net ob das wirklich so oft benutzt wird.
ist für mich erstmal ne sache zum hinten dran hängen.

die seite ist für mich komplett unbrauchbar, da ich absolut keinen bezug zu irgendwas mit css finde.
wenn ich nur zu blind bin, dann weise mich bitte jemand darauf hin

greetz
Steffen

[jfheins]

Was mich noch ein bisschen stört, ist, dass die Scrollbar so unproportional ist ...

[MasterEvil]

meinst du von den properties? also das der balken so klein bleibt?

wegen der langen pause:
war im urlaub und danach musste ich erstmal was anderes fertig machen
jetzt fang ich aber wieder an am CSSD zu basteln

greetz
Steffen

[DGL-luke]

du könntest neben diener eigenen prüffunktion auch nen link zum w3c css-validator setzen, so dass die datei dann da automatisch durchgejagt wird.