CMS Made Simple FastCSS Tag - touchFastCss

[Chris]

Hallo zusammen,

wer seine CSS bei CMSms gerne übersichtilich in verschiedene Stylesheets aufteilt kommt schnell auf mehr als 5 Styles die vom Browser jeweils geladen werden wollen.

Für ein Projekt haben wir einen Template Tag als CMSms Plugin gebaut der einige zusätzliche Funktionen mitbringt. TouchFastCSS ist ein TAG für CMS Made Simple der alle Stylesheets zu einem grossen Stylesheet nach Mediatype zusammenführt, Leerzeichen und Kommentare aus den CSS entfernt, den absoluten Pfad für Url-Aufrufe (background) setzt, einen internen Cache (Filebasiert) der Stylesheets anlegt und über einen eingebauten mobile Check für mobile Browser verfügt.

Der Tag steht unter GPL zum Download bereit, die Projektseite auf CMSmadeSimple.org findet ihr unter: http://dev.cmsmadesimple.org/projects/touchfastcss

Um den Tag nutzen zu können muss dieser in das "plugins" Verzeichnis der CMSms Installation geladen werden.

Der Tag wird im Header des Templates anstelle des {stylesheet} Tags welcher standardmässig
von CMSms geliefert wird eingebunden:

Code:

{touchfastcss replace_relpath=1 cleanup=1}

Zusätzlich können folgende Paramater an das Plugin übergeben werden:

• name - Query one template by template name
• nocache - Css cache ignorieren (bis Version 1.0)
• force_rewrite - Css cache ignorieren (ab Version 1.1)
• chk_mobile - Prüfen ob eine mobiler Browser die Seite besucht und nur mobile Stylesheets (Handheld) laden
• css_path - Pfad zum CSS Cache, Default CMSms tmp_dir/static_sytlesheets
• replace_relpath - Ersetze relative Pfade durch absolute URL -> Background: url(http://www.example.com/tmp/css/name.jpg)
• cleanup - Entferne Kommentare und Leerzeichen
• comments - Fügt Kommentare in die Css ein (Minfiy verlust)

--

(http://www.homepage-community.de/UPLOADS/img/fastCSS.png)[/list][/list]

[cyberman]

Klingt gut - eine gzip-Komprimierung des Stylesheets wäre evtl. noch eine interessante Option ... man müsste nur noch eine htaccess-Regel hinzufügen

Code:

# BEGIN Gzip Compression
AddEncoding gzip .gz
<filesmatch "\.css\.gz$">
AddType "text/css" .gz
</filesmatch>
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
</ifmodule>
# END Gzip Compression

[Chris]

Klingt gut - eine gzip-Komprimierung des Stylesheets wäre evtl. noch eine interessante Option ... man müsste nur noch eine htaccess-Regel hinzufügen

Interessante Option - Danke für dein Feedback

Viele Grüße
Chris

[cyberman]

Hmm, ist der Tag in seiner Lauffähigkeit auf irgend welche Versionen beschränkt?

Habs gerade mit einer 1.6.8 und {touchfastcss} versucht - Ergebnis

/* @@@ Plugin touchfastcss @@@ cssId: 55, cssName: CSS-Beispiel für den Kalender, cssModified: 2009-09-25 10:28:36 */



/* @@@ Plugin touchfastcss @@@ cssId: 31, cssName: Accessibility and cross-browser tools, cssModified: 2008-04-09 14:06:31 */



/* @@@ Plugin touchfastcss @@@ cssId: 38, cssName: Navigation: Simple - Horizontal, cssModified: 2006-07-25 21:22:32 */



/* @@@ Plugin touchfastcss @@@ cssId: 39, cssName: Layout: Top menu + 2 columns, cssModified: 2009-09-25 12:04:00 */

Ist doch bestimmt nicht so gewollt, oder?!

Edit: gleiches Ergebnis mit der 1.9.1 ...

[Chris]

Hmm, ist der Tag in seiner Lauffähigkeit auf irgend welche Versionen beschränkt?

Die niedrigste CMSms Version die ich hier habe in der der Tag läuft ist eine 1.6.4 Moindou, die aktuellste eine CMSms 1.9.1 und in beiden läuft er.

Viele Grüße
Chris

[cyberman]

Hmm, das erklärt aber nicht das gepostete Ergebnis ...

[Chris]

Kannst du mal das temporäre Css File löschen und neu schreiben lassen?

Und dann Testweise mit den Schaltern spielen und schauen ob dann deine Css generiert werden:

Code:

replace_relpath
cleanup

Zusätzlich noch den Schlater "nocache=1" setzen.

Nutzt du evtl. Besonderheiten in den Css oder sind das die default Css von einem Theme?
Wie rufst du den Tag aktuell auf?

Viele Grüße
Chris

[cyberman]

Es sind im wesentlichen (bis auf ein paar Farbänderungen) die originalen Themes.

Hatte bislang nur

Code:

{touchfastcss}

verwendet, da sämtliche Parameter optional sein sollten. Hab jetzt die "Vollversion" genommen

Code:

{touchfastcss replace_relpath=1 cleanup=1}

und es funktioniert!

Code:

{touchfastcss cleanup=1}

geht auch. Hab allerdings festgestellt, dass noch nicht alle Leerzeichen sauber gelöscht werden:

.calendar tr td a{  color: red;}.calendar-today{  font-weight: bold;}

(innerhalb der styles)

[Chris]

Danke für dein Feedback, ich habe soeben einige Änderungen an dem Tag eingespielt und im ersten Beitrag ein Update angehängt (Version 1.1).
Damit sollte ein Grossteil deiner Infos verarbeitet sein

Changelog

• leere Css ohne Params gefixt
• Default params hinzugefügt
• Parameter nocache unbenannt -> force_rewrite
• Regex für die Bereinigung der Css verbessert

Hier noch der Link zur SVN Log: http://viewsvn.cmsmadesimple.org/log.php?repname=touchfastcss&path=%2Ftrunk%2Ffunction.touchfastcss.php&

Viele Grüße
Chris

[cyberman]

Vielen Dank für deine prompte Reaktion - werds mir ansehen, sobald ich eine freie Minute finde ...

[Geraldo]

Hallo Chris

unter XAMPP (=WIN) funktioniert es (bei mir?) nur dann, wenn ich einen Parameter für das Verzeichnis angeben, also

Code:

css_path=tmp/touchfastcss

ansonsten wird zwar alles generiert aber Du linkst nach /tmp\touchfastcss/

Code:

<link media="screen" href="http://localhost/cmsms.de/tmp\touchfastcss/23-screen-touchFastCss.css" type="text/css" rel="stylesheet">

Ob obige Pfadangabe auf der Webpräsenz (Linux) durchgeht, habe ich noch nicht ausprobiert

Geraldo

[Chris]

Hallo Geraldo,

danke für dein Feedback.

Ich habe für den Windowspfad eine Änderung vorgenommen, wenn du in deinem Tag die Zeilen 110-118 gegen folgende ersetzt
bist du wieder auf dem aktuellen Stand:

Code:

if(!empty($params['chk_mobile']) && isMobile()){
if($m == 'handheld'){
$html .= "<link rel='stylesheet' type='text/css' href='".$config['root_url']
. "/" . str_replace("\\","/",$css_path) . "/" . $c['file'] . "' media='".$m."' />\n";
}
}else{
$html .= "<link rel='stylesheet' type='text/css' href='".$config['root_url']
. "/" . str_replace("\\","/",$css_path) . "/" . $c['file'] . "' media='".$m."' />\n";
}

Ich lade hierzu aber auch noch eine aktualisierte Version hoch.

Viele Grüße
Chris

[cyberman]

Wäre es da nicht einfacher, die Konstante DIRECTORY_SEPARATOR für den "Pfadtrenner" zu verwenden, anstatt die fette replace-Maschine anzuwerfen?

[Chris]

Wäre es da nicht einfacher, die Konstante DIRECTORY_SEPARATOR für den "Pfadtrenner" zu verwenden...

Für die Pfadangaben auf "Filesystemebene" wird die Konstante DIRECTORY_SEPARATOR im Tag genutzt, für den Pfad in den URL Requests nutze ich jedoch den Unix "/" Slash.

Bei Geraldo würde der Einsatz der DS Konstante bei den URL Requests dann zu dem Ergebnis führen:

Code:

<link media="screen" href="http://localhost/cmsms.de/tmp\touchfastcss\23-screen-touchFastCss.css" type="text/css" rel="stylesheet">

Ohne Replacen müssten wir entweder einen 2ten Pfad setzen und für die URL Requests nutzen oder ganz auf den DIRECTORY_SEPARATOR verzichten (oder notfalls variabel als optionalen Paramater mit anhängen) damit löst sich das Problem dann von selber und es wäre kein Replace mehr notwendig.

Viele Grüße
Chris

[Chris]

Anbei eine kurze Updateinfo für den Tag auf Version 1.2:

Code:

Rename isMobile -> touchIsMobile, Declare func touchIsMobile only if not declared
Goodbye DIRECTORY_SEPARATOR, Remove str_replace

Das Problem mit den Windows und Unixpfaden ist mit der Version behoben, der Tag hängt oben an.

Frohe Festtage
Chris