Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Laden Sie Ihr CSS mit PHP Unter der Haube auf

by
Length:LongLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Cascading Style Sheets ist eine Präsentations-Stylesheet-Sprache. In diesem Sinne verfügt es nicht über viele Funktionen, die viele Entwickler benötigen, um ihren Programmierinstinkt zu befriedigen. Heute werden wir darüber nachdenken, wie Sie Ihr CSS aufladen können, indem Sie PHP unter die Haube stecken.

Tutorial Details

  • Programm: Apache, PHP
  • Version: n/a
  • Schwierigkeit: Mittelstufe
  • Geschätzte Fertigstellungszeit: 20 Minuten

Einführung

Die Verwendung von CSS zum Hochfahren einer Website ist im heutigen Web eine Voraussetzung für Nicht-Flash-Websites - und das aus gutem Grund. CSS ist mächtig. Es kann eine Website erstellen oder beschädigen (obwohl normalerweise IE6 das Brechen durchführt). Trotz seiner Nützlichkeit haben sich Designer und Entwickler seit ihrer Einführung vor über zwölf Jahren mit der CSS Stufe 1-Empfehlung mehr von der Sprache gewünscht. Heute werden wir einige Möglichkeiten prüfen, wie Sie Ihr CSS mit PHP unter der Haube aufladen können.

Supercharging XHTMLCSS

Hinweis: Ich werde nicht für oder gegen das Konzept der CSS-Variablen und/oder CSS-Konstanten argumentieren. Dieser Artikel wurde mit der Annahme verfasst, dass Sie eine fundierte Entscheidung in Bezug auf diese treffen werden, sobald Ihnen die Möglichkeiten vorgestellt wurden. In diesem Artikel wird erläutert, wie Sie sie einrichten und verwenden, die Kontroverse wird jedoch nicht vollständig behandelt.

Dinge einrichten

Bevor die Aufladung beginnt, müssen wir sicherstellen, dass Sie die richtigen Anforderungen dafür haben. Wir werden zwei Methoden durchgehen, mit denen Sie Ihr CSS mit PHP arbeiten lassen können, eine, die kurz und bündig ist, und eine, die etwas eleganter und für den Benutzer weniger auffällig ist. Beide haben die gleichen Grundanforderungen an einen Server, auf dem PHP ausgeführt wird. Die elegantere Version erfordert etwas mehr:

  1. Apache (offensichtlich mit PHP)
  2. Eine bearbeitbare .htaccess-Datei

Einrichten der einfachen Methode

Webbrowser sind nicht so wählerisch in Bezug auf Dateierweiterungen, wenn sie mit dem HTML-Link-Tag arbeiten. Worüber sie wählerisch sind, sind die Header-Daten, die sie für diese Datei erhalten. 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 Standard-CSS interpretiert. Fügen Sie dazu den PHP-Header hinzu, der Apache anweist, die Datei als CSS auszugeben:

Dann verlinken Sie einfach wie gewohnt auf die PHP-Datei:

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 dies nicht, dass er andere Dinge wie das Zwischenspeichern der Datei im Browser ausführen muss. Um dies zu beheben, gehen wir zur etwas eleganteren Version über.

Einrichten der eleganten Methode

Apache enthält eine große Anzahl von .htaccess-Tricks. Das 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 wie bei der einfachen Methode in Ihre CSS-Datei einfügen:

Anstatt die CSS-Datei als * .php-Datei zu speichern, speichern Sie sie als * .css-Datei und legen sie in einem Ordner für CSS ab (in unserem Beispiel ~/css /). Erstellen Sie anschließend eine * .htaccess-Datei in diesem Ordner und fügen Sie Folgendes hinzu:

Dieses Snippet weist Apache an, alle CSS-Dateien im Ordner mit der Datei * .htaccess mit dem PHP-Skripthandler zu interpretieren. Wenn Sie dies nicht zu einem einzelnen Ordner hinzufügen können oder wenn dies serverweit sein muss, können Sie dies auch zur Serverkonfigurationsdatei httpd.conf für Apache hinzufügen. Dazu möchten Sie das vorherige Snippet direkt unter der Gruppe der AddType- und AddHandler-Deklarationen hinzufügen (wie diese von einem meiner Server):

Denken Sie daran, dass, wenn Sie dies zu Ihrer httpd.conf-Serverkonfigurationsdatei hinzufügen, JEDER *.css-Datei auf dem Server jetzt der PHP-Header für Text/CSS vorangestellt sein muss. Aus diesem Grund empfehle ich, es über .htaccess hinzuzufügen

Starten Sie die Engine mit CSS-Variablen

Aus der durchschnittlichen Top 100 Weblog-Leistungsumfrage:

Wir haben in den Top 100 Blogs einen Test für externe CSS-Dateien und die Gesamtgröße durchgeführt. Das durchschnittliche Top 100-Blog verwendet 4 externe CSS-Dateien (einschließlich @imports) mit einer durchschnittlichen Gesamtdateigröß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-Anweisungen aufgerufen werden.

Das ist viel CSS. Warum ist das? Oft liegt es daran, dass das CSS unkomprimiert und nicht optimiert geliefert wird. Der wahrscheinlichere Verdächtige ist CSS-Aufblähung und schlecht gewarteter Code. Eine beliebte Option zur Verbesserung der Code-Wartbarkeit ist die Implementierung von CSS-Variablen über PHP.

Das bedeutet, dass anstelle von CSS wie diesem (ja, dies würde zu einer Aberration des Designs führen, aber es ist gut darin, den Punkt zu veranschaulichen):

Sie könnten CSS wie folgt haben:

Beachten Sie, dass die langen Variablennamen nur zu Illustrationszwecken dienen. Offensichtlich 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 einzurichten, das dann auf der gesamten Website in anderen Stilen verwendet werden kann. Diese Variablen könnten leicht mit $color01, $color02, $color03 usw. ausgetauscht worden sein, um ähnliche Effekte zu erzielen. Oft werden Designer und Front-End-Webentwickler 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, verkürzt jedoch häufig die Wartungszeit, wenn viele Template-Systeme und Blogging-Plattformen (WordPress, Moveable Type, Expression Engine usw.) oder Unternehmens-CMS (Drupal, Joomla, Bitrix usw.) Verwendet werden ).

Eine alternative Methode zum Speichern der Variablen besteht darin, die Daten in zugeordneten Arrays zu speichern (was meine bevorzugte Methode ist), wodurch Code wie folgt erzeugt wird:

Berechnungen in CSS

Sobald Sie die Dinge für die Verwendung von PHP mit Ihrem CSS eingerichtet haben, können Sie einige nette Dinge wie Berechnungen durchführen. Nehmen wir an, Sie möchten ein System einrichten, in dem Sie eine Reihe von DIVs auf dem Bildschirm bereitstellen, die jeweils einen anderen Elementtyp enthalten. Jeder Elementtyp (d. h. img, p, blockquote usw.) hat eine eindeutige Höhe und Breite, die über CSS gesteuert wird, und Sie möchten, dass der Randbetrag wie folgt auf diesen Werten basiert:

Diagram of Padding Element Measurements

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) gekapselt sind. Jeder DIV muss 550px breit und 250px hoch sein, jeder LI muss 600px breit und 300px hoch sein und jeder der Elementtypen hat eine andere Höhe und Breite. Die Positionierung der Elemente auf der Innenseite muss im Totpunkt erfolgen. Im Laufe der Zeit müssen wahrscheinlich die Höhen und Breiten der verschiedenen DIVs/LIs und Elemente geändert werden. Sie können die Margenmenge für jedes der verschiedenen Elemente manuell eingeben und/oder zusätzliche Klasseninformationen auf den Container-DIVs verwenden, um die entsprechende Menge an Polsterung hinzuzufügen. Dies ist jedoch nicht so 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.

Schritt 1 - Die Struktur

Zuerst richten wir den XHTML-Inhalt ein, den wir wie folgt gestalten werden:

Schritt 2 - Der PHP-Header und die Variablendeklarationen

Als Nächstes richten wir die PHP/CSS-Datei ein, mit der wir das XHTML formatieren werden. Hier deklarieren wir die Standardgrößen der verschiedenen Elemente für die Verwendung auf der gesamten Seite.

Schritt 3 - Das CSS mit Variablen und PHP-Berechnungen

Als nächstes setzen wir die PHP-Datei aus Schritt 2 fort und verwenden die Variablen, die wir in Berechnungen festgelegt haben. Zusätzlich legen wir die berechneten MarginX- und MarginY-Werte der verschiedenen Elemente fest, um die Anzahl der erforderlichen Berechnungen zu verringern.

Das 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.

Verkleinern Sie das CSS

Wie bereits erwähnt, kann CSS ziemlich groß werden. Eine Möglichkeit zur Reduzierung der CSS-Größe besteht darin, Ihre CSS-Dateien automatisch zu komprimieren. Dazu haben Sie zwei Möglichkeiten: direkt aus Apache mit mod_gzip / mod_deflate oder mit den in PHP integrierten Komprimierungsmethoden, die wir hier ausführen.

Erster Schritt - Richten Sie das Gzipping-Snippet ein

In unserer CSS-Datei befindet sich bereits ein PHP-Ausschnitt, mit dem der Header eingerichtet wird:

Jetzt müssen wir nur noch eine einzelne Codezeile hinzufügen und einen Ausgabepuffer festlegen, um ob_gzhandler vor der Header-Deklaration wie folgt zu verwenden:

Es sollte beachtet werden, dass es andere Möglichkeiten gibt, die gzip-Komprimierung durchzuführen, und dass alle ihre Vor- und Nachteile haben. Meine bevorzugte Methode ist die Verwendung von mod_deflate, wie bereits erwähnt, aber nicht alle Designer und Entwickler haben diese Option.

If($usingPHP==TRUE) { return 'Happiness'; }

Das Hinzufügen von Programmierlogik zu einer Stylesheet-Sprache ist nichts Neues. Viele Websites bestimmen anhand der URL, des Anmeldestatus oder sogar des Datums, welche Stylesheets sie verwenden. Hier ist ein einfaches Beispiel, das (unter anderem) problemlos auf Blogs und E-Commerce-Websites angewendet werden kann. Angenommen, Sie haben ein h1-Tag, das mithilfe der im folgenden CSS beschriebenen Phark-Bildersetzungsmethode ersetzt wird:

Indem Sie dem Mix 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 Feiertag angeben, wie es Google häufig mit seinen Google Doodles tut (obwohl sie dazu eine andere Technologielösung verwenden):

Normal Logo becomes Holiday Logo

Das ist nur ein super einfaches Beispiel. Ihr CSS wartet nur darauf, von PHP aufgeladen zu werden. Was Sie damit machen, kann von Person zu Person unterschiedlich sein. Eine meiner persönlichen Anwendungen besteht darin, sie zu verwenden, um @font-face-Dateien mithilfe von Daten-URI-Zeichenfolgen zu verdecken und einzubetten und den Referer zu überprüfen, der die Datei anfordert, ähnlich wie Teile der von Typekit verwendeten Technologie:

Kontroverse um CSS-Variablen

Die Verwendung von Variablen in CSS, unabhängig von den Vor- und Nachteilen, ist seit Jahren ein kontroverses Thema. Wie ich am Anfang 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 argumentiert, während andere dafür argumentiert haben. Ich hoffe im Interesse eines besseren Webs, dass eine effektive Nur-CSS-Lösung früher als später stattfindet. 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 weitermachen.

Welche Ideen können Sie sich einfallen lassen?

Ich bin immer auf der Suche nach neuen und innovativen Möglichkeiten, mein CSS mit PHP aufzuladen. Was sind einige Ihrer bevorzugten Anwendungsszenarien für das Mischen von CSS mit PHP?

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.