Key Takeaways

• Das im Text gezeigte PHP-Skript erm?glicht die automatische Erzeugung von CSS3-Eigenschaften mit Browserspezifischen Pr?fixen und die Komprimierung von CSS-Dateien für verbesserte Ladezeiten der Seiten, ohne dass zus?tzliche Tools erforderlich sind.
• Das Skript funktioniert, indem er unterstrichene Eigenschaften in CSS-Dateien durch einen Satz von browserspezifischen vorangestellten Eigenschaften ersetzt und dann die CSS-Dateien verkettet und komprimiert, um Serveranforderungen und unn?tiger Wei?raum zu reduzieren.
• Das Skript kann mit anderen CSS -Pr?prozessoren wie SASS oder weniger verwendet werden, und seine Vorteile umfassen eine verbesserte Leistung der Website und die Kompatibilit?t für verschiedene Browser sowie die Zeit und Aufwand, um Anbieter -Pr?fixe und CSS -Dateien manuell hinzuzufügen und CSS -Dateien zu komprimieren.

Es gibt viele M?glichkeiten, CSS-Dateien zu komprimieren oder automatisch browserspezifische CSS3-Pr?fixe zu generieren, aber normalerweise werden zus?tzliche Tools verwendet, was sehr ?rgerlich ist. Ich m?chte Ihnen zeigen, wie solche Aufgaben nur mit PHP erledigt werden k?nnen. In diesem Artikel sehen wir:

• CSS3-Eigenschaften mit browserspezifischen Pr?fixen erzeugen, damit wir sie nicht alle von Hand haben
• Verkettieren Sie alle CSS -Dateien und streifen Sie Kommentare und unn?tiger Wei?raum aus, um die Anzahl der Serveranforderungen zu reduzieren und die Ladezeit der Seite zu verkürzen
• Führen Sie den Prozess im Fliege durch, wenn die Webseite angefordert wird

Hier ist ein Beispiel, das zeigt, wie einfach das Endergebnis zu verwenden ist. In der CSS wird das Browserspezifische Pr?fix durch einen solchen Unterstrich ersetzt:

<span>_border-radius: 10px;</span>

Der Code generiert eine vollst?ndige Liste von Eigenschaften wie folgt:

<span>-o-border-radius: 10px;
</span><span>-moz-border-radius: 10px;
</span><span>-webkit-border-radius: 10px;
</span><span>border-radius: 10px;</span>

In der HTML wird dann ein Link so geschrieben, um die Stile zu importieren:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span>

Mit dem einzelnen Linkelement werden drei CSS -Dateien als eins geladen. Das CSS.PHP -Skript wird in den aufgeführten Dateien (CSS_File1.css, CSS_File2.css und CSS_File3.css) gelesen, kombinieren und geben Sie sie als eine einzelne Datei zurück. Es sieht ziemlich einfach zu bedienen, oder? Lassen Sie uns also ohne weiteres Code schreiben!

Schreiben des Codes

Erstellen Sie die Datei CSS.php mit dem folgenden Code:

<?php
$files = explode("|", $_GET["f"]);

$contents = "";
foreach ($files as $file) {
    $contents .= file_get_contents($file . ".css");
}

preg_match_all('/_[a-zA-Z-]+:s.+;|[a-zA-Z-]+:s_[a-zA-Z].+;/',
    $contents, $matches, PREG_PATTERN_ORDER);

$prefixes = array("-o-", "-moz-", "-webkit-", "");
foreach ($matches[0] as $property) {
    $result = "";
    foreach ($prefixes as $prefix) {
        $result .= str_replace("_", $prefix, $property);
    }
    $contents = str_replace($property, $result, $contents);
}

$contents = preg_replace('/(/*).*?(*/)/s', '', $contents);
$contents = preg_replace(array('/s+([^w'"]+)s+/', '/([^w'"])s+/'), '', $contents);

header("Content-Type: text/css");
header("Expires: " . gmdate('D, d M Y H:i:s GMT', time() + 3600));
echo $contents;

Der Code empf?ngt zun?chst die Liste der CSS -Dateien, die als Zeichenfolge aus dem URL -Parameter verarbeitet werden soll (in PHP als $ _get ["f"] zug?nglich). Jede Datei ist mit einem Rohrcharakter getrennt. Die Funktion explode () teilt die Zeichenfolge auf die Rohre, die ein Array von Dateinamen zurückgeben. Die Funktionsdatei_get_Contents () Ruft den Inhalt jeder Datei ein, die nacheinander angeh?ngt wird, an den Variablen -$ -Inhalt. Nachdem der Inhalt der CSS-Dateien abgerufen wurde, besteht der n?chste Schritt darin, alle CSS-Eigenschaften zu finden, die mit einem Unterstrich beginnen und sie durch die browserspezifischen vorangestellten Eigenschaften ersetzen. Die Funktion preg_match_all () findet alle Teile im Text, die mit dem regul?ren Ausdruck übereinstimmen, und stellt die übereinstimmungen in $ Matches [0] als Array ein. Ich werde nicht erkl?ren, warum $ Matches den Array Index 0 hat, da Sie eine klare Erkl?rung zur Funktion im PHP -Handbuch lesen k?nnen. Vielmehr m?chte ich mich darauf konzentrieren, den Fluss unseres Programms zu erkl?ren. Dieses Bild erkl?rt das Muster des regul?ren Ausdrucks:

Das Array $ Pr?fixen enth?lt ein Array von Browser-spezifischen Pr?fixen. Sie k?nnen mehr Pr?fixe hinzufügen oder je nach Ihren Anforderungen einige entfernen. Jede Eigenschaftsdefinition in $ Matches [0] wird in eine Reihe von CSS3-Eigenschaften mit browserspezifischen Pr?fixen umgewandelt. Der Code iteriert jede Eigenschaft und erstellt einen Ergebnispuffer, ersetzt den Unterstrich in der Eigenschaft durch das Browserspezifische Pr?fix und drückt das Ergebnis im Puffer und ersetzt dann die ursprüngliche Eigenschaft im Text durch den Inhalt des Puffer. Nachdem die browserspezifischen Pr?fixe erweitert wurden, erfolgt sie und sie wurden wieder in $ Inhalt verschmolzen, stellt das Skript alle Kommentare im Inhalt auf, um seine Gr??e zu verringern. Dieses Bild erkl?rt den relevanten regul?ren Ausdruck:

Anschlie?end beseitigt ein weiterer regul?rer Ausdruck unn?tige Whitespace und neue Linien, um die Gr??e des Inhalts weiter zu verringern.

Teile, die mit regul?rem Ausdruck übereinstimmen, werden beispielsweise durch Zeichen in der Klammer ersetzt:

Schlie?lich ist das CSS, das in $ Inhalt gespeichert ist, gesendet werden. Der erste Header () -Anruf informiert den Browser darüber, dass die Ausgabe als CSS -Datei behandelt werden sollte. Der zweite Header () teilt dem Browser mit, dass diese Datei in einer Stunde abl?uft, sodass der Browser ihn eine Stunde lang zwischenspeichert und die zwischengespeicherte Kopie verwendet, anstatt ihn erneut vom Server anzufordern.

Verwenden des Skripts

Ich m?chte Ihnen ein einfaches Nutzungsbeispiel für das Skript geben, das wir gerade gemacht haben. Setzen Sie die CSS.php ein In Ihr CSS -Verzeichnis zusammen mit diesen drei CSS -Dateien. Die erste Datei ist Header.css:

<span>_border-radius: 10px;</span>

Die zweite Datei ist Center.css:

<span>-o-border-radius: 10px;
</span><span>-moz-border-radius: 10px;
</span><span>-webkit-border-radius: 10px;
</span><span>border-radius: 10px;</span>

Die dritte Datei ist Fu?zeile.css:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/css.php?f=css_file1|css_file2|css_file3"</span>></span></span>

Schauen Sie sich an, wie die CSS3 -Eigenschaften geschrieben wurden. Diejenigen, die ein browserspezifisches Pr?fix h?tten, werden nur einmal angegeben und haben einen Unterstrich vor sich. Erstellen Sie als n?chstes den Datei index.html, der die Stile verwendet.

<?php
$files = explode("|", $_GET["f"]);

$contents = "";
foreach ($files as $file) {
    $contents .= file_get_contents($file . ".css");
}

preg_match_all('/_[a-zA-Z-]+:s.+;|[a-zA-Z-]+:s_[a-zA-Z].+;/',
    $contents, $matches, PREG_PATTERN_ORDER);

$prefixes = array("-o-", "-moz-", "-webkit-", "");
foreach ($matches[0] as $property) {
    $result = "";
    foreach ($prefixes as $prefix) {
        $result .= str_replace("_", $prefix, $property);
    }
    $contents = str_replace($property, $result, $contents);
}

$contents = preg_replace('/(/*).*?(*/)/s', '', $contents);
$contents = preg_replace(array('/s+([^w'"]+)s+/', '/([^w'"])s+/'), '', $contents);

header("Content-Type: text/css");
header("Expires: " . gmdate('D, d M Y H:i:s GMT', time() + 3600));
echo $contents;

Schauen Sie sich das HREF -Attribut im Link -Tag an. Jeder CSS -Dateiname wird durch ein Rohr getrennt.

Schlussfolgerung

In diesem Artikel habe ich Ihnen gezeigt, wie man einige gemeinsame Manipulationen von CSS mit PHP automatisiert. Das Skript stützt sich stark auf regul?re Ausdrücke, eine sehr leistungsstarke Sprache, die es uns erm?glicht, die Zeichenfolge zu manipulieren, wie wir sie sehen. Insgesamt ist das Skript sehr einfach, bietet aber viele Vorteile. Verwenden Sie es in Ihrem n?chsten Projekt. Bild über 1xpert / Shutterstock

h?ufig gestellte Fragen zu CSS3 Prefixer und Kompressor

Was ist der Zweck eines CSS3 -Pr?fixers und Kompressors? Es fügt automatisch Anbieter -Pr?fixe zu CSS -Eigenschaften hinzu, um sicherzustellen, dass sie über verschiedene Browser hinweg funktionieren. Die Kompressorfunktion reduziert die Gr??e der CSS -Dateien, indem sie unn?tige Zeichen beseitigt und so die Ladegeschwindigkeit Ihrer Website verbessert.

Wie funktioniert ein CSS3 -Pr?fixer und Kompressor? Anschlie?end werden diese Pr?fixe automatisch hinzugefügt und Sie die Zeit und Mühe sparen, es manuell zu tun. Die Kompressorfunktion funktioniert, indem unn?tige Zeichen wie Leerzeichen, Kommentare und Zeilenpausen aus Ihren CSS -Dateien entfernt werden, wodurch ihre Gr??e verringert wird. Es stellt sicher, dass Ihre CSS -Eigenschaften in verschiedenen Browsern funktionieren und die Gr??e Ihrer CSS -Dateien reduzieren und so die Ladegeschwindigkeit Ihrer Website verbessern. Es spart Ihnen auch die Zeit und Mühe, die Pr?fixe von Anbietern manuell hinzuzufügen und Ihre CSS -Dateien zu komprimieren.

Gibt es Nachteile für die Verwendung eines CSS3 -Pr?fixers und Kompressors? Einige moderne Browser ben?tigen keine Anbieter -Pr?fixe mehr für bestimmte CSS -Eigenschaften. Wenn Sie Ihre CSS-Dateien überarbeiten, k?nnen sie auch schwer zu lesen und zu pflegen. Anschlie?end werden die erforderlichen Anbieter -Pr?fixe automatisch hinzugefügt und Ihre Dateien komprimiert. Einige Tools bieten auch zus?tzliche Funktionen wie Minifikation und Optimierung. Das Tool fügt einfach die erforderlichen Anbieter -Pr?fixe hinzu und komprimiert die ausgegebenen CSS -Dateien. Diese Tools bieten eine Reihe von Funktionen und k?nnen mit verschiedenen CSS -Pr?prozessoren verwendet werden. Sie sollten auch die Leistung und Zuverl?ssigkeit des Tools berücksichtigen.

Kann ich einen CSS3 -Pr?fixer und einen Kompressor für gro?e CSS -Dateien verwenden? Beachten Sie jedoch, dass die Verarbeitungszeit für gr??ere Dateien l?nger sein kann. Wenn Browserkompatibilit?t und Leistung wichtige überlegungen sind, kann die Verwendung eines CSS3 -Pr?fixers und des Kompressors vorteilhaft sein.

Das obige ist der detaillierte Inhalt vonAutomatischer CSS3 -Pr?fixer und Kompressor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!