Requisiti
Potrebbe essere utile la lettura di:
Introduzione
Le at-rules CSS sono istruzioni/direttive date in pasto al parser CSS per vari scopi.
@charset
Esempio:
@charset "ISO-8859-15";
Utilizzato per indicare la codifica dei caratteri di un css esterno. Deve essere la prima riga di un file css.
Uno user agent identifica la codifica dei caratteri di un CSS esterno in 4 modi e se falliscono tutti utilizza una codifica predefinita (UTF-8):
- l'attributo charset dell'header HTTP inviato come risposta da un web server
- l'at-rule @charset
- l'attributo charset nel tag link del documento HTML
- la codifica del documento che riferisce il css
@import { URI | string } [ media type, ... ] ;
Esempi:
@import url("../css/main.css");
@import "local.css";
@import url(/css/screen.css) screen, projection;
@import "local.css";
@import url(/css/screen.css) screen, projection;
E' usato per importare regole CSS all'interno di un altro CSS.
Deve essere messo prima di tutte le altre regole ad eccezione del @charset se presente.
Gli URI relativi sono importati a partire dalla posizione del CSS che contiene la direttiva @import
E' possibile specificare i media type ai quali applicare gli stili importati.
@media
Sintassi:
@media media type,… {
regole
}
Esempio:
@media screen {
html {
background: #fff;
color: #300;
}
body {
margin: 0px;
}
}
@media print {
html {
background: #fff;
color: #000;
}
body {
padding: 5px;
border: 1px solid #666;
}
}
Nell'esempio si creano 2 stili differenti per 2 dispositivi differenti: screen e print.
@page
@page {
margin: 2.5cm; /* default per tutte le pagine */
}
@page :left {
margin-left: 5cm; /* solo le pagine a sinistra */
}
@page :right {
margin-right: 5cm; /* solo le pagine a destra */
}
@page :first {
margin-top: 8cm; /* margine extra solo per la prima pagina */
}
Permette di specificare i margini per la stampa delle pagine, media type printer.
Nell'esempio usando i selettori :left, :right, :first si indica che i margini sono riferiti rispettivamente alle pagine sinistre, destre e prima pagina.
@font-family
Esempio:
@font-face {
font-family: 'Miofont';
src: url(./font/miofont.eot);
src: local('miofont'), url('./font/miofont.ttf') format('truetype');
}
h1 {
font-family: MioFont, Verdana;
font-size: 12px;
}
Di norma, nelle pagine web, vengono utilizzati font web-safe (es. Times New Roman, Verdana), ovvero quei font che si è sicuri siano presenti su ogni sistema. Questa regola ci permette di caricare all'interno delle pagine un font personalizzato la cui definizione è presente su un file (TTF, EOT, etc.) che il browser andrà a scaricare.
Non tutti i browser però sono in grado di leggere tutti i formati dei file di font. Ad esempio mentre per FF si può indicare un TTF, per IE occorre indicare un EOT.
Se partiamo dal TTF possiamo comunque convertire in EOT tramite questo software online:
http://www.kirsle.net/wizards/ttf2eot.cgi
Nell'esempio riportato IE scaricherà l'EOT ignorando il TTF, Firefox scaricherà il TTF ignorando l'EOT.
Il font sarà renderizzato all'interno della pagina nel tag H1. Nel caso si verificasse un qualsiasi problema sarà utilizzato il font Verdana.
Il path indicato per il file del font è relativo al file contenente il CSS.
Attraverso la regola è poi possibile specificare fino a 24 proprietà differenti (font descriptors) che permettono di definire il font o influenzare il browser nella selezione del font.
@namespace
Permette di definire stili solo per un namespace .
@namespace foo "http://example.com/ns/foo";
foo|bar {
declarations
}
<abc xmlns:xyz="http://example.com/ns/foo">
<xyz:bar>...</xyz:bar>
</abc>
Riferimenti
0 commenti:
Posta un commento