28.04.2009 - geschrieben von mrvn in Tutorials
3 More CSS – Javascript im CSS Stil
Ich bin in den letzten Tagen auf eine nette Idee bei der Umsetzung einer Javascript Library gestoßen. Das Ganze nennt sich MoreCSS und bietet Javascript Deklaration in CSS Syntax. Das ist natürlich gerade für Einsteiger eine feine Sache. Mit insgesamt nur 8 KB Größe ist es sogar relativ schlank, wenn man es mal mit den großen Brüdern vergleicht. Zusätzliche Funktionen kann man sich auch leicht via Plugin dazu holen. Im Grunde ist es ganz einfach. Man hat eine MoreCSS Datei, die Javascript Library Datei und eventuell noch Plugin Dateien, die man wie folgt in den <head> – Bereich einbindet (siehe offiziellen Doku) .
<link rel="MoreCSS" href="MoreCSS.css" /> <script type="text/javascript" src="MoreCSS.js"></script> <script type="text/javascript" src="MoreCSS.plugin.js"></script>
Nebenbei bemerkt ist MoreCSS meiner Meinung nach sehr gut dokumentiert und man findet eine übersichtliche Ansicht der ünterstützten Selektoren und Eigenschaften. Mit dem folgenden Quellcode möchte ich euch mal 3 Beispiele zeigen:
1. More CSS List-Style-Color
#meineliste {
list-style-color: #90B329;
color:#666;}
2. More CSS Tooltip
#example-link a {
tooltip: '<div class="ttcontainer">%title</div>';
tooltip-class: example-tooltip;
tooltip-opacity: 0.75;}
2. More CSS AddClass
a#gruen:active => #werdetgruen strong { add-class: gruen;}
a#normal:active => #werdetgruen strong { remove-class: gruen;}
Ich denke für kleine Projekte ist es durchaus sinnvoll zu MoreCSS zurückzugreifen, denn man kann schnell Sachen wie opacity (Deckkraft) browserübergreifend definieren. So und abschließend würde es mich natürlich interessieren, ob ihr davon schon gehört habt und wie ihr die MoreCSS Library findet?
Tags: cssframeworkjavascript
3 Kommentare
Trackback - RSS Kommentare zu "More CSS – Javascript im CSS Stil"
1 Thomas
schrieb am 28. April 2009 um 22:04
Ich hab davon schon mal am Rande gehört und fand es eigentlich ganz interessant. Vor allem weil man mit der (fast) gewohnten CSS-Syntax schreiben kann, ist es wohl vor allem für Neueinsteiger praktisch. Ansonsten wird man aber auch schneller sein, als wenn man alles selbst macht. Ich finds gut :-)
2 Arne
schrieb am 4. Mai 2009 um 16:16
Bisher war mir MoreCSS unbekannt. Die Verbindung aus CSS und JS ohne ein gigantisches Framework im Hintergrund finde ich klasse. Für kleine Projekte und wenn es mal wieder schnell gehen muss kann man sich MoreCSS bestimmt einmal merken.
Danke für die Information.
3 Julius Z.
schrieb am 5. Mai 2009 um 17:51
Sieht auf den ersten Blick sehr interessant aus, werde ich mir mal genauer ansehen und an einem Projekt testen.