Variablen in Styles.css

N

NicoleStar

Guest
Hallo,

habe eine styles.css Datei welche im Verzeichnis "css" -> "../css/styles.css" ist. Meine Bilder sind im Verzeichnis "img" -> "../img/bild.jpg" . Da ich nicht immer den kompletten Pfad für die Bilder angeben möchte z.B. bei der Funktion "background-image: url(../img/bild.jpg);" und eine Variable im Projekt habe, möchte ich die Variable "$picurl" im css nutzen. Also die Lösung müsste wie folgt aussehen oder so ähnlich sein "background-image: url(../$picurl/bild.jpg);". Wie kann man das realisieren, das eine Variable genutzt wird im styles.css. Wer hat eine Idee, was funktioniert ist das die styles.css im "img" Verzeichnis liegt und ich keine Pfadangaben benötige. Es wäre jedoch besser von der Struktur diese in einem anderen Verzeichnis zu haben aus Sicherheitsgründen. Warte auf Euer Feedback.

Gruß Nicole
 
Ist nicht wirklich schwer.

.htaccess --> style.URL.css soll style.php?url=url aufrufen.

In der style.php generierst du die CSS-Datei indem du $picurl durch $_GET['url'] ersetzt.
 
Ich frage mich, wenn Du bereits irgendwo die Variablen definiert hast, weshalb Du nicht gleich im Quelltext mittels PHP einfach noch eine Linie <style .../style> einfügst? (Die Position ist ja mehr oder weniger egal, ich manipulier mein Design partiell sogar am Schluss der Seite noch um).

Ich mein, Du kannst ja für das konstante Design das externe CSS nutzen und für alles Dynamische gleich im Quelltext einfügen. Es sei denn: die nicht näher definierten "Sicherheitsgründe" sprächen dagegen. Da habe ich natürlich keine Ahnung, daher kannst Du meinen Vorschlag auch gerne in die Tonne treten, wenn's nicht passt
tongue.gif

Ich schreib halt nur, was auch noch möglich wäre...

Aber die bereits vorgeschlagene Lösung ist natürlich ok!

Was natürlich auch zu bedenken ist
Durch das ständige Neugenerieren fällt ja auch das Caching weg. Sprich: Deine Lösung bedeutet ja nicht nur Performance-Probleme aufgrund der "dynamischen Generierung", sondern auch aufgrund der Tatsache, dass die CSS jedesmal wegen einer kleinen Änderung neu geladen werden muss.

Meine Meinung ist daher klar: die kleine Änderung gehört direkt in den Quelltext der Seite.
 
QUOTE musst evtl. nur auf Performance achten, ansonsten genau wie nitrit beschrieben hat.


Ja, hab ich ganz vergessen, such bei Google mal nach "Deine Sprache - Caching" oder sowas.
 
Hallo,

erst mal danke für die Vorschläge, beiden Ideen funktionieren auch technisch.

Jedoch zum ersten Ansatz "RewriteRule für styles.css" , da meine Styles recht groß ist und wenn diese ständig neue geladen geht mein Geschwindigkeitsvorteil in den Keller und ist nicht wirklich schnell. Habe es gerade mal getestet.

Die zweite Lösung finde ich auch gut, aber auch hier müßte ich ca. 8000 mal das style Element in das <div class="boxu1"> neu <div class="boxu1" style="background-image: url(<? echo $picurl;?>/bild.jpg);"> einfügen, und das nur wegen dem Bild.

Hier nochmals detaliert was ich eigentlich habe !

Ausschnitt Datei styles.css

.boxu1 {
float: left;
width: 183px;
height: 242px;
background-image: url(../img/bild.jpg);
background-repeat: no-repeat;
padding: 0px;
overflow: hidden;
border-bottom-style: double;
border-bottom-width: 3px;
border-color: #089ABF;
margin-bottom: 10px;
margin-top: 10px;
}

Beispiel Auschnitt PHP

<div class="boxu1">
<div class="boxu1reiter"><a href="link1.php" target="_self">Text</a></div>
<div class="boxu1image"><a href="link2php" target="_self"><img src="<? echo $picurl;?>/bild2.jpg" alt="" title="" border="0"/></a></div>
</div>

Wie am Code zu erkennen ist nimmt die "div class boxu1" immer das Stylessheet mit dem richtigen Bild. Zur zeit habe ich ca. 80 Classes und die "boxu1" wird sehr oft benutzt, teilweise pro Seite ca. 20 mal und ich habe ungefähr 500 Seiten, vielleicht ein paar mehr.

Hat noch einer eine Idee, wenn nein werde ich einfach die styles.css in das Bildverzeichnis "img" legen und dort brauche ich keine Pfadangaben.

Gruß Nicole

 
Hallo,

das Problem, wenn du CSS erst zum Schluss einer Seite definierst, ist dass die Webseite leer bleibt, bis alles geladen ist - das liegt daran, dass Browser erst was anzeigen, wenn sie alle CSS-Angaben haben. Das bedeutet: niemals CSS im Footer!

Gruß, Daniel
 
Hallo Daniel,

ich habe die styles.css im Header untergebracht , im Footer wäre es ja sehr dumm ...

Danke trotzdem für den Ansatz.

Gruß Nicole

 
QUOTE das Problem, wenn du CSS erst zum Schluss einer Seite definierst, ist dass die Webseite leer bleibt, bis alles geladen ist

Bitte spezifizieren: Sprichst Du von einer externen CSS-Datei? Die CSS-Definition innerhalb eines Style-Containers ist meiner Ansicht nach +/- neutral. Das führe ich aus:

Meine Meinung:
ZUMINDEST wird die Seite einfach nochmals aufgebaut. Wenn es nach Dir geht: woher soll ein Browser "wissen", ob in einem Dokument noch irgendwelche CSS-Angaben folgen? Währenddem es noch am Laden ist?

Das Problem sollte aber nie der "Quelltext" inklusive eines Style-Containers irgendwo in einer Seite sein, da von mir aus eine html-Seite in 0.x Sekunden geladen ist! Das Performance-Problem liegt bei "externen Dateien" und dann insgeheim, wo in der Pipe die externen Dateien gethreaded werden. Wenn ich den Befehl für eine externe CSS natürlich nach "lade 10 - 20 Bilder" gebe, dann ladet jeder Browser wohl oder übel zuerst die Bilder. [Gut: man könnte meinen, moderne Browser setzen Prioritäten ;-)]

Aber im Quelltext <style> anzugeben, hat effektiv keinen Einfluss auf die Darstellungsgeschwindigkeit.

Ich bleib dabei, das dynamische Einfügen der einen Zeile mit dem Hintergrundsbild in einem Style-Container direkt im Quelltext der darzustellenden Website bietet die beste Performance:
a) da der PHP-Interpreter nicht zweimal pro Imp arbeiten muss
b) da die statische CSS-Datei [mit den restlichen CSS-Definitionen] weiterhin gecached wird.
 
Nabend,

selbstverständlich gibts einen Unterschied, ob eine Datei geladen wir oder der style in der Datei drin ist: Cache - normale CSS Dateien werden in den Cache gelegt und der Browser prüft nur bei jedem Aufruf, ob der Inhalt gleich ist. Wenn du dynamisch viel CSS generieren lässt, dann hast du das Problem dass du jedesmal beim Nachladen den Style mitlädst, obwohl er schon im Cache wäre.

Frag mich nicht wie, aber verhindert das einfügen von CSS-Befehlen im Footer das sog. progressive Rendering, d.h. der Browser verhindert ein doppeltes Designen der Seite (Ausnahme: Firefox).

Gruß, Daniel
 
Mir ist der "doppelte Aufbau" durchaus aufgefallen, aber nicht unbedingt als grosses Hinderniss bezüglich der Darstellungsgeschwindigkeit. Ich werde mich einmal darum achten. Aber selbstverständlich kann ich/man den Style-Container ja auch direkt vor/nach dem Aufruf der externen CSS einfügen. Eventuell im Header, so dass der Browser wirklich noch nichts gerendert hat.

Das mit dem "Footer" ist dahingehend von mir gestrichen.
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben