Share
Cascading Style Sheets ist eine Sprache für Präsentationsstilblätter. In diesem Sinne verfügt es nicht über die Funktionalität, die viele Entwickler ihren Programmierinstinationen befriedigen möchten. Heute werden wir uns überlegen, wie Sie Ihr CSS überladen, indem Sie PHP unter die Haube legen.
Die Verwendung von CSS zum Betreiben einer Website ist im zeitgenössischen Web eine Voraussetzung für Nicht-Flash-Websites - und das aus gutem Grund. CSS ist mächtig. Es kann eine Website erstellen oder brechen (obwohl normalerweise IE6 das Brechen durchführt). Trotz ihrer Nützlichkeit haben sich Designer und Entwickler seit ihrer Einführung vor über zwölf Jahren mit der CSS-Empfehlung der Stufe 1 mehr aus der Sprache gewünscht. Heute werden wir einige Möglichkeiten aufzeigen Überladen Sie Ihr CSS mit PHP unter der Haube.
Hinweis: Ich werde nicht für oder gegen das Konzept von CSS-Variablen und / oder CSS-Konstanten argumentieren. Dieser Artikel wurde unter der Annahme verfasst, dass Sie eine fundierte Entscheidung darüber treffen werden, sobald er sich mit den Möglichkeiten befasst hat. In diesem Artikel wird beschrieben, wie sie eingerichtet und verwendet werden, die Kontroverse wird jedoch nicht vollständig angesprochen.
Bevor die Aufladung beginnt, müssen wir sicherstellen, dass Sie die richtigen Voraussetzungen dafür haben. Wir werden zwei Methoden durchlaufen, mit denen Sie Ihr CSS mit PHP arbeiten lassen, eine kurz und bündig und eine etwas elegantere und weniger auffällig für den Benutzer. Beide haben die gleichen Grundanforderungen an einen Server, auf dem PHP ausgeführt wird. Die elegantere Version erfordert etwas mehr:
Web-Browser sind in Bezug auf Dateierweiterungen beim Umgang mit dem HTML-Link-Tag nicht so wählerisch. Sie sind wählerisch bei den Kopfdaten, die sie für diese Datei erhält. Dies bedeutet, dass Sie anstelle einer * .css-Datei eine * .php-Datei mit den richtigen Header-Daten verknüpfen können, und der Browser das Ergebnis wie ein Standard-CSS interpretiert. Fügen Sie dazu den PHP-Header hinzu, der Apache anweist, die Datei als CSS auszugeben:
Dann verlinken Sie einfach auf die PHP-Datei, wie Sie es normalerweise tun würden:
Nachdem Sie dies getan haben, können Sie theoretisch zum nächsten Abschnitt des Tutorials über CSS-Variablen und -Konstanten springen, wenn Sie möchten. Jeder, der Ihre Quelle anzeigt, wird jedoch feststellen, dass Sie eine PHP-Datei haben, in der sich eine CSS-Datei befinden sollte. Nur weil der Browser das Ergebnis richtig interpretiert, bedeutet das nicht, dass er andere Dinge tun muss, wie das Zwischenspeichern der Datei im Browser. Um dies zu beheben, gehen wir zur etwas eleganteren Version über.
Apache enthält eine Vielzahl von .htaccess-Tricks. Dies ist einer von ihnen. Wir werden Apache anweisen, alle CSS-Dateien in einem bestimmten Ordner als PHP-Dateien zu interpretieren, und der Webbrowser (und Ihre Benutzer) werden im Allgemeinen nicht wissen, dass Sie dies tun. Als erstes müssen Sie die Header-Daten in Ihre CSS-Datei einfügen, genau wie bei der Simple-Methode:
Anstatt die CSS-Datei als * .php-Datei zu speichern, speichern Sie sie als * .css-Datei und platzieren Sie sie in einem Ordner für CSS (in unserem Beispiel ~ / css /). Wenn Sie dies getan haben, erstellen Sie eine * .htaccess-Datei in diesem Ordner und fügen Sie Folgendes hinzu:
AddHandler-Anwendung / x-httpd-php .css
Dieses Snippet weist Apache an, alle CSS-Dateien im Ordner mit der * .htaccess-Datei mit dem PHP-Skripthandler zu interpretieren. Wenn Sie nicht in der Lage sind, dies einem einzelnen Ordner hinzuzufügen, oder wenn Sie dies serverweit benötigen, können Sie dies auch dem hinzufügen httpd.conf Serverkonfigurationsdatei für Apache. Dazu möchten Sie das vorherige Snippet direkt unter der Gruppe von hinzufügen AddType und AddHandler Deklarationen (wie diese von einem meiner Server):
AddType-Anwendung / x-httpd-php .php .php3 .php4 .php5 AddType-Anwendung / x-httpd-php-source .phps AddHandler-CGI-Skript .cgi .pl
Denken Sie daran, wenn Sie dies zu Ihrem hinzufügen httpd.conf Server-Konfigurationsdatei das JEDEN In der * .css-Datei auf dem Server muss jetzt der PHP-Header für text / css vorangestellt sein. Deshalb empfehle ich, es über .htaccess hinzuzufügen
Im Durchschnitt der Top 100 Weblog-Leistungsumfragen:
Wir haben einen Test mit den Top 100 Blogs für externe CSS-Dateien und die Gesamtgröße durchgeführt. Der durchschnittliche Top-100-Blog verwendet 4 externe CSS-Dateien (einschließlich @imports) mit einer durchschnittlichen Gesamtgröße von 43,1 KB (unkomprimiert). Die Anzahl der externen CSS-Dateien lag zwischen 1 und 18. Die Gesamtgröße von CSS lag zwischen 0,2 KB und satten 307 KB. Beachten Sie, dass diese Analyse kein internes CSS in (X) HTML-Dateien enthält. Es enthält verschachtelte CSS-Dateien, die mit @import-Direktiven aufgerufen werden.
Das ist viel CSS. Warum ist das? Oftmals liegt es daran, dass das CSS unkomprimiert und nicht optimiert ausgeliefert wird. Der wahrscheinlichere Verdächtige ist CSS-Aufblasen und schlecht gewarteten Code. Eine beliebte Möglichkeit, die Wartbarkeit von Code zu verbessern, ist die Implementierung von CSS-Variablen über PHP.
Das bedeutet, dass CSS nicht so ist (ja, dies würde zu einer Abweichung des Designs führen, aber es kann den Punkt gut veranschaulichen):
Körper Farbe: # 000; Hintergrund: #fff; Schriftgröße: 10px; div # content background: #ccc; Schriftgröße: 1.1em; div # sidebar color: #fff; Hintergrund: # 000; Schriftgröße: 1.0em; div # footer color: # 555; Hintergrund: #ccc;
Sie könnten CSS wie folgt haben:
Körperfarbe: ; Hintergrund: ; Schriftgröße: px; div # content Hintergrund: ; Schriftgröße: px; div # sidebar color: ; Hintergrund: ; Schriftgröße: px; div # footer color: ; Hintergrund: ;
Beachten Sie, dass die langen Variablennamen nur zur Veranschaulichung dienen. Natürlich können diese Variablen so lang oder so kurz sein, wie Sie möchten, und kürzere Variablen sorgen für kleinere Dateigrößen.
Im obigen Beispiel haben wir grundlegende Variablen verwendet, um ein monochromes Farbschema festzulegen, das dann auf der gesamten Website in anderen Stilen verwendet werden kann. Diese Variablen könnten leicht mit $ color01, $ color02, $ color03 usw. ausgetauscht werden, um ähnliche Effekte zu erzielen. Designer und Front-End-Webentwickler werden häufig von Kunden gefragt: "Hey, können Sie den gesamten Text etwas dunkler machen?" oder "Können Sie den gesamten Text etwas größer machen?" Die Verwendung solcher Variablen ist zwar nicht immer die beste Lösung, reduziert jedoch häufig die Wartungszeit, wenn viele Templating-Systeme und Blogging-Plattformen (WordPress, Moveable Type, Expression Engine usw.) oder Unternehmens-CMSes (Drupal, Joomla, Bitrix usw.) verwendet werden ).
Eine alternative Methode zum Speichern der Variablen besteht darin, die Daten in assoziierten Arrays zu speichern (was meine bevorzugte Methode ist), wodurch Code wie folgt erzeugt wird:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> Körper Farbe: ; Hintergrund: ; Schriftgröße: px; div # content Hintergrund: ; Schriftgröße: px; div # sidebar color: ; Hintergrund: ; Schriftgröße: px; div # footer color: ; Hintergrund: ;
Nachdem Sie die Dinge für die Verwendung von PHP mit Ihrem CSS eingerichtet haben, können Sie einige nette Dinge wie Berechnungen ausführen. Angenommen, Sie möchten ein System einrichten, indem Sie eine Reihe von DIVs auf dem Bildschirm mit jeweils einem anderen Elementtyp anzeigen. Jeder Elementtyp (d. H. Img, p, blockquote usw.) verfügt über eine eindeutige Höhe und Breite, die über CSS gesteuert wird, und Sie möchten, dass die Höhe des Randes wie folgt auf diesen Werten basiert:
In diesem Szenario möchten Sie ein standardisiertes Raster einrichten, das drei verschiedene Arten von Elementen (img, p und blockquote) enthält, die in zwei verschiedenen Containern (div und li) eingeschlossen sind. Jedes DIV muss 550px breit und 250px hoch sein, jeder LI muss 600px breit und 300px hoch sein und jeder Elementtyp hat eine unterschiedliche Höhe und Breite. Die Positionierung der Elemente im Inneren muss sich im Totpunkt befinden. Im Laufe der Zeit müssen die Höhen und Breiten der verschiedenen DIVs / LIs und Elemente wahrscheinlich geändert werden. Sie können den Spielraum für jedes der verschiedenen Elemente manuell eingeben und / oder zusätzliche Klasseninformationen für die Container-DIVs verwenden, um den entsprechenden Füllungsbetrag hinzuzufügen. Dies ist jedoch nicht sehr nützlich für schnelle Änderungen, wie sie von jemandem gewünscht werden Prototyping im Browser oder wer hat 200 dieser verschiedenen Elemente, für die sie Daten ändern müssten.
Zuerst richten wir den XHTML-Inhalt ein, den wir so gestalten möchten:
Lorem ipsum dolor sitzt amet tellus.
Etiam Quis Nulla Pretium et.
Lorem ipsum dolor sitzt amet tellus.
Etiam Quis Nulla Pretium et.
Als nächstes richten wir die PHP / CSS-Datei ein, die wir zum Gestalten der XHTML verwenden werden. Hier geben wir die Standardgrößen der verschiedenen Elemente für die Verwendung auf der gesamten Seite an.
Accentsconagua
'550', 'height' => '250';); $ liData = Array ('width' => '600', 'height' => '300',); $ blockquoteData = Array ('width' => '440', 'height' => '100'); $ imgData = array ('width' => '450', 'height' => '150'); $ pData = Array ('width' => '480', 'height' => '130'); ?> Als Nächstes setzen wir die PHP-Datei ab Schritt 2 fort und verwenden die Variablen, die wir in Berechnungen festlegen. Zusätzlich setzen wir die berechneten MarginX- und MarginY-Werte der verschiedenen Elemente, um die Anzahl der erforderlichen Berechnungen zu reduzieren.
div width: px; Höhe: px; li Breite: px; Höhe: px; div blockquote width: px; Höhe: px; Spanne: px px; div img width: px; Höhe: px; Spanne: px px; div p width: px; Höhe: px; Spanne: px px; li blockquote width: px; Höhe: px; Spanne: px px; li img width: px; Höhe: px; Spanne: px px; li p Breite: px; Höhe: px; Spanne: px px;
Dies ermöglicht es uns jetzt, die Größe der Elemente einmal oben in der Datei zu ändern und nicht 12 Randwerte neu zu berechnen (24, wenn die Randwerte asymmetrisch waren). Verstehen Sie, dass ich nicht vorschlage, dass dies in jedem Ihrer zukünftigen Projekte verwendet wird, aber diese Art von Technik hat eindeutige Vorteile gegenüber der standardmäßigen "statischen" CSS-Methode.
Wie bereits erwähnt, kann CSS ziemlich groß werden. Um die CSS-Größe zu reduzieren, können Sie die CSS-Dateien automatisch komprimieren. Dazu haben Sie zwei Möglichkeiten, dies zu tun: direkt von Apache aus mit mod_gzip / mod_deflate oder verwenden Sie die eingebauten Komprimierungsmethoden von PHP, die wir hier machen.
In unserer CSS-Datei haben wir bereits ein PHP-Snippet, das den Header einrichtet:
Jetzt müssen wir nur noch eine einzige Codezeile hinzufügen, die einen Ausgabepuffer für die Verwendung von ob_gzhandler vor der Header-Deklaration setzt:
Es ist zu beachten, dass es andere Möglichkeiten gibt, die gzip-Komprimierung durchzuführen, und alle haben ihre Vor- und Nachteile. Meine bevorzugte Methode ist die Verwendung von mod_deflate wie zuvor erwähnt, aber nicht alle Designer und Entwickler haben diese Option.
Das Hinzufügen einer Programmierlogik zu einer Stylesheet-Sprache ist nichts Neues. Viele Websites bestimmen, welche Stylesheets sie verwenden, basierend auf URL, Login-Status oder sogar dem Datum. Hier ein einfaches Beispiel, das sich leicht auf Blogs und E-Commerce-Websites (unter anderem) anwenden lässt. Nehmen wir an, Sie haben ein h1-Tag, das durch die Phark-Bildersetzungsmethode ersetzt wird, die durch das folgende CSS beschrieben wird:
h1 Breite: 300px; Höhe: 80px; Text-Gedankenstrich: -9999px; Hintergrund: URL (images / logo.png) keine Wiederholung;
Indem Sie ein wenig PHP hinzufügen, um das Datum zu bestimmen, an dem das CSS geladen wird, können Sie ein anderes Bild für einen Urlaub angeben, wie es Google oft bei seinen Google-Doodles tut (obwohl sie dazu eine andere Technologielösung verwenden):
h1 Breite: 300px; Höhe: 80px; Text-Gedankenstrich: -9999px; Hintergrund: URL () keine Wiederholung;
Dies ist nur ein sehr einfaches Beispiel. Dein CSS wartet nur darauf, von PHP aufgeladen zu werden. Was Sie damit machen, kann von Person zu Person variieren. Eine meiner persönlichen Anwendungen besteht darin, @ font-face-Dateien mithilfe von Daten-URI-Strings zu verdecken und einzubetten und den Referer zu überprüfen, der die Datei anfordert, ähnlich wie die von Typekit verwendeten Teile der Technologie:
@ font-face font-family: FontName; src: local ("FontName"), URL () format ("opentype"); Die Verwendung von Variablen in CSS ist unabhängig von den Vor- und Nachteilen seit Jahren ein kontroverses Thema. Wie ich zu Beginn dieses Artikels sagte, werde ich nicht für oder gegen das Konzept von CSS-Variablen oder CSS-Konstanten argumentieren. Einige sehr angesehene Designer und Entwickler haben dagegen gestritten, andere dagegen. Ich hoffe, dass im Interesse eines besseren Webs eine effektive CSS-only-Lösung früher als später auftritt. In der Zwischenzeit können sich diejenigen von uns, die CSS-Variablen und -Konstanten unterstützen, auf unsere serverseitigen Sprachen verlassen, während diejenigen, die sie nicht unterstützen, einfach wie gewohnt fortfahren.
Ich bin immer auf der Suche nach neuen und innovativen Wegen, um mein CSS mit PHP aufzuladen. Was sind einige Ihrer bevorzugten Anwendungsszenarien für das Mischen von CSS mit PHP??
