I più moderni browser integrano nuove proprietà CSS per la modellazione degli elementi. In Firefox, Safari e in tutti i browser che utilizzano il motore Webkit è possibile impostare gli angoli arrotondati di un elemento direttamente da CSS utilizzando le seguenti proprietà:

Firefox
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
 
Safari Webkit
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

Prosegui la lettura…

In alcuni progetti capita di dover organizzare alcune immagini nella pagina senza appesantire eccessivamente il layout. Partendo dalla base di un tutorial trovato in rete ho riadattato una galleria di immagini fatta totalmente in HTML e CSS rendendola più leggera e semanticamente corretta.
Prosegui la lettura…

CSS Sprites è una tecnica che, sfruttando le potenzialità dei figli di stile, consente di avere una singola immagine che racchiude diversi elementi grafici; consiste sostanzialmente nell’assemblare in un unico file le varie parti che compongono la grafica di un elemento o di una pagina web.

Pensiamo ad esempio alla casistica più comune dove vogliamo realizzare un pulsante che abbia un effetto di rollover al passaggio del cursore. Normalmente si avrebbero due immagini: la prima per lo stato “spento” e la seconda per lo stato “acceso”. CSS permette invece di unificare le due immagini in un singolo file mostrando la parte interessata tramite l’ausilio delle proprietà CSS.
Prosegui la lettura…

Disegnare un grafico di statistiche con linguaggi dinamici è una cosa abbastaza semplice, ma oggi vedremo come costruirne uno sviluppato interamente con l’ausilio dei CSS.
Prosegui la lettura…

In alcuni casi, per i notissimi problemi di interpretazione di Explorer (della versione 6 sopratutto), si deve ricorrere ai commenti condizionali che forniscono una versione del CSS alternativa sviluppata nell’ottica di rimediare ai problemi di visualizzazione.

Anche se non appoggio pienamente la seguente tecnica, in quanto comporta l’inserimento di codice non valido voglio segnalare un piccolo trucco che non in molti conoscono che consente di applicare lo stile solo ad Explorer.

.classe {
    height: 15px;   /*Tutti i browser*/
    #height: 15px;  /*Tutte le versioni di IExplorer*/
    *height: 15px;  /*Tutte le versioni di IExplorer*/
    _height: 15px;  /*IExplorer 6 o precedenti versioni*/
}

Cosi facendo il primo stile (standard e valido) viene letto ed interpretato da tutti i browser, il secondo e terzo preceduti dai simboli cancelletto e asterisco si riferische solo a IExplorer, mentre l’ultimo che utilizza l’underscore ci consente di applicare lo stile solo alle versioni uguali o precedenti alla 6.

Non consiglio un abuso di questa tecnica in quanto non valida, ma può risultare sicuramente utile per correggere vecchi progetti fatti da sviluppatori poco attenti o per gestionali web che non sono pubblici e non risentono direttamente di un eventuale codice poco pulito.