Takeaways Key

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

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

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

Arahan $ prefix mengandungi pelbagai awalan khusus penyemak imbas; Anda boleh menambah lebih banyak awalan, atau mengeluarkan beberapa, bergantung kepada keperluan anda. Setiap definisi harta dalam $ perlawanan [0] akan diubah menjadi satu set sifat CSS3 dengan awalan khusus pelayar. Kod ini melelehkan setiap harta dan mencipta penampan hasil, menggantikan garis bawah di dalam harta dengan awalan khusus penyemak imbas dan menolak hasil penampan, dan kemudian menggantikan harta asal dalam teks dengan kandungan penampan. Selepas memperluaskan awalan khusus pelayar dilakukan dan mereka telah digabungkan kembali ke kandungan $, skrip mengeluarkan sebarang komen dalam kandungan untuk mengurangkan saiznya. Imej ini menerangkan ungkapan biasa yang berkaitan:

Kemudian satu lagi ungkapan biasa membuang mana -mana ruang kosong yang tidak perlu dan garisan baru untuk terus mengurangkan saiz kandungan.

Akhirnya CSS yang disimpan dalam kandungan $ siap dihantar. Header pertama () Panggilan memberitahu penyemak imbas bahawa output harus dianggap sebagai fail CSS. Header kedua () Panggilan memberitahu penyemak imbas bahawa fail ini tamat dalam satu jam, jadi penyemak imbas akan cache selama satu jam dan menggunakan salinan cache dan bukannya memintanya lagi dari pelayan.

Saya ingin memberi anda contoh penggunaan mudah untuk skrip yang baru saja kami buat. Letakkan CSS.PHP ke dalam direktori CSS anda, bersama dengan tiga fail CSS ini. Fail pertama adalah header.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>

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

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

Dalam artikel ini saya menunjukkan kepada anda bagaimana untuk mengautomasikan beberapa manipulasi biasa CSS menggunakan PHP. Skrip ini sangat bergantung pada ungkapan biasa, bahasa yang sangat kuat yang membolehkan kita memanipulasi rentetan namun kita lihat patut. Secara keseluruhan, skripnya sangat mudah tetapi ia menawarkan banyak faedah. Cuba gunakannya dalam projek anda yang seterusnya.

Adakah terdapat kelemahan untuk menggunakan prefixer dan pemampat CSS3? Sesetengah pelayar moden tidak lagi memerlukan awalan vendor untuk sifat CSS tertentu. Selain itu, memaparkan fail CSS anda boleh membuat mereka sukar untuk membaca dan mengekalkan. Ia kemudiannya akan menambah awalan vendor yang diperlukan dan memampatkan fail anda. Sesetengah alat juga menawarkan ciri -ciri tambahan seperti minifikasi dan pengoptimuman.

Bolehkah saya menggunakan prefixer dan pemampat CSS3 dengan preprocessors CSS yang lain? Alat ini hanya akan menambah awalan vendor yang diperlukan dan memampatkan fail CSS output. Alat ini menawarkan pelbagai ciri dan boleh digunakan dengan pelbagai preprocessors CSS. Anda juga harus mempertimbangkan prestasi dan kebolehpercayaan alat. Walau bagaimanapun, perlu diingat bahawa masa pemprosesan mungkin lebih lama untuk fail yang lebih besar. Jika keserasian dan prestasi penyemak imbas adalah pertimbangan penting, maka menggunakan prefixer dan pemampat CSS3 boleh bermanfaat.

Atas ialah kandungan terperinci Prefixer dan pemampat CSS3 automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!