自動CSS3前綴和壓縮機

鑰匙要點

• 文本中演示的PHP腳本允許自動生成具有瀏覽器特定前綴的CSS3屬性，以及CSS文件的壓縮以改進頁面加載時間，而無需其他工具。
腳本通過用一組特定於瀏覽器的前綴屬性替換CSS文件中的下劃線預定屬性，然後將CSS文件串聯和壓縮以減少服務器請求和不必要的白色空間。 >>>>>>>>>>>>>>>>>>>>
• 該腳本可以與其他CSS預處理器（如SASS或更少）一起使用，其好處包括改進的網站性能和不同瀏覽器的兼容性，以及節省手動添加供應商前綴和壓縮CSS文件的時間和精力。
有很多方法可以壓縮CSS文件或自動生成瀏覽器特定的CSS3前綴，但通常使用了額外的工具，這很煩人。我想向您展示如何僅使用PHP完成此類任務。在本文中，我們將看到如何：
>生成具有瀏覽器特定前綴的CSS3屬性

加入所有CSS文件，並剝離評論和不必要的空白，以減少服務器請求的數量並減少頁面的加載時間

>
• >當請求網頁時執行該過程
>

這是一個示例，該示例顯示了最終結果使用的容易程度。 在CSS中，瀏覽器特定的前綴被這樣的下劃線代替：

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

該代碼將生成這樣的屬性列表：

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

然後，在HTML中，以這樣的方式編寫了一個鏈接以導入樣式：

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

使用單個鏈接元素，將將三個CSS文件加載為一個。 CSS.PHP腳本將在列出的文件中讀取（css_file1.css，css_file2.css和css_file3.css），組合它們並將其返回為單個文件。 看起來很容易使用，對嗎？因此，有了進一步的ADO，讓我們開始編寫一些代碼！

編寫代碼

繼續使用以下代碼創建文件CSS.PHP：

<?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;

該代碼首先接收到要從URL參數中處理為字符串的CSS文件列表（在PHP中可訪問為$ _GET [“ F”]）。每個文件都用管道形式分開。 Explode（）函數將返回文件名數組的管道上的字符串拆分。 功能file_get_contents（） 將每個文件的內容接一個地添加到變量$內容上。 在檢索了CSS文件的內容後，下一步是找到以下劃線開頭的任何CSS屬性，並用特定於瀏覽器的前綴屬性替換它們。函數preg_match_all（）找到匹配正則表達式的文本中的所有零件，並將匹配項放入$匹配[0]作為數組中。 我不會解釋為什麼$ Matches具有數組索引0，因為您可以閱讀有關PHP手冊中該功能的明確說明。相反，我想專注於解釋我們計劃的流程。 此圖像解釋了正則表達式的模式：

數組$前綴包含一系列瀏覽器特定的前綴；您可以根據需要添加更多前綴，甚至可以刪除一些前綴。 $匹配[0]中的每個屬性定義將被轉換為具有瀏覽器特定前綴的一組CSS3屬性。代碼迭代每個屬性並創建結果緩衝區，用瀏覽器特定的前綴替換屬性中的下劃線，並將結果推入緩衝區中，然後用緩衝區的內容代替文本中的原始屬性。 在擴展了瀏覽器特定的前綴之後，它們已合併為$ contents，腳本將內容刪除內容中的任何註釋以降低其尺寸。該圖像解釋了相關的正則表達式：

然後，另一個正則表達式消除了任何不必要的空格和新線條，以進一步降低內容的大小。

與正則表達式匹配的零件將被括號內的字符替換，例如：

最後，存儲在$ cottents中的CSS準備發送。第一個標題（）調用告訴瀏覽器，應將輸出視為CSS文件。第二個標題（）呼叫告訴瀏覽器，該文件在一小時內到期，因此瀏覽器將其緩存一個小時，並使用緩存的副本，而不是從服務器中再次請求它。

使用腳本

我想為您提供一個簡單的用法示例，以示例我們剛剛製作的腳本。放置CSS.PHP 進入CSS目錄，以及這三個CSS文件。 第一個文件是header.css：

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

第二個文件是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>

第三個文件是頁腳：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>

看看如何編寫CSS3屬性；那些具有特定於瀏覽器的前綴的人只給出了一次，並且在它們面前有一個下劃線。 接下來，創建將使用樣式的文件索引索引。

<?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;

查看鏈接標籤中的HREF屬性。每個CSS文件名都被管道隔開。

結論

在本文中，我向您展示瞭如何使用PHP對CSS進行一些常見的操作。該腳本在很大程度上依賴於正則表達式，這是一種非常強大的語言，使我們能夠操縱字符串，但是我們認為合適。總體而言，該腳本非常簡單，但提供了許多好處。嘗試在下一個項目中使用它。 圖像通過1xpert / shutterstock

關於CSS3前綴和壓縮機的常見問題

> CSS3前綴和壓縮機的目的是什麼？它會自動將供應商的前綴添加到CSS屬性中，以確保它們在不同的瀏覽器上工作。壓縮機功能通過消除不必要的字符來降低CSS文件的大小，從而提高網站的加載速度。

>

>如何使用CSS3前綴和Compressor工作？

a css3 prefixer和壓縮機通過掃描CSS for properties for Properies for Properies prefix verefix verefix vendor.然後，它會自動添加這些前綴，從而節省您手動進行的時間和精力。壓縮機功能通過刪除CSS文件中的空格，評論和線路斷裂等不必要的字符來起作用，從而降低了它們的尺寸。

>為什麼我要使用CSS3 prefixer和壓縮機可以很好地使用CSS3前綴和壓縮機？它確保您的CSS屬性在不同的瀏覽器上工作，並減少CSS文件的大小，從而提高網站的加載速度。它還為您節省了手動添加供應商前綴和壓縮CSS文件的時間和精力。

>

使用CSS3前綴和壓縮機嗎？

>

>>

>

>>>

>，而CSS3 prefixer和Compressor提供了許多好處，重要的是要注意，可能並不總是必要的。一些現代瀏覽器不再需要某些CSS屬性的供應商前綴。另外，過度壓縮您的CSS文件可能會使它們難以讀取和維護。

>如何使用CSS3前綴和壓縮機？

>

> >

使用CSS3 prefixer和Compressor，您只需要將CSS文件輸入到工具中即可。然後，它將自動添加必要的供應商前綴並壓縮您的文件。一些工具還提供了其他功能，例如降低和優化。

>我可以與其他CSS前綴和壓縮機一起與其他CSS預處理器一起使用？

是的，您可以將CSS3前綴和壓縮機與其他CSS使用SASS或SASS（如SASS）一起使用。該工具將簡單地添加必要的供應商前綴並壓縮輸出的CSS文件。

>有哪些良好的CSS3前綴和壓縮機工具？

>

>

>

有許多良好的CSS3 prefixer和Compressor工具可用，包括AutoPrefixer，PostCSS和CSS驅動器。這些工具提供了一系列功能，可以與各種CSS預處理器一起使用。

>

>如何選擇正確的CSS3前綴和壓縮機工具？

在選擇CSS3前綴和壓縮機工具時，請考慮與CSS Prefrocessor and corprocessor andsorcesor ands of Rancesor，and rance of Formansosor，and rance of Formansoser，以及該範圍，並提供範圍。您還應該考慮該工具的性能和可靠性。 >我可以將CSS3前綴和壓縮機用於大型CSS文件嗎？但是，請記住，對於較大的文件，處理時間可能更長。 >>是否有必要為每個項目使用CSS3前綴和壓縮機？ >您是否應該使用CSS3前綴和壓縮機對項目的特定要求，是否應該使用CSS3前綴和壓縮機。如果瀏覽器兼容性和性能是重要的考慮因素，則使用CSS3前綴和壓縮機可能是有益的。

以上是自動CSS3前綴和壓縮機的詳細內容。更多資訊請關注PHP中文網其他相關文章！