Prefixer dan pemampat CSS3 automatik

Takeaways Key

• Skrip PHP yang ditunjukkan dalam teks membolehkan generasi automatik sifat CSS3 dengan awalan khusus penyemak imbas, dan pemampatan fail CSS untuk masa beban halaman yang lebih baik, tanpa memerlukan alat tambahan.
• Skrip berfungsi dengan menggantikan sifat-sifat yang dipraktikkan di dalam fail CSS dengan satu set sifat prefixed khusus pelayar, dan kemudian menggabungkan dan memampatkan fail CSS untuk mengurangkan permintaan pelayan dan ruang putih yang tidak perlu.
Skrip boleh digunakan dengan preprocessors CSS yang lain seperti SASS atau kurang, dan manfaatnya termasuk prestasi dan keserasian laman web yang lebih baik di seluruh pelayar yang berbeza, serta menjimatkan masa dan usaha secara manual menambah awalan vendor dan memampatkan fail CSS.
• Terdapat banyak cara untuk memampatkan fail CSS atau secara automatik menjana awalan CSS3 khusus pelayar, tetapi biasanya alat tambahan digunakan yang sangat menjengkelkan. Saya ingin menunjukkan kepada anda bagaimana tugas -tugas tersebut boleh dilakukan dengan hanya menggunakan PHP. Dalam artikel ini kita akan melihat bagaimana:

Menjana sifat CSS3 dengan awalan khusus pelayar supaya kita tidak memilikinya dengan tangan

• Concatenate semua fail CSS dan lepaskan komen dan ruang putih yang tidak perlu untuk mengurangkan bilangan permintaan pelayan dan mengurangkan masa beban halaman
• Lakukan proses secara on-the-fly apabila laman web diminta

Berikut adalah contoh yang menunjukkan betapa mudahnya hasil akhirnya akan digunakan. Di CSS, awalan khusus penyemak imbas digantikan dengan garis bawah seperti ini:

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

Kod ini akan menghasilkan senarai lengkap sifat seperti ini:

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

Kemudian, dalam HTML, pautan ditulis seperti ini untuk mengimport gaya:

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

Dengan elemen pautan tunggal, tiga fail CSS akan dimuatkan sebagai satu. Skrip CSS.PHP akan dibaca dalam fail yang disenaraikan (CSS_FILE1.CSS, CSS_FILE2.CSS, dan CSS_FILE3.CSS), menggabungkannya, dan mengembalikannya sebagai satu fail. Ia kelihatan cukup mudah digunakan, bukan? Jadi dengan kelebihan lagi, mari kita mula menulis beberapa kod!

Menulis kod

Teruskan dan buat fail css.php dengan kod berikut:

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

Kod pertama menerima senarai fail CSS yang diproses sebagai rentetan dari parameter URL (boleh diakses dalam PHP sebagai $ _get ["f"]). Setiap fail dipisahkan dengan watak paip. Fungsi meletup () memecahkan rentetan pada paip yang mengembalikan pelbagai nama fail. Fungsi file_get_contents () Mendapatkan kandungan setiap fail yang dilampirkan, satu demi satu, kepada kandungan pembolehubah $. Selepas kandungan fail CSS telah diambil, langkah seterusnya adalah untuk mencari sebarang sifat CSS yang bermula dengan garis bawah dan menggantikannya dengan sifat prefixed khusus penyemak imbas. Fungsi preg_match_all () mendapati semua bahagian dalam teks yang sepadan dengan ekspresi biasa dan meletakkan perlawanan menjadi $ perlawanan [0] sebagai array. Saya tidak akan menjelaskan mengapa $ perlawanan mempunyai Indeks Array 0 kerana anda boleh membaca penjelasan yang jelas mengenai fungsi dalam manual PHP. Sebaliknya saya ingin memberi tumpuan kepada menjelaskan aliran program kami. Imej ini menerangkan corak ungkapan biasa:

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.

Bahagian yang sepadan dengan ungkapan biasa akan digantikan oleh watak -watak di dalam kurungan, sebagai contoh:

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.

menggunakan skrip

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:

Fail kedua adalah center.css:

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

Fail ketiga ialah footer.css:

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

Lihat bagaimana sifat CSS3 telah ditulis; Orang-orang yang akan mempunyai awalan khusus penyemak imbas hanya diberikan sekali dan mempunyai garis bawah di hadapan mereka. Seterusnya, buat fail index.html yang akan menggunakan gaya.

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

Lihat atribut HREF dalam tag pautan. Setiap nama fail CSS dipisahkan oleh paip.

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

Kesimpulan

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.

imej melalui 1xpert / shutterstock soalan yang sering ditanya mengenai prefixer dan pemampat CSS3

Apakah tujuan prefixer dan pemampat CSS3? Ia secara automatik menambah awalan vendor ke sifat CSS untuk memastikan mereka bekerja di seluruh pelayar yang berbeza. Fungsi pemampat mengurangkan saiz fail CSS dengan menghapuskan aksara yang tidak perlu, dengan itu meningkatkan kelajuan pemuatan laman web anda. Ia kemudian menambah awalan ini secara automatik, menjimatkan masa dan usaha untuk melakukannya secara manual. Fungsi pemampat berfungsi dengan mengeluarkan aksara yang tidak perlu seperti ruang, komen, dan pemecahan garis dari fail CSS anda, dengan itu mengurangkan saiznya. Ia memastikan bahawa sifat CSS anda berfungsi di seluruh pelayar yang berbeza dan mengurangkan saiz fail CSS anda, dengan itu meningkatkan kelajuan pemuatan laman web anda. Ia juga menjimatkan masa dan usaha untuk menambah awalan vendor secara manual dan memampatkan fail CSS anda.

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!