Selamat Datang

CSS Tanpa HTML

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.

CSS Tanpa HTML

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

11 thoughts on “CSS Tanpa HTML

  1. Agus Demak says:

    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….

  2. roozzak says:

    Mantepppp :)

  3. aku says:

    pengila chrome

  4. Syauqi says:

    Wah wah wah,mangstab bener .Hahahahahaha,.. (y)

  5. ambrizal says:

    Akhirnya ketemu juga,memang sih jelek di seo tapi ini bisa dipake tambahan css.

  6. 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

  7. joshua says:

    saya adalah pemula, mau tanya, kalo membuat komentar box, serta komentarnya akan terdaftar gimana yah? makasih

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development