{CSS} Le direttive @-rules & le Media Query – CINQUEPUNTOZERO.it – Full Stack Developer Logbook

Direttive @-rules

Oltre alle regole e i commenti, i fogli di stile possono contenere un terzo elemento che prende il nome di direttiva.
Si tratta di costrutti riconoscibili in quanto preceduti dal simbolo della @ (at-rules)

Mediante le direttive @rules è possibile eseguire determinate operazioni come, ad esempio, l'import di un altro foglio di stile, la definizione di regole speciali per la stampa dei documenti o di visualizzazione.

Dove inserire le @rules

Le direttive @rules possono essere inserite all'interno di un documento Html tra i tag <style></style> o inglobate all'interno altri fogli di stile

Tag style in html

<head>
<style>
@import url("file.css");
</style>
</head>

All'interno del file css

p{
font-size: 25px;
}

@media screen and (max-width: 480px) {  
p{
font-size: 10px;
}
}

Direttiva @import

Con la direttiva import è possibile inserire o inglobare fogli di stile css

Possibili sintassi:
@IMPORT URL("FILE.CSS");
@IMPORT URL (FILE.CSS);
@IMPORT "FILE.CSS";

File html

<html>
<head>
<style>
@import url(file.css);
</style></head>
<body></body></html>

Note: E' fondamentale che all’interno del tag <style>, @import debba essere la prima regola definita.

File css

@import "style2.css";
h1{
background: red; 
}

Note: Un utilizzo interessante di @import è che può essere utilizzata anche all’interno di un foglio di stile per incorporare un altro CSS esterno

È possibile definire all’interno della direttiva `@import` anche il supporto cui applicare il CSS

@import url(print-style.css) print; /* importiamo un foglio di stile specifico per la stampa del documento */
@import url(screen-style.css) screen; /* importiamo un foglio di stile specifico per lo schermo "viewport" es. mobile */

E' quindi possibile definire diversi stili per i diversi media:

all: tutti i dispositivi
braille : dispositivi braille.
embossed : stampanti braille.
handheld : dispositivi palmari.
print : stampanti.
projection : proiettori.
screen : monitor dei computer.
speech (aural) : sintetizzatori vocali.
tty : dispositivi, ormai in disuso, a carattere fisso ( teletypes ).
tv : televisori e affini (dispositivi con schermo a bassa risoluzione, limitate capacità di scorrimento del testo e possibilità di riproduzione audio).

Direttiva @media

Cosi come è possibile importare un file specifico per un determinato media è altresì possibile inserire all'interno dello stesso foglio css delle direttive specifiche per dispositivo.
Questo è possibile attraverso la direttiva @media il quale raggrupperà al suo interno tutte le regole di visualizzazione per un determinato dispositivo.

Sintassi:
@MEDIA SCREEN {
SELETTORE { PROPRIETA':VALORE; }
SELETTORE { PROPRIETA':VALORE; }
SELETTORE { PROPRIETA':VALORE; }
}

@media screen and (min-width: 400px) and (max-width: 1024px) {
h1 { font-size: 10px; }
h2 { font-size: 8px; }
h3 { font-size: 5px; }
}

Note: includendo delle "condizioni" (min-width & max-width) è possibile determinare una visualizzazione specifica a seconda se la pagine viene visualizzata da un dispositivo mobile o desktop

Query per la costruzione di design responsive

Come precedentemente introdotto attraverso la direttiva @media è possibile indicare delle regole css, da osservare, in base alle specifiche del dispositivo che visualizzerà la nostra pagina web.
Questo da la possibilità di realizzare design responsive che cambiano e/o si adattano in base ai vari dispositivi.

Sitassi:
@MEDIA MEDIA-TYPE OP.LOGICO ( MEDIA-FEATURES ) {
...............
}

Media Type

Abbiamo già elencato in precedenza tutti i dispositivi di seguito elenchiamo quelli di uso più comune

all	Tutti
print	Stampa
screen	Schermo
speech	Sintetizzatori vocali

Operatori Logici

Gli operatori logici sono utilizzati per strutturare una Media Queries che rispetta più condizioni

and	"che includa anche questa condizione" Combina più condizioni che devono essere rispettate nello stesso momento
not	"escludi" Per creare una regola di esclusione
only	"solo per" Applica le regole solo se esiste una corrispondenza diretta
,	"virgola" È utilizzata per combinare più Media Queries in un’unica regola

Media Features

Le media-features sono dichiarazioni che consentono di identificare particolari caratteristiche del dispositivo utilizzato

`width`	La larghezza esatta del viewport
`height`	L’altezza esatta del viewport
`min-width`	La larghezza minima del viewport
`min-height`	L’altezza minima del viewport
`max-width`	La larghezza massima del viewport
`max-height`	L’altezza massima del viewport
`orientation`	L’orientamento del dispositivo (`landscape` o `portrait` per dispositivi mobili)

Dimensioni Viewport in base hai dispositivi

Esempi Medi Query CSS Codice

@media all and (min-width: 1280px) {   /* tutti i dispositivi con dimensione minima viewport 1280px */
}
@media screen and (min-width: 1280px) and (max-width: 1480px) {  /* dispositivi con schermo minimo 1280px E massimo 1480px DESKTOP */
}
@media screen and (max-width: 480px) {  /* dispositivi con schermo massimo 480px di larghezza MOBILE */
}
@media only screen and (max-width: 600px) { /* SOLO dispositivi con SCHERMO massimo 600PX */
}

DOCUMENTI

Direttiva @font-face

Grazie alla direttiva @font-face possiamo usare font importati dall'esterno.

Servizi di Font gratuiti:
https://fonts.google.com/
https://www.fontsquirrel.com/

Tramite @font-face possiamo utilizzare font in questi formati: TrueType (TTF), OpenType (OTF), WOFF, SVG, Embedded OpenType (EOT)

@font-face {
  font-family: 'ArmWrestler';
  src: url('armwrestler-webfont.eot');
}

Nella regola abbiamo indicato con font-family il nome del font, che può essere differente ma è consigliato attenersi al nome ufficiale, ed a seguire con la proprietà scr, l'url di tale font.

Compatibilità Cross-browser

Il supporto dei vari formati sui principali browser non è omogeneo.

Font format	Edge	Chrome	Firefox	Safari	Opera
TTF/OTF	9.0+	4.0+	3.5+	3.1+	10.0+
WOFF	9.0+	5.0+	3.6+	5.1+	11.1+
WOFF2	14.0+	36.0+	39.0+	10.0+	26.0+
SVG	Non supportato	Non supportato	Non supportato	3.2+	Non supportato
EOT	6.0+	Non supportato	Non supportato	Non supportato	Non supportato

Dobbiamo quindi preoccuparci, per una compatibilità cross-browser, di indicare formati alternativi che possano essere correttamente interpretati dai vari broswer.

@font-face {
  font-family: ArmWrestler;
  src: url(armwrestler-webfont.ttf) format('truetype'),
       url(armwrestler-webfont.woff) format('woff'),
       url(armwrestler-webfont.eot) format('embedded-opentype');
}

Indicando come sorgente (src) diversi url per i diversi formati ampliamo la compatibilità del font.

Un altra pratica utile per evitare cattive formattazioni del testo è quello di indicare font alternativi

body {
font: 14px ArmWrestler,Verdana, Arial, sans-serif;
}

Nota: il nome assegnato "ArmWrestler" nella direttiva @font-face nella proprietà font-family è lo stesso che utilizzeremo per richiamarlo nelle regole css.

Icon font

Risorse dal web
https://www.ionos.it/digitalguide/siti-web/web-design/come-inserire-icon-font-sul-vostro-sito-web/
https://code.tutsplus.com/tutorials/quick-tip-ever-thought-about-using-font-face-for-icons--net-11233

Le icon-font, sempre più utilizzate in ambito web, non sono altro che semplici file font con al suo interno inserite icone anziché caratteri letterale.
Si parte dal concetto che i font di caratteri letterali, altro non sono, che elementi vettoriali impacchettati in un unico archivio.
Così facendo saremo in grado di utilizzare icone (ICON PACK), al posto di lettere e simboli, in qualsiasi punto del sito con la possibilità di cambiarne dimensione, colore, aggiungere sfondi, ombre, rotazioni e praticamente qualsiasi cosa che il codice CSS consente di effettuare su elementi di testo.

Utilizzo delle Icon font con @font-face

Importazione

@font-face {
  famiglia di caratteri: 'IconPack';
  src: url('iconpack.eot');
}

Attribuzione ad una classe

.icons {
  font-family: 'IconPack';
}

Utilizzo

<span class="icons">a</span>

Nel nostro codice html, attribuendo a <span> la classe .icons, la lettera "a" verrà convertita automaticamente ad icona e coinciderà quindi con l'icona ✭.

Tag <i>

Una soluzione universale per l'utilizzo di icon-font è quella di utilizza il tag <i>. Creando una regola nel nostro foglio di stile css per tutti i tag <i> e attribuendone la proprietà font-family "IconPack" saremo in grado di inserire icone in ogni punto del nostro codice html.

CODICE CSS

i{
  font-family: 'IconPack';
}

CODICE HTML

<p><i>a</i>Qui davanti sarà inserita icona di una stella mediante il tag i</p>

Font Awesome

Uno dei servizi più utilizzati per le icone sul web è quello fornito da "Font Awesome"

Guida all'installazione di IONOS

Questo servizio funziona pressoché come un "Framework" richiede il caricamento di un pacchetto sul proprio host e del collegamento al proprio file css di un file css aggiuntivo. Il collegamento è possibile mediante il tag <link> in html o con la direttiva @import nel proprio file css.

Anche questo servizio funziona mediante l'utilizzo del tag <i> e di classi da associare, icona per icona, reperibili sul loro sito web.

In alternativa è possibile utilizzare i codici Unicode in questo modo:

p.classe:before{
content: /f641;
}