MICHELEPISANI.IT

Guida di base ai CSS ver. 1 e 2

Gestire in maniera alternativa le funzionalità dei CSS

Le @-rules, dette anche at-rules

Agosto 10
07:272014

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.

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Umberto

Grazie Michele, in realtà faccio un po' fatica a districarmi con l'assistenza di FB... Ora provo e …

Michele Pisani

Ciao Umberto,
hai provato a contattare il supporto tramite la community?

Umberto

Salve, dopo un paio di mesi di tentativi e di modifiche, sono riuscito a far partire la procedura …

Rosa

Salve. Sto unendo due Pagine. Tutto è stato da me 'omogeneizzato', quindi coi nomi simili ci siamo …