Clever CleverCSS

In welcher Reihenfolge man CSS-Eigenschaften notieren soll, haben wir nun wohl genug diskutiert, kommen wir nun zu etwas völlig anderem: programmiertes CSS.

Hatte schon die Idee (in Webkit bereits testweise implmentiert) von Konstanten in CSS die Welt in Aufregung versetzt, dürfte man CleverCSS – the pythonic way of webdesign als die endgültige Gotteslästerung betrachten. Um es kurz zu machen zitiere ich flugs:

CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.

Hmmm… pythonic, das könnte meinem Wunsch nach Formatierung und Sauberkeit doch entgegenkommen. Und CleverCSS kann einige witzige Sachen, ausser einfach CSS wieder raus zu printen. Bspw. gibt es einen grouping operator, der Attribute zu Gruppen zusammenfasst. So:

#main p
  font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic

Ausgegeben würde hierfür:

#main p {
    font-family: Verdana, sans-serif;
    font-size: 1.1em;
    font-style: italic;
}

Mal bitte, das ist ja lustig. Und dann wirds spannend, CleverCSS beherrscht natürlich Konstanten, um z.B. Farbwerte einmalig festzulegen und editierbar zu machen. Ich weiß schon, nichts, was man nicht auch mit suchen & ersetzen erschlagen kann… nur, CleverCSS kann damit auch ein wenig rechnen:

background-position: $foo + 2 + 3 $foo - 2

Das täte background-position: 15 8; ergeben. Mit CleverCSS kann man beinahe richtig rechen, sogar mit Farben (#fff - #ccc => #333333). Und als wär das nicht schon genug: es gibt auch noch einen ganzen Satz Methoden, wie Number.abs(), String.length(delimiter), Color.brighten(amount) oder String.split(). Klingt doch spannend.

Allen Features zum Trotze muss man natürlich die Frage nach dem Sinn stellen. Ehrlich gesagt: weiss ich noch nicht. Fällt mir aber sicherlich noch ein. Zusammenhänge könnten Frameworks, Templatesysteme, …, ja was?

Prädikat: unbedingt mal runterladen und ausprobieren.

Veröffentlicht von

Nico

Nico Brünjes ist Digitalkreativer und Internethandwerker. Seit mehr als 15 Jahren erdenkt, baut und programmiert er moderne, standardkonforme und zugängliche Webseiten in HTML, CSS und Javascript.

13 Gedanken zu „Clever CleverCSS“

  1. Naaaaja. Die Leute vergessen immer dass PHP ganz am anfang und ganz im Kern eigentlich nur ein Templatesprache ist. Man könnte ja auch einfach mal ne CSS Datei in .php umbenennen und als header(„Content-Type: text/css“); ausliefern. Darin kann man dann fleißig >?=$alleMögliche?< ausgeben.

  2. Das muss natürlich <?=$allesMögliche?> heißten, ich Esel. Und lustigerweise habe ich gerade eben vor einer Stunde sowas basteln wollen, wiel ich mein altes Grid-Layout-Plugin für WordPress nach Drupal portiert habe und einfach „noch weiter“ gehen wollte. Jetzt kann ich da schon Raster-Eckdaten übers Backend pflegen.

    Ich hatte sogar kurz überlegt, CSSe gleich gar nicht mehr in CSS sodern in PHP-Objekten zu schreiben, und die dann nach CSS rauszurendern. Sowie bei HTML_QuickForm oder der Drupal Form API. Sollte keine große Kunst sein.

    Yaml ist überigens kappes. Da bin ich wieder von weg. Total oversized. He, das sind aber zwei ganzschön lange Kommentare, da könnte ich ja mal nen Blogeintrag draus machen. Naja. Morgen ist ja auch noch ein Tag.

  3. He! Meine CSSPHP-Klasse würde sogar euren Sortierstreit beilegen, weil man dann einfach beim Rendern mit angeben kann, wie der Scheiß sortiert werden soll.

    Und nur mal unter uns: Ich habe ja gestern und heute mal wieder ein bisschen CSS gedrechselt. Ich hab selten mehr als zwei Eigenschaften pro Ausdruck. Höchstens mal vier oder fünf. Da lohnt es sich nicht annähernd, über eine Sortierung nachzudenken.

  4. Noch besser! Ne XML-Syntax! XSS! Ha! Ich lach mich schlapp.

    Ich spam hier ganz schön rum nech? Sorry.Faß doch mal meine Kommentare zu einem zusammen oder so, wennde magst.
    Danke! Also für die Inspiration, mein ich! Das mit der PHP-Klasse probiere ich mal aus. Nur weil ich Bock drauf hab. Das macht bestimmt Spaß. Ich halte Dich auf dem Laufenden.

  5. [grad noch vor dem zu Bett gehen noch mal reingeschaut]

    Nönö, 4 Kommentare auf die schnelle ist doch super, tob Dich ruhig aus… 😉

    PHP (das iPhone will übrigens partout PUP daraus machen, gnnnpf), geht natürlich auch super dafür, alles schon gesehen. 😉

  6. Unser CMS? Du meinst, WIR BEIDE haben ein CMS? Wo soll das nur sein? Ach IN dem Computer! 😉

  7. Das Ganze erschließt sich einem nicht wirklich (wahrscheinlich mindestens solange man nichts mit Python macht).
    Vor allem nicht die Rechenkünste des cleveren CSS. Ich seh da einfach beim besten Willen kein Einsatzszenario. Toll wäre das Rundum sorglos Paket: addier mir doch einfach mal alles, was du von links nach rechts findest – selbstverständlich mit Anti-Ruckel Garantie auch bei IE "Urviechern"

    "Have a look at the following documentation of CleverCSS for more details" heißt es unter obigem Link. Ich habe weder following noch irgendwo anders, noch im Download irgendwas gefunden, was nach Doku aussieht. Und die Sandbox macht einen auch nicht schlauer. Aber vielleicht bin ich nur ein bisschen blind und noch etwas verschlafen.
    Und vielleicht kommt ja hier auch noch jemand vorbei, der etwas mehr Licht ins Dunkel bringen kann.

  8. ich hab mal einen tag drüber nachgedacht …

    sinn und zweck mal dahingestellt sehe ich die probleme auch in der performance.
    selbst wenn man ein praktisches anwendungsgebiet findet dürfte das problem durch den – jeder, der php-css schonmal probiert hat, weiss was ich meine – blitzern beim öffnen einer seite.

    in der theorie lässt sich das durch caching lösen – blitzer gibts dann aber trotzdem, weil das entscheidende moment wohl beim initialisieren des skripts verloren geht.

    warum also nicht per htaccess cachen?
    so ein redirect wie ‚wenn 080926.css nicht vorhanden, generator.php?topic=080926 starten‘? ist ziemlich problemlos möglich!
    beim ersten ausführen gibts die css nicht, das skript wird ausgeführt, es gibt einen blitzer und das skript legt die fertige css als datei ab.

    bei datumsmäßig benannten css-dateien könnte man dann als härtefall noch einen cronjob anlegen …

  9. Herrrr Nico, was habe ich gewußt? Damit dem .htaccess zum Chachen verwenden haben wir beim Netz gegen Nazis auch gemacht, um das Double Domain Cachinging hinzubekommen.

    Vom „blitzen“ habe ich noch nichts gehört, aber ich nehme an, dass es eine Verzögerungbeim Rendering ist. Ich generiere ja jetzt schon CSS mit PHP und haben kein Blitzen, weil ich nämlich ein mieser Fuscherfuchs bin. Ich pumpe das CSS in eine Stylesektion ins HTML. Weil das gerade nur just 20 Zeilen sind, habe ich da auch kein Problem mit. Aber ein paar hundert Zeilen auf die Weise rauszupumpen fände sogar ich häßlich.

    Wenn schon statisches Caching, dann würed ich das direkt über Drupal machen. He! Moment! Drupal macht das ja schon. Das Garland Theme generiert CSSe. Das schaue ich mir mal an, wie die das machen…

    Ich halte Sie auf dem Laufenden Herrrrr Nico und Herrrr Tolki.

  10. „Vom “blitzen” habe ich noch nichts gehört …“ – hat mich nicht in ruhe gelassen und mal im projekt-archiv geblättert …

    ok. das blitzen hängt mit dem einzigen gescheiten verwendungszweck, der mir für generische css eingefallen ist, zusammen: zufällige auswahl eines hintergrund-bildes und/oder so.

    um zu indizieren, welche dateien es überhaupt gibt, muss der file-wrapper durch php angeworfen werden, der naturgemäß ziemlich langsam ist!

    ändert nichts daran, dass ich an dem htaccess-gedanken, der ja auch user-agent empfänglich ist, festhalte.
    das file-wrapper-problem lässt sich auch per cronjob-lösung lösen.

    … tsss, was will ich eigentlich? 😉

Kommentare sind geschlossen.