Membuat LESSCSS Berjalan di Internet Explorer

Hi, Guys…!? Jumpa lagi dengan saya di Klinik Ngoprek ala HaPe yang mana kali ini saya akan membahas mengenai trik agar lesscss dapat berjalan di internet explorer. Mungkin diantara pembaca ada yang belum mengetahui apa itu lesscss. LESSCSS merupakan framework css yang mana ide dasarnya adalah melakukan pre-processor antara kode yang kita tulis dengan kode pada website yang anda buat. Untuk langkah awal anda bisa baca di tutorial lesscss berikut yang menurut saya sudah cukup jelas.

Permasalahan dimulai saat saya mencoba untuk membuat script sederhana dan ketika coba dijalankan di mozilla dan internet explorer ternyata di internet explorer tidak dapat berjalan. Error tersebut ternyata akibat dari “Access is Denied” yang selengkapnya dapat dilihat di stackoverflow. Adapun script sederhana yang telah saya buat adalah sebagai berikut.
styless.less

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
h1{ color: @light-blue; }

coba.html

<html>
	<head>
		<title>Mencoba LessCSS</title>
		<link rel="stylesheet/less" type="text/css" href="styles.less">
		<script src="less-1.3.1.min.js" type="text/javascript"></script>
	</head>
	<body>
		<h1>HaPe</h1>
	</body>
</html>

Setelah googling sana-sini akhirnya saya dapatkan suatu pencerahan dimana hal ini terjadi karena ada error di Microsoft XMLHttpRequest dan penyakit tersebut bisa disembuhkan dengan mengubah method getXMLHttpRequest pada less-1.3.1.js tersebut. Setelah melakukan perubahan tersebut ternyata script sudah dapat berjalan baik di internet explorer (versi 8) dan mozilla. Untuk source code dapat dilihat pada bagian akhir dari tulisan ini. Adapun perubahan yang dilakukan adalah sebagai berikut.

function getXMLHttpRequest() {
    if (window.XMLHttpRequest
	 // This is solution?
       && !(window.ActiveXObject && isFileProtocol)
	) {
        return new(XMLHttpRequest);
    } else {
        try {
            return new(ActiveXObject)("MSXML2.XMLHTTP.3.0");
        } catch (e) {
            log("browser doesn't support AJAX.");
            return null;
        }
    }
}

Demikian hasil kegiatan dari klinik ngoprek kali ini mudah2an dapat memberi pencerahan.

Tags: lesscss internet explorer, framework css, trik lesscss ie

source code: lesscss-hape




Leave a Reply

[+] kaskus emoticons nartzco