Hi leutz,

ich würde hier gerne mein neustes Main-Project vorstellen.

Es handelt sich um einen CSS Designer (Cascading Style Sheets).
Er verfügt über einen standard Codeeditor und 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.

Desweiteren verfügt er über einen CSS Validator.
Er checkt den CSS Quellcode nach Fehler und weist auf Wunsch auf Kompatibilitätsproblemen bei Browsern hin.
Kompatibilitätscheck liegen für folgende Browser bis jetzt vor:
IE 5.0, 5.5, 6.0, Mac
Opera 5.0, 6.0, 7.0, 7.5
Netscape 4.0, 6.0, 7.0
Mozilla 1.0
Firefox 0.8
Safari 1.0
Konqueror 3.1

Zusätzlich gibt es noch viele weitere Funktionen.
Es ist aber immernoch am anfang und noch eine beta version.

Wäre schön wenn ihr ihn euch mal anguckt und mir Ideen, Kritik und Verbesserungsvorschläge mitteilt.

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 dem Update in dem Post weiter unten.

Download: EW-CSSDesigner
Ausführlichere Beschreibung: hier
Website mit noch weiteren Programmen: www.ew-projects.de

Screenshot:

Das Programm sieht ja echt stark aus! Bin bisher noch keinem wirklich genialen und nützlichen html Tool begegnet. Das scheint jetzt aber wirklich sehr nützlich zu sein! Inkl. Validator, super! Ich teste es gleich mal aus.

Was mir grad so aufgefallen ist:
- Das text-weight und outline property beispielsweise ist dem Programm unbekannt
- "Not with Netscape (oder than version 6.0)". Was ist genau damit gemeint?
- Ich hab ein CSS File geöffnet und wieder gespeichert, jetzt hab ich solche Einträge drin: "font-size: ;". Müsste nicht sein.
- Im Validator sehe ich zwischen jedem Eintrag eine Pixelzeile die nicht gezeichnet wurde. Was bei dir grau ist, ist bei mir undefiniert (liegt evtl. am XP Style).
- Bei der Suche wird bei mir das Suchresultat nicht gehighlightet?
- Mit File New passiert gar nichts.
Details:
- Das (selbstprogrammierte?) Tabsheet kann keinen Fokus kriegen. Dasselbe gilt für die (selbstprogrammierten?) Knöpfe wie z.B. das Diskettensymbol. Ich arbeite mit Tastenkombinationen wo immer möglich.
- Aus kleinen modalen Fensterchen drück ich immer Esc um rauszukommen, geht hier nicht.
- Das "x" bei z.B. Properties reagiert auch auf den linken (//Edit: rechten war natürlich gemeint) Mausknopf. Hätte dort eher ein Popupmenu erwartet mit "Expand all" bzw. "Collapse all".
- Undo Funktion ist zwar mühsam zu implementieren, wäre aber nützlich für die fertige Version

Der Code Editor funktioniert einwandfrei. Für eine Betaversion erstaunlich gut; es sind eigentlich alles Details, die noch nicht ganz perfekt sind

JA JA JA und nochmals JA.
Soein Prgamm hab ich schon immer gesucht. sehr genial.

und nach dem Motto nobody's perfect ein paar Vorschläge zur Verbesserung:

-Es währe schön wenn die ganze Property gehighlighted wird nicht nur ein keines 4-Eck am Anfang
-Es währe schön wenn man nicht immer erst Rechts und dann auf Edit klicken muss um etwas zu verändern. Man könnte die Values als Eingabefeld machen in dem man direkt den Wert verändern kann.

Zitat:

- Im Validator sehe ich zwischen jedem Eintrag eine Pixelzeile die nicht gezeichnet wurde. Was bei dir grau ist, ist bei mir undefiniert (liegt evtl. am XP Style).

Lieg wohl an Style-XP bei mir werden dei angezeigt.

ich kann nur betonen: Sehr geiles Programm

erstmal vielen dank für die komplimente
freut mich natürlich sehr.

Das Project steht noch ganz am Anfang, hab noch viele Ideen und das was jetzt noch nicht so rund läuft wird natürlich verbessert. Dafür danke erstmal für eure Vorschläge.

@ delfiphan:

Zitat:

- Das text-weight und outline property beispielsweise ist dem Programm unbekannt

text-weight ist mir bislang gänzlich unbekannt (meinst du nicht font-weight?) und
outline unterstützen fast keine browser (nur opera 7, safari und konqueror)

Zitat:

- "Not with Netscape (oder than version 6.0)". Was ist genau damit gemeint?

Damit ist gemeint das das Property nicht mit Netscape unter Version 6.0 funktioniert. z.B. mit NS 4.0 geht es nicht. Wenn du diese Meldung für den browser nicht willst, dann geh in die Optionen - Validator und stell dort Netscape entweder ganz aus oder mach die Versionsnr höher.

Zitat:

- Ich hab ein CSS File geöffnet und wieder gespeichert, jetzt hab ich solche Einträge drin: "font-size: ;". Müsste nicht sein.

mhhh, der fehler ist mir neu. ist in deinem quellcode irgendwas besonderes? kann mir den fehler eigentlich nicht so recht vorstellen, es sei denn du hattest das property wirklich ohne value drin.

Zitat:

- Im Validator sehe ich zwischen jedem Eintrag eine Pixelzeile die nicht gezeichnet wurde. Was bei dir grau ist, ist bei mir undefiniert (liegt evtl. am XP Style).

mhh, werd ich mal nachprüfen. hab hier nur grad kein WinXP.

Zitat:

- Bei der Suche wird bei mir das Suchresultat nicht gehighlightet?

sollte eigentlich. die suche verält sich unterschiedlich, je nachdem ob du den Codeeditor an hast oder die Objectansicht. Wenn du in der Objectansicht suchst wird nur am anfang der zeile etwas gehighlightet.

Zitat:

- Mit File New passiert gar nichts.

hupsa, nich belegt wird geändert.

um die details werd ich mich kümmern, wenn es mir möglich ist.
bei manchen bin ich mir noch nicht im klaren wie aber mal gucken

@ FlameDiver:

Zitat:

-Es währe schön wenn die ganze Property gehighlighted wird nicht nur ein keines 4-Eck am Anfang

ich guck mal ob das geht, ist ein VirtualTreeView, glaub man kann bei dem die ganze Row Highlighten, was dann aber echt die ganze Row is ... ich werd mal gucken

Zitat:

-Es währe schön wenn man nicht immer erst Rechts und dann auf Edit klicken muss um etwas zu verändern. Man könnte die Values als Eingabefeld machen in dem man direkt den Wert verändern kann.

Werd ich auf jedenfall einbauen

Danke erstmal
Bin auf weitere Vorschläge gespannt

greetz
Steffen

mir ist da noch ne Idee gekommen.
Wie währe es mit einem CSS-Wizzard der einen Schritt für Schritt zu einem CSS-File führt.

Ein was auch noch ganz nützlich währe, währe einen vorschau wo alle sachen in einer html-datei einmal gezeigt werden. (also alles was man an Values festgelegt hat)

Hallo.

Konnte es jetz noch nicht runterladen, aber vom ansehen und lesen hier klingts schonmal ganz gut.
Und mit dem "Fehler", das er eine Eigenschaft ohne Wert schreibt, meint er das es unnötiger speicher ist, der da verbraten wird.
Also prüfen ob Wert, wenn net weglassen.
Würde da aber ne Abfrage machen, bzw, 2 speicherpunkte um es einmal mit allem speichern zu können sonst ärgern sich manche nachher
"wo ist denn das propertie hin" usw

Ciao!

Also...
Ich hab mal ein vom W3C-Validator validiertes CSS-File durch deinen Validator gejagt und folgende Unstimmigkeiten sind aufgetreten:
1. b: unknown class
2. right: Not W3C conform
3. a:hover: unknown class
4. empty-cells: unknown property
5. acronym: unknown class
6. cursor: not W3C conform
7. border-spacing: not W3C conform

OK, 2., 6. und 7. sind nicht die Welt, aber der Rest sagt mir, dass du nochmal bei SELFHtml vorbeischaun solltest.

Wird das OpenSource??

@ FlameDiver:
beide Sachen sind bereits geplant und werden eingebaut.

@ adler:
werd mir etwas überlegen

@ sourcehunter:
danke für deine test
also ich hab das meiste nach dem W3C CSS 2.0 Report gemacht.
Was dort nicht drin steht war erstmal für mich nicht W3C konform.
bei den klassen kann es gut sein das mir noch ein paar fehlen, wie z.B. <b>
a:hover sollte er eigentlich überhaupt nicht anzeigen, bzw die class is ja <a>

und was is acronym?

werd jedenfalls nochmal weiter forschen und natürlich ausbessern. die validator dateien sind ja auch immernoch am anfang.

edit:
hab a:hover bei mir mal getestet, da sagt er nicht das es die klasse nicht gibt. scheint alles zu stimmen
ist bei dir irgendeine besonderheit? classen die durch komma getrennt sind z.B. kann er noch nicht

@ WeBsPaCe:
nein, wird es nicht.
Das will ich auch niemandem antun
Nein ok, so schlimm ist es nicht.
Aber dann hätte ichs auch im anderen forum gepostet.
Ich proggen viel davon in der Arbeit, von daher ist das nicht möglich.
Darf es aber als Freeware rausgeben.

Ich habe folgende Styledefinition:
a:hover.normal

Die gilt für alle <a>-Elemente der Klasse normal, wenn ein Cursor darüber ist.

acronym ist leider ein sehr Selten benutztes HTML-Tag, das wie folgt verwendet wird:
<acronym title="World Wide Web">WWW</acronym>
Dadurch wird dem Benutzer ermöglicht die vollständige Bedeutung einer Abkürzung zu erfassen, indem er kurzeitig mit der Maus über dieser verweilt.

ahh, vielen dank für die erläuterung
hab es in den validator mit aufgenommen

das mit dem a:hover ist dann mein fehler, der rafft die doppeltrennung noch nicht
für ihn war alles was vor dem . steht die klasse
werde den fehler beseitigen

wem noch fehlende sachen auffallen, immer her damit
bin kein sehr guter webmaster, deswegen muss ich mich auf rezerenzen und andere verlassen.

greetz
Steffen

Hammer Geil!!!

Ich hab zwar schon ein Programm, was aber 1. viel umständlicher ist und 2. keine css-dateien laden sondern nur erstellen kann!

Also ich find das Programm cool!!!

Nur zwei Probleme:

* B- und PRE-Tags kennt dein Programm nicht!
* Warum ist denn die obere Leiste grau? Ich fänds besser wenn die Leisten Systemfreundlich sind auf clBtnFace stehen! Ich hab mal dein Prog etwas modifiziert und ein Screenhot gemacht: files.ff22.de/images/ewcss.jpg - Ich hab die Farben mit einem HexEditor von clSilver auf clBtnFace umgestellt!

Aber nützlich ist dein Programm auf alle Fälle!!! Am besten gefällt mir der Eigenschaftseditor und der Validator...! Big Kompliment!

Gruß,
Timon

@ TimonWorld (auch wenns nicht in den Thread passt, soory)
was is das da an der seite? das mit der uhr? als ich das gehsen hab dachte ich sofort an Windowas Longhorn.

@ TimonWorld
Vielen Dank für die Blumen

b und pre hab ich aufgenommen in die list, sind in der nächsten version dann drin

bei den farben hab ich ehrlich gesagt gar nicht an themes gedacht
ich selber benutze kein WinXP und wollte mit der clSilver nur eine Farbe drin haben die sich etwas abhebt von clBtnFace.
Aber es ist natürlich blöd wenn sich die farbe von btFace ändert, aber die dann nicht, ist wohl wahr.
Denke ich werd dann alle auf BtnFace umändern.
Alternativ könnte ich natürlich auch für die anderen Sachen feste farben nehmen, so das sich bei einem theme nichts ändert.

gibt es dann noch andere meinungen zu?

greetz
Steffen

ich hätte da ne idee zu. wer firefox kennt weiß das die skinns auch über css-files laufen.
sowas könntest du da doch auch einbaun.
wenn Jemandem was nicht passt von den Farben her kanner das einfach verändern.

muss jetzt nich unbedingt so ausfürlich sein wie bei Firefox... aber währe cool

EDIT: man könnte das natürlich auch einfacher machen... einfach so bei einstellungen ne möglichkeit geben wo mach das einstellen kann

hehe, mal gucken
aber das ist auf jedenfall erstmal nach hinten geschoben

ich versuch das grade mal. mal gucken wie das wird.
fals es erfolgreich wird kann ich es dir ja mal schicken.

na da bin ich ja mal gespannt

zum programm:
hab nun schon mehrere eurer Vorschläge umgesetzt.
In der nächsten Version ist auch ebenfalls der Validator gewachsen.
Er checkt jetzt auch die Values und hab die Check-Tables nochmal überarbeitet.
Auch gibt es in der neuen Version noch mehrere neue Properties im "ObjectInspector".

greetz
Steffen

Gibts auch nen Hinweis wenn kein Wert enntahlten es?
Oder ist die jetz schon online die neue Version?
weil du geschrieben hast, hast mehrerere umgesetzt, anscheind noch net alle

ne is noch nich online
bastel erst nochn bissel weiter.

aber er sollte sagen wenn kein value eingegeben ist