有否PHP實現的自動產生CSS3相容性首碼?

來源:互聯網
上載者:User
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等預先處理工具;

可以嘗試:

  • http://ecomfe.github.io/est/

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.