Cascading Style Sheet atau CSS adalah suatu aturan atau mekanisme untuk mengatur komponen dalam sebuah web agar lebih teratur dan terstruktur. CSS tidak termasuk bahasa pemrogramman.
CSS merupakan salah satu elemen penting dalam membuat website maupun aplikasi berbasis web.
CSS berguna untuk mengatur tampilan suatu web agar lebih rapi, terstruktur dan menarik, tanpa CSS suatu halaman web akan terlihat kacau, tidak terstruktur dan tidak menarik sama sekali.
Terdapat 3 cara dalam menulis CSS pada sebuah web, yaitu "inline", "embed" dan "eksternal".
Pada tulisan ini saya tidak akan membahas tentang ke tiga teknik penulisan CSS tersebut, namun saya hanya akan membahas tentang penulisan CSS secara eksternal.
Penulisan CSS secara eksternal dilakukan dengan memanggil file CSS tersebut ke dalam halaman web dengan tag link dan diletakkan diantara tag
<head> dan </head>. Contoh tag:<link href="style.css" rel="stylesheet">
Cara penulisan ini paling banyak digunakan dibandingkan dengan penulisan secara inline dan embed. Keuntungan penulisan CSS secara eksternal adalah lebih mudah dimaintenance karena CSS ditulis secara terpisah.
Akan tetapi cara ini juga memiliki satu kekurangan yaitu kadang perubahan pada web tidak langsung terlihat dan harus melakukan clear cache terlebih dahulu agar perubahan tersebut dapat terlihat. Hal ini terjadi karena browser melalukan cache pada file CSS yang dipanggil.
Solusi untuk mengatasi kekurangan ini adalah dengan melakukan versioning CSS. Versioning CSS merupakan suatu metode untuk memberi nomor versi pada setiap perubahan yang terjadi pada file CSS.
Versioning CSS dilakukan dengan menambahkan nomor versi file CSS pada link tag yang digunakan untuk memanggil file CSS.
Contoh:
<link href="style.css?version=1.0" rel="stylesheet">
Untuk melakukan versioning CSS pada web /aplikasi berbasis web PHP kita bisa memanfaatkan fungsi bawaan PHP yaitu
filemtime() . Cara ini lebih mudah dibandingkan kita menulis versi CSS secara manual pada setiap perubahan yang terjadi. Fungsi filemtime() mengambil waktu modifikasi suatu file, dalam konteks ini adalah file CSS.
Contoh penerapan fungsi
filemtime() pada versioning CSS.<link href="style.css?version=<?php echo filemtime('style.css'); ?>" rel="stylesheet">
Jika file CSS berada dalam sub folder, maka penulisan juga harus mencantumkan lokasi file CSS kemudian diikuti nama file CSS.
Contoh:
<link href="assets/css/style.css?version=<?php echo filemtime('./assets/css/style.css'); ?>" rel="stylesheet">
Teknik versioning ini juga dapat diterapkan pada framework PHP seperti CodeIgniter, Laravel dan sebagainya.
Dengan menerapkan teknik versioning CSS, maka perubahan yang terjadi pada CSS akan langsung terlihat pada web tanpa kita harus melakukan clear cache pada browser.
Hal ini karena file CSS yang direquest oleh browser adalah file CSS yang terbaru dan jika tidak ada perubahan pada file CSS maka browser akan menampilkan file CSS yang sudah tersimpan dalam cache.
Demikianlah trik sederhana melakukan versioning CSS dengan PHP. Cara ini direkomendasikan untuk website/aplikasi yang berada dalam tahap pengembangan untuk menampilkan efek perubahan CSS pada halaman web tanpa harus membersihkan cache terlebih dahulu.
Namun trik versioning ini tidak direkomendasikan untuk digunakan pada tahap produksi karena dapat mengurangi kecepatan loading website/aplikasi karena browser tidak dapat membuat cache pada CSS yang digunakan.
Jangan lewatkan Trik Minify Kode HTML Menggunakan PHP
Sumber : https://masrud.com/post/versioning-css
Tidak ada komentar:
Posting Komentar