CSS Berbeza Utk Media Berbeza

Posted by Ikhwan on April 25, 2006

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.

Comments

Leave a response

  1. Anonymous Thu, 27 Apr 2006 13:56:00 MYT

    gud… tq

  2. Ami'n Tue, 16 May 2006 15:55:00 MYT

    senangnyer baca xplanation ko. Ada lagi tak?

  3. Ikhwan Tue, 16 May 2006 23:03:00 MYT

    Try browse entry2 lepas kalau2 ada yg menarik hati ko.. tq.

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. You can register to this site so you won't be asked to do this again. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word