Cascading Style Sheet (CSS) adalah mekanisme untuk mengatur tampilan komponen web agar lebih rapi, terstruktur, dan menarik. Salah satu teknik penulisan CSS yang paling umum adalah eksternal, CSS ditulis terpisah dari halaman web, lalu dipanggil menggunakan tag link.
Teknik ini lebih mudah di-maintenance dibanding inline atau embed, namun memiliki satu kekurangan yang cukup mengganggu saat pengembangan: masalah cache.
Masalah cache pada CSS eksternal
Saat pertama kali halaman web diakses, browser menyimpan file CSS ke dalam cache. Permintaan berikutnya akan menggunakan CSS dari cache tersebut, bukan dari server. Akibatnya, perubahan CSS yang baru saja dilakukan kadang tidak langsung tampak di browser tanpa melakukan clear cache secara manual.
Solusi: Versioning CSS
Versioning CSS adalah metode memberi penanda versi pada setiap perubahan file CSS, sehingga browser memperlakukannya sebagai file baru dan tidak mengambilnya dari cache.
Cara paling sederhana adalah menambahkan query string secara manual:
<link href="style.css?version=1.0" rel="stylesheet">Kelemahannya, kita harus memperbarui angka versi secara manual setiap kali ada perubahan CSS, tidak praktis.
Versioning otomatis dengan filemtime()
PHP menyediakan fungsi bawaan filemtime() yang mengembalikan waktu terakhir file dimodifikasi dalam format Unix timestamp. Nilai ini bisa dimanfaatkan sebagai nomor versi otomatis, berubah setiap kali file CSS disimpan.
<link href="style.css?version=<?php echo filemtime('style.css'); ?>" rel="stylesheet">Dengan cara ini, versi CSS diperbarui otomatis setiap ada perubahan tanpa perlu mengedit angka versi secara manual.
CSS dalam sub folder
Jika file CSS berada di dalam sub folder, sesuaikan path di kedua parameter — pada atribut href maupun di dalam fungsi filemtime():
<link href="assets/css/style.css?version=<?php echo filemtime('assets/css/style.css'); ?>" rel="stylesheet">Dengan versioning ini, browser selalu memuat CSS terbaru saat ada perubahan. Jika tidak ada perubahan, browser tetap menggunakan cache — sehingga tidak ada request yang terbuang sia-sia.
Catatan: Teknik ini direkomendasikan untuk lingkungan pengembangan. Pada tahap produksi, pertimbangkan solusi lain seperti cache busting berbasis build tool karena pemanggilan filemtime() pada setiap request dapat sedikit menambah beban server.
