[stylesheets_external] Externe Stylesheets einfacher einbinden.

[Schlauchbeutelmaschine]

Hallo,

für alle die lieber mit externen CSS Dateien arbeiten habe ich eine Erweiterung entwickelt
mit der Einbindung komfortabler abläuft.

Die Erweiterung und weitere Infos findet ihr im Repository.
Bittet testet es doch mal und gebt mir Feedback.

Danke!

[Toflar]

Geile Idee!!!

Werd ich sicher testen, hab atm aber grad keine Zeit

[xchs]

Find das auch einen guten Ansatz! So was in der Art würde das Handling mit den statischen Ressourcen sicher sehr vereinfachen...

Als zusätzliche Features (neben der CSS-Minimierung) wären noch interessant:

• Minimierung (ausgewählter) JavaScript-Dateien mit anschließender Aneinanderkettung ("Concatenate")
• Als Tool für die Minimierung wäre der YUICompressor sehr zu empfehlen, der neben CSS- auch JS-Dateien optimal komprimieren kann (vgl. dazu auch diesen Vergleichstest)
• Optimal wäre weiters eine anschließende Gzip-Kompression der zuvor zusammengefassten Dateien (sowohl CSS, als auch JS)
• Für eine bestmögliche Performance wäre es zusätzlich empfehlenswert, wenn die so generierten Ressourcen (JS/CSS) am Server auch für eine bestimmte Zeit gecacht werden könnten.
• Wenn die Dateien durch einen entsprechenden HTTP-Header (Expires usw.) auch im Browser (Client) gecacht werden, dann müsste man zusätzlich in der URL eine Art Versionierung einbauen, damit bei eventuellen Updates oder Änderungen an den CSS-/JS-Dateien, die neuen Versionen auch vom Browser neu angefordert werden
• ...

[Andreas]

Bittet testet es doch mal und gebt mir Feedback.

Hallo Schlabeuma,

gute Idee. Hab es mal getestet. Hier ist, was mir erst mal aufgefallen ist:

Dürfte eigentlich bei dir auch nicht funktionieren, da du die erstellte Datei in StylsheetsExternal.php Zeile 169 mit

$objFile->delete(); 

wieder löschst. Ich gehe davon aus, dass du nur den Inhalt löschen wolltest. Ich hab diese Zeile entfernt und anstelle von append() benutze ich write(), dann geht's. TL write() benutzt TL fputs() mit fopen(..., wb), überschreibt also automatisch den alten Inhalt.

// vorher
$objFile = new File($objCSS->target_folder. '/' . $objCSS->name.'.css');
$objFile->delete();

$objFile->append($strFile);
$objFile->close();

// nachher
$objFile = new File($objCSS->target_folder. '/' . $objCSS->name.'.css');

$objFile->write($strFile);
$objFile->close(); 

Ab Zeile 143 könntest du vielleicht noch Methoden von TL benutzen, ich sehe da ein fopen() usw.

Die erste Ausführung wirft eine Fehlermeldung im FE aus.

Die CSS-Datei wird bei jedem Seitenaufruf neu erzeugt, obwohl ich die CSS-Dateien nicht geändert habe.

An den Anfang seiner Dateien darf man nicht mehr @charset "UTF-8"; setzen, da das sonst mehrfach innerhalb der Datei vorkommt, und das darf ja nicht.

CSS3 wie z.B. overflow-y:scroll; od. border-radius:10px; wird übernommen.

Die Einstellung des Medientyps erlaubt keine Mehrfacheinstellung wie z.B. "screen, projection". Die Medientypen werden aber aus den original CSS-Dateien übernommen. Ich weiß grad nicht, was da den Vorrang hat, wenn ich z.B. mit "all" einbinde und innerhalb der CSS-Datei Bereiche mit "print" od. "screen, projection" vorhanden sind. Werd ich noch testen.

Ansonsten werd ich's mal weiterhin bei meinem jetzigen Projekt ausprobieren und sehen wie es sich während des Entwickelns bewährt. Wichtig ist natürlich, dass der Performancegewinn nicht durch die Laufzeit des Scripts wieder aufgehoben wird.

Gruß Andreas

[Schlauchbeutelmaschine]

Hallo und danke für Euer Feedback.

@xchs
Das Hauptziel der Erweiterung ist die bequeme Verwaltung von externen CSS Dateien. Ich fände es auch toll wenn TYPOlight diese Optimierungsfunktionen hätte aber dann sollte die als eigene Erweiterung oder in den Core integriert werden.

@Andreas
Die Schreibprozesse und anderen Fehler habe ich jetzt verbessert.
Was meinst du denn mit @charset "UTF-8"? Wo kann ich das sehen bzw. wird das gemacht?
Das mit der Mehrfacheinstellung werde ich einbauen.
Die Perfomance darf natürlich nicht leiden, also wenn du meinst das die Extension etwas verlangsamt sag bitte Bescheid.

Gruß Sabri

[xchs]

Das Hauptziel der Erweiterung ist die bequeme Verwaltung von externen CSS Dateien. Ich fände es auch toll wenn TYPOlight diese Optimierungsfunktionen hätte aber dann sollte die als eigene Erweiterung oder in den Core integriert werden.

Da stimme ich Dir zu - das wäre sowieso am besten!

[xchs]

Was meinst du denn mit @charset "UTF-8"? Wo kann ich das sehen bzw. wird das gemacht?
Das mit der Mehrfacheinstellung werde ich einbauen.
Die Perfomance darf natürlich nicht leiden, also wenn du meinst das die Extension etwas verlangsamt sag bitte Bescheid.

Naja, das Problem ist, dass bei vielen CSS-Datein ganz am Anfang eben dieser Hinweis auf das verwendete Characterset vorhanden ist und beim Zusammenführen würden dann wahrscheinlich mehrerer solcher Deklarationen im zusammengesetzten CSS vorkommen, obwohl dort nur (höchstens) eine drinn vorkommen sollte (oder gar keine - je nach dem). Das Problem liegt aber meiner Meinung nach bei CSSTidy, das in dieser Hinsicht nicht besonders gründlich arbeitet. Da gibt es sicherlich einige, die besser funktionieren und zudem noch effizienter minimieren...

Zum Performanceproblem: Ich hab halt gesehen, dass ähnliche Tools wie Deines hier das Zusammensetzen der CSS-Dateien nur einmal ausführen (oder eben bei entsprechenden Änderungen an den Quell-CSS-Dateien) und dann die so minimierte Version in einem Cache ablegen, um dann bei allen folgenden Zugriffen diese Datei direkt aus dem Cache laden zu können (anstelle jedesmal neu zu minimieren und zusammenzusetzen)

[Andreas]

Was meinst du denn mit @charset "UTF-8"? Wo kann ich das sehen bzw. wird das gemacht?

Hallo Sabri,

zur Ergänzung von xchs: Diese Anweisung findest du z.B. in jeder CSS-Datei von YAML. Sie soll den Browsern die Erkennung der Codierung der Dateien erleichtern. Die Dateien müssen dann natürlich auch UTF-8 codiert sein. Meines Wissens nach darf diese Anweisung nur einmal in einer CSS-Datei, und das in der ersten Zeile, vorkommen.

Zur Performance: Ich habe leider keine Ahnung von Benchmarking.

Andreas

[Schlauchbeutelmaschine]

Ok, ich denke aber das auf anfangs auf die charset Angabe verzichten werde da ich nicht weiss ob jeder wirklich UTF-8 verwendet.

Also CSSTidy war jetzt der einzig freie PHP CSS Parser den ich gefunden habe.
Wenn du einen anderen guten kennst dann immer her damit.
Wo siehst du denn bei Ihm Probleme?

Die finale CSS Datei wird nicht bei jedem Aufruf neu generiert sondern eben nur bei Änderungen in den originalen CSS Dateien. Das ist ja quasi das besondere an der Extension.

[xchs]

Also CSSTidy war jetzt der einzig freie PHP CSS Parser den ich gefunden habe.
Wenn du einen anderen guten kennst dann immer her damit.
Wo siehst du denn bei Ihm Probleme?

Die finale CSS Datei wird nicht bei jedem Aufruf neu generiert sondern eben nur bei Änderungen in den originalen CSS Dateien. Das ist ja quasi das besondere an der Extension.

Also, Du könntest Dir eventuell das Tool "Minify" anschauen. Weitere und auch umfassendere Tools, die ähnliche Optimierungen vornehmen, wären z.B.:

• SmartOptimizer
• Web Optimizer
• ...

Grundsätzlich liefert der "YUICompressor" recht gute Ergebnisse, sowohl bei der Minimierung von CSS- als auch von JS-Dateien. Ich weiß jetzt allerdings nicht genau, wie Du das am besten mit PHP integrieren könntest.

NACHTRAG: Hab' grad gesehen, dass "Minify" den YUICompressor in ein PHP-Skript integriert: http://code.google.com/p/minify/sour...Compressor.php

[Andreas]

Ich hab jetzt nochmal deine neue StylesheetsExternal.php drüber geschoben, und jetzt klappt's auch bei mir. Keine Ahnung, was das war.

Wer YAML benutzt hat das automatisch in seinen Dateien drin. Es war auch nur als Hinweis von mir gedacht.

Andreas

[Andreas]

Der Attribute-Selector
a[href^="http:"]
wird umgewandelt in
a[href^=http:]
und funktioniert somit nicht mehr.

Andreas

[Andreas]

Die Einstellung des Medientyps erlaubt keine Mehrfacheinstellung wie z.B. "screen, projection". Die Medientypen werden aber aus den original CSS-Dateien übernommen. Ich weiß grad nicht, was da den Vorrang hat, wenn ich z.B. mit "all" einbinde und innerhalb der CSS-Datei Bereiche mit "print" od. "screen, projection" vorhanden sind. Werd ich noch testen.

Um Stylesheets für unterschiedliche Medien bereit zu stellen muss man im BE mehrere 'Stylesheets extern' anfertigen. Im HTML-Quelltext hat man dann z.B. 4 Zeilen:

<link rel="stylesheet" href="tl_files/css/normal.css" type="text/css" media="screen, projection, tv" />
<link rel="stylesheet" href="tl_files/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="tl_files/css/handheld.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="tl_files/css/braille.css" type="text/css" media="braille" />

Als Alternative könnte man die Unterscheidungen aber schon innerhalb seiner CSS-Dateien machen. Mit:

@media screen, projection, tv { ... }
@media print { ... }
@media handheld { ... }
@media braille { ... }

Und bräuchte somit im BE nur ein 'Stylesheet externtal' anzulegen und einzubinden. Das geht aber nur dann, wenn ich in den Einstellungen "Medientypen" die Option habe "noMedia", dass also das Attribut media="" gar nicht erst gerendert wird.

Und noch ne Kleinigkeit ist mir aufgefallen: Als Zielordner kann man nur einen Unterordner von tl_files/ und nicht tl_files selber auswählen. Brauch ich jetzt zwar nicht, aber der ein oder andere, abhängig vom Projekt hätte das vielleicht gerne. Mit folgendem Code in der dcaconfig.php kann man das Löschen von CSS-Dateien im root ja verhindern:

<!-- Löschen von Root-Dateien verhindern -->
$GLOBALS['TL_CONFIG']['rootFiles'][] = 'beispielname.xml';
$GLOBALS['TL_CONFIG']['rootFiles'][] = 'beispielname.css'; 

Vielleicht sollte man dann auch direkt anbieten auch den root als Zielverzeichnis wählen zu können, zwecks Flexibilität.

Andreas

[andre.5tz]

Hallo,

wenn ich unter Seitenlayouts auf "mehrere Bearbeiten" gehe, dann wird bei mir ein leeres Kästchen ohne Beschreibung angezeigt. Ein Klick darauf und weiter verrät mir dann, dass ich stylesheets_external bearbeiten kann.

Ist nur eine Kleinigkeit, klasse Extension, die ich bestimmt nutzen werde.

Viele Grüße
André

[Andreas]

Um das Attribut media="" nicht zu rendern, habe ich jetzt erstmal folgende Zeilen geändert. Ich missbrauche den Mendientyp "aural" dazu.

// Zeile 190 vorher
//-- Add the css path to the header
$GLOBALS['TL_HEAD'][$objCSS->name] .= '<link rel="stylesheet" href="' . $objCSS->target_folder . '/' . $objCSS->name . '.css" type="text/css" media="' . $objCSS->media . '" />';

// nachher
//-- Add the css path to the header
$attributeMedia = $objCSS->media == 'aural' ? '' : ' media="' . $objCSS->media . '"';
$GLOBALS['TL_HEAD'][$objCSS->name] .= '<link rel="stylesheet" href="' . $objCSS->target_folder . '/' . $objCSS->name . '.css" type="text/css"' . $attributeMedia . ' />'; 

Andreas

[Schlauchbeutelmaschine]

Hallo und danke Euch für die Hinweise.

@xchs
Das waren die Tools die ich auch meinte und eben als extra Erweiterung sehe.
Ich habe mir auch den YUI Kompressor angeschaut wobei er als PHP Variante Java benötigt und ich nicht weiss ob das jeder Server unterstützt. Hast du mal konkret YUI und CSSTidy verglichen? Also was die Größenunterschiede der Dateien angeht?

@Andreas
Die Idee mit den @media Typen finde ich ganz gut. Gibt es da Einschränkungen von bestimmten Browsern oder ist es voll kompatibel? Das mit Verzeichnissen ist so eine Sache.. gerade mit dem Root. Da müssten die Nutzer eben tl_files verwenden, ich glaube nicht das dadurch jemand ausgeschlossen wird, oder?

[Andreas]

Die Idee mit den @media Typen finde ich ganz gut. Gibt es da Einschränkungen von bestimmten Browsern oder ist es voll kompatibel?

Nicht dass ich wüsste oder etwas darüber finden könnte, YAML benutzt das auch. Infos von selfhtml siehe hier:
Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien
Format-Definitionen für unterschiedliche Ausgabemedien

Das mit Verzeichnissen ist so eine Sache.. gerade mit dem Root. Da müssten die Nutzer eben tl_files verwenden, ich glaube nicht das dadurch jemand ausgeschlossen wird, oder?

War wieder nur ein Hinweis von mir. Ich persönlich komm zur Zeit auch ohne klar.

Während der Entwicklung habe ich CSS jetzt wieder manuell eingebunden, da mir firebug ja anzeigt, in welcher Datei in welcher Zeile eine Anweisung vorhanden ist. Das geht dann natürlich nicht mehr, da firebug ja die geladene (komprimierte) CSS anzeigt und man ja in den original Dateien arbeitet.

Andreas

[xchs]

Das waren die Tools die ich auch meinte und eben als extra Erweiterung sehe.
Ich habe mir auch den YUI Kompressor angeschaut wobei er als PHP Variante Java benötigt und ich nicht weiss ob das jeder Server unterstützt. Hast du mal konkret YUI und CSSTidy verglichen? Also was die Größenunterschiede der Dateien angeht?

Nein, einen konkreten Vergleich zwischen den beiden Tools habe ich noch nicht gemacht - könnte ich aber demnächst mal durchführen. Der YUICompressor hat für mich eben den Vorteil, dass ich damit sowohl CSS- als auch JS-Dateien recht ordentlich verkleinern kann, ohne dass dabei irgendwelche Syntax-Fehler oder Skript-Fehler generiert werden. Denn nicht nur die Größenunterschiede sind in solchen Fällen ausschlaggebend, sondern auch wie "sauber" diese Minimierung vonstatten geht...

[pmmueller]

Hallo Sabri,

Die Erweiterung und weitere Infos findet ihr im Repository.

Ich hatte [stylesheets_external] im Repository zwar gesehen, aber beim Überfliegen nicht richtig begriffen was die Erweiterung macht. Hatte das fälschlicherweise so verstanden, dass sie in erster Linie zum Komprimieren des CSS dient und dass es dabei dann Probleme mit CSS3 gibt, und dann wieder vergessen.

Bis zu meinem CSS-Vortrag auf dem Usertreffen in Essen. Da hatte ich mir ja gewünscht, dass man externe Stylesheets aus dem Backend heraus verwalten kann. Nach der Erwähnung auf der Twitter-Wall habe ich die Erweiterung dann installiert und festgestellt, dass sie genau das macht, was ich mir gewünscht hätte: die Einbindung und Verwaltung externer Stylesheet aus dem Backend heraus.

Gerade als ich mich anfing zu freuen und das mit ins Stylesheet-Kapitel schreiben wollte, kam die Contao 2.9 Beta. Und mit der Beta der Theme-Manager, bei dem BE-Modul "Stylesheets" aus dem Navibereich in die Bearbeitungsleiste des Themes gerutscht ist, weil es einen Set Stylesheets pro Theme gibt.

Planst du eventuell eine Anpassung von [stylesheets_external] an den Theme-Manager?

[alex]

Hi Sabri,

hast Du Dir schon Gedanken für die Contao Version 2.9.x gemacht bezüglich CSS Aggregator und Theme Manager ?

Gruß Alex

[Schlauchbeutelmaschine]

Hallo,

sorry wenn ich mich erst jetzt melde!

Ich habe das Modul aufjedenfall noch auf der Liste und möchte es gerne noch weiterentwickeln.

Das Hauptproblem ist momentan noch die Geschwindigkeit der Datenaktualisierung die zu langsam ist. Hier müsste ich nochmal ausführlicher Testen damit die Erweiterung nicht dafür verantwortlich ist das Contao langsam läuft. Sobald ich das geschafft habe melde ich mich nochmal und habe dann auch die Anpassung für die 2.9 mit dem Theme Manager drin.

Grüße Sabri

[Jumpingpixel]

Hallo,

mir ist gerade aufgefallen das die Conditional Comments die man bei einem Stylesheet angeben kann nicht ausgewertet werden. In der StylesheetsExternal.php konnt ich auch keine Auswertung finden.

Das Problem habe ich durch das einfügen von zwei Zeilen gelöst.

//-- Add the css path to the header
$link = '<link rel="stylesheet" href="' . $objCSS->target_folder . '/' . $objCSS->name . '.css" type="text/css" media="' . $objCSS->media . '" />';
$link = ($objCSS->cc) ? '<!--[' . $objCSS->cc . ']>' . $link . '<![endif]-->' : $link;
$GLOBALS['TL_HEAD'][$objCSS->name] .= $link; 

Mfg
Alexander

[Schlauchbeutelmaschine]

Hallo Alexander,

danke für den Hinweis!

Grüße Sabri

[timo1975]

Hallo zusammen,

ich würde es begrüßen, wenn beim Generieren einer neuen CSS-Datei noch ein Timestamp mit in den Dateinamen aufgenommen wird. Das hat den Vorteil, dass die Datei dann sowohl im lokalen Browser-Cache, als auch bei einer Distribution über ein CDN wie Amazon CloudFront, immer aktuell ist.

ich bau mir das selbt schnell ein, aber da es keine große Mühe ist, sollte es vielleicht fester Bestandteil sein. Ich sehe auch sonst darin keinen Nachteil.

Gruß
Timo

[Thomas]

Von mir noch ein kurzer Nachtrag!

Andreas hatte schon den Hinweis gegeben, dass man tl_files nicht direkt angeben kann!
Selbiges geht auch nicht mit Ordnerhirarchien unterhalb des Hauptordners.

Ich habe gerne eine saubere Trennung von unterschiedlichen Bereichen, die ich meistens in tl_files mit Ordnerhirarchien trenne.

[Schlauchbeutelmaschine]

Hallo Thomas,

könntest du bitte nochmal genau erklären was du möchtest?

Grüße Sabri

[Thomas]

Hallo!

Man kann nur den Ordner tl_files auswählen!
Ordner die sich in diesem Ordner befinden werden ausser Acht gelassen.

[xtcPlanet]

Das ist zwar gut so das man von Contao als Anfänger "nur" auf den Ordner tl_files zugreifen (z.B. hochladen) kann, aber manchmal wünscht man sich als Admin auch von Contao-Seite her einen Zugriff auf andere z.B. Systemordner - da ich derzeit das Problem hab eine neue Erweiterungsversion manuell in den Ordner /system/modules/Erweiterungsnamen einspielen zu müssen - und irgendsoein Knilch / exWebdesigner sämtliche Passwörter verstellt hat. Also auch das Kundenmenü / Control Penal) ist nicht mehr zugänglich. Und mein Kunde ist als Laie natürlich jetzt damit auch überfordert mir mal eben mal die neue Passwort-Email weiterzuschicken, damit ich mir selbst schonmal einen neuen FTP-Zugang wieder zuschneidern kann.

Naja... muß man halt warten - irgendwann gehts schon weiter...

[cmyk]

Versionierung wäre toll. Bei jedem Save v+=1.
<link rel="stylesheet" href="tl_files/css/style.css?v=2" type="text/css" media="all" />

[iCodr8]

Wann ist denn die Sache mit den Conditional Comments im Repository verfügbar?

[jmk]

Mir ist ein Problem mit UTF-8 kodierten Dateien aufgefallen: Wenn diese mit BOM kodiert sind, werden Kommentare am Anfang von CSS-Tidy (?) nicht ignoriert sondern finden sich auch in der finalen css Datei wieder.

D.h. also: CSS-Dateien müssen entweder als ANSI- oder UTF-8-ohne-BOM-kodierte Dateien vorliegen, sonst funktioniert es nicht 100%.

Ansonste: SUPER Erweiterung! Erleichtert mir sehr die Arbeit. Danke!

[xchs]

http://de.contaowiki.org/UTF-8_ohne_BOM

[monachus]

Hallo,

ich wollte die Erweiterung für Contao 2.9.5 nutzen, aber irgendwie wird das angelegte Stylesheet nicht in das Layout übernommen.

Ich gehe so vor wie Beschrieben:
1. "Stylesheet extern" -> neues Stylesheet
2. Namen vergeben und Speicherort (tl_files genommen)
3. Stylesheet ausgewählt, welches ich benutzen möchte
4. Stylesheet extern im Theme / layout angeklickt.

Trotzdem wird das Stylesheet nicht eingebunden oder geldaden.

Mache ich etwas falsch?

Gruß
Marko

[nelhop]

Hallo,

ich bin gerade dabei die erste Seite mit 2.10 aufzubauen. Dabei wollte ich auch gerne wieder stylesheets_external einsetzen.
Es scheint aber nicht mit der neuen Conto Version kompatibel zu sein.

Daher wollte ich mal nachfragen ob das in naher Zukunft geplant ist, oder ob ich mich nach Alternativen umsehen muss. ;-)

[xchs]

Wäre die Erweiterung "theme_plus" vielleicht eine Alternative?

[nelhop]

Danke für die flotte Antwort!

Hab mir theme_plus jetzt mal angesehen und finde es bisher sehr gut.

Allerdings vermisse ich die Option mehrere Dateien zusammenzufassen und zu komprimieren.
Habe ich das übersehen, oder gibt es das hierbei nicht?

[xchs]

Die Kernfeatures

Einbinden externer CSS und JavaScript Dateien
Minimieren und Komprimieren von CSS und JavaScript Dateien
Zusammenführen von CSS und JavaScript Dateien, einschließlich der von Contao und den Plugins mitgelieferten Dateien
Support für less.css, jetzt auch mit phpless.

Hier mal eine Anleitung zur Vorgängerversion von Theme+: http://de.contaowiki.org/Layout_additional_sources

[andreasisaak]

Danke für die flotte Antwort!

Hab mir theme_plus jetzt mal angesehen und finde es bisher sehr gut.

Allerdings vermisse ich die Option mehrere Dateien zusammenzufassen und zu komprimieren.
Habe ich das übersehen, oder gibt es das hierbei nicht?

Installier dir cssMinimizer und jsMinimizer!

[Andreas]

Installier dir cssMinimizer und jsMinimizer!

Geht bei mir auch noch nicht, trotz cssMinimizer und jsMinimizer. Weder zusammenfassen noch minimieren. Contao 2.10.1

[andreasisaak]

Und du hast es in den Einstellungen konfiguriert? Hab hier grade ein Projekt vor mir, da klappt es wunderherrlich