paitadesignblog » preview

CSS Pseudo-classi: come usarle su IE6+!

Giacomo Paita — Sun, 16 May 2010 09:31:40 +0000

Le pseudo-classi CSS sono utilizzate per aggiungere effetti speciali ad alcuni selettori e si riconoscono perchè hanno i "due punti " che precedono la dichiarazione. I CSS3 stanno per introdurre una gran quantità di nuove pseudo classi, che renderanno la vita dei webdesigner molto più facile (se si esclude la compatibilità con tutti i browser). Le pseudo-classi aiutano sia l’estetica e l’usabilità, e possono fare velocemente e facilmente cose che una volta erano difficili da ottenere.

Purtroppo, anche se alcune di esse appartengono già alle specifiche CSS 2.1, non sono supportate da nesusn browser IE. Ecco allora che ci vengono in aiuto alcune librerie JavaScript che uniformano il comportamento di IE ai browser più recenti.

IE7.js è una libreria JavaScript (100kb) per far sì che Internet Explorer 6+ si comporti come un browser standard-compliant. Essa risolve molti problemi legati a HTML, CSS e fa funzionare correttamente con IE5 e IE6 le PNG trasparenti.
Scarichiamola e scegliamo di includere il JavaScript che ci permette di aggiornare tutti gli IE alla versione 9, così:

Risorse Demo

Pseudoclassi: sintassi

Tutte le pseudo-classi seguono questa sintassi:

elemento:pseudoClasse {
...
}

Alcune pseudo-classi fanno uso anche delle parentesi. Per esempio, la pseudo-classe :not() dichiara quale regola CSS non applicare. Ciò è utile quando si desidera applicare qualcosa a tutto tranne a un certa classe/ID. Per esempio, questa dichiarazione:

.miaClasse:not(div) {
 background:#CCC;
}

imposta uno sfondo di colore #CCC per tutti gli elementi che non siano div.

Utilizzo delle pseudo-classi

Pseudo-classi correlate ai link

Queste pseudo-classi applicano degli stili ai diversi stati di un link. Ecco di seguito la lista completa e cosa possiamo ottenere:

:link applica uno stile a un link non visitato
:visited applica uno stile a un link visitato
:hover applica uno stile su un elemento al passaggio del mouse
:active applica uno stile a un elemento attivo. Per esempio, un link è attivo da quando ci si clicca a quando si rilascia il click

A questo riguardo occorre ricordare che l’ordine sopra indicato non è casuale: in fatti, ogni pseudo-classe link-related ha una sua specificità.
Esiste una sorta di short-hand per ricordarsi la corretta successione: prendendo la lettera iniziale di ogni stato si ottiene "LVHA", che può essere ampliato a "LoVe HAte".

Pseudo-classi correlate a Input & link

:focus applica uno stile a un elemento in uso. Per esempio, quando si scrive dentro una textarea, in quel momento essa è in uso
:target se si dispone di un URL tipo index.html#about, questo permetterà di applicare i CSS per l’elemento con id="about"
:enabled seleziona tutti gli elementi input in stato enable
:disabled seleziona tutti gli elementi input in stato disabled
:checked controllato nelle caselle di immissione selezionate
:indeterminate seleziona i radio e i check-box, quando essi non sono né selezionata né non selezionata
:required seleziona gli elementi input che sono required
:optional seleziona gli elementi input che sono optional
:invalid seleziona input non validi
:in-range selziona elementi che sono in un range (da utilizzare con input type="range" in HTML5)
:out-of-range seleziona elementi fuori dal range
:default seleziona l’elemento di default, per esempio, in un form il bottone submit
:valid seleziona un campo input valido (HTML5)

Pseudo-classi correlate alla posizione/numero

Ecco un esempio:

:root applica uno stile CSS all’elemento radice, ossia il tag in un documento HTML
:first-child applica uno stile al primo figlio di un elemento
:last-childapplica i CSS all’ultimo elemento contenuto. Esempio div p:last-child seleziona l’ultimo paragrafo d un div
:nth-child(N) seleziona elementi numerati, su base 1. Per esempio, p:nth-child(3) seleziona l’elemento p che è il terzo figlio. Si possono anche aggiungere regole, per esempio p:nth-child(2n+1), dove n è il numero di partenza partendo da 0 e viene incrementato di 1. Perciò, questa regola seleziona tutti gli elementi pari (odd): in questo caso è equivalente a scrivere nth-child(odd), così come per i dispari si scrive nth-child(even)
:nth-of-type(N) applicare i CSS a un elemento numerato di un certo tipo. Per esempio: div:nth-of-type(2) seleziona il secondo di quel tipo
:nth-last-of-type(N) seleziona un elemento in base alla sua posizione, per esempio nth-last-of-type(4)
:first-of-type applica i CSS solo al primo alemento di quel genere. Per esempio, se ci sono due div consecutivi, applica la regola solo al primo
:last-of-type Seleziona l’utlimo elemento di un genere
:only-child seleziona un elemento solo se è l’unico figlio del contenitore padre
:only-of-type seleziona un elemento solo se esso è l’unico nel suo genere contenuto nell’elemento padre

Pseudo-classi relazionali

:not(elemento | classe) applica una regola CSS solo agli elementi che non sono specificati tra le parentesi
:empty applica i CSS a un elemento solo se è vuoto

Pseudo classi e paseudo elementi legati al testo

Pseudo-elementi

:first-line definisce lo stile CSS della prima riga di un elemento
:first-letter definisce lo stile CSS del primo carattere di un elemento

Pseudo-classi

:lang() applica uno stile a un elemento che usa una lingua specifica, per esempio :lang(en) per l’inglese. È quindi possibile mettere lang = "en" in un tag HTML e impostare gli stili solo per esso
::selection permette di cambiare lo stile del testo selezionato nel browser
:read-only seleziona gli elementi che sono read-only
:read-write seleziona la parte editabile in un elemento

Content-related pseudo-elementi

:before è in grado di aggiungere contenuti prima di un certo elemento
:after è in grado di aggiungere contenuti, dopo un certo elemento

jQuery: pseudo-selettori CSS3

jQuery permette di usare tutti questi selettori, per esempio:

:first funziona come :nth-child(1)
:eq(X) è uguale a :nth-child(X)
:contains('text')
:lt(X)come :nth-child(-n+X), seleziona “i primi X elementi”
:gt(X) è come :nth-child(n+X), seleziona tutto tranne “i primi (X-1) elementi”
:even è come :nth-child(even) o :nth-child(2n)
:odd è uguale a :nth-child(odd) o :nth-child(2n+1)
:has(S) controlla se l’elemento contiene un certo discendente

Oltre a questi ve ne sono molti altri.

Selettori di discendenza

C’è una differenza tra figli e discendenti?

Vediamo come impostare degli stili CSS per capire come funzionano il combinatore figlio diretto, il combinatore fratello adiacente, e il combinatore fratello di pari livello.

Child: combinatore "figlio diretto"

Nel codice sottostante, dichiariamo una discendenza generica (Combinatore del discendente – Descendant), e di seguito, una diretta.

#child  p { color: #000;font-weight:normal; }
#child > p { color: #F00;font-weight:bold; }

Adjacent sibling: combinatore "fratello adiacente"

Ecco come funziona adjacent sibling: in pratica appica lo stile all’elemento, se e solo se, esso è immediatamente successivo altro elemento indicato.

p + p { font-size: smaller; }
/* Applica lo stile solo al paragrafo che ne segue un altro (adiacente) */
#intro + ul { margin-top: 0; }
/* Applica lo stile solo alla lista che segue direttamente un elemento con  ID intro */

General sibling: combinatore "fratello generico"

General sibling è molto simile ad adiacent sibling: la differenza è che l’elemento che viene selezionato non ha bisogno di essere immediatamente successivo al primo elemento, ma può apparire ovunque dopo di esso. Ecco un esempio di general sibling:

p ~ p { background-color:#0F0; color:#FFF; padding:10px; }

Letture consigliate

Cleaner Code with CSS3 Selectors
Sitepoint: CSS3 Pseudo-classes
What is Modernizr?
IEe7-js.googlecode
Sizzle: A pure-JavaScript CSS selector engine
Enable CSS pseudo-element selectors in Internet Explorer with IE
The Mysterious Pseudo Class in CSS
Child and Sibling Selectors
Meet the Pseudo Class Selectors
CSS2 Test Suite: Prototypical Pages
Pseudo Elements Guide
CSS Pseudo Elements: The Syntax
I selettori combinatori nei CSS3
Selettori CSS3 cross-browser con jQuery

CSS3: compatibilità cross-browser…da oggi!

Giacomo Paita — Mon, 29 Mar 2010 21:59:27 +0000

Novità in arrivo per i webdesigner: i CSS3! Ci sono infatti interessanti innovazioni in cantiere per i CSS, che consentiranno dare di sfogo alla creatività nel web design. Realisticamente però, non saremo in grado di utilizzarli, a causa della compatibilità offerta dai browser, per progetti professionali, ancora per qualche anno. Ma per i blog e siti di web design rivolti alla comunità di web designer, queste caratteristiche possono aiutare a spingere i confini del web design moderno, aggiungendo qualche caratteristica extra al design, per sperimentare e prendere confidenza con quello che aspetta nel futuro del settore CSS.

L’introduzione dei CSS3 permetterà di realizzare siti web più flessibili e di ridurre i costi di sviluppo e di manutenzione. Per utilizzare già adesso la maggior parte delle proprietà CSS3, dobbiamo usare le specifiche estensioni del browser assieme alle proprietà originali. Le estensioni più comuni sono quelle usate per i browser basati su WebKit (per esempio, Safari), che iniziano con -WebKit, e browser basati su Gecko (per esempio, Firefox), che si aprono con -moz-. Konqueror (-KHTML-), Opera (-o) e Internet Explorer (-ms-) hanno le loro estensioni proprietarie. Come designer professionisti, dobbiamo tenere a mente che l’utilizzo di queste proprietà specifiche non permettere di validare i fogli di stile. Ma in alcuni casi, per sperimentare o per apprendimento, possiamo affiancarla alle proprità CSS validate.

Ma esattamente quali tecniche CSS3 possiamo già usare oggi?

Ecco di seguito le principali novità CSS3 e la compatibilità con i maggiori browser, da testare con i file di esempio.

Risorse e demo

CSS3: angoli arrotondati

Ecco il codice, utilizzato per realizzare i bordi arrotondati:

.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
     border-radius: 12px; /* Opera 10.5, IE 9 */
	}

Firefox 1+
Safari3+
Chrome
Opera 10.5
IE 9

Una valida soluzione alternativa, realmente cross-browser (compreso IE6+), basata su JavaScript, è rappresentata da jQuery Corner. Update! Ecco come risolvere il bug dei bordi arrotondati su immagini di sfondo.

CSS3: ombra esterna

Le nuove dichiarazioni CSS3 permettono di proiettare ombra esterna da un oggetto. Per tutti i browser, tranne IE6-7-8, dopo la dichiarazione della proprietà, il primo valore consente di spostare l’ombra lungo l’asse x, il secondo la muove sull’asse delle y, il terzo gestisce il livello di blur, mentre l’ultimo definisce il colore. le versioni di IE sotto la 9, utilizzano invece filter.

Ecco un un esempio di elementi con ombra esterna:

.box_shadow {
	-moz-box-shadow: 0px 0px 4px #000000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 4px #000000; /* Opera 10.5, IE 9.0 */
    filter: /* IE6,IE7 e IE8 */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) /* top */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) /* left */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) /* bottom */
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5);  /* right */
}

Firefox 3.5+
Safari3+
Chrome
Opera 10.5
IE6+

CSS3: sfumatura a gradiente verticale

Ecco cosa usare e per ottenere una sfumatura verticale. Da notare il mancato supporto di Opera:

.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
}

Firefox 3.6
Safari4
Chrome
IE6+

CSS3: effetto traparenza

Ecco come settare i CSS per ottenere un effetto trasparenza cross-browser. Di seguito il codice (notiamo che il filtro si comporta in questa maniera: il codice completo è #60CCFF00 dove 60 è l’Alpha, mentre il codice colore vero e proprio è CCFF00. Attenzione!):

.box_rgba_1 {
	background-color: rgba(204, 255, 0, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00'); /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#60CCFF00',endColorstr='#60CCFF00')"; /* IE8 */
}

Firefox 3+
Safari3+
Opera 10.10+
Chrome
IE6+

CSS3: rotazione

Ecco come realizzare una rotazione cross-browser solo con i CSS: per prima cosa scaricate il file -ms-transform.htc e salvatelo nella cartella dei file CSS. Poi settate le regole come segue:

.rotate {
	behavior:url(-ms-transform.htc); /* IE6+ */
    -moz-transform:rotate(45deg); /* FF3.5+  */
    -webkit-transform:rotate(45deg); /* Saf3.1+, Chrome */
    -o-transform:rotate(45deg); /* Opera 10.5 */
    -ms-transform:rotate(45deg); /* IE */
}

Firefox 3.5+
Safari3.1+
Opera 10.5+
Chrome
IE6+

…ed ecco come appaiono dei div ruotati.

CSS3: @font-face

Prima di iniaziare, ecco una guida essenziale al @font-face.
Scarichiamo un font e generiamo le regole CSS3.
La regola di base che ci serve per includere i font in pagina poggia sulla direttiva @font-face: occorre definire una regola @font-face per ciascun font che intendiamo utilizzare:

@font-face {
	font-family: 'IlMioFont';
	src: url('ballpark_weiner.eot'); /* IE6+ */
	src: local('Ballpark'),
		 local('IlMioFont'),
		 url('ballpark_weiner.woff') format('woff'), /* FF3.6 */
		 url('ballpark_weiner.ttf') format('truetype') /* Saf3+,Chrome,Opera10+ */
	;
}

…e usare i nostri font nelle dichiarazioni CSS consuete. In questo modo:


#ilMioSelettore {
	font:30px 'IlMioFont', Georgia, serif;
	color:#000;
}

Firefox 3.6+
Safari3+
Opera 10+
Chrome
IE6+

Letture consigliate

Trasformazioni CSS cross-browser con cssSandpaper
CSS3 Solutions for Internet Explorer
Testare i CSS3
CSS3 Please: generatore di CSS3
Tutte le info aggiornate sui CSS3
CSS Fundamentals: CSS 3 Transitions
Integrare CSS3 e jQuery
Usare i CSS3 oggi