Kombinierte CSS Datei durch @media screen,projection{}

[ghost]

Die Geschwindigkeit der Seite ist ebenfalls abhängig von den Requests zum Server, ich denke das es möglich ist, diese Anfragen zu reduzieren. Dabei könnten wir die CSS Dateien für die unterschiedlichen Medien (all,screen,projection,u.v.a) zu einer Gesamten kombinieren.

Derzeit werden Sie ja jeweils in den Header gepackt und passend zum Medium aktiviert.

<link rel="stylesheet" href="system/typolight.css" type="text/css" media="screen" />
<link rel="stylesheet" href="plugins/mediabox/css/mediabox_white.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
...

Wenn die CSS Datensätze aus der Datenbank ausgelesen werden und diese in die CSS Datei geschrieben werden, dann wäre es doch sicher möglich dies mit den Regeln `media screen,projection{css...} in eine CSS Datei zu schreiben.

`media screen
{
/** TYPOlight Open Source CMS :: Copyright (C) 2005-2010 Leo Feyer :: LGPL license **/
body{margin:0;padding:0;font-size:100.01%;text-align:left;position:relative;}select,input,textarea{font-size:99%;}form{margin:0;padding:0;}img{border:0;}#left{float:left;}#right{float:right;}#main{width:auto;position:relative;}.inside{position:relative;text-align:left;}.block{overflow:hidden;}.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both;}
.invisible{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline;}.custom{display:block;text-align:left;}.custom:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/** mediaboxAdvanced - white theme **/
#mbOverlay{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#fff;cursor:pointer;}#mbOverlay.mbOverlayFF{background:transparent url(../images/80.png) repeat;}#mbOverlay.mbOverlayIE{position:absolute;}#mbCenter{position:absolute;z-index:9999;left:50%;overflow:hidden;background-color:#fff;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 5px 20px rgba(0,0,0,0.40);-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.40);}
#mbCenter.mbLoading{background:#fff url(../images/WhiteLoading.gif) no-repeat center;-moz-box-shadow:none;-webkit-box-shadow:none;}#mbImage{position:relative;left:0;top:0;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#000;text-align:left;background-position:center center;background-repeat:no-repeat;padding:10px;}#mbImage a,#mbImage a:link,#mbImage a:visited{color:#333;}
#mbImage a:hover,#mbImage a:active{color:#000;}#mbBottom{min-height:20px;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#999;text-align:left;padding:0 10px 10px;}#mbTitle{display:inline;color:#000;font-weight:bold;line-height:20px;font-size:12px;}#mbNumber{display:inline;color:#333;line-height:14px;font-size:10px;margin:auto 10px;}#mbCaption{display:block;color:#333;line-height:14px;font-size:10px;}
#mbPrevLink,#mbNextLink,#mbCloseLink{display:block;float:right;height:20px;margin:0;outline:none;}#mbPrevLink{width:24px;background:transparent url(../images/CustomWhitePrevious.gif) no-repeat center;}#mbNextLink{width:24px;background:transparent url(../images/CustomWhiteNext.gif) no-repeat center;}#mbCloseLink{width:24px;background:transparent url(../images/CustomWhiteClose.gif) no-repeat center;}#mbError{position:relative;font-family:Myriad,Verdana,Arial,Helvetica,sans-serif;line-height:20px;font-size:12px;color:#000;text-align:center;border:10px solid #700;padding:10px 10px 10px;margin:20px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#mbError a,#mbError a:link,#mbError a:visited,#mbError a:hover,#mbError a:active{color:#700;font-weight:bold;text-decoration:underline;}
/** weitere CSS Datein**/
}
`media screen,projection
{
....eigenes Layout
}
`media print
{
...Druckstylesheet
}

Die CSS Dateien für Erweiterungen usw. müssen sich dann ebenfalls nach den Medien richten oder @media all{} als default setzen.

--- Originally created by neueplaneten on June 7th, 2010, at 11:06am (ID 2094)

[ghost]

Mir ist bei diversen Erweiterungen aufgefallen, dass die CSS-Anweisung direkt im /html Dokument geschrieben werden. Falls CSS Werte dynamisch generiert werden müssen, also in Abhängigkeit von der Anzal an Elementen, dann sollten diese zumindest als Stylesheet via .php in den eingebunden werden.

Erstellung einer dynamischen CSS Datei via php.

<link  type="text/css"  rel="stylesheet"  href="/css/erweiterungXY.php"  />

Code innerhalb der erweiterungXY.php

<?php header("Content-type: text/css");  ?>

#elementID,
.elementClass
{
float: <?php $wert; ?>
width: <?php $wert; ?>
}

Beispiel: noobslide - Erweiterung

Ich bin davon überzeugt, dass die Qualität der Erweiterung hinsichtlich der Programmierung im Bezug auf die Ziele von Contao sich so fort- und umsetzen sollten. Denn ich möchte auf keinen Fall wieder wie in Joomla jedesmal nachprogrammieren um meine PageSpeed-Werte halten zu können. Auch wollen wir ein sauberen Quellcode haben.

Ich lege sehr viel Wert auf hohe Qualität und Standard und bin froh Contao als CMS zu nutzen. Es spart Zeit, es macht die Dinge für mich als Agentur sowie für den Kunden einfacher, die Arbeit effektiv und effizient.

Vielen Dank

--- Originally created by neueplaneten on June 13th, 2010, at 10:16am

[leofeyer]

Ich habe in be53510fa534aa97cd05f555eebceb0f einen optionalen Aggregator für die User-Stylesheets hinzugefügt. Alle Stylesheets - speziell dynamisch durch Erweiterungen hinzugefügte - lassen sich jedoch nicht in einer Datei zusammenfassen, da die enthaltenen Pfade ja jeweils relativ zum Speicherort sind.

--- Originally created on June 19th, 2010, at 04:44pm

[BugBuster1701]

In meiner SVN Testinstallation habe ich dabei ein Problem entdeckt. Ich habe 3 CSS Dateien importiert in einem Rutsch. Dadurch wurden in der Tabelle tl_style_sheet 3 Einträge mit dem selben tstamp erzeugt. Beim erzeugen des Keys in PageRegular.php in der Zeile:

$key = md5($objStylesheets->id .'-'. max($objStylesheets->tstamp, $objStylesheets->tstamp2) .'-'. $objStylesheets->media);

wird nun 3 mal der selbe Key erzeugt, wodurch 2 der 3 CSS Dateien "verloren" gehen bei der Zusammenfassung. ( in der folgende $arrAggregator[$key] Bildung )

Zur Lösung müsste bei der Key Bildung in PageRegular.php was geändern werden denke ich mal.

--- Originally created on June 21st, 2010, at 12:11am

[leofeyer]

Das kann eigentlich nicht sein, denn wie Du siehst wird auch die ID des Datensatzes mit in den Key einbezogen. Selbst wenn der Timestamp und der Medientyp also übereinstimmen, wäre der Key noch immer unterschiedlich. Das Problem muss woanders liegen.

--- Originally created on June 21st, 2010, at 10:18am

[BugBuster1701]

also ich habe mir $key ausgeben lassen und 3 mal denselben bekommen. Sobald ich die tstamp Werte per Hand abgepasst habe (phpmyadmin) lief alles super.

--- Originally created on June 21st, 2010, at 10:27am

[BugBuster1701]

Nachtrag. Das würde ja bedeuten, das mit derselben ID gearbeitet wird bei der $key Erzeugung. Ich werde mal noch einige Logs einbauen, mal sehen was passiert.

--- Originally created on June 21st, 2010, at 10:29am

[BugBuster1701]

Könnte es daran liegen, das du $objStylesheets->id zwar abfragst, in der SQL drüber aber das Feld id gar nicht mit bei hast?

--- Originally created on June 21st, 2010, at 11:31am

[leofeyer]

Ja, daran könnte es liegen :) Mach mal aus dem SELECT tstamp, name, cc, media ein SELECT *,.

--- Originally created on June 21st, 2010, at 12:07pm

[BugBuster1701]

also ein

SELECT id, tstamp, name, cc, media,...

hat schon gereicht. Ein

SELECT *, (SELECT ...

geht natürlich auch (Komma nach Stern!)

--- Originally created on June 21st, 2010, at 12:54pm

[leofeyer]

Der Teufel steckt eben im Detail :)

--- Originally created on June 21st, 2010, at 01:07pm

[aschempp]

Ist das Teufelchen behoben? ;-)

Ich habe mich gerade gefragt, warum dynamisch durch Erweiterungen hinzugefügte CSS-Dateien nicht auch zusammengefasst werden. Dann habe ich bei Kommentar 3 gelesen, dass das nicht geht, weil der Pfad relativ ist... Ich sehe hier das Problem nicht, der Pfad ist doch immer relativ zu TL_ROOT ?

--- Originally created on July 19th, 2010, at 04:42pm

[ghost]

Und bitte auch die contao.css in die Kombi einbeziehen, Ziel ist es am Ende nur eine CSS Datei zu haben, aber im Theme diese der Übersicht getrennt zu bearbeiten.

Nur noch die contao.css mit einbeziehen und die Erweiterungen, dann habe ich ein Schmunzeln auf dem Gesicht und eine weiteres Argument bei Kunden mit bestehenden Projekten auf Basis von anderen CMS.

Let's SEO...Gruß Tilo (neueplaneten)

--- Originally created by neueplaneten on July 20th, 2010, at 01:02pm

[xchs]

Ganz optimal wäre natürlich, wenn die so kombinierte/aggregierte CSS-Datei weiters auch noch geeignet minimiert und anschließend als GZip-te Version im temporären Ordner "/system/html" abgelegt werden könnte. Wird sich aber wahrscheinlich On-the-fly nicht so einfach umsetzen lassen...

--- Originally created on July 20th, 2010, at 08:58pm

[ghost]

Wenn ich folgendes Modul auf dem Apache aktiviere, dann werden diese als gzip an den Browser übertragen.

Folgenden Code in die htaccess im Root von Contao.

<IfModule mod_deflate.c>
<FilesMatch ".(css|js|xhtml|html|htm|php)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Aber erstmal alle CSS Dateien, die im Frontend geladen werden, in eine verpacken und dann das nächste!!!

Gruß Tilo

--- Originally created by neueplaneten on July 20th, 2010, at 09:49pm

[jantheofel]

Fließt in die 2.9.1 die Optimierung noch ein, dass die contao.css mit einbezogen wird? Zumindest in der hier angegebenen Zielversion 2.9.0 ist das leider noch nicht der Fall.

--- Originally created on August 8th, 2010, at 07:40pm

[leofeyer]

Fließt in die 2.9.1 die Optimierung noch ein, dass die contao.css mit einbezogen wird?

Mit Sicherheit nicht. Das stand auch nie zur Diskussion, weil es nicht funktionieren würde.

--- Originally created on August 8th, 2010, at 08:23pm

[ghost]

Ich denke, dass beim Import eines Themes, Anlegen einer neuen CSS sowie importieren von CSS-Dateien diese in der Datenbank erfasst werden. Die contao.css ist nur als Beipackzettel im Ordner und wird ins Frontend eingebunden, jedoch nicht in der Datenbank gelistet ist.

--- Originally created by neueplaneten on August 8th, 2010, at 08:47pm

[leofeyer]

--- Originally completed on June 19th, 2010, at 04:44pm