CSS: Le "at-rules"

Sono regole particolari, costrutti introdotti dal simbolo della chiocciola @, e si pronunciano come "at-". Svolgono funzioni particolari, spesso eseguibili anche in altro modo. Un classico è la direttiva @import per importare un foglio di stile esterno per un documento html.

Sintatticamente, le @-rules vanno poste nel corpo del documento all'interno del tag style.

@media
Questa direttiva "pilota" il foglio di stile opportuno in base al tipo di media con il quale si sta fruendo della pagina web o del sito. Un esempio:

Si noti come in presenza di un monitor il colore di h1 sia nero; per la stampa esso diventerà rosso. E viceversa per il paragrafo.

@charset
Questa direttiva va direttamente a sostituire il tradizionale meta-tag usato nella head del documento html per dichiarare il set di caratteri da usare.

meta http-equiv="Content-Type" content="text/html; utf-8"

Ecco la stessa funzionalità con la @rule:

@charset "utf-8"


@font face
Ed ecco quello che mi aveva fatto sobbalzare sulla sedia in primo momento. Questa direttiva sembrava la panacea per la soluzione dei problemi relativi all'uso di fonts particolari per la presentazione grafica di un sito...
La direttiva può essere usata per descrivere un font usato nel documento. È un argomento molto complesso e conoscere i dettagli della questione non aggiunge nulla che possa davvero accrescere la vostra conoscenza dei CSS. In genere potrebbe essere usata per specificare l'url di un carattere particolare da scaricare su una macchina che non lo veda presente tra i suoi font. La sintassi classica è infatti questa:

@font-face {
font-family: GraublauWeb;
src: url(GraublauWeb.otf) format(truetype);
}

Leggendo una cosa come questa si potrebbe pensare che tramite foglio di stile viene importato il font necessario alla corretta visualizzazione della pagina; è bello in teoria. In pratica, il supporto non è garantito, e l'utilità effettiva è poco più che nulla. Meglio quindi affidarsi alle vecchie e care famiglie presenti su tutti i sistemi operativi: verdana, arial, helvetica e compagnia.

Min-height anche su Internet Explorer

Capita spesso di costruire dei layouts che sfruttino in altezza tutta la risoluzione del monitor dell'utente; è il caso per esempio di ZOOPPA.
Utilizzare l'altezza minima per un div, per esempio quello contenente il contenuto centrale della pagina, è la soluzione ottimale. In questo modo il layout non lascia spazi vuoti in altezza, per esempio sotto al footer (ciò si può notare nelle risoluzioni particolarmente ampie, sempre più diffuse).

Il problema è che mentre Firefox-Opera-Safari implementano la proprietà CSS min-height, Internet Explorer, sia nella versione 6 che nella 7, non la considera. E' questo un limite piuttosto grave del browser di Microsoft. Come fare?
Internet Explorer non supporta l'operatore !important, che permette ad una regola CSS di sovrascrivere le regole che seguono. Ma Internet Explorer ignora bellamente :-) questo operatore. Inoltre Explorer "legge" min-height come se fosse height.

Ecco allora il codice da utilizzare:


#miodiv {
min-height: 400px;
height: auto !important;
height: 400px;
}


La prima riga non è considerata da Internet Explorer. La seconda riga serve ai browser standard-compliant considerati più sopra per sovrascrivere la terza riga, che è quella che in effetti Explorer legge. Importante: in ogni caso, lo ripeto, Explorer interpreta min-height come se si trattasse di height.