.:: Maurizio Pelizzone ::.

Qualche giorno fa geeksquare mi ha dato l’occasione per scoprire un uso dei css che non conoscevo, infatti questa pagina mi ha fatto passare quasi un ora prima di capire come funzionasse ( ma quanto sono ignorante ??? )

il “trucco” ( se così possiamo chiamarlo ) è la combinazione dell’utilizzo di un header impostato via codice …

<br /> < ?php header('Link: <file.css>; REL=”stylesheet”; MEDIA=”screen”‘); ?><br /> <br />

… e del relativo file css ( richiamato dell’header ) nel quale vengono impostate le proprietà della pagina.

<br /> body { background: #9EAEB3 url(grad.jpg) repeat-x top; font-size: 20px; text-decoration: blink; font-weight: bold; }<br /> body:after { content: “This page contains 0 bytes of HTML (excluding comments). View the source code, no CSS! Move your mouse here…” }<br /> body:hover { text-decoration: none; color: green; }<br /> body:hover:after { content: “Look, no Javascript, ma! View source… ” url(http://cow.neondragon.net/ui/cow/images/comments.gif) ” cow.neondragon.net”; color: white; background-color: blue; font-size: 24px; line-height: 36px; }<br />

Nelle specifiche css le istruzioni “:after” e “:hover” vengono chiamate Pseudo-classi, quella che segue è una brevissima spiegazione.

:after ci consente di inserire del contenuto alla fine di un elemento

:hover si applica ad un elemento metre questo ha il puntatore del mouse vi passa sopra.

Esistono molte altre pseudo-classi ma non tutti browser li renderizzano nello stesso modo.

questo tipo di “magia” per il momento funziona solo con Firefox e Opera 9 e quindi non è utilizzabile per la realizzazione di un sito, ma rimane comunque un interessante spunto per una riflessione sull’uso dei fogli di stile.

Link di riferimento

1. sitepoint.com
2. neondragon.net