[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