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.
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:
Yang akan memiliki efek yang sama seperti menempatkan ini dalam HTML Anda:
Demikian pula, RFC 5988 memungkinkan untuk memasukkan stylesheet dalam dokumen HTML tanpa menggunakan apapun selain header HTTP:
akan sama hasilnya dengan
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
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.
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
Di browser saya kok gini ?
http://s22.postimg.org/4hrn9jwwh/Klik5x_2013_07_06.jpg
engga muncul apa apa?
Cobanya pake Browser apa kan sudah dijelaskan diatas
Mantab, akhirnya di ulas juga… hanya sedikit pertanyaan, terlepas dari project serius atau tidak, bagaimana imbasnya bagi SEO? meskipun sekarang “content is a king”, tapi di htmlnya sendiri kan tidak ada content sama sekali? jadi tidak ada apapun yang di baca oleh google bot kan ya?
Anyway, thanks pak bos….
Not Recommended untuk SEO, ini hanya untuk seru2an aja
Mantepppp :)
pengila chrome
Wah wah wah,mangstab bener .Hahahahahaha,.. (y)
Akhirnya ketemu juga,memang sih jelek di seo tapi ini bisa dipake tambahan css.
oiya betul sekali g cocok diterapkan untuk project2 dr klien :D
tp mungkin bisa dijadikan sebuah pengetahuan baru kalo teknlogi front-end sekarang berkembang gila-gilaan :p
[…] CSS Tanpa HTML […]
saya adalah pemula, mau tanya, kalo membuat komentar box, serta komentarnya akan terdaftar gimana yah? makasih