Perché questo articolo

Il tempo di IE6, per me, è giunto al termine. Non riesco e non voglio più garantire compatibilità per un browser degli anni 90 e non mi piace neanche dover ricorrere a javascript e quant’altro per “dopare” i vecchi browser e renderli compatibili con selettori e proprietà CSS3.

E’ inutile comprare una fiat Panda e pensare di montarci sopra un motore di una ferrari solo per correre più veloce, ti schianteresti dopo la prima curva perché mancherebbe una struttura idonea per supportare tali miglioramenti.

Mi è venuta l’idea di creare un articolo in cui analizzo ad oggi i selettori che IE7 supporta in maniera nativa, il tutto diviso per tipologie di selettori. Ne approfitto, per quelli che hanno da poco cominciato, per fare un ripasso con piccoli esempi pratici e spiegazioni.

Selettori base

I classici selettori (tag, classe singola e multipla, ID, discendenza, universale) sono pienamente supportati. Ecco alcuni esempi.

/* Selettore di tag */
p{...}

/* Selettore di classe singola */
p.class{...}

/* Selettore di classi multiple */
p.class.classtwo{...}

/* Selettore di ID */
p#id{...}

/* Selettore discendente */
p span{...}

/* Selettore universale */
*{...}

Tag, classe singola e multipla, ID

Oltre ai selettori di elementi (es:1) che consentono di selezionare un particolare elemento del DOM in base al suo tagName, esistono i cosiddetti selettori di classe e di ID (es 2, 3 e 4), che consentono di attribuire gli stili css con modalità indipendenti dagli elementi stessi. Se vuoi che un particolare elemento venga stilizzato in base ad una classe, nell’html dovrà essere inserita quella stessa classe o quello stesso ID come valore dell’attributo class o ID.

<style type="text/css">
    .red{color:red}
    #yellow{color:yellow}
</style>
<p class="red">rosso</p>
<p id="yellow">Giallo</p>

Discendente e universale

Molte delle potenzialità dei CSS si basano sulla relazione genitore-figlio degli elementi. Un selettore discendente serve proprio a selezionare elementi o classi/id di elementi che fanno capo ad un determinato padre. Nell’esempio numero 5, tutti gli elementi span contenuti in tutti i paragrafi del documento verranno selezionati e stilizzati. Differente invece è il selettore universale (es:6), che ci consente di selezionare indiscriminatamente tutti gli elementi della pagina o tutti gli elementi facenti capo ad un particolare tag con class o ID.

<style type="text/css">
p span{color:red} 
p *{color:yellow}
</style>
<p> <span>rosso</span> </p>
<p> <em>Giallo</em> </p>

Selettori di relazione

Fondamentali sono i selettori definiti di relazione perchè consentono tramite i combinatori, rappresentati dai simboli che vedremo tra poco, di selezionare elementi del DOM che sono in stretta relazione con altri. Tutte le seguenti tipologie sono supportate da IE7.

/* Selettore Figlio */
p > span{...}

/* Selettore di fratelli adiacenti */
p + span{...}

/* Selettore generale di fratelli */
p ~ span{...}

Selettore Figlio

Questo selettore differisce dal selettore di discendenza perchè avrà validità solo sui figli di primo livello. Il combinatore (>) indica alla selezione di fermarsi al primo livello di alberatura. Piccolo esempio:

<style type="text/css">
div > span{color:red;}
</style>

<div>
   <span>Il selettore avrà effetto</span>
   <p>
      <span>Il selettore NON avrà effetto</span>
   </p>
</div>

Selettore di fratelli adiacenti

Il simbolo (+) consente, all’interno di un selettore, di scorrere il DOM orizzontalmente per selezionare il diretto o i diretti fratelli immediatamente successivi.

<style type="text/css">
div + p{color:red;}
</style>
<div>
  <p>Il selettore NON avrà effetto</p>
</div>
<p>Il selettore avrà effetto</p>

Selettore di fratelli generici

Questo differisce da precedente perché elimina il vincolo della prossimità e consente di selezionare tutti i fratelli di pari livello sia contigui che non.

<style type="text/css">
div ~ p{color:red;}
</style>
<div></div>
<p>Il selettore avrà effetto</p>
<div></div>
<div></div>
<p>Il selettore avrà effetto</p>

Selettori di attributo

Questi selettori sono molto potenti. Consentono infatti di operare delle selezioni in base ai vari attributi e ai loro corrispondenti valori. La categoria dei selettori di attributi è costituita da diverse varianti della stessa tipologia di selettore. Ecco spiegato in breve quali sono e a cosa servono:

Selettore [attr]

Seleziona gli elementi che che posseggono l’esatto attributo indicato. Nel caso seguente tutte le immagini che hanno come attributo “alt” verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt]{border:1px solid red;}
</style>
<img alt="immagine" src="img.png" />

Selettore [attr=”value”]

Seleziona gli elementi che posseggono l’esatto attributo e il suo corrispondente valore indicato tra virgolette. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore “immagine”, verranno stilizzate con un bordo rosso.

<style type="text/css">
    img[alt="immagine"]{border:1px solid red;}
</style>
<img alt="immagine" src="img.png" />

Selettore [attr=”value”]

Seleziona gli elementi che posseggono l’esatto attributo e il suo corrispondente valore indicato tra virgolette. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore “immagine”, verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt="immagine"]{border:1px solid red;}
</style>
<img alt="immagine" src="img.png" />

Selettore [attr~=”value”]

Seleziona gli elementi che possiedono come attributo quello indicato nel selettore, il cui valore corrisponde ad una delle stringhe separate da spazi che compone il valore stesso. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore “molto”, verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt~="molto"]{border:1px solid red;}
</style>
<img alt="un'altra immagine molto bella" src="img.png" />

Selettore [attr^=”value”]

Seleziona gli elementi che possiedono come attributo quello indicato nel selettore e che possiedano come valore dell’attributo una stringa che comincia con la chiave indicata nel selettore. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che comincia con la parola “immagine”, verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt~="immagine"]{border:1px solid red;}
</style>
<img alt="immagine molto bella" src="img.png" />

Selettore [attr$=value]

Seleziona gli elementi che possiedono come attributo quello indicato nel selettore e che possiedano come valore dell’attributo una stringa che termina con la chiave indicata nel selettore. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che termina con la parola “bella”, verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt$="immagine"]{border:1px solid red;}
</style>
<img alt="molto bella immagine" src="img.png" />

Selettore [attr*=value]

In questo caso, il valore deve corrispondere per intero a quello contenuto nell’elemento, ma con la differenza che può trovarsi in qualsiasi posizione. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che contiene la parola immag”, verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt*="immag"]{border:1px solid red;}
</style><img alt="immagine molto bella" src="img.png" />

Selettore [attr|=value]

Il valore del selettore deve corrispondere a una stringa separata da trattini indicata nel selettore. Nel caso seguente tutte le immagini che hanno come attributo “alt” e come valore una stringa che contiene come prima parola immagine”, verranno stilizzate con un bordo rosso.

<style type="text/css">
img[alt|="molto"]{border:1px solid red;}
</style>
<img alt="immagine-molto-bella" src="img.png" />

Pseudo-elementi

Rispetto ad un paragrafo che può o meno avere una classe o un id, rispetto ad un ancora, rispetto ad un div o ad un qualsiasi altro elemento tangibile del DOM, gli pseudo elementi, possono essere definiti tali ed hanno un senso solo se è il CSS a darglielo. Per quanto riguarda i primi due (first-letter / first-line) non c’è moltissimo da dire. I selettori in se già spiegano tutto e non c’è bisogno di aggiungere altro.

/* Selettore di prima lettera */
p:first-letter{...}

/* Selettore di prima linea */
p:first-line{...}

/* Generare contenuto */
p:before, p:after{...}

Generare contenuto

Discorso diverso invece va fatto per :before e :after, pseuso elementi che consentono di generare contenuto prima o dopo un dato elemento. Il supporto di IE7 non è completo al 100%. Il browser li riconosce entrambi ma non consente di utilizzarli per generare contenuto al loro interno (testo o immagini), tramite la proprietà content. Ciò non toglie che è possibile utilizzarli per creare oggetti funzionali; primo tra tutti? Il clear. Vediamo come:

<style type="text/css">
.elem { *zoom:1; /*IE7 fix*/ } 
.elem:after{ 
   visibility:hidden; 
   display:block; 
   font-size:0; 
   content: "."; 
   height:0; 
   clear:both;  
}
</style>
Prima della chiusura del div verrà generato un elemento con quelle caratteristiche. Avremmo potuto dargli colore, larghezza, altezza e quant'altro poteva tornarci utile, ma nel caso del clear è tutto ciò che ci occorre. -->
<div class="elem">
Lorem Ipsum...
</div>

Pseudo-classi

Questi particolari selettori hanno effetto solo nel momento in cui il puntatore del mouse interagisce con gli elementi. Tempo fa scrissi un articolo sulla pseudo-classe active che per IE7 e versioni inferiori ha effetto solo sui link e su nessun altro elemento del DOM. Per quanto riguarda le altre non c’è molto da dire, sono le classiche pseudo-classi esistenti fin dalle prime specifiche.

a:link{...}
a:visited{...}
a:hover{...}
a:active{...}

Pseudo-classi strutturali

C’è ne sono diverse a nostra disposizione ma per questo articolo ce ne interessa una sola ed è first-child. A quanto pare questa pseudo-classe è supportata su IE7 a patto che non vengano aggiornati dinamicamente gli elementi del DOM. Il selettore identifica il primo elemento di un parent.

<style type="text/css">
ul.list li:first-child{ color:red; } 
</style>

IE7 CSS: in conclusione

Spero che dopo questo articolo tu possa lavorare con più serenità (si spera) strutturando il codice html e css in maniera tale da utilizzare il maggior numero di selettori compatibili con IE7.

Nell’ ultimo articolo avevo proposto 10 framework per creare progetti responsive, alcuni mobile first (orientati in primo luogo ai dispositivi mobile). Tuttavia gli sviluppatori che vogliono realizzare applicazioni o siti web esclusivamente destinati a smartphone e tablets, nella maggior parte dei casi non hanno bisogno di tutti gli stili CSS ed i componenti Javascrpt messi a disposizione da  framework che prendono in considerazione ogni dispositivo e browser.

Un altro aspetto da prendere in considerazione è quello delle animazioni fra le varie pagine: se vogliamo realizzare un progetto che visivamente si avvicini il più possibile alle applicazioni native, dobbiamo implementare delle transizioni come slide up, slide down, flip ecc., per il passaggio tra una vista ed un altra.

Una buona soluzione, oltre a quella di creare personalmente questi tipi di animazioni (a questo proposito voglio segnalare questo interessante tutorial: A collection of page transitions), è quella di affidarsi a framework appositamente creati; di seguito ho stilato una lista di 8 mobile frameworks che ho avuto l’occasione di provare personalmente.

Questi framework, insieme ad una lista di componenti dagli stili simili a quelli dei sistemi operativi mobili più famosi, presentano una semplice ed intuibile modalità d’uso.

App Framework – by Intel

Ottimo framework sviluppato dalla Intel: molto leggero, compatibile con jQuery, presenta stili CSS developer-friwndly, transizioni CSS3 fluide, theme builder e un set di temi già pronti per iOS, iOS7, Android (HOLO), Win8/WP8, and Blackberry 10.

jQuery Mobile

Si tratta forse del più famoso e diffuso, ottimizzato per tutti i più recenti dispositivi mobili, offre un codice abbastanza leggero e un’alta possibilità di personalizzazione dei temi. Personalmente trovo limitante il fatto che non dia la possibilità di sviluppare in MVC.

Sencha Touch

Sencha è un ottimo tool per la creazione di mobile apps; con stili facili da personalizzare e scritto in MVC, è uno dei migliori. Unica pecca, la documentazione e supporto devono essere acquistati.

APP UI

Interessante collezione open source di componenti HTML5 per la creazione di applicazioni mobile, promette di essere costantemente aggiornato. Presenta transizioni CSS3 e stili facilmente personalizzabili.

ChocolateChip-UI

Uno di quelli che preferisco maggiormente ed uno dei più recenti. Il solo (almeno per adesso) che fornisce un tema pronto stile iOS7, oltre a quelli Windows Phone e Android. Molto facile da personalizzare, presenta una buona collezione d componenti Javascript.

Ratchet

Framework molto semplice che offre componenti HTML, CSS, Jacascript di base ed una grafica abbastanza recente e facilmente modificabile, ottimo da usare come base di partenza per una applicazione mobile.

Fries

Presenta un set di componenti abbastanza vasto e una buona fluidità nelle animazioni. Molto indicato per sviluppare app in stile android.

jQ Touch

Un tool abbastanza buono per quanto riguarda animazioni e componenti, un po’ meno invece per i temi e la grafica, che sembra non restare molto al passo con i tempi.

Crea la tua mobile app in HTML, CSS3 e Javascript

Se sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato, dove troverai consigli e tecniche di cui ho creato per i miei clienti oltre 10 applicazioni mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?

Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua applicazione mobile fluida e reattiva come quelle native.