Tutorial Web Design

Tadi pagi iseng-iseng nyoba CSS tanpa HTML dan menyebarkan sebuah link demo ke twitter, Fan Page Facebook Tutorial Web Design, dan beberapa group, ternyata lumayan banyak tanggapan dan penasaran bagaimana membuatnya, kok bisa muncul tulisan di halaman web tapi di HTML nya tidak menulis apa-apa ketika di VIEW Source dengan Mozilla, hal itu bisa saja dengan pseudo code ::before di css.

Tidak ada Tag link rel=””

Namun hal yang lebih menarik adalah, bagaimana bisa sebuah style.css bisa dijalankan oleh HTML tanpa adanya tag link rel=".." menuju css tersebut.

Ada yang cukup jeli dan pandai mencari di google dan akhirnya menemukan trik nya, tapi banyak juga yang masih penasaran.

—————
Pembahasan
—————

RFC 5988 mendefinisikan Link HTTP Header, yang memungkinkan anda untuk mengirim elemen <link> melalui HTTP Header tanpa menyertakan HTML. Sebagai contoh:

Link: <some-document.html>;rel=prefetch

Yang akan memiliki efek yang sama seperti menempatkan ini dalam HTML Anda:

<link href="some-document.html" rel="prefetch">

Demikian pula, RFC 5988 memungkinkan untuk memasukkan stylesheet dalam dokumen HTML tanpa menggunakan apapun selain header HTTP:

Link: <magic.css>;rel=stylesheet

akan sama hasilnya dengan

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

Seperti itulah teorinya. Dalam prakteknya, tidak banyak browser menerapkan header Link. Sampai postingan ini dibuat, hanya Opera dan Firefox mendukung ini.

Langsung praktek saja

Buat style.css dengan kode sepert ini

html{ 
	background: #066968; 
	padding: 1em; 
}
body{ 
	border: 5px dotted #eee; 
	color: #fff; 
	font: 3em/1.5 sans-serif; 
	padding: 1em; 
	width: 10em; 
	margin: 0 auto; 
}
body::after{ 
	content: 'Hallo Saya TWD, saya dibuat tanpa script, Silahkan "View Source" untuk melihat kode :) , kok bisa kosong ya ?'; 
	/* Support di Firefox 3.6.x. */ 
}

dan sebuah file index.php dengan isi seperti ini

[php 1=”header('Link:” 2=”<style.css>;” 3=”rel=stylesheet');?>” 4=”[/php” language=”<?php”][/php]

Hasil

Untuk yang dari tadi pagi penasaran, download contoh script nya disini :) semoga penasarannya hilang.

Untuk demo bisa dilihat dengan Mozilla Firefox dan Opera, dengan melakukan View Source.

DEMO | Download

Kesimpulan

Trik ini hanya untuk bersenang-senang, kita hanya perlu tau kalau trik ini ada. Namun bukanlah ide yang baik untuk menggunakan ini dalam proyek website anda, The no-HTML ‘hack’ is all kinds of evil, jadi sepertinya tidak akan ada developer yang akan serius menggunakan ini dalam situs resmi.

Salam Web Development Indonesia

Credit: css-tricks