CSS3有很多好用的新屬性,比如圓角、陰影、動畫等,但是這些屬性在不同瀏覽器中都是通過-moz-、-webkit-等的私人標籤進行支援的。因此需要跨瀏覽器實現的時候,必須一條屬性分寫好幾遍。例如:
-webkit-box-shadow: 20px;-moz-box-shadow: 20px;box-shadow: 20px;
有一個好用的網站(http://prefixr.com/),可以協助產生這些代碼。但這是非即時的產生,需要手動加入自己的檔案中。因此遇到修改的時候就相當繁瑣。
有沒有一種php的實現,在css中只書寫標準屬性,例如
/* test.css */div{ box-shadow: 20px;}
通過php讀取css檔案並自動識別後,即時輸出如下代碼:
/* test.php?file=test.css */div{-webkit-box-shadow: 20px;-moz-box-shadow: 20px;box-shadow: 20px;}
這樣在css的編寫、調試、修改中就變得相當地快捷,並且能快捷地產生發布用檔案。將來瀏覽器支援發生變化時,也只需修改一下相應的規則,然後簡單產生一次檔案即可。
現在比較麻煩的是CSS屬性的複雜性,參考 http://prefixr.com/ 首頁上的樣本就涉及到了其中的多數。
如何通過正則實現自動匹配和添加?
或者有沒有大致的實現思路?
回複內容:
CSS3有很多好用的新屬性,比如圓角、陰影、動畫等,但是這些屬性在不同瀏覽器中都是通過-moz-、-webkit-等的私人標籤進行支援的。因此需要跨瀏覽器實現的時候,必須一條屬性分寫好幾遍。例如:
-webkit-box-shadow: 20px;-moz-box-shadow: 20px;box-shadow: 20px;
有一個好用的網站(http://prefixr.com/),可以協助產生這些代碼。但這是非即時的產生,需要手動加入自己的檔案中。因此遇到修改的時候就相當繁瑣。
有沒有一種php的實現,在css中只書寫標準屬性,例如
/* test.css */div{ box-shadow: 20px;}
通過php讀取css檔案並自動識別後,即時輸出如下代碼:
/* test.php?file=test.css */div{-webkit-box-shadow: 20px;-moz-box-shadow: 20px;box-shadow: 20px;}
這樣在css的編寫、調試、修改中就變得相當地快捷,並且能快捷地產生發布用檔案。將來瀏覽器支援發生變化時,也只需修改一下相應的規則,然後簡單產生一次檔案即可。
現在比較麻煩的是CSS屬性的複雜性,參考 http://prefixr.com/ 首頁上的樣本就涉及到了其中的多數。
如何通過正則實現自動匹配和添加?
或者有沒有大致的實現思路?
PHP 實現的不是很清楚,但是有一個 javascript 實現的 LESS,在編寫的時候調用特殊 js 檔案實現快速調試,部署的時候可以直接輸出成 CSS 檔案。
這功能應該交給IDE產生,phpstrome就可以通過外掛程式完成這個需求
建議使用less等預先處理工具;
可以嘗試: