Le @-rules, dette anche at-rules

Agromento interessante sono le @-rules (at-rules) che rappresentano un altro modo per richiamare funzionalità in ambito CSS. Queste regole si distinguono perchè sono tutte precedute dal simbolo "@" e perchè possono risiedere all'interno di un altro foglio di stile; nell'articolo iniziale di riepilogo di questa guida è gia stata menzionata la regola @media utilizzata per modificare un elemento nel DOM in base alla risoluzione dello schermo (principio del responsive design).

Vediamo quindi a confronto le vie canoniche con quelle alternative che prevedono l'uso delle at-rules, nel dettaglio facciamo riferimento a @import, @media, @font-face, @page e @charset.

L'esempio seguente è riferito alla regola @import spesso utilizzata se vi è la necessità di suddividere un foglio di stile in più file distinti. Tale regola, se applicata all'interno di un altro foglio di stile, si deve trovare al di sopra di qualsiasi altra regola.

<!-- Foglio di stile richiamato con l'attributo link nel tag head -->
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

<!-- Foglio di stile richiamato con @import -->
<style type="text/css">
  @import url(/css/print.css);
</style>

@media trova larga utilità nell'applicazione di un fogli di stile basato sul supporto che dovrà eseguire il contesto. In altri termini per la visualizzazione web si utilizzerà un foglio di stile mentre per la stampa della stessa pagina se ne potrebbe utilizzare un altro ottimizzato a dovere dove è possibile ad esempio andare ad unificare la dimensione del carattere e nascondere eventuali elementi non utili allo scopo:

@media print {
  body {
    font-size: 10pt;
    font-family: serif;
  }
  .banner {
    display: none;
  }
}

Abbiamo già accennato nell'articolo iniziale di riepilogo di questa guida che @media può assumere altri valori come ad esempio il screen, tv, projection, embossed, braille, all, ecc... e che essi possono essere combinati se separati da una virgola.

Da non sottovalutare la potenza di @media nell'ambito del responsive design per il quale riporto un semplice esempio a scopo illustrativo (l'argomento è trattato ampiamente nella guida relativa al CSS3) che fa sì che diminuendo la dimensione del browser al suo minimo (al di sotto di 320px) il colore dell'eventuale testo contenuto nei tag di tipo span cambierà da quello assegnato di default a quello indicato nella regola:

@media screen and (max-width:319px) {
  span {color:#00AA00;}
}

A livello di stampa si può utilizzare anche la regola @page che permette di definire con semplicità gli stili per le stampe a più pagine. Faccio presente che definendo gli stili per questo scopo è buona norma utilizzare misure non relative, cioè che non si riferiscono alla dimensione dello schermo bensì a quella del formato su cui dovrà essere effettuata la stampa, inoltre gli elementi di stampa non hanno ne bordi ne padding ma solo margini.
E' possibile utilizzare una proprietà chiamata page-break per forzare le interruzioni di pagina in punti strategici per personalizzarle rispetto a quelle assegnate di default dal browser.
Le pseudo-classi, già affrontate in un articolo della guida corrente, possono essere utili per assegnare particolari stili agli elementi principali.
Un piccolo esempio sintattico per l'utilizzo della regola in questione potrebbe essere il seguente:

@page {margin: 1in;size: portrait;marks: none;}
@page :first h1 {font-size: 22pt;}
@page :left {margin: 2in 3in;}

@font-face può essere utilizzato per una varietà di scopi come quello di descrivere in modo più dettagliato il font utilizzato in un documento ma ad oggi principalmente se ne sente la necessità quando si vuole specificare un determinato font che può non essere disponibile in locale sulla macchina dell'utente.

@font-face {
  font-family: "nome del font";
  src: local("nome_del_font"), local(nome_del_font), url(nome_del_font.woff);
  font-weight: 600;
  font-style: normal;
}

Con l'introduziono dei CSS3 è possible caricare anche font esterni al sito ed un uso corrente è riferirsi a quelli messi a disposizione da Google.

Esiste anche l'at-rules @charset, la quale dovrebbe essere utilizzata solo nel caso in cui ci sia una differente codifica tra lo stesso file CSS ed il documento HTML che lo contiene. Consideriamo comunque che l'intestazione HTTP ha una priorità più elevata rispetto alla dichiarazione nel CSS e pertanto il caso più opportuno di un suo utilizzo si limita ad un'eventuale situazione in cui la codifica nell'header HTTP non dovesse essere presente.
La sintassi per questa regola è la seguente.:

@charset "utf-8";

In questo però caso non sarà sufficiente limitarsi ad inserire la dichiarazione appena vista ma anche il foglio di stile in questione dovrà essere salvato con la stessa codifica.