Introduzione a Css3 e Bootstrap

In questa pagina sono raggruppati tutti gli articoli riguardo a Css3 e Bootstrap.

Non si tratta di un manuale o di documentazione ma di un elenco di esempi di codice o mini-guide, si rimanda alla documentazione ufficiale di Css3 e la documentazione ufficiale di Bootstrap per maggiori dettagli e approfondimenti.

Per la lettura di questi articoli è necessario avere una base completa di HTML mentre, tranne in qualche raro caso, non è neccessirio avere basi di programmazione Javascript anche se è indispensabile e inevitabile per la gestione dei casi più complessi.

Lo sviluppo di stili e siti è possibile con qualsiasi editor di testo anche se è consigliato l'uso di ambiente di sviluppo (IDE) come Visual Studio Code di Microsoft, ATOM ed Eclipse.

Cosa è il Responsive web design
CSS ResponsiveCon responsive web design (a volte abbreviato con la sigla RWD) si descrive la tecnologia di sviluppo web per la creazione di siti web in grado di auto-adattarsi al dispositivo con il quale vengono caricati i contenuti del sito, lo scopo finale è quello di avere un unico sito web che si "disegna" a seconda del dispositivo dell'utente senza dover aver versioni diverse a seconda del dispositivo. Basta pensare al grande problema dei dispositivo mobili e alle varie tecnologie esistenti: senza responsive bisogna creare diverse versioni dello stesso codice: iPhone, ipad, android, tablet andoid, MsWindows phone e MSWindows tablet, senza contare altri dispositivi come le smart-telelevision.
 
Responsive vuole imporre uno standard di sviluppo bastato interamente su HTML5 e CSS3 con poco aiuto di Javascript e della libreria Jquery, il vantaggio di questo standard è che, ad oggi, tutti i browser sono compatibili con questi standard e ormai è diventato uno standard universamentemente usato.
 
La filosofia base di responsive è quella di usare stili diversi a seconda del dispositivo, quindi il browser caricherà CSS diversi a seconda delle caratteristiche che esso ottiene dalla finestra del programma in esecuzione (o dalla app), questa filosofia obbliga il programmatore ad ideare una griglia formata a blocchi che si spostano e si posizionano a seconda dello spazio a disposizione nel monitor (o schermo) dell'utente: ovviamente un pc ha uno schermo più largo dove ci stanno più blocchi rispetto ad un cellulare dove a fatica viene visualizzato un blocco solo, in tutta questo ovviamente testi, immagini e qualsiasi altro componente devono essere necessariamente flessibili e con larghezza fissa. Tipicamente queste strutture sono posizionati a delle determinate grandezze 320 pixel, 600 pixel, 1024 pixel oppure oltre i 1024 pixel per essere associate a rispettivamente cellulari, tablet, schermo piccolo (come i notebook) e  schermo grande.
 
Attraverso i CSS si possono studiare vari modi per modificare il posizionamento degli elementi e ordinarli a seconda delle proprie esigenze, questo perché i siti Responsive richiedono che gli elementi siano dimensionati nei fogli di stile tramite percentuali (oppure em) e non con unità assolute come pixel o punti. La complessità della tecnologia Responsive è il trovare il giusto compromesso tra contenuti e esigenze dei dispositivi mobile, perché con Responsive bisogna sempre fare un compromesso tra le possibili grandi dimensioni di un contenuto (come un testo molto lungo, immagini di grandi dimensioni o video) e i dispositivi mobili dove lo spazio a disposizione è limitato e non sempre è possibile visualizzare tutto una sola schermata.
 
Per realizzare un sito con Responsive ed avere un buon risultato bisogna prima di tutto aver presente quale risultato si vuole ottenere tenendo presente dei limiti e delle caratteristiche delle tecnologie che andremo ad usare, usando HTML e CSS si possono superare i problemi grazie a Responsive e ai breackpoint. Un breackpoint è un punto della pagina, dalla quale parte una linea orrizontale ideale lungo la quale verranno “posizionati” gli oggetti con i CSS e le queries di responsive.
 
Un semplice esempio di codice con un breackpoint è:
 
<!DOCTYPE html><html>
  <head>
    <title>www.alnao.it</title>
    <style type="text/css">
    .breackpoint { background: blue;}
    @media screen and (min-width: 480px) {
      .breackpoint { background: green; }
    }
    @media screen and (min-width: 768px) {
      .breackpoint { background: yellow; }
    }
    @media screen and (min-width: 1024px) {
      .breackpoint { background: red; }
    }
    </style>
  </head>
  <body>
    <span>Contenuto precedente</span>
    <div class="breackpoint">Responsive web design e i suoi breackpoint</div>
    <span>Contenuto successivo</span>
  </body>
</html>
 
In questo semplice esempio la classe breackpoint definisce un punto "di rottura", grazie alle media queries introdotte nel prossimo articolo è possibile definire un comportamento grafico diverso a seconda della larghezza del dispositivo, ipotizzando contenuti precedenti e successivi a questo elemento, questo diventa un punto di rottura indicato tecnicamente come "breackpoint".
Come gestire dispositivi mobili con Media queries e viewport

Il comportamento di tutti i browser è adattare in maniera automatica le dimensioni della area di visualizzazione per posizionare al meglio gli elemento di una pagina web, tuttavia se questo avviene in uno schermo piccolo come quello di smartphone, il testo e le immagini sono talmente piccoli che necessitano di essere zooomate con tap o azioni simili. Usando una semplice pagina di esempio, il browser di un dispositivo mobile può visualizzare la pagina in due modi differenti:

Comportamento di default Comportamento con viewport

Tale comportamento è dovuto alla importante differenza di risoluzione degli schermi, su uno smartphone può arrivare a 320 px mentre su monitor desktop più essere anche 2000 px. Nel momento in cui si voglia creare un sito adattivo per tutti i dispositivi bisogna evitare effetti grafici indesiderati e studiare il comportamento del viewport. Tecnicamente si può modificare il comportamento di default, spesso indesiderato, inserendo un tag meta nel codice HTML della pagina:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

per la gestione del viewport, aggiungendo questo tag alle pagine, i browser dei visitatori non avranno il comportamento indesiderato dello zoom. Maggiori dettagli si possono trovare nel sito ufficiale mozilla.

Le media queries sono una tecnica introdotta con CSS3 per la gestione dei contenuti se questo è visualizzato da dispositivi con differenti dimensioni, prima di questa tecnica era necessario caricare diverse elementi a seconda della dimensione dello schermo del visitatore. La sintassi base è l'uso della parola chiave @media seguita dall'indicazione di quale proprietà selezionare, all'interno delle parentesi graffe si indicano le classi css che devono essere applicate solo ai visitatori che soddisfano la regola:

@media screen and (min-width: 480px) {
.example { background: green; }
}
@media screen and (min-width: 768px) {
.example { background: yellow; }
}
@media screen and (min-width: 1024px) {
.example { background: red; }
}

in questo semplice esempio gli oggetti di classe example avranno sfondo verde nei dispositivi piccoli, giallo nei dispositivi medi e rossi per i dispositivi di grandi dimensioni. E' possibile usare le media queries anche nel tag link per importare o meno css specifici:

<link rel="stylesheet" media="screen and (color)" href="colore.css" />

I possibili media messi a disposizione da tutti i browser sono:

  • all: il CSS si applica a tutti i dispositivi di visualizzazione
  • screen: schermo di computer
  • print: pagina stampata
  • projection: presentazioni e proiezioni
  • speech: dispositivi con sintesi vocale
  • braille: supporti braille
  • embossed: stampanti braille
  • handheld: dispositivi mobili con schermo piccolo
  • tty: dispositivi a carattere fisso
  • tv: visualizzazione su schermi televisivi

E' possibile inoltre combinare le condizioni e sommarle anche se è una tecnica poso usata in quanto le media queries, come tutte le proprietà CSS, hanno il principio dell'ereditarietà e della sequenzialità: viene sempre applicata l'ultima caratteristica impostata in ordine di caricamento.

BODY{ 
  background: yellow;
}

@media screen and (min-width: 400px) and (max-width: 1024px) { 
  BODY{ 
   background: red;
  }
}

A chi non ha mai usato le media queries si lascia come esempio la possibilità di caricare una pagina con media queries con un browser di un desktop molto largo e poi ridimensionare la finestra, si noterà che le classi cambiano senza il ri-caricamento dell'intera pagina ma le classi sono applicate "run-time". Questa tecnica è usata spesso anche per mostrare e nascondere elementi a seconda della larghezza della pagina, per esempio nei dispositivi piccoli è possibile nascondere un elemento con:

@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Una guida completa e dettagliata delle Media Queries è disponibile nel sito ufficiale w3schools.

Come creare una pagina response

Usando il Response Designe con il sistema a Box scegliendo la tecnica delle media-queries, per crare una pagina di esempio blocchi con il classico schema:

  • versione internet: più righe con il primo box largo tutta la pagina, nelle successive righe i blocchi sono affiancati dove possibile
  • versione tablet: i blocchi rimangono affiancati
  • versione mobile: i blocchi sono uno sotto l'altro senza nessun affiancamento

Un esempio di codice che implementa questa logica:

<!DOCTYPE html>
<html>
 <head>
  <style>
   DIV { box-sizing: border-box;}
   body{ margin:0; padding:0; background-color:lightgreen; }
   .gliglia{margin: 0px auto; background-color:lightblue; 
     padding: 25px;}
   .grid{float: left; padding-left: 25px;position: relative;
     width: 100%;width: 100%;}
   .elemento{height:100px; background-color:gold;}
   .riga{margin-left: -25px;}
   @media only screen and (min-width: 480px) and (max-width: 599px) {
    .elem1{width: 100%;}
    .elem2{width: 100%;}
    .elem4{width: 100%;}
   }
   @media only screen and (min-width: 600px) and (max-width: 1024px) {
    .elem1{width: 100%;}
    .elem2{width: 100%;}
    .elem4{width: 50%;}
   }
   @media only screen and (min-width: 1025px) {
    .gliglia{width: 1040px;}
    .elem1{width: 100%;}
    .elem2{width: 50%;}
    .elem4{width: 25%;}
   }
   .riga:before, .riga:after{content: " "; display: table;}
   .riga:after, .gliglia:after{ clear: both;}
  </style>
 </head>
 <body>
  <div class="gliglia">
    <div class="riga">
      <div class="grid elem1">
        <p class="elemento">1 int, 1 tablet, 1 mobile</p>
      </div>
    </div>
    <div class="riga">
      <div class="grid elem2">
        <p class="elemento">1/2 int, 1 tablet, 1 mobile</p>
      </div>
      <div class="grid elem2">
        <p class="elemento">1/2 int, 1 tablet, 1 mobile</p>
      </div>
    </div>
    <div class="riga">
      <div class="grid elem4">
        <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
      </div>
      <div class="grid elem4">
        <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
      </div>
      <div class="grid elem4">
        <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
      </div>
      <div class="grid elem4">
        <p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
      </div>
    </div>
  </div>
  <div class="riga"> <div class="grid elem1">footer</div></div>
 </body>
</html>

In questo esempio non è stato usato il tag <TABLE>, impossibile da usare con le media-queries, quindi sono usati dei tag <DIV> ai quali è stata impostata la una caratteristiche molto importante:

DIV { box-sizing: border-box;}

per poi poter usare le percentuali sulle larghezze: storicamente un elemento HTML (non solo i tag DIV) hanno una larghezza ma di default la larghezza non comprende i margini che vengono calcolati a parte, con questa proprietà la larghezza e l'altezza dei bordi viene compresa nella definizione nei CSS e si evitano sorprese: per esempio con due elementi al 50% e un po' di bordo, senza questa proprietà il secondo elementi andrebbe a capo in quanto il bordo del primo elemento porterebbe la larghezza ad almeno il 51% e non ci sarebbe abbastanza spazio, per maggiori dettagli si rimanda alla pagina W3C.

Successivamente sono stati impostati margini del BODY per eviatre di perdere spazio:

BODY{ margin:0; padding:0; background-color:lightgreen; }

La classe griglia vuole essere solo un contenitore di righe, in poche parole sarebbe il <table> della nostra struttura, non sarebbe necessario ma è sempre buona norma mettere un div contenitore per poter aggiungere impostazioni che, altrimenti, sarebbero complicate da mettere nei vari elementi della struttura, in questo esempio abbiamo definito un colore e un padding, la larghezza non è indispensabile perché se non specificata il tag DIV si "prende" tutto lo spazio che trova. La classe riga è la definizione delle caratteristiche "orrizzontali" del gruppo di elementi, si può pensare come un <TR> ma con una caratteristica diversa: questo non contiene un numero fisso di elementi. La classe grid è la più interessante dell'esempio perchè definisce che ogni elemento della griglia è fluttuante e indica che la posizione deve essere relativa (di solito è il default ma meglio ridefinirlo per evitare brutte sorprese), questo è semplicemente il contenuto di ogni elemento della griglia e in questo esempio abbiamo definito un aspetto grafico: altezza e colore per poter identificare ogni box, da non confondere il contenuto con l'elemento fluttuante: sempre meglio fare due tag per evitare conflitti tra le proprietà e i tag.

Le successive classi sono definite con le media queries e cioè pezzi di css condizionati ad alcune caratteristiche, in questo caso ci sono definiti tre blocchi con dove sono definite le stesse classi ma con valori percentuali diverse, il primo per il mobile (minimo 480 e massimo 599), il secondo per tablet (minimo 600 massimo 1024) e il terzo per i browser internet (con monitor con più di 1024 pixel):

@media only screen and (min-width: 480px) and (max-width: 599px) {
...
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
...
}
@media only screen and (min-width: 1025px) {
.gliglia{width: 1040px;}
...
}

Le ultime due righe dello stile sono le più complicate da spiegare e un occhio esperto potrebbe essere infastidito, perché sono la definizione di due condizioni sulle righe, indispensabili per evitare i problemi con gli elementi fluttuanti, la prima riga aggiunge prima e dopo un elemento di classe riga uno spazio e indica che i figli di elemento devono essere disposti a tabella, per maggiori dettagli vi consiglio di studiare la pagina W3C:

.riga:before, .riga:after{content: " "; display: table;}
.riga:after, .gliglia:after{ clear: both;}

La seconda classe invece è fondamentale, perche impone che alla fine di ogni riga (e alla fine della griglia) non ci siano altri elementi fluttuanti, con il valore both si indica al browser che non ci deve essere altro a sinistra e a destra dell'elemento quindi il browser sarà costretto a posiziona gli elementi successivi sotto, questa proprietà è spesso mal vista ma ormai indispensabile per chi vuole sviluppare uno stile responsivo, consiglio comunque la pagina W3C.

Come gestire il layout con il box modeling

In fase di studio del layout di un sito bisogna considerare la struttura a blocchi dei siti responsive: non è possibile incastrare le componenti senza allineamenti e bisogna evitare di creare strutture a tetris, come in immagine, che potrebbero anche essere impossibili con tecnologie HTML e non possono essere facilmente adattate ai dispositivi mobili.

Durante lo studio e la progettazione di un sito responsive bisogna sempre tenere conto che gli oggetti dovranno essere visualizzati anche sui dispositivi mobili come gli smartphone e monitor molto grandi come i monitor molto grandi quindi nel disegno di un sito non si può pensare di inserire un oggetto statico ma bisogna sempre pensare alla sua rappresentazione grafica sui diversi dispositivi, allo stesso tempo bisogna cercare di non limitare troppo il “canale” internet, trovare un compromesso è possibile usando il box-modeling e lo studio degli elementi flessibili, in questo articolo sarà introdotto il primo concetto mentre il secondo sarà introdotto in futuri articoli.

Il concetto di box-modeling è uno dei punti più importanti dei fogli di stile CSS e ogni designer deve conoscere molto bene questi concetti: fin dalla prima versione dell'HTML e dei CSS ogni programmatore è sempre afflitto da dove e come posizionare gli oggetti HTML rispetto agli altri, infatti per box-modeling si intende definire le posizioni e le distanze tra i vari oggetti usando le varie proprietà di altezza, larghezza, margine, bordi e padding. Fin dalla versione 2 di CSS si è definito uno standard sui box e non è variata molto nella versione 3: ogni elemento ha un margine, un bordo, un padding, larghezza e altezza che vengono definite con proprietà specifiche:

le proprietà di larghezza e altezza (width e height) imposta le dimensioni di elementi esclusi padding, margini e bordi che vengono sommati a posteriori. Per rendere CSS più flessibile possibile è possibile modificare l'impostazione della somma delle larghezze usando la proprietà box-sizing che può assumere due valori:

  • content-box: il valore di larghezza fa riferimento all'area del contenuto (valore di default)
  • border-box: il valore di larghezza fa riferimento al box nella sua interezza, comprendendo anche il padding e il bordo.

Quindi, per esempio:

#divProva{
  width:100px; 
  padding:2px; 
  border: 1px solid black; 
  box-sizing:border-box;
}

la larghezza di 100 pixel comprende anche bordi e padding.

Con le proprietà flexbox sono state introdotte alcune nuove caratteristiche per creare strutture di layout non lineari come previsto normalmente da CSS, senza i quali al programmatore rimane solo l'uso della proprietà float. Questa è stata pensata per rendere semplice la gestione di elementi interni ad un elemento contenitore e per risolvere le varie problematiche legate alla centratura degli elementi rispetto agli assi verticali e orizzontali. Per usare queste proprietà bisogna tenere conto di due aspetti costruttivi:

  • un elemento contenitore che contiene gli elementi flessibili indicato con la proprietà display:flex
  • gli elementi flessibili dove non bisogna dedicare nessuna proprietà specifica.

All'elemento padre si deve poi aggiungere la proprietà addizionale per indicare l'allineamento verticale con la proprietà align-items: center;

Agli elementi figli è possibile poi aggiungere delle caratteristiche ulteriore:

  • modificare l'allineamento dello specifico elemento con la proprietà align-self
  • modificare l'ordine di visualizzazione con la proprietà order

Un esempio pratico è:

<div style="display:flex;align-items: center;">
  <div style="background-color:red;">rosso</div>
  <div style="background-color:yellow;">giallo<br /> a capo</div>
  <div style="background-color:green;text-align:center;">verde</div>
  <div style="background-color:gold;order:-2;">oro con ordine</div>
  <div style="background-color:lightblue;align-self:flex-start;">azzurro</div>
<div>

E il risultato di questo semplice esempio è:

rosso
giallo a capo
verde
oro con ordine
azzurro
Disclaimer contenuti di AlNao.it

È online la nuova versione del sito con contenuti aggiornati. Nessun articolo e nessun contenuto di questo sito è stato creato con IA o generatori automatici di testi ma tutto è stato scritto con molta pazienza personalmente da Alberto Nao. Tutto il codice presente nel sito Tutti gli esempi di codice nel sito sono coperti da  free software!

I contenuti di AlNao.it potrebbero avere inesattezze o refusi. Non potrà in alcun caso e per qualsiasi motivo essere ritenuta responsabile di eventuali imprecisioni ed errori né di danni causati. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso. Poiché ogni materiale sarà scaricato o altrimenti ottenuto attraverso l’uso del servizio a scelta e a rischio dell’utente, ogni responsabilità per eventuali danni a sistemi di computer o perdite di dati risultanti dalle operazioni di scarico effettuato dall'utente, ricade sull'utente stesso e non potrà essere imputata ad AlNao.it che declina ogni responsabilità per eventuali danni derivanti dall'inaccessibilità ai servizi presenti sul sito o da eventuali danni causati da virus, file danneggiati, errori, omissioni, interruzioni del servizio, cancellazioni dei contenuti, problemi connessi alla rete, ai provider o a collegamenti telefonici e/o telematici, ad accessi non autorizzati, ad alterazioni di dati, al mancato e/o difettoso funzionamento delle apparecchiature elettroniche dell’utente stesso.

AlNao.it ha adottato ogni possibile accorgimento al fine di evitare che siano pubblicati, nel sito web, contenuti che descrivano o rappresentino scene o situazioni inappropriate o tali che, secondo la sensibilità degli utenti, possano essere ritenuti lesivi delle convinzioni civili, dei diritti umani e della dignità delle persone, in tutte le sue forme ed espressioni. In ogni caso non garantisce che i contenuti del sito web siano appropriati o leciti in altri Paesi, al di fuori dell’Italia. Tuttavia, qualora tali contenuti siano ritenuti non leciti o illegali in alcuni di questi Paesi, ti preghiamo di evitare di accedere al nostro sito e ove scegliessi, in ogni caso, di accedervi, ti informiamo che l’uso che deciderai di fare dei servizi forniti dal sito sarà di tua esclusiva e personale responsabilità. L’utente sarà esclusivo responsabile della valutazione delle informazioni e del contenuto ottenibile mediante il sito web. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso.

Le pagine di questo sito sono protette dal diritto d’autore (copyright), in particolare a norma della legge sul diritto d’autore e il contenuto del sito è protetto contro duplicazioni, traduzioni, inserimento o trasformazione dello stesso in altri media, incluso l’inserimento o la trasformazione con mezzi elettronici. La riproduzione e lo sfruttamento economico di tutto o di parte del contenuto di questo sito sono consentite solo a seguito del consenso scritto dell’avente diritto. Sia il contenuto che la struttura del sito sono protetti dal diritto d’autore. In particolare, la duplicazione di informazioni o dati, l’uso dei testi o di parte di essi o delle immagini contenute nel sito (eccetto per le foto ad uso stampa) è consentita solo previo consenso scritto dell’avente diritto. Anche le illustrazioni, a norma dell’art. 1 della legge 633/1941 – e successive modifiche e integrazioni – sono protette dal diritto d’autore. Il diritto di pubblicazione e riproduzione di questi disegni è di titolarità dell’avente diritto. Il diritto d’autore sui disegni rimane in vigore anche per i disegni automaticamente o manualmente aggiunti a un archivio. Nulla di quanto contenuto in questo sito vale come concessione a terzi dei diritti di proprietà industriale ed intellettuale indicati in questa sezione. Ci riserviamo tutti i diritti di proprietà intellettuale del sito web.

Marchi ed immagini riferibili a soggetti terzi utilizzati in questo sito non appartengono a AlNao.it e sono da ritenersi di proprietà esclusiva dei rispettivi titolari. Le denominazioni dei prodotti pubblicati su questo sito web o delle società menzionate, anche qualora non siano indicate con il simbolo identificativo della registrazione del marchio sono marchi di titolarità di terzi e sono protetti dalla legge sui marchi (D.lgs. 30/2005 e successive modifiche e integrazioni) e dalle norme in tema di concorrenza sleale. Qualsiasi riproduzione degli stessi è da ritenersi vietata ai sensi di legge. In particolare è espressamente vietato qualsiasi uso di questi marchi senza il preventivo consenso scritto del relativo titolare ed, in particolare, è vietato utilizzarli in modo da creare confusione tra i consumatori in merito all'origine dei prodotti o per finalità di sponsorizzazione, nonché in qualsiasi modo tale da svilire e discreditare il titolare del marchio. Tutti i diritti che non sono espressamente concessi sono riservati al titolare del marchio.

In aggiunta a quanto indicato, AlNao.it non potrà essere ritenuto in alcun caso responsabile di alcun danno derivante dall'utilizzo o dall'impossibilità di utilizzare il sito web, i contenuti, le informazioni o connessi alla qualità degli stessi.

MENU