Layout con float

Layout con float

In questa lezione creiamo un layout utilizzando i float in modo da comprenderne meglio il funzionamento.

Fino a qualche anno fa i layout con i float erano ampiamente utilizzati e tutt’ora se ne continua a fare uso in molte strutture.

In particolar modo impareremo ad allineare gli elementi utilizzando float left e right e ad utilizzare correttamente l’elemento clearfix, necessario per ripulire da eventuali elementi flottanti a destra e a sinistra.

Layout di esempio con float

Di seguito il layout di esempio che andremo a sviluppare.

Quindi partiamo dalla struttura html del layout da realizzare utilizzando i float.

Abbiamo un elemento header, dove andremo ad inserire due div.

Al primo div, dove inseriamo l’immagine del logo, assegniamo un float left in modo da posizionarlo sulla sinistra. Mentre al secondo div assegniamo un float right per posizionarlo sul lato destro e all’interno inseriamo un elenco con il nostro menù di navigazione.

Dopo nel main creiamo due sezioni.

Nella prima sezione che caratterizza la colonna sinistra inseriamo del semplice testo e assegniamo un float left per allinearla a sinistra.

Anche alla seconda sezione assegniamo un float left per metterla a fianco della prima. All’interno inseriamo dei contenitori per l’immagine ed il testo a cui assegniamo sempre un float left per posizionarle affiancate.

Nel footer infine inseriamo semplicemente le informazioni per il copyright.

Ecco di seguito il codice html di esempio per creare il layout utilizzando i float:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Esempio di layout con i float</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header>
      <div class="logo float-left">
         <img src="img/logo" alt="logo">
      </div>

      <div class="menu float-right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Coding nelle scuole</a></li>
          <li><a href="">Giochi di coding</a></li>
        </ul>
      </div>
    </header>

    <main>
      <div class="col-left float-left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatum magni minus ullam odio, excepturi accusantium. Autem eum recusandae vitae quisquam dolores, cupiditate, eaque molestiae dicta placeat cumque quaerat natus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatum magni minus ullam odio, excepturi accusantium. Autem eum recusandae vitae quisquam dolores, cupiditate, eaque molestiae dicta placeat cumque quaerat natus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatum magni minus ullam odio, excepturi accusantium. Autem eum recusandae vitae quisquam dolores, cupiditate, eaque molestiae dicta placeat cumque quaerat natus!</p>
      </div>

      <section class="main-section float-left"">
        <!-- prima scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="img/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /prima scheda -->


        <!-- seconda scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="img/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /seconda scheda -->

        <!-- terza scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="https://www.codingcreativo.it/wp-content/uploads/2019/06/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /terza scheda -->

        <!-- quarta scheda -->
        <div class="scheda">
          <div class="immagine float-left">
            <img src="img/primoprogramma-scratch.jpg" alt="scratch">
          </div>
          <div class="descrizione float-left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odio sint reprehenderit reiciendis aperiam aut debitis quam in distinctio officia, ratione dolores, maiores dignissimos, magnam soluta nihil, enim quo numquam.
          </div>
        </div>
        <!-- /quarta scheda -->

      </section>
    </main>

    <footer>
      powered by Coding Creativo &hearts;
    </footer>

</body>
</html>

Nel css creiamo al solito le regole generali per togliere il margin ed il padding da qualsiasi elemento.

Dopo inseriamo le regole generali per le varie sezioni header, main e footer.

Inseriamo le classi per il float left e il float right.

Poi inseriamo le classi che servono ad effettuare il clearfix utilizzando lo pseudo-elemento ::after. Le utilizziamo su tutti gli elementi che contengono elementi flottanti.

Ecco di seguito il codice CSS per la creazione del nostro layout utilizzando la proprietà float.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body  {
  font-family: 'Verdana', sans-serif;
}

header {
  height: 90px;
  background-color: lightblue;
  line-height: 90px;
}

.logo img{
  vertical-align: middle;
  padding-left: 20px;
}

.float-left {
  float:left;
}

.float-right {
  float:right;
}

.menu ul {
  list-style: none;
  padding-right: 20px;
}

.menu ul li {
  display: inline-block;
  line-height: 50px;
  height: 50px;
}
.menu ul li:hover {
  background-color: white;
}

.menu ul li a{
  text-decoration: none;
  padding: 15px;
  color: rgb(8, 119, 129);
}

main {
  width: 960px;
  margin: auto;
  padding-top: 20px;
}

main::after {
  content: '';
  display: block;
  clear: both;
}

.col-left {
  width: 28%;
}

.col-left p {
  padding-top: 10px;
}

.main-section {
  width: 70%;
}

.scheda {
  padding: 10px;
}

.scheda::after{
  content: '';
  display: block;
  clear: both;
}

.immagine img{
  width: 300px;
}

.immagine {
  width: 50%;
}

.descrizione {
  width: 50%;
}

footer {
  height: 90px;
  background-color: lightgrey;
  line-height: 90px;
  text-align: center;
}

In questa lezione abbiamo sviluppato un semplice layout utilizzando la proprietà float e clear.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

before e after CSS

before e after CSS

In questa lezione studieremo gli pseudo-elementi before e after dei CSS, utilizzati per aggiungere elementi che non sono presenti nel codice html.

In dettaglio before inserisce un contenuto prima dell’elemento individuato dal selettore selezionato, mentre after inserisce un contenuto dopo l’elemento.

Nel selettore individuato da ::before o ::after si specifica la proprietà content che serve ad inserire un contenuto prima o dopo l’elemento selezionato.

Primo esempio con before e after CSS

Creiamo un semplice esempio inserendo un cuore prima del testo e una stella dopo il testo, come nell’esempio sotto:

before e after nei CSS

Nella pagina html inseriamo in un punto qualunque un div con del testo all’interno, come da codice sotto:

<div class="testo">Coding Creativo</div>

Poi nel css andiamo ad inserire le regole per il before e l’after. Ad entrambi assegniamo la proprietà content e per il cuore inseriamo il codice \2665, mentre per la stella inseriamo il codice 2605.

Impostiamo poi il colore rosso per il cuore e giallo per la stella. Impostiamo anche una dimensione del font e un padding opportuno.

Ecco di seguito il codice che utilizza sia before, sia after nei CSS:

.testo::before {
  content: '\2665';
  color: red;
  font-size: 25px;
  padding-right: 5px;
}

.testo::after {
  content: '\2605';
  color: yellow;
  font-size: 25px;
  padding-left: 5px;
}

Chiaramente before e after si possono utilizzare anche singolarmente.

Secondo esempio before e after CSS

In questo secondo esempio inseriamo una freccia prima di un paragrafo.

before css

Quindi questa volta ci sarà bisogno di utilizzare solo lo pseudo-elemento before, pertanto tralasciamo l’after.

Nella pagina html inseriamo un paragrafo, come ad esempio questo:

<p class="paragrafo"> Coding Creativo - il blog per imparare a programmare</p>

Nel css inseriamo le regole di formattazione per il paragrafo e creiamo un contenuto dinamicamente prima della scritta.

Creiamo un elemento inline-block con delle dimensioni in larghezza ed altezza e centriamo il contenuto, nel nostro caso una freccia, utilizzando line-height e text-align center. Diamo poi uno sfondo, un colore del testo, un grassetto ed un bordo arrotondato.

Ecco dunque il codice css necessario per realizzare quanto detto:


.paragrafo {
  font-size: 26px;
}

.paragrafo::before {
  content: '\21E8';
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: lightgrey;
  color: white;
  font-weight: bold;
}

In questa lezione abbiamo affrontato gli pseudo-elementi before e after dei CSS, per creare elementi dinamicamente prima o dopo altri elementi. Nelle prossime lezioni vedremo ancora altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Float CSS

Float CSS

In questa lezione studieremo la proprietà float dei CSS.

Questa proprietà consente di rimuovere un elemento dal suo normale flusso e quindi di poterlo spostare a destra oppure a sinistra.

Se ad un elemento assegniamo la proprietà float, automaticamente diventa un block a cui poter assegnare larghezza, bordi, margini, ecc.

Proprietà float CSS

La proprietà float consente di impostare i seguenti valori: left, right, none, initial, inherit. Dove none è il valore di default.

Primo esempio con float left

Facciamo degli esempi per comprenderne il funzionamento. Supponiamo dunque di avere un elemento contenitore con degli elementi (div) uno accanto all’altro, come da figura sotto:

float left

Uno dei modi per ottenere questo risultato è utilizzare quindi la proprietà float left dei CSS ed assegnarla a ciascun contenitore.

Ecco dunque la pagina html di esempio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box yellow">3</div>
  </div>

</body>
</html>

Ed il codice CSS necessario per realizzare questo esempio:

.container {
  background-color: lightgrey;
  width: 200px;
  height: 100px;
}

.box {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float:left;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

Abbiamo scelto, per il momento, di dare un’altezza ed una larghezza fissa al contenitore esterno. Se non facciamo questa operazione il contenitore grigio non sarebbe visibile perché non prendebbe in automatico l’altezza dei contenitori inseriti al suo interno. Nelle prossime lezioni vedremo come risolvere questo problema.

Secondo esempio con float right CSS

In questo secondo esempio ci prefissiamo di ottenere l’effetto come da figura, con gli elementi, a partire dal primo, allineati al margine destro.

float right

Il codice html non cambia rispetto all’esempio precedente, mentre il codice CSS cambia solo per la classe float-right assegnata ai 3 contenitori.

.container {
  background-color: lightgrey;
  width: 200px;
  height: 100px;
}

.box {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float:right;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

Terzo esempio con float right CSS

In questo terzo esempio allineiamo il primo contenitore ed il secondo sulla destra, mentre il terzo lo posizioniamo sulla sinistra.

left e right float css

Quindi costruiamo la nostra pagina inserendo un contenitore principale e all’interno inseriamo 3 box come nell’esempio precedente.

Poi assegniamo al numero 3 la classe float left mentre agli altri 2 la classe float right.

Ecco dunque il codice di esempio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="box red float-right">1  float-right</div>
    <div class="box blue float-right">2 float-right</div>
    <div class="box yellow float-left">3 float-left</div>
  </div>

</body>
</html>

Nel css inseriamo una classe apposita che consente agli elementi di flottare a sinistra e un’altra che consente agli elementi di flottare a destra.

.container {
  background-color: lightgrey;
  width: 200px;
  height: 100px;
}

.float-left {
  float:left;
}

.float-right {
  float:right;
}

.box {
  width: 50px;
  height: 50px;
  text-align: center;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

In questa lezione abbiamo fatto dei semplici esempi con i float CSS, nella prossima lezione vedremo l’utilizzo di clear.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Position sticky

Position sticky

Il position sticky nei CSS consente di posizionare l’elemento secondo il normale flusso del documento (a differenza di fixed), quando poi scorriamo la pagina, la sua posizione rimane fissa rispetto allo scorrimento.

Ma spieghiamo in dettaglio il funzionamento attraverso un esempio pratico.

Position sticky esempio

Per capire il funzionamento riprendiamo l’esempio di fixed nel quale abbiamo inserito un header con un menù e un contenuto nel main.

Di seguito il codice html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Position relative esempio</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <header>

      <!-- barra navigazione che rimane fissa con sticky -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
     <!-- / barra navigazione -->

    </header>
      

    <main>
    <!-- testo principale inserito per visualizzare lo scroll-->

      <div class="testo">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia, asperiores sed alias ducimus numquam labore, rem odio cupiditate saepe doloribus. Tempora, maxime doloribus neque natus nesciunt qui quam quae!</p>
        <!-- in questo punto aggiungere altro testo -->
        
      </div>
      <!-- /testo -->

    </main>

  </body>
</html>

Dopo nel CSS togliamo a tutti gli elementi il margin ed il padding che si viene a creare sui browser di default.

All’elemento header diamo il valore position sticky con distanza dall’alto di 0 pixel e con una larghezza ed un’altezza. Centriamo quindi il menu, dando una line-heigth della stessa altezza dell’header e aggiungiamo uno sfondo giallo.

Diamo poi una formattazione per gli elenchi e per il testo.

Ecco di seguito una possibile implementazione.

* {
  margin: 0;
  padding: 0;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

main {
  width: 960px;
  margin: auto;
}
.testo {
  font-size: 30px;
}

Provando l’esempio noteremo che l’header segue il normale flusso della pagina, infatti a differenza dell’esempio con fixed non abbiamo dovuto dare un margin top al main per distanziare il testo.

Scorrendo la barra verticale noteremo che il testo scorre sotto la barra di navigazione contenuta nell’header.

Attenzione! Casi in cui position sticky non funziona

A prescindere dal fatto che potrebbe non funzionare su tutti i browser. Molto spesso si cade in un caso in cui position sticky non funzioni. Perché succede?

Uno degli errori più comuni è quello di pensare che, se non ci sono elementi fratelli all’elemento sticky, il testo sotto possa comunque scrollare.

In poche parole se, nell’esempio precedente, avessimo dato la proprietà position sticky alla classe .barra, lo scroll non avrebbe funzionato. Perché .barra non ha elementi fratelli, dunque non ha elementi su cui poter scrollare.

Cambiamo ad esempio il css sopra con questo:

* {
  margin: 0;
  padding: 0;
}

.barra {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

main {
  width: 960px;
  margin: auto;
}
.testo {
  font-size: 30px;
}

Se provate l’esempio noterete che quando scrolliamo la pagina, la barra di navigazione non rimane fissa in alto come vorremmo.

In questo caso .barra è l’unico elemento contenuto all’interno dell’header. Se lasciamo quest’ultimo CSS e aggiungiamo del testo nell’html, come mostrato nell’area del commento del codice sotto, allora la barra si bloccherà, permettendo di scrollare tutto il testo che ho inserito in quel punto. Ma non scrollerà per un eventuale testo inserito nel main.


    <header>
      <!-- barra navigazione -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
      <!-- se aggiungiamo testo qui allora scrolla -->
    </header>

Un’altra soluzione al problema di sticky potrebbe essere anche quella di impostare la proprietà display unset o display inline per l’elemento header.

header{
  display: unset;
}

Infine l’ultima soluzione è rappresentata dal fatto che possiamo utilizzare la proprietà z-index con un valore alto, per far sì che la barra rimanga in alto anche con l’utilizzo di position sticky.

In questa lezione abbiamo visto alcuni esempi sul position sticky, nelle prossime lezione svilupperemo altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Opacità con rgba

Opacità con rgba

In questo articolo vedremo come creare un’opacità con rgba.

Abbiamo già visto, nella lezione precedente, come utilizzare opacity. Abbiamo anche notato che l’effetto opacità, oltre allo sfondo, viene applicato anche al testo contenuto in un elemento che ha un’opacity.

Quindi vediamo come evitare questo effetto, qualora non si voglia applicare, con l’utilizzo di rgba.

Opacità con rgba – primo esempio

Nella pagina html inseriamo solo un elemento div con del testo, a cui assegniamo una classe, ad esempio, di nome opaco.

Quindi nella pagina html scriviamo semplicemente questo codice:

<div class="opaco">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
</div>

Dopo, nel css, creiamo un effetto opacità con rgba.

Innanzitutto impostiamo alla classe opaco un colore di sfondo rgba. In questo modo utilizziamo il canale alpha per la trasparenza. Dunque lo impostiamo inizialmente a 0.5.

Poi, quando passiamo con il mouse sopra il box, portiamo il canale alpha ad 1, in modo da togliere completamente la trasparenza. Assegniamo dunque quest’ultimo valore alla classe hover.

Di seguito il codice CSS per l’effetto opacità con rgba:

.opaco {
     background-color: rgba(0, 140, 213, 0.5);
     width: 200px;
     height: 200px;
}
.opaco:hover {
    background-color: rgba(0, 140, 213, 1);
}

Ecco dunque come apparirà il nostro esempio:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!

Come possiamo notare l’effetto opacità viene applicato solo allo sfondo e non al testo.

Opacità con rgba – secondo esempio

In questo secondo esempio vedremo i diversi effetti sui livelli del canale alpha.

Quindi nella pagina html inseriamo 3 elementi con del testo riempitivo:

    <div class="box opaco-zero-uno">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>
    <div class="box opaco-zero-cinque ">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>
    <div class="box opaco-uno">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>

Nel css inseriamo poi le regole per il canale alpha:

.box {
  width: 200px;
  height: 200px;
}

.opaco-zero-uno {
  background-color: rgba(8, 67, 255, 0.1)
}

.opaco-zero-cinque {
  background-color: rgba(8, 67, 255, 0.5)
}

.opaco-uno {
  background-color: rgba(8, 67, 255, 1)
}

Sotto possiamo visionare l’esempio completo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!

In questa lezione abbiamo visto come applicare un effetto opacità con rgba, utilizzando cioè il canale alpha, nelle prossime lezioni proporrò altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Media queries

Media queries

Le media queries CSS sono delle regole di stile che permettono di adattare i siti web ai diversi dispositivi, dai desktop ai mobile.

Quindi ad esempio si possono impostare delle regole di stile che sono valide per i computer desktop ed altre invece per i tablet oppure per gli smartphone, ecc.

Le media queries hanno dunque la capacità di guardare le caratteristiche di un dispositivo per adattarne il contenuto.

Cosa controllano le media queries?

Controllano due fattori fondamentali:

– la risoluzione del dispositivo, impostando dei valori min-width, max-width, min-height oppure max-height;

– l’orientamento del dispositivo (per dispositivi tablet o smartphone);

Sintassi media queries

La sintassi delle media query è la seguente:

@media not|only mediatype and (expressions) {
  ...
}

Dove mediatype è il tipo di supporto e può assumere uno dei seguenti valori: all, print, speech e screen.

All è utilizzato per indicare tutti i dispositivi, print solo per gli stampati e documenti visualizzati su uno schermo in modalità anteprima di stampa, speech per gli screenreaders cioè i browser vocali, mentre screen indica i dispositivi desktop, ma anche tablet, smartphone, ecc.

Indicare il tipo di supporto è comunque facoltativo tranne nel caso in cui si utilizzi not oppure only.

Il risultato della media queries è un valore booleano, dunque true oppure false.

Se il valore indicato in espressione ed il mediatype (se indicato) sono entrambi veri allora vengono applicate le nuove regole specificate, seguendo le regole a cascata.

Più query si possono combinare utilizzando gli operatori logici. In tal caso, una media query è vera se le espressioni sono tutte vere.

Esempio media queries

Facciamo un esempio di utilizzo, impostando uno sfondo e una dimensione del font per una risoluzione minima di 780pixel.

@media screen and (min-width: 780px) {
  body {
    background-color: lightblue;
    font-size: 20px;
  }
}

Quindi se la viewport è più larga o uguale a 780 pixel lo sfondo della pagina cambierà in lightblue e la dimensione del font sarà di 20pixel.

In questa lezione abbiamo solo introdotto le media queries, nella prossima lezione approfondiremo con tanti altri esempi pratici.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive