MasRud.com

Trik versioning CSS menggunakan PHP

Gambar ilustrasi

Cascading Style Sheet atau CSS adalah suatu aturan atau mekanisme untuk mengatur komponen dalam sebuah web agar lebih teratur dan terstruktur.

CSS berguna untuk mengatur tampilan suatu web agar lebih rapi, terstruktur dan terlihat menarik.

Salah satu teknik penulisan CSS yang umum digunakan adalah penulisan secara eksternal. Pada teknik ini CSS ditulis secara terpisah dari halaman web baru kemudian dipanggil ke dalam halaman web menggunakan tag link.

Contoh pemanggilan CSS:

<link href="style.css" rel="stylesheet">

Teknik penulisan ini paling banyak digunakan dibandingkan dengan penulisan secara inline dan embed. Keuntungan penulisan secara eksternal adalah lebih mudah di-maintenance karena CSS ditulis secara terpisah.

Meskipun demikian cara ini juga memiliki kekurangan, yaitu kadang perubahan CSS tidak akan langsung tampak pada halaman web. Hal ini disebabkan karena browser membuat cache dari CSS yang dipanggil pertama kali dan akan memanggil CSS dari cache apabila ada request baru.

Agar apabila ada perubahan pada CSS bisa langsung muncul pada halaman web, maka kita harus menghapus cache terlebih dahulu. Hal ini sungguh tidak efisien bukan?

Solusi untuk mengatasi kekurangan ini adalah dengan melakukan “Versioning”. Versioning CSS merupakan suatu metode untuk memberi versi tertentu pada setiap perubahan yang terjadi pada CSS.

Contoh:

<link href="style.css?version=1.0" rel="stylesheet">

Untuk melakukan versioning CSS kita bisa memanfaatkan salah satu fungsi bawaan PHP yaitu filemtime(). Cara ini lebih mudah dibandingkan kita menulis versi CSS secara manual pada setiap perubahan yang terjadi.

Contoh penerapan fungsi filemtime() untuk versioning CSS:

<link href="style.css?version=<?php echo filemtime('style.css'); ?>" rel="stylesheet">

Code Kode versioning css

Result Hasil versioning css

Jika file CSS berada dalam sub folder, maka penulisan juga harus mencantumkan lokasi file CSS kemudian diikuti nama filenya.

Contoh:

<link href="assets/css/style.css?version=<?php echo filemtime('assets/css/style.css'); ?>" rel="stylesheet">

Dengan menerapkan teknik versioning, maka perubahan yang terjadi pada CSS akan langsung terlihat pada halaman web tanpa kita melakukan clear cache terlebih dahulu.

Hal ini karena CSS yang di-request oleh browser adalah CSS yang terbaru, dan jika tidak ada perubahan maka browser akan menampilkan CSS yang sudah tersimpan dalam cache.

Demikianlah trik sederhana melakukan versioning CSS dengan PHP. Cara ini direkomendasikan untuk web yang berada dalam tahap pengembangan, namun tidak direkomendasikan untuk digunakan pada tahap produksi karena dapat mengurangi kecepatan loading web.

Tulisan lainnya

Format tanggal instagram Membuat format tanggal ala Instagram pada PHP Jika kamu bertanya-tanya bagaimana cara membuat tampilan waktu seperti pada aplikasi Instagram … Format rupiah php Cara menampilkan format rupiah pada PHP Halo, bagaimana kabarnya baik-baik saja kan? Pada tulisan sebelumnya saya telah menuliskan tutorial … Minify HTML Trik minify kode HTML menggunakan PHP Saya adalah seorang yang sangat memperhatikan performa website. Contohnya adalah blog ini. Meskipun … Password hash password verify php Implementasi Password Hash dan Password Verify pada PHP Pada tulisan kali kita akan berbicara mengenai fungsi password_hash() dan password_verify() yang ada …