HTML and CSS Reference
In-Depth Information
CSS3 introduce delle specifiche dedicate in maniera specifica a quest'area, per cui possia-
mo combinare delle istruzioni particolari in grado di abbinare un CSS a scenari avanzati,
per esempio, in base alla risoluzione del browser o alla disponibilità di una particolare fea-
ture. Le specifiche
CSS3 Media Queries
sono disponibili su
http://aspit.co/a0r
e saranno approfondite nel corso del prossimo capitolo.
Possiamo quindi specificare un CSS a uso e consumo di un browser il cui schermo ab-
bia una risoluzione minore di 500px utilizzando
l'esempio 4.2
.
Esempio 4.2
<link rel="stylesheet"
href="style.css"
type="text/css"
media="screen and (min-device-width: 500px)" />
Ci sono diversi tipi di operatori e sorgenti che possono essere interrogati, che regolano
l'aspect-ratio (4:3, 16/9), la risoluzione, il colore. Tutti questi valori sono approfonditi in
maniera specifica nel
capitolo 5
.
Tra l'altro, è possibile specificare gli stili anche direttamente nella pagina, benché que-
sto approccio presenti lo svantaggio che ogni pagina invia ogni volta lo stesso contenuto,
anziché fare riferimento a un file esterno condiviso, come fatto finora. Tuttavia, in alcuni
contesti può essere comodo specificare degli stili localmente alla pagina ed è sufficiente
che utilizziamo il codice
dell'esempio 4.3
.
Esempio 4.3
<style>
@screen {...}
@print {...}
</style>
Anche in questo caso è possibile specificare degli stili ad hoc per i vari tipi di browser, ma
si sfrutta una sintassi leggermente diversa. Il valore dell'attributo
media
del tag
link
,
infatti, ora viene inserito direttamente all'interno del documento, anteponendo lo stesso va-
lore con il simbolo
@
.
Resta inoltre possibile registrare un CSS esterno all'interno di un altro CSS, sia in una
pagina sia, a propria volta, in un file esterno, usando la sintassi
dell'esempio 4.4
.
