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