Roma @ IED
20 Marzo 2015
La tecnologia per personalizzare l'aspetto di una pagina HTML, CSS, e' stata recentemente aggiornata alla terza revisione
Tra i motivi delle modifiche allo standard ci sono sicuramente le nuove esigenze introdotte dalle WebApp prima e dal Mobile Web subito dopo.
Portare le molteplici funzionalita' esposte da CSS ad un discreto livello di semplicita', riusabilita' e uniformita' del Look & Feel degli elementi HTML non e' un compito semplice.
Per questo motivo e' sempre piu' spesso necessario saper utilizzare un CSS Framework come base di partenza dello stile delle Web Application.
I CSS Framework consentono di velocizzare notevolmente lo styling di una pagina HTML attraverso l'uso di un vocabolario pre-confezionato e documentato di classi che e' possibile applicare agli elementi dei nostri documenti HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="ionic.css" />
<style type="text/css">
body { background: white; }
.content { margin-top: 4em; }
.center { text-align: center; }
</style>
</head>
<body>
<div class="bar bar-header bar-stable">
<h1 class="title">Page Header</h1>
<button class="button button-positive pull-right">
Options
</button>
</div>
<div class="content row center">
<div class="col col-50 col-offset-25">
<h2>Header</h2>
<button class="button button-positive">
Action
</button>
</div>
</div>
<div class="bar bar-footer bar-positive">
<div class="title">Footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="ionic.css" />
<style type="text/css">
body { background: white; }
.row { border: 2px solid green; }
.col { border: 1px dashed blue; }
</style>
</head>
<body>
<div class="row">
<div class="col col-25">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<div class="col col-75">
<h1>Title</h1>
<div class="row">
<div class="col col-50">COL1</div>
</div>
</div>
</div>
</html>
Mediante le classi responsive-sm, responsive-md e responsive-lg possiamo chiedere al framework CSS di ionic di trasformare le colonne in righe al superamento dei relativi breakpoint:
<div class="row responsive-sm">
...
</div>
Alla base delle tecniche di layouting responsive ci sono sicuramente le media query:
@media (max-width:599px) {
nav ul {
text-align: center;
padding: 0;
}
nav li {
display: inline;
margin: 0 0.4em;
}
}
@media (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
Per abilitare la vista delle mediaquery e relativi punti di break, premere il bottone corrispondente nell'angolo in alto a sinistra nell'emulation mode:
Le barre visualizzano i punti di break delle media query:
Mediante il tag meta e' possibile configurare le caratteristiche del "viewport", cioe' dello spazio di rendering del browser, personalizzandone dimensione, zoom etc.
<head>
<meta name="viewport" content="width=320">
</head>
<meta name="viewport"
content="width=device-width,initial-scale=1">
<meta name="viewport"
content="user-scalable=no">
Questa caratteristica e' stata introdotta per adattare ancora meglio una pagina web sui dispositivi mobili.
Una configurazione del viewport molto comune nelle WebApp Mobile:
h1 {
color: green
h2 {
color: red;
}
- la regola contenente l'errore potrebbe non essere stata applicata
- tutte le regole successive contenute nello stesso file CSS potrebbero non essere state applicate
i Web Developer Tools ci aiuteranno ad identificare la causa del problema
In termini di riutilizzabilita' e configurazione dei framework CSS, una cosa che ancora il CSS non fornisce come funzionalita' integrata sono le variabili o gruppi di regole parametrizzabili.
Per questo motivo sono nati una notevole quantita' di CSS Preprocessor, ciascuno dei quali fornira' un linguaggio che estende CSS aggiungendo alcune proprie sintassi e funzionalita', e un tool di building per generarne il corrispondente file CSS.
Uno di questi linguaggi e' SASS, ed e' quello utilizzato da Ionic (ma anche da Fundation o Bootstrap)
Tra le estensioni fornite da SASS evidenziamo:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
$primary-color: #333;
$default-radius: 10px;
.box {
@include border-radius($default-radius);
background: $primary-color;
}
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
background: #333;
}
Anche in questo caso il CSS Framework nasce allo scopo di rendere i ritocchi e le personalizzazioni base allo stile il piu' semplici possibili, ad esempio raggruppando le variabili di personalizzazione previste in un unico file.
Ad esempio Ionic prevede nella sua modalita' base l'uso di uno stile di default gia' precompilato in CSS, ma e' possibile abilitare i progetti alla personalizzazione dello stile mediante SASS
/* To customize the look and feel of Ionic,
you can override the variables
in ionic's _variables.scss file.
*/
$light: #fff !default;
$stable: orange !default; //#f8f8f8 !default;
$positive: teal !default; //#387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
aprire l'editor (Brackets o il proprio editor di fiducia)
ridimensionare la finestra dell'editor in modo da occupare la meta' sinistra dello schermo
creare una directory per l'esercizio (es. webapps_esercizi_01)
creare un nuovo file contenente il DOCTYPE and il root element del documento HTML
e salvarlo come test_01.html nella directory di progetto
aprire il file test_01.html con Google Chrome
(attraverso il file manager del vostro sistema operativo o mediante il tasto livepreview di Brackets)
ATTENZIONE: la modalita' livepreview di Brackets viene disabilitata dall'apertura dei Developer Tools, ma e' ancora possibile ricaricare la pagina nel browser per verificare l'effetto dei cambiamenti dopo averli salvati nell'editor.
Utente | Ruolo |
---|---|
admin | admin |
guest | guest |