CSS Berbeza Utk Media Berbeza
Aku mahu, bila user print web page aku, satu notis akan disertakan di atas kandungan page tu. Tapi notis ini tak perlu kelihatan bila user view di browser. Caranya cukup kacang. Gunakan Cascading Style Sheet (CSS).
<style type="text/css">
@media print {
.Header {
display: block;
}
body {
font-size: 10px;
}
}
@media screen {
.Header {
display: none;
}
}
</style>
<div class=”Header”>
Dicetak dari laman web pantun-keseronokan.
</div>
<div>
Tuai padi antara masak,
Esok jangan layu-layuan,
Intai kami antara nampak,
Esok jangan rindu-rinduan.
Buah langsat kuning mencelah,
Senduduk tidak berbunga lagi,
Sudah dapat gading bertuah,
Tanduk tidak berguna lagi.
</div>
Keyword @media memberi tahu browser tentang style yg perlu digunakan utk situasi berbeza. “@media screen” utk memberitahu CSS ini perlu digunakan bila web page dipaparkan di screen monitor biasa. “@media print” pula bila web page dicetak ke printer. Dalam kes ini, utk screen, aku hide kan DIV utk notis tu dgn meletakkan “display: none”. Bila web page diprint, DIV ni di show kan menggunakan “display: block” (”display: ”” pun boleh).
Trackbacks
Use this link to trackback from your own site.


gud… tq
senangnyer baca xplanation ko. Ada lagi tak?
Try browse entry2 lepas kalau2 ada yg menarik hati ko.. tq.