2010-06-01 58 views
6

CSS的一個顯着缺點是不能使用變量。例如,我想使用變量來控制導入的CSS的位置,並且爲在設計中重複使用的顏色創建變量會很棒。使用PHP在我的CSS樣式表中創建變量有什麼缺點?

一種方法是使用CSS文件作爲CSS樣式表。換句話說,創建一個 「style.php」 與...

<?php header("Content-type: text/css"); ?>

...在文件的頂部,然後利用鏈接到它...

<link href="style.php" rel="stylesheet" type="text/css" />

...在任何使用這些樣式的文件中。

那麼有什麼問題呢?我認爲這可能是性能 - 我在Firefox/Firebug中做了一些快速實驗,正如人們所期望的那樣,CSS樣式表已被緩存,但PHP樣式表不是。所以我們支付額外的GET的價格。

另一個煩人的事情是TextMate沒有正確突出顯示.php文件中的CSS。

還有其他的缺點嗎? 你有沒有使用這種方法,如果是這樣,你會推薦它嗎?

+1

您可以在PHP腳本中設置「Last-Modified:」標題,並讓瀏覽器知道它不需要重新加載。 (當然,除非這樣) – amphetamachine 2010-06-01 01:47:23

回答

7

表現很差。這是一個好主意,但只有在你緩存的時候。您可以發送瀏覽器標題問客戶漂亮,請緩存,但如果性能是一個問題,你可能會從開發,通過它您編譯PHP支持的樣式表香草CSS文件作爲正常的系統中受益。

但是,如果您打算自己手動編制自己的編譯系統,您可能需要查看SASS

+1

無論如何緩存服務器上的PHP輸出並不是一個壞主意,因爲您可以一起執行其他優化,如鏈式樣式表和gzip /縮小文件。 – 2010-06-01 10:31:33

+0

只要將它寫入一個css文件,然後包含該文件,怎麼樣?並只有重寫更新文件? – 2012-12-21 06:10:21

1

缺點是文件沒有被緩存(就像你指出的那樣)以及服務器必須爲每個請求計算CSS文件的事實。

加載靜態文件是相當多的服務器沒有負載,因爲它只是讀取和轉儲文件,但對於PHP腳本它必須執行它的每一頁的請求,這可能會增加額外的開銷。

你可能會緩存內存或Memcache的CSS或東西,但這仍然不是一個有效的,因爲只是使用靜態文件。

爲什麼不把你的CSS的大部分定義在一個靜態文件中,然後只覆蓋改變的特定樣式?

+0

謝謝webdestroya。我實際上是在一個靜態文件中執行「大部分CSS,然後只是覆蓋更改的特定樣式」,但在一個地方指定某些顏色和樣式仍然會更加方便/高效(&DRY),並且讓他們滲透通過設計。 – Greg 2010-06-02 17:59:42

2

您應該還是可以設置相應的HTTP標頭指示瀏覽器緩存動態生成CSS。你可能有興趣在檢查出的話題下面的谷歌代碼的文章進一步閱讀:

你也可以考慮產生從腳本靜態CSS文件,然後包括從你的網頁文件。這消除了實時預處理和相關的任何性能問題,在具有成本只要您將其更改爲「編譯」你的CSS文件。但是,如果您已經是minifying CSS或JavaScript,那麼您可以簡單地將這一額外步驟添加到您的構建過程中。

至於代碼突出顯示,您可能希望使用普通的CSS文件而不是硬編碼的常量。然後你的PHP預處理器可以加載CSS文件,並將變量替換爲實際值。

+0

一方面它是一個很好的答案,另一方面它使用「槓桿」一詞。仍然,upvote:p – Artefacto 2010-06-01 04:59:18

+0

丹尼爾,謝謝,但我沒有得到這部分......「你可能想使用正常的CSS文件中的變量,而不是硬編碼常量」。你的意思是給文件一個CSS擴展?我不認爲在這種情況下會調用預處理器。我肯定錯過了什麼。 – Greg 2010-06-02 18:02:35

+0

@Greg:你可以給它一個css擴展,然後你可以用'style.php?file = mystyles.css'來調用預處理器。預處理器然後可以從文件系統加載文件併爲其處理。 – 2010-06-02 18:15:33

0

不完全是答案,而是@Matchu答案的補充。
這裏是一個代碼sni [和我幾年前使用的,你可以開始玩這個基地來開發你自己的客戶端緩存規則的方法。任何覺得他可以改進的人都會受到歡迎。

<?php 

//functions to cache HTML output Or JS/CSS output from a PHP script 

class ControlHtmlCache 

{ 

    //Will cache output of a php script on the browser for the giver hours. 

    //Do notice, this will not cahce from now until now+hours, but rather for a rounded time period in the time stamp 

    //For example, If I send 4 it will refresh the cache at approx 3,7,11,15,19,23 (In the summer, it will be 4,8,12....) 

    static function client_side_cache($hours) 

    { 

     //in the event a session start is used, I have to clean all the #$%# headers it sends to prevent caching 

     header('Cache-Control: ',true); 

     header("Pragma: ", true); 

     header("Expires: ", true); 



     //get the If-Modified-Since header in a unix time format 

     $headers = getallheaders(); 

     if (isset($headers['If-Modified-Since'])) 

     { 

      $modifiedSince = explode(';', $headers['If-Modified-Since']); 

      $modifiedSince = strtotime($modifiedSince[0]); 

     } 

     else 

     { 

      $modifiedSince = 0; 

     } 



     //calculate the Last-Modified timestamp 

     $current_time=time(); 

     $last_modified=($current_time)/($hours*3600); 

     $last_modified=(int)$last_modified; 

     $last_modified=$last_modified*$hours*3600; 



     //check cache not expires 

     if ($last_modified <= $modifiedSince) 

     { 

      header('HTTP/1.1 304 Not Modified'); 

      exit(); 

     } 

     else //emit a new Last-Modified (either cache expired or page wasn'r cached 

     { 

      Header('Last-Modified: '.gmdate("D, d M Y H:i:s",$last_modified).' GMT '); 

     } 

    } 

}//EOF class 
相關問題