Home | a plain old wp coder | Web Design and Wordpress Custom

Howto Memaksa Browser Refresh CSS Cache

Artikel ini berisi tips wordpress yg bisa membantu siapa saja yg pusing mengatasi cache browser. Sebagaimana diketahui kalau browser itu otomatis membuat cache setiap halaman web kita buka. Dari halaman html, image, javascript, dan file stylesheet css akan disimpan browser ke harddisk .

Alasannya sih agar saat kita membuka kembali halaman tsb (atau pun halaman lain yg dalam domain yg sama), proses loading halaman tsb bisa lebih cepat. Namun Kita harus menekan tombol F5 untuk mamaksa browser force load web demi merefresh cache agar kita bisa melihat output akhir perubahan yg kita lakukan.

Akan tetapi, cache browser ini bisa menjadi masalah saat kita sedang mendesain. Ambil contoh saat mendesain theme blog. Desain theme bisa dilakukan di server lokalhost di komputer kita atau pun langsung secara live pada server yg ada di internet dimana hasil editan kita akan langsung bisa dilihat pengunjung blog.

Nah, saran berikut efektif saat melakukan live editing theme kita sehingga setelah mengedit style.css, kita bisa langsung melihat hasil perubahan tsb. Keuntungan lain tehnik ini ialah cache file css yg ada di klien juga akan sama tanpa mereka harus menekan tombol F5.

Tehnik ini bisa dilakukan melalui 2 cara, yaitu

1. Via Edit langsung di file header.php

   <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); echo ‘?’ . filemtime( get_stylesheet_directory() . ‘/style.css’); ?>” type=”text/css” media=”screen, projection” />

2. Via hook stylesheet_uri di function.php

   add_filter(‘stylesheet_uri’, create_function(‘$s’, ‘return $s . “?” . filemtime( get_stylesheet_directory() . “style.css”");’))

Penjelasan

Tehnik pertama bisa dilakukan bila kita mengedit langsung file header.php. Sementara cara kedua bila kita mengedit file function.php. Kedua metode ini akan menghasilkan efek yg sama dimana file stylesheet tidak akan pernah dicache browser.

Alasan mengapa file tsb tidak akan pernah dicache adalah dikarenakan kita memberi versi setiap file style.css melalui pemanfaatan fungsi PHP filemtime();

Catatan

Lebih lanjut, tehnik ini juga bisa dikembangkan tidak saja pada file style.css tetapi juga file lain yg rutin dicache browser. Ambil contoh, javascript. Selama kita tau dimana file javascript tsb, maka kita bisa memanggilnya langsung dan mereloadnya.

Berbeda dgn file stylesheet yg bila salah cache cuma menyebabkan layout rusak, file file javascipt yg berisi fungsi bisa membuat halaman berprilaku aneh. Kamu mungkin tidak mau kalau pengunjung blog ilfil karena melihat keanehan blog kamu. Misalnya tiba tiba comment thread engak berfungsi secara misterius.

Dan hehehe perlu diingat ada konsekuensi lain bila kita menggunakan tehnik ini. Disebabkan file css tidak dicache, maka loading blog kita akan sedikit lebih lamban karena browser harus mengcopi file style.css tsb. Kayaknya cara ini sih lebih baik dipakai pada masa developing saja.

Referensi

Force CSS changes to “go live” immediately ditulis oleh markj aquith. Great simple article just the way i like it

Tags: CSS, Wordpress