Scarichiamo 320&up

La prima cosa da fare è scaricare il framework a questo indirizzo: http://www.stuffandnonsense.co.uk/projects/320andup. Lo zip contiene due versioni del framework: con un unico foglio di stile e con più css (per le varie risoluzioni). Noi useremo la versione con un unico css, che puoi scaricare direttamente da qui.

Il pacchetto contiene diversi file, i fogli di stile si trovano nella cartella css, le immagini nella cartella img e i file javascript in quella js. Quello che ci occorre è lo style.css ed index.html

index.html

Il file è popolato da diverse inclusioni di script, ma noi ci soffermiamo sulla parte centrale, ovvero quella composta dalla struttura dove poi andranno situati i contenuti del documento html:

<header role="banner"></header>

<div class="content clearfix">
    <div role="main" class="content-main"></div>
    <div role="complementary" class="content-complementary"></div>
</div>

<footer role="contentinfo" class="clearfix"></footer>

Come puoi notare non c’è nulla di complicato, abbiamo la classica struttura di una pagina a due colonne: Testata + Contenitore Generale (che racchiude le due colonne) + Footer

style.css

Nel foglio di stile sono elencati tutti i selettori con le rispettive proprietà, che servono ad impostare il documento in uno stato di default, che ovviamente andremo a modificare dove necessario. La parte importante è situata in basso al documento, dove iniziano i media query, qui andremo ad aggiungere gli stili per le diverse risoluzioni:

@media only screen and (min-width: 480px){}
@media only screen and (min-width: 600px){}
@media only screen and (min-width: 768px){}
@media only screen and (min-width: 992px){}
@media only screen and (min-width: 1382px){}

esempio

Inseriamo dei contenuti alla pagina html, bastano dei semplici paragrafi e qualche immagine.
Successivamente interveniamo sul css per fare in modo che raggiunta una particolare risoluzione, nel nostro caso la 768px, la colonna .content-complementary risulti visibile (a basse risoluzioni è settata a display:none) e flottante sulla destra:

ecco il codice css associato:

@media only screen and (min-width: 768px){
    .content-main{width:60%;float:left;}
    .content-complementary{width:35%; float:right; margin-left:5%; display:block;}
}

Nella demo in basso potrai sicuramente godere a pieno l’esempio, basta ridimensionare la finestra del browser e vedrai l’effetto dei media query. Per concludere posso sicuramente dirti che il framework è ben organizzato, puoi gestire diverse risoluzioni come la 480, 600, 768, 992 e 1382px; poi soprattutto hai una struttura html e css già preimpostata, insomma può essere di grande aiuto per chi deve sviluppare siti in poco tempo per diversi dispositivi. Prendi un pò di confidenza con il framework e fammi sapere che ne pensi

Laboratorio Css augura Buon Natale e Buone Feste a tutti i lettori, che questi giorni di festa vi portino tanta serenità. Grazie di cuore a chi contribuisce alla crescita di questo blog, cercheremo di fare sempre del nostro meglio.

Queste che seguono sono alcune righe ti testo scritte da Vittorio Grimaldi, Developer della Startup Bisquits, durante una qualunque notte di lavoro, mentre le linee di codice scorrono veloci come le lancette e l’alba fa presto ad arrivare. Sono parole sincere e vere di chi ha visto, come me, nascere questo progetto dal nulla.

L’idea ci piaceva e ci sembrava quasi impossibile che nessuno avesse fatto una cosa del genere. Intravedevamo qualcosa di utile per la comunità e ci rendevamo conto che le basi di quello che stavamo facendo avrebbero portato a qualcosa di molto solido e ben strutturato. Un susseguirsi di script da implementare e tantissime idee si infilavano nella testa, alcune poco utili ed altre essenziali per il corretto funzionamento del progetto. Proseguivamo ogni giorno con il giusto spirito fino a che non si è palesato, un giorno, qualcosa che io stesso non riesco a fare a meno di usare e lo utilizzo tutt’ora che è in fase di beta-test.

Mi auguro che questa community possa aiutare e piacere a tutti, in fondo il nostro intento è quello di dare a te utente la possibilità di condividere codici sul web e di rendere allo stesso tempo il tutto, piacevolmente sociale.

Ti aspettiamo su Bisquits!

Di cosa stiamo parlando

Come recitano le specifiche del W3c la pseudoclasse active si applica mentre un elemento viene attivato dall’utente. Per esempio, nell’arco temporale in cui l’utente preme il pulsante del mouse e lo rilascia.

Un pò di teoria

Sebbene le pseudoclassi dinamiche in generale possano essere associate a qualsiasi tipo di elemento, come un paragrafo o un input, IE6 le supporta solo quando applicate ai collegamenti. Affinchè tutto funzioni correttamente, è necessario che la pseudo classe :active venga definita dopo :hover per avere effetto sugli elementi. Esattamente in questo ordine:

1. :link
2. :visited
3. :focus
4. :hover
5. :active

Il motivo è molto semplice e viene ricondotto al concetto di specificità e di organizzazione a cascata di cui abbiamo già discusso in un precedente articolo. Rileggi con me la parte che ci interessa:

“Le regole che gestiscono l’organizzazione a cascata sono abbastanza semplici: l’interprete prende in considerazione tutti i selettori comuni ad un determinato elemento. Vengono quindi controllate tutte le dichiarazioni comuni in base al loro peso; le regole marcate come !important avranno un peso maggiore. Se per uno stesso elemento abbiamo dichiarazioni in conflitto ma tutte hanno lo steso peso, si valuta la specificità delle stesse scartando quelle che hanno una specificità minore. Infine se due o piu regole relative ad uno stesso elemento hanno lo stesso peso e specificità, si prende in considerazione l’ordine con cui vengono elencate. Quella che viene dopo prevale sempre (a parità di condizioni ovviamente).”

Sappiamo, dal calcolo della specificità di ognuno di loro, che il loro valore è uguale per tutti (0,0,0,1). Dal momento che hanno tutti lo stesso peso, origine e specificità, l’ultimo è quello che prevarrà sugli altri. La selezione per ordine è quindi la ragione per cui le pseudoclassi andrebbero elencate secondo l’ordine LVHA, ordine che è stato consigliato anche nelle specifiche del W3C come quello da adottare. Inoltre l’espressione inglese LoVe-HA! ha riscosso un grande successo come metodo per ricordarsi il corretto ordine di scrittura di tali pseudoclassi.

Applicazioni pratiche

Le applicazioni pratiche possono essere molteplici. Dal semplice cambio di colore, ad effetti un pò più ricercati come l’elminiazione dello shadow o dello spostamento verso il basso e il cambio di un gradiente per simulare la pressione. Di seguito vi propongo un esempio pratico di come potrebbe tornarci utile lo stato :active inserito nel contesto più globale delle pseudoclassi.

<a class="link" href="#">Sono un Link!</a>

a.link:link,a.link:visited{
    display:inline-block;
    font-size: 16px;
    font-family:arial;
    line-height: 34px;
    padding: 0 7px 0 7px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 white;
    border: 1px solid #ddd;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 -1px 1px #FFFFFF inset,0 0 3px #333;
    color:#333;
    background: -moz-linear-gradient(top,  #fbfbfb 0%, #e5e5e3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#e5e5e3));
    background: -webkit-linear-gradient(top,  #fbfbfb 0%,#e5e5e3 100%);
    background: -o-linear-gradient(top,  #fbfbfb 0%,#e5e5e3 100%);
    background: -ms-linear-gradient(top,  #fbfbfb 0%,#e5e5e3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e5e5e3',GradientType=0 );
    background: linear-gradient(top,#fbfbfb 0%,#e5e5e3 100%);
}
a.link:hover{
    box-shadow: 0 1px 1px #FFFFFF inset,0 0 3px #333;
    background: -moz-linear-gradient(top,  #e5e5e3 0%, #fbfbfb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e3), color-stop(100%,#fbfbfb));
    background: -webkit-linear-gradient(top,  #e5e5e3 0%,#fbfbfb 100%);
    background: -o-linear-gradient(top,  #e5e5e3 0%,#fbfbfb 100%);
    background: -ms-linear-gradient(top,  #e5e5e3 0%,#fbfbfb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e3', endColorstr='#fbfbfb',GradientType=0 );
    background: linear-gradient(top,#e5e5e3 0%,#fbfbfb 100%);
}
a.link:active{
    position:relative;
    top:1px;
    box-shadow: 0 1px 1px #FFFFFF inset,0 0 1px #333;
}

Introduzione

Gli ingegneri Apple hanno creato pixel larghi appena 78 micrometri, riuscendo così a quadruplicarne il numero nel display da 3,5 pollici di iPhone 4S e iPhone 4. È proprio grazie alla densità dei pixel (326 per pollice) se testo e grafica hanno un aspetto nitido e uniforme a qualsiasi dimensione.

Ti ho introdotto a questo nuovo articolo con un paragrafo prelevato dal sito apple. I nuovi smartphone, come iphone 4 o 4s, ma anche htc samsung e molti altri, stanno raggiungendo risoluzioni impressionanti e ognuno di loro chiama le proprie tecnologie a modo suo. Retina e Amoled ne sono un chiaro esempio.

L’obiettivo di questo articolo

La profondità di pixel e le risoluzioni nettamente superiori ai precedenti modelli di smartphone hanno creato non pochi problemi di visualizzazione e di resa grafica delle immagini di layout. E’ necesario per forza di cose differenziare l’esperienza utente e crearne due diverse versioni. Una prima versione dedicata agli smartphone con risoluzioni normali ed una variante per risoluzioni in HD. Come? Vediamolo insieme!

La soluzione al problema

Se siamo abituati a gestire le immagini di layout tramite sprite, possiamo risolvere il problema in due modi:
1. Creando due varianti di sprite.
2. All’interno di un unico sprite, inserire entrambe le versioni di icone.

L’importante è mantenere le stesse proporzioni in entrambi i casi affinchè non ci siano diseguaglianze di visualizzazione. Nel caso concreto che andremo ad analizzare verranno create due sprite differenti.

La tecnica da utilizzare

Non rimane altro da fare che illustrare le tecniche CSS coinvolte. Utilizzeremo la tecnica del mediaqueries e del background-size. La prima per differenziare la visualizzazione dello sprite in relazione alla risoluzione del device in uso. La seconda per ridurre le dimensioni dello sprite in alta risoluzione alle giuste dimensioni. In realtà non cambierà nulla tra uno sprite ed un altro durante il rendering del browser, poichè le icone dello sprite in HD risulteranno essere, dopo aver applicato le due regole css viste poc’anzi, delle stesse dimensioni di quelle in versione normale. Per facilitare le cose il secondo sprite lo creeremo esattamente il doppio del primo; con mediaqueries, mi ripeto, mostreremo uno piuttosto che l’altro in realzione alla risoluzione e infine con la regola del background-resize renderemo il secondo sprite (quello in HD) di uguale dimensioni rispetto al primo. Mettiamoci all’opera!

L’esempio concreto

L’esempio si basa su un semplicissimo menù. Ad ogni voce di menu sono state affiancate delle icone decorative. Questo è il classico caso che necessita di questo accorgimento. Se non ricordi bene in cosa consiste uno sprite CSS ti consiglio di rileggerti questo articolo. Ecco il codice html e css relativo all’esempio.

<ul id="mainmenu">
    <li class="home"><span class="icon"></span>Home Page</li>
    <li class="contact"><span class="icon"></span>Contact</li>
</ul>

/* Dichiarazioni comuni */
#mainmenu li{
    width:auto;
    height:35px;
    line-height:35px;
    background-color:#464646;
    border-bottom:1px solid #6e6e6e;
    position:relative;
    padding-left: 40px;
    color:#f0f0f0;
    font-family:arial;
}
#mainmenu li span{
    width: 20px;
    height: 20px;
    position:absolute;
    top: 7px;
    left: 10px;
    background-image: url(sprite.png);
    background-repeat: no-repeat;
}

/* Sprite per le risoluzioni in HD */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
    #mainmenu li span{
        -moz-background-size: 20px 50px;
        -o-background-size: 20px 50px;
        -webkit-background-size: 20px 50px;
        background-size: 20px 50px;
        background-image: url("spriteHD.png");
    }
}

/* Dichiarazioni relative ad ogni singola voce di menu */
#mainmenu li.home .icon{
    background-position: left top;
}
#mainmenu li.contact .icon{
    background-position: left bottom;
}

Per prima cosa definiamo le caratteristiche generiche del menu e dello span che farà da contenitore delle immagini, definendo in questa fase anche il background sprite contente le icone per le risoluzioni “normali”. Immediatamente dopo definiamo, tramite il mediaqueries, l’eccezione per le risoluzioni in HD; agendo sulla risoluzione, andiamo a definire un nuovo background (spriteHD.png) e ad esso gli andiamo a settare, tramite il background-size, larghezza e altezza pari alle dimensioni dello sprite standard, cosi che non ci siano differenze alcune. La proprietà in questione, introdotta con i CSS3, consente di definire la larghezza e l’altezza di un background, ed è proprio quello che ci serve.

Conclusioni

Senza questo accorgimento, tutte le immagini risulterebbero sfocate e poco ben definite. Porta via un pò di tempo in più e qualche riga di codice, ma ne vale veramente la pena! Per testare la demo, avrete bisogno di due device differenti, come ad esempio un iphone 3g e un iphone 4. Per notare la reale differenza, disattivate nella demo il mediaqueries e vi renderete conto da soli della qualità delle immagini su iphone 4 o 4s.

Spero che questo articolo possa esserti stato utile e come al solito, per dubbi o perplessità lascia pure i tuoi commenti qui di seguito o sulla bacheca di facebook.

Ormai tutti siamo coscienti che l’ html5 ha dato una svolta incredibile alla semantica degli elementi e sul modo di strutturare l’intero documento html. Meritano sicuramente attenzione i nuovi form, ci sono oltre una decina di nuovi tipi di input da usare, senza bisogno di trucchi o soluzioni indirette.

Testo Segnaposto

Il testo segnaposto è quel testo visibile nell’input, e rimane attivo finchè non viene compilato o attivato il campo.

Compatibile con: Firefox 3.7, Safari 4.0+, Chrome 4.0+

<input placeholder="Cerca nei bookmarks" />

Autofocus dei campi

L’attributo autofocus attiva un determinato campo input al caricamento di una pagina.

Un esempio lo trovi in google, nella homepage del noto motore di ricerca viene automaticamente attivato il campo input, in modo che si possa digitare la parola da cercare senza posizionare il cursore.

Compatibile con: Firefox 8.0, Safari 4.0+, Chrome 3.0+, Opera 10.0+, Iphone, Android

<input autofocus />

Indirizzi email

Da più di dieci anni i form sono composti dalle solite tipologie di input. L’html5 definisce alcuni nuovi tipi di campi, tra questi il campo email:

<input type="email" />

Il campo email non ha problemi di compatibilità, o meglio i browser che non leggono type=”email” lo interpretano come un semplice type=”text”, anche IE 6.

In sostanza il campo email al momento non ha un tipo di visualizzazione nei browser. La differenza puoi notarla da un iphone, ad esempio all’attivazione del campo email viene caricata la tastiera con @ e il . (punto).

Indirizzi web

Gli indirizzi web sono un’altra novità delle tipologie di input. Anche questo lo si può notare da un iphone,  in questo caso offre una tastiera contenente i tre simboli principali di un indirizzo web:  . (punto)   /  e  .com.

<input type="url" />

Intervalli di numeri

Eccoci arrivati ai numeri. Il type=”number” specifica ovviamente che si tratta di un campo numerico, ma con alcune caratteristiche:

<input type="number" min="0" max="10" step="2" value="6" />

Come puoi notare sopra, oltre alla tipologia del campo ci sono altri parametri:

min specifica il valore minimo accettabile in questo campo;
max pecifica il valore massimo accettabile in questo campo;
step definisce i numeri nell’intervallo del click;
value è il valore iniziale presente nel campo.

Compatibile con le ultime versioni di Chrome, Opera e Safari (testato sulle ultime versioni).

Cursori

Oltre alla visualizzazione a spinbox vista sopra, gli input numerici possono essere rappresentati anche sotto forma di cursori. Il markup è molto simile a quello visto poco fa, ecco come si presenta:

<input type="range" min="0" max="10" step="2" value="6" />

Compatibile con le ultime versioni di Chrome, Opera e Safari (testato sulle ultime versioni).

Selettori di data

Fino a poco tempo fa per includere un controllo di selezione date abbiamo fatto ricorso sempre a librerie esterne. Finalmente l’html5 include un controllo nativo all’interno dei form senza uso di javascript. Vediamo le diverse tipologie:

<input type="date" /> Semplice selezione di una data
<input type="datetime" /> Se oltre alla data si vuole associare l'ora
<input type="month" /> Se si vuole indicare solo il mese e l'anno
<input type="week" /> Se si vuole indicare solo una settimana
<input type="time" /> Se si vuole indicare un'ora in particolare

Compatibile con: Opera 9.0+

Caselle di ricerca

Questa è molto carina Il tipo di campo search permette la visualizzazione di una “x” alla fine dell’input. In pratica permette di cancellare in un solo click l’intero contenuto scritto nel campo.

<input type="search" />

Compatibile con: Chrome e Safari (testato sulle ultime versioni).

Selettori di colore

L’html5 permette anche di scegliere un colore e di restitiurne il corrispettivo esadecimale. Purtroppo questa tipologia di input non è ancora supportata da nessun browser, speriamo in un giorno non molto lontano.

Purtroppo tutte queste belle funzionalità possiamo goderle in alcuni dei browser moderni, sperando al più presto in una completa compatibilità. Se hai altre informazioni riguardo ai form html5 puoi scriverci nei commenti o condividerle sulla fanpage di laboratoriocss.

Per usufruire dell’utilità dei form ti consiglio di visualizzare la demo con Opera o Chrome.

Compatibile con le ultime versioni di Chrome, Opera e Safari.

L’obiettivo

L’obiettivo di questo articolo è quello di aiutarti a creare una thumbnail gallery composta da miniature che occupano tutto lo spazio a disposizione quasiasi sia la risuluzione video o la dimensione del parent. Questa gallery è ottimale per essere utilizzata in tutti quei casi nei quali la dimensione del parent non ha un valore definito, come ad esempio i layout liquidi oppure le versioni mobile degli stessi!

Per avere un quadro completo guarda subito la demo che abbiamo preparato per te, ti aiuterà a capire meglio di cosa stiamo parlando.

La parte html

L’html consiste in una semplice lista contente immagini.

<ul>
    <li><a href="#"><img src="image01.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="image02.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="imageN.jpg" alt="imageN" /></a></li>
</ul>

La parte CSS

Per loro natura gli elementi di una lista sono di tipo blocco. A te la scelta se formattarli con il classsico metodo float, utilizzando la proprietà clip per ottenere immagini tutte della stessa altezza, oppure modificando il valore della proprietà display da block a inline block; modifica che ti consetirà di manternere le diverse altezze delle immagini ma al contempo di ottenere il controllo sul loro allineamento; al rigurado ti consiglio di rileggere questo e quest’altro articolo.

Nel nostro esempio abbiamo utilizzato il classico metodo del float, senza complicare ulteriormente il codice CSS per gestire immagini con altezze differenti. Avremmo per puro semplicismo accademico, immagini ritagliate e della stessa altezza. Starà a voi impiegare questo o quel metodo in base alle vostre esigenze grafiche! Il CSS seguente setta le prorietà di margini – padding e bordi per tutti gli “li” tralasciando volutamente il valore di width, che verrà iniettato dinamicamente tramite jquery in relazione allo spazio disponibile. Le immagini invece hanno impostato come valore di width il 100% del proprio parent.

ul { /* Easy Clear */
    width:auto;
    overflow:hidden
}
ul li {
    float: left;
    margin: 0 5px 5px;
    border: 1px solid #ccc;
    padding: 4px;
}
ul li img {
    display: block;
    width: 100%;
}

Prima di passare alla parte js, ti consiglio di andarti a rileggere l’articolo sulla formattazione degli elementi di blocco e il boxmodel.

Introduzione alla parte jQuery

Lo script di per se non è complesso. E’ un sistema composto da alcune costanti e da un’unica variabile (la width degli “li”). Se hai riletto l’articolo sul boxmodel ricorderai bene che il valore del “riquadro elemento” è dato della somma delle 7 proprietà della formattazione orizzontale (o verticale). Nel nostro sistema abbiamo come definiti tutti i (6) valori del riquadro elemento degli “li” tranne la width che è la nostra incognita. Il seguente script ci fornirà, tramite un algoritmo scritto da Manuel Kanah (responsabile area tech Sitonline, azienda per la quale lavoro) il valore dinamico della width. Per cui adesso lascio la parola a lui, che saprà meglio di me illustrare lo script che lui stesso ha scritto.

Lo script a cura di Manuel Kanah

Lo script, come pocanzi detto, necessita di valorizzare alcune variabili affinchè il calcolo della larghezza dei singoli elementi sia effettuato correttamente. Prima di tutto imposto il valore massimo di width che ogni singolo elemento può avere. Nel nostro caso,ma avrei potuto scegliere qualsiasi altro valore, ogni singolo “li” può raggiungere massimo 100px di larghezza (elementWidth = 100). Il valore della seconda variabile, “elementWidthDelta”, è ottenuto facendo la diferenza tra la width del “li” e l’outerWidth dello stesso e rappresenta la somma di padding, border e margin. Infine il valore della variabile “parentWidth” che rappresenta la width del parent (ul) dei singoli elementi.

La stringa di riproporzionamento prende i tre valori prima descritti e fa quanto segue:

1. Divide lo spazio a disposizione per il valore di “elementWidth” più il valore di “elementWidthDelta” (precedentemente ricavato dal css).
2. Il risultato di questa operazione viene arrotondato per eccesso. Questo valore viene usato per ridividere la width del “ul” per trovare quale sarà la quantità massima di elementi per linea, ricavando così il valore in pixel della larghezza di ognuno di essi.
3. Eseguo infine una proporzione per trasformare il valore da pixel in percentuale, valore che sarà poi assegnato alla width dei nostri elementi. Su questo punto leggi la nota a fondo pagina riguardante il browser Opera.

Lo stesso calcolo di riproporzionamento verrà fatto girare in due casi:

1. Nel primo, quando la pagina è già caricata (load) e le immagini hanno già occupato il loro spazio in modo che non compaia lo scroll dopo il calcolo della larghezza (problema riscontrato su chrome e fixato).
2. Nel secondo, ogni qual volta venga ridimensionato il browser(resize).

$(document).ready(function() {
    elementWidth = 100; // larghezza massima degli elementi in pixel
    gallery = $('#gallery');
    elementWidthDelta = $('li:first', gallery).outerWidth(true)-$('li:first', gallery).width();
    scaleImages = function() {
	var parentWidth = gallery.width();
	$('li', gallery).css('width',(((parentWidth/(Math.ceil(parentWidth/(elementWidth+elementWidthDelta))))-elementWidthDelta)*100/parentWidth)+'%');
    };
});

$(window).load(function(){
    scaleImages();
});

$(window).resize(function() {
    scaleImages();
});

Conclusioni

L’html utilizzato per realizzare la gallery è come sempre, completamente customizzabile, facendo attenzione a modificare di conseguenza il css e lo script. L’unico appunto da fare è che il browser Opera, arrotonda per eccesso la larghezza degli elementi, causando a volte degli scompensi e disallineamenti. Come al solito, per qualsiasi chiarimento o semplicemente per farci sapere se ti è piaciuto l’articolo, utilizzate i commenti o la bacheca di facebook della fanpage!

Il problema!

Uno dei grandi problemi di noi WebDesigner è sempre stato quello di dover affiancare elementi blocco di differenti altezza. L’esempio potrebbe essere quello di una normalissima lista nella quale si susseguono più elementi affiancati l’uno all’altro. L’unica proprietà (a parte il position) che consente di affiancare due elementi blocco estraendoli dal normale flusso del documento è proprio il float, che però, come in questo caso, comporta non pochi problemi. Per capire subito di cosa sto parlando dai un occhio alla demo prima di proseguire nella lettura!.

Un esempio concreto da analizzare

Per concretizzare più nel dettaglio, osserviamo il comportamente di alcuni elementi flottanti rappresentati graficamente nell’immagine seguente e poniamoci insieme qualche domanda!

Analisi della metodologia float per affiacare elementi blocco.

Perchè il terzo elemento della lista cade?
Come da precedente figura l’elemento padre non è abbastanza ampio da poter contenere tutti gli elementi della nostra lista. Un elemento flottante non puà mai sporgere al di la del limite sinistro o destro del suo elemento contenitore (regola che è stata aggiunta solo nel livello 2) per fare in modo che automaticamente un box flottante vada a capo in assenza di spazio.

Perchè il terzo elemento, cadendo, si posiziona come in figura e non sotto il primo elemento?
Considerando i nostri 3 elementi, devi sempre ricordare che il limite esterno sinistro di un elemento che flotta (3) si troverà sempre a destra del limite esterno destro di un elemento fluttuante che si trova gia li (1) a meno che la parte superiore di (3) si trovi sotto la parte inferiore del (2). In poche parole un elemento fluttuante non può mai sovrapporsi ad un altro elemento fluttuante che si trova li gia in precedenza ed ecco perchè il terzo elemento, non avendo più spazio va a cadere e si va a posizionare affianco al primo elemento. In piu ricorda che un elemento fluttuante si posiziona sempre nel punto piu alto possibile ed in questo caso il punto piu alto possibile, considerando il precedente enunciato è proprio in corrispondenza del limite inferiore del secondo elemento. Se sei confuso, rileggi il tutto aiutandoti con carta e penna. E’ un metodo infallibili che utilizzo sempre anche io per capire meglio cosa sto leggendo!

La soluzione al problema

La proprietà Inline-Block
Vuoi mantenere l’altezza originale di ogni “li” per non tagliare via nulla ma garantendo al contempo un allineamento corretto? La soluzione è senza dubbio quella di non ricorrere al float ma di settare il display degli elementi su inline-block. Cosi facendo, potrai gestire facilmente anche l’allineamento verticale che in questo caso conviene, per motivi estetici, impostare su top.

.elements{
    display:inline-block;
    vertical-align:top;
    width:300px;

    /* Cross Browsing. Fix per IE6 e IE7 */
    *display:inline;
    zoom:1;
}

Nota bene…

Abbiamo deciso, dietro osservazione di Gabriele nei commenti, di aggiungere la porzione di CSS per rendere lo script cross-browser (la demo già lo era). Effettivamente il tutto non era chiarissimo e non saltava bene all’occhio il link che avevo riportato che comunque ti spiegava nel dettaglio in cosa consista la proprietà inline-block. Ti rimando lo stesso a quest’articolo per un’analisi più approfondita.!

Grazie per la collaborazione e scusate per la poca chiarezza!

I CSS4 sono tra Noi!!!

Ebbene si, il futuro è tra noi. Come hai detto? Non hai ancora imparato tutto quello che c’è da sapere sui CSS3 che già spunta fuori il working draft dei CSS livello4? Non preoccuparti più di tanto, come gia ti abbiamo detto molte volte i CSS di livello 3 sono da considerarsi quasi come una camera stagna, composti infatti da moduli, essi vivono in autonomia a prescindere dall’implementazione di nuovi selettori o regole portanti.

Documentazione

La documentazione parla chiaro: “This module is an early-stage Working Draft. If you are looking for a stable Selectors specification, use Selectors 3″. Questa è solo una bozza, se sei in cerca di specifiche stabili utilizza quelle inerenti ai selettori di terzo livello. Quindi non preoccupatevi, ne passerà di acqua sotto i ponti prima che il Livello 4 divenga stabile e utilizzabile.

Le novità

Di novità ce ne sono. All’interno della documentazione ufficiale è presente una comoda tabella riassuntiva di tutti i selettori con affianco specificato il livello di appartenenza! Ti ripropongo l’elenco della documentazione con esempi concreti.

Negation pseudo-class

/* Il seguente selettore intercetta nel documento html
tutti i pulsanti che non hanno come attributo "disable" */
button:not([DISABLED])

Matches-any pseudo-class

/* Il seguente selettore intercetta nel documento html
qualsiasi ancora appartenente ad un li che sia in stato hover o focus */
li a:matches(:hover, :focus)

Attribute selectors: Case-sensitivity

/* La seguente regola CSS andrà a stilizzare l'attributo frame
quando questo ha come valore "hsides" in tutte le sue forme
( HSIDES, hSides... etc ) */
[frame=hsides i] { border-style: solid none; }

The local link pseudo-class

/* La seguente regola previene i link che puntano alla pagina
corrente dall'essere sottolineati se e solo se fanno parte di nav.
La pseudo calsse in questione accetta un valore numerico non negativo
come argomento che indica il numero dei path level da intercettare. */
nav :local-link { text-decoration: none; }

Time-dimensional Pseudo-classes (current / past / future)

/* Il seguente selettore renderà gialli tutti gli elementi html indicati
tra parentesi durante il rendering del documento tramite sintesi vocale. */
:current(p, li, dt, dd){background: yellow;}

The indeterminate-value pseudo-class

/* Questo particolare selettore consente di agire sugli elementi della
user interface come ad esempio radiobutton o checkbox quando il loro
stato non si trova nella condizione di indeterminato, come nei casi di
pre-scelta di un gruppo di radio. */
:indeterminate{display:block;}

Structural pseudo-classes

/* E' molto simile a nth-child ma ha in più l'aggiunta della keyword "of"
che specifica maggiormente la selezione. In questo caso verranno intercettati
tutti i paragrafi dispari che hanno la classe text associata. */
p:nth-match(even of .text)

Grid-Structural pseudo-classes

/* Il selettore :column che ha come parametri uno o più selettori,
intercetta tutte le celle che soddisfano quella condizione. Accetta
inoltre anche valori interi e la notazione sia nella forma an+b
che even/odd. Il seguente esempio intercetta tutte le celle appartenenti
alle colonne con classe selected. */
:column(col.selected){background: yellow; }
E:nth-column(n)
E:nth-last-column(n)

Reference combinator

/* Questo selettore identifica le label(quando è in stato :hover
oppure :focus) per tutti gli input associati /for/ */
label:matches(:hover, :focus) /for/ input {color:red;}

Determining the subject of a selector

/* Con il simbolo $ si può identificare l'oggetto del selettore.
In questo caso il bordo verrà applicato all'elemento UL solo se avrà
al suo interno child li con classe "click" */
$ul li.click {border:1px solid red}

Conclusioni

Di novità ce ne sono, è tutto ancora in stato draft, quindi tieni d’occhio la documentazione per restare aggiornato su nuove implementazioni.

Il TechnologyBIZ si è svolto a Napoli martedì 8 e mercoledì 9 novembre 2011. È un’iniziativa euro-mediterranea dedicata all’ICT e all’innovazione, dove istituzioni, associazioni, grandi aziende e piccole imprese del Sud propongono creazioni per aggiudicarsi il premio dell’ Innovazione Applicata.

Noi c’eravamo, o meglio, non eravamo in gara, ma grazie a Fabio Lalli abbiamo avuto la possibilità di presentare comunque i nostri progetti in ottica della partnership con Indigeni Digitali.

I progetti sono Bookzingr (di cui faccio parte) ideato da Emanuele Calì, e Bisquits, di Alessandro Canessa (anche collaboratore su laboratoriocss) e Vittorio Grimaldi.

Bookzingr

Bookzingr è una piattaforma di social bookmarking che ti permette di gestire in modo semplice e veloce i tuoi bookmarks.

Oltre ad averli sempre a disposizione, i media (foto e video) presenti nelle pagine web che salvi con Bookzingr vengono automaticamente embeddati nel riepilogo dei tuoi bookmarks.

Puoi creare categorie per organizzare al meglio i tuoi bookmarks, puoi seguire quelli dei tuoi contatti e viceversa, li puoi taggare e condividere sui principali social network come Facebook, Twitter e Google Plus.

beta: www.bookzingr.com

Di seguito le slide della presentazione:

Bisquits

Bisquits è un social network per coder, che ti permette di creare la tua libreria personale di codici di programmazione e di condividerla all’interno di una community.

Nella tua libreria è anche possibile includere i codici scritti da altri utenti, codici che possono essere votati, condivisi e commentati.

Bisquits include anche Qloud, la piattaforma che ti consente il salvataggio delle tua libreria in remoto e l’accesso tramite un comodo sistema basato su CDN.

beta: www.bisquits.net

Di seguito le slide della presentazione:

I progetti hanno fatto la loro bella figura, tanto che siamo stati invitati anche l’anno prossimo con uno stand tutto nostro.

E’ stato tutto molto bello, davvero una bella esperienza, soprattutto quando vedi che i sacrifici cominciano a prendere forma. Ringrazio vivamente Fabio Lalli per questo.

Come ci ha detto uno degli organizzatori: “siate affamati, siate folli e visto che vi trovate a Napoli, siate anche incazzati”.

Alla prossima!