CSS

Neue Tools: CSS-Preprozessor Roole und HTML-Umwandler Markdown.css

15. Februar 2013
von

Ist es nicht immer wieder erstaunlich, mit welchen Tools die Entwicklercommunity aufwartet? Während sich darunter viele sehr nützliche, teils unverzichtbare finden, gehören auf der anderen Seite auch etliche dazu, deren Sinn sich nicht auf den ersten, vielfach ebenso wenig auf den zweiten Blick erschließt. Heute habe ich je ein Tool von beiden Enden des Spektrums für Sie.

roole

Roole: CSS-Preprozessor auf der Basis von JavaScript

Aus der Rubrik “Nützliche Tools” macht der neue CSS-Preprozessor Roole auf sich aufmerksam. Roole steht in der Tradition von Sass und LESS, wirkt also auf den ersten Blick wie die Neuerfindung des Rades.

Roole ist jedoch insofern anders, als es auf reinem JavaScript fußt und auf diese Weise direkter als die genannten Alternativen implementiert werden kann. Wie LESS kann es per Node.js serverseitig lauffähig gemacht werden, auf der Client-Seite funktioniert es ohne weitere Zusätze, vorausgesetzt, JavaScript ist nicht deaktiviert. In letzterem Falle funktionierte allerdings der Laufzeitcompiler von LESS ebenfalls nicht. Sass erfordert zudem ohnehin mehr Aufwand, wenn man es zur Laufzeit kompilieren wollte.

Roole verbindet die Vorteile der Logik einer Programmiersprache mit der Erstellung von Stylesheets und erlaubt so einfache, wie komplexe Vorgänge zeit- und codesparend zu verwirklichen. Auf der Demoseite finden sich zahlreiche Beispiele.

Roole kümmert sich um das leidige Vendor-Prefixing selber, so dass kurze standard-konforme Anweisungen ausreichen, wie das folgende Beispiel zeigt:

Roole schreibt Vendor Prefixe selber

Unter Roole.org/test lässt sich prüfen, ob der verwendete Browser fähig ist, Roole zu interpretieren, was bei meinem unter Windows 8 Pro installierten Chrome-Browser vollumfänglich gegeben war. Roole steckt noch in den Kinderschuhen und steht in Version 0.1.2 unter der MIT-Lizenz auf Github zum Download bereit.

Auf der Website zum Produkt kann mit einem Live-Editor experimentiert werden, will man sich mit Roole näher auseinander setzen. Im Vergleich zu den älteren Wettbewerbern LESS und Sass steht Roole funktional noch etwas im Abseits. Einen CSS-Compiler nativ mit JavaScript zu erstellen, ist jedoch vom Ansatz her durchaus interessant. Roole sollte man im Auge behalten.

Markdown.css: HTML wie Markdown aussehen lassen

Auf der anderen Seite des Spektrums findet sich ganz aktuell eine Neuentwicklung, die auf den ersten Blick nützlicher erscheint als sie es auf den zweiten dann ist. Die Rede ist von Peter Coles Markdown.css, einem Stylesheet, das aus einem HTML-Dokument ein Markdown-formatiertes Dokument macht. Nein, halt, das wäre ja nützlich.

Markdown.css macht nicht Markdown aus HTML, sondern lässt HTML aussehen wie Markdown. Das verdeutliche ich am besten visuell. Diese Optik:

Vor Markdownify

Sieht nach Anwendung von Markdown.css so aus:

Nach Markdownify

Die Lesbarkeit ist erhöht. So weit so gut. Nützlich wäre nun, wenn man den entstandenen Markdown-Text auskopieren und zu Bearbeitungszwecken gebrauchen könnte. Genau das ist jedoch nicht möglich. Beim Auskopieren wird der gesamte Markdown-Anteil nicht mitgenommen.

markdown.css
Markdown.css: Ein Ausschnitt

So ist Markdown.css, das mit LESS realisiert wurde, nicht mehr als ein Experiment. Ich finde dabei besonders den Fortbildungsaspekt interessant. Durch die Auseinandersetzung mit Markdown.css und seiner LESS-Basis bin jedenfalls ich zu neuen Ansätzen inspiriert worden. Das ist ja nicht etwa nichts.

Markdown.css steht übrigens zusätzlich als Bookmarklet zur Verfügung, mit dessen Hilfe man beliebige Websites in Markdown-Optik versetzen kann.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , , ,

3 Kommentare zu „Neue Tools: CSS-Preprozessor Roole und HTML-Umwandler Markdown.css
  1. Michael am 15. Februar 2013 um 15:51

    „Aus der Rubrik “Nützliche Tools” macht der neue CSS-Preprozessor Roole auf sich aufmerksam.“

    Das ist hoffentlich nicht dein Ernst, oder etwa doch?
    Inwiefern macht es Sinn CSS im Client zu kompilieren, außer dass man sich als Entwickler diesen minimalen Aufwand spart das lokal vorzunehmen (dafür gibt es Tools: CodeKit, Grunt, Yeoman …)?
    Hinsichtlich Performance und Browser-Extensions wie NoScript (oder NotScript), dem FOUC (Flash of Unstyled Content), dem Fehlenden Caching der CSS-Datei, oder der Tatsache, dass man das Kompilieren lieber hunderte Male im Vergleich zu einem Mal vornimmt, sehe ich wirklich keinen Mehrwert.

    Warum sollte man überhaupt Less, Sass oder Roole zur Laufzeit kompilieren wollen?
    Ich lasse mich gerne eines besseren belehren, aber mir erschließt sich bisher kein einziger sinnvoller Anwendungszweck.

    • Dieter Petereit am 16. Februar 2013 um 13:38

      Doch doch, das ist mein Ernst. Ich werde hier aber nicht in die Debatte einsteigen, ob und inwieweit und unter welchen Umständen und sonstwie es sinnvoll ist, CSS zur Laufzeit zu kompilieren. Diese Debatte gibt es, wird an möglichen Orten intensiv geführt und ist wie immer sehr konträr. Also, hin da, wo darüber gestritten wird. Hier nicht.

      Abschließend sei noch erwähnt, dass man Roole nicht zwingend zur Laufzeit kompilieren muss, sondern dies, wie bei den anderen Lösungen auch, einmalig tun kann, um dann das entstandene CSS einzubinden.

      • Michael am 16. Februar 2013 um 15:10

        Um eine Debatte ging es mir in diesem Punkt gar nicht. Ich würde nur gerne verstehen, inwiefern Roole nützlich ist bzw. wo die Vorteile gegenüber Sass, Less oder Stylus liegen.

        Interessant wird das Ganze dann wieder, wenn man nicht zum Kompilieren im Browser gezwungen wird. Trotzdem würde mich der Inhalt einer solchen Debatte bzw. die Argumente für das Kompilieren im Browser interessieren. Hast du da vielleicht einen Link zur Hand? Man lernt ja bekanntlich nie aus und möglicherweise übersehe ich da etwas.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!