Assalamualaikum warahmatullahiwabarakatuh


Setelah beberapa hari ini gak ada kerjaan (baca:ngerjain site) lantaran ingin punya Blog yang mobile dan webby (ngawur ,p). Namun ternyata sungguh memusingkan kepala membuat CSS yang bagus kalau dilihat dari PC dan gak berat kalau dilihat dari HP.


Namun, beberapa hari yang lalu entah malaikat mana yang membisikkan kepadaku, tiba-tiba saja om sugie mengatakan sesuatu pada Blog ku.
btw mau buat web multi? Atur cssnya pake @media

Awalnya aku biasa saja menanggapinya, dan tidak memperhatikan ada sebuah kata kunci penting di sana.
(lebay)

Tapi, setelah tempo hari tersadar, teringat komentar kang sugie di SINI, aku pun mencoba tuk melarikan diri ke Online List dan mencari masta yang tengah walking-walking di Zonam, dan kutemukanlah Nick ramunix tengah nongkrong di forum. PM lah dia, tanya gimana kabar dan gimana keadaannya, istri sudah berapa, dan lain-lain.


Namun, karena tak kunjung dibalas, larilah diriku ke Forum dan bertanya di area Webmaster/Wapmaster. Tak kunjung dijawab, aku pun dan memajang link menuju thread tersebut.

Karena tak ada jawaban, aku pun Off.

Beberapa saat kemudian, aku pun ON lagi, dan ternyata ada 1 notf, langsung menuju TKP dan ternyata kang ramunix yang membalasnya.


Katanya : tampilan hp dan pc beda? gunakan css media. lihat di blog ane ada gan

dalam benakku : "Blog yang mana ya?"

Tak ubeg-ubeglah blog kang ramunix, tapi ndak ada. Namun malah nemu site terkemuka di Dunia di header blognya. opotoiki.tk.


-GO TKP-

dan ternyata ketemu lah saya dengan Blog kang ramunix yang berjundul CSS Print halaman web.


Habis baca, numpang comment lah, sapa tau dapat harta karun.


Berikut kurang lebih isinya akan saya jelaskan dengan bahasa saya sendiri, yaitu sesuai dengan Judul Blog saya, saya hanya kaan menjelaskan bagaimana membuat CSS multi dengan CSS jika dikunjungi dari HP berbeda dengan CSS dari PC.

0.  
1. <link media="screen" href="style.css" type="text/css" rel="stylesheet" />
2. <link media="handheld" href="handheld.css" type="text/css" rel="stylesheet" />
3.  

Perhatikan perbedaan kedua kode di atas, ada yang berbeda bukan.

Perbedaannya yaitu pada media. OK mari kita telusuri lebih dalam. Berikut ini beberapa device browser lebih jelasnya :

1. all = untuk semua device
2. aural = untuk speech synthesizers
3. braille = untuk braille tactile feedback devices
4. embossed = untuk braille printers
5. handheld = untuk handheld devices (misalnya small screen, monochrome, limited bandwidth)
6. print = untuk printed documents (termasuk docs viewed pada print preview mode juga)
7. projection = untuk proyektor presentasi(misal: proyektor dan printing transparan)
8. screen = untuk layar PC/browser PC
9. tty = untuk media yang menggunakan fixed-pitch character grid (misal: teletypes atau terminals)
10. tv = untuk tipe device televisi

sumber : http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

Jadi, dari penjelasan di atas, jika kita ingin membuat CSS untuk beberapa device, cukup membuat beberapa link menuju CSS sesuai device browser yang diinginkan.

Kalau untuk HP, saya menggunakan handheld dan untuk PC saya menggunakan screen.

Sedangkan href, silahkan diisi diantara tanda kutipnya dengan link menuju CSS sesuai devicenya.

Closing
Akhir kata, mohon komentarnya tentang Penampilan Baru Blog saya di Syaiun Mobile
Meskipun tampilan untuk HPnya masih melebar dari HP saya, padahal cuma pakai Background sama border sedikit.