Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

regole particolari, le @ rules

25 giugno 2011, Scritto da , category css

Non sono selettori, non sono nemmeno propriamente regole ma fanno comunque parte del mondo dei css e si scrivono, generalmente, prima di ogni definizione di stile: le @-rules.

@import

Con @import si può collegare un file esterno (css) all’interno di un altro o all’interno della pagina HTML.

Sintassi

<style tyle="text/css">
@import url(my-style.css);
@import url("my-style.css");
@import "my-style.css";
@import "http://www...../css/my-style.css";
</style>

Come @import, dunque, abbiamo diversi modi di scrivere per linkare file css, ed è possibile utilizzare url assoluti o relativi.

E’ bene che preceda qualsiasi regola definita all’interno di <style> perché l’inclusione del file potrebbe, grazie all’ereditarietà dei css, rendere vana la dichiarazione di queste regole.

@media

Con questa sintassi si può specificare una regola che valga esclusivamente per un particolare tipo di dispositivo con cui si accede al sito.

Con @media print, per esempio, si specifica un set di regole che valgano soltanto qualora si voglia mandare in stampa la pagina che stiamo visualizzando. Questa possibilità è molto comoda perché, per esempio, ci potrebbe consentire di non mandare in stampa i banner o di cambiare il layout per fare in modo che si adatti al meglio alle dimensioni del foglio di carta.

Altri media type sono:

  • all : ciò vuol dire che questo insieme di regole varranno per tutti i media type esistenti
  • braille: per i dispositivi con feedback tattile per linguaggio Braille
  • embossed: per stampanti braille
  • handheld: per device portatili, quali palmari, che hanno dimensioni di schermo ridotte e, probabilmente, poca disponibilità di banda
  • print: per pagine con materiale e documenti visibili in anteprima di stampa (e, quindi, poi stampabili)
  • projection: per presentazioni con proiettori
  • screen: per riproduzioni con monitor
  • speech: per sintetizzatori vocali
  • tty: per terminali, dispositivi portatili con limitate capacità e per quei dispositivi che hanno, tipicamente, caratteri a larghezza fissa
  • tv: per l’accesso al sito tramite TV (bassa risoluzione, colori, poca scrollabilità della pagina, disponibilità dell’audio…)

Esempi

<style tyle="text/css">
@media screen { 
 #container{width:900px} 
 h1 {color: red; font-size:28px;background-image: url(my_image.jpg)}
}
@media print { 
 #container{width:600px} 
 h1 {color: gray; font-size:14px;background-image: none}
}
</style>