paitadesignblog » CSS

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

Articoli correlati:

CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Giacomo Paita — Sun, 02 May 2010 10:11:00 +0000

Vi è mai capitato di voler ottenere tramite CSS un layout che ricordi quello dei tradizionali quotidiani cartacei? Per chi volesse cimentarsi con i CSS3, sono già a disposizione alcuni generatori di CSS3 che consentono di testare uno dei nuovi moduli che dispone il testo su più colonne: CSS multi-columns
Vediamo di seguito come funziona questo modulo e quali sono i browser compatibili con CSS3 Columns.

CSS3 Columns

Attualmente solo Firefox, Safari e Chrome sono compatibili con il multi-columns. Mozilla utilizza il prefisso speciale moz-, mentre l’implementazione per Safari utilizza il prefisso -webkit, che abbinati alle regole ufficiali, permettono di creare layout multi-columns:

.columns {
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -moz-column-rule: 1px solid black;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  -webkit-column-rule: 1px solid black;
  column-count: 3;
  column-gap: 1em;
  column-rule: 1px solid black;
}

I browser ad oggi compatibili sono:

Firefox 1.5+
Safari 3+
Chrome
IE 9

Di seguito nel dettaglio ecco cosa abbiamo appena specificato per dividere il layout in colonne.

Risorse Demo

Column-count: come definire il numero di colonne

Abbiamo impostato column-count:3 per dividere il div che contiene il testo in tre colonne di uguale larghezza. Abbiamo inoltre specificato uno spazio tra le colonne, il column-gap:1em, che agisce come la proprietà padding, aumentando notevolmente la leggibilità. Notiamo che l’altezza delle colonne si adatta al contenuto di testo e che, aumentando il numero dei caratteri o la dimensione del testo, essa si adatterà per contenerlo. Di seguito il codice CSS3 che dovremo scrivere:

  column-count: 3;
  column-gap: 1em;

Column-width: impostare la larghezza delle colonne

Un altro modo per definire le colonne è impostare solo il column-width (e, come per l’esempio precedente, il column-gap). Per esempio, defininendo un column-width di 200px, tutte le colonne avranno 200 pixel di larghezza: il browser calcola di conseguenza quante colonne di questa larghezza possono inserirsi nell’elemento contenitore, e le crea in base a questo valore. Anche in questo caso, l’altezza delle colonne è definita dal contenuto testuale. Ecco cosa dobbiamo scrivere:

  column-width: 200px;
  column-gap: 1em;

Column-rule: dividere le colonne con dei filetti

La proprietà column-rule agisce come una sorta di border tra le colonne. Questa regola ha infatti le stesse proprietà del border: (larghezza, stile e colore), e come per esso, possono essere scritte tramite "shorthand":

/*Shorthand per column-rule*/
column-rule:1px solid black;
/*che equivale a:*/
column-rule-color: #000;
column-rule-style: solid;
column-rule-width: 1px;

Column-span: intestazione su più colonne

Questa proprietà non è ancora supportata da nessun browser.
Ecco cosa imposteremo nei fogli di stile con la regola CSS3 per espandere il titolo su più colonne::

/*Settiamo il numero delle colonne: n | all*/
column-span: all;

Colonne CSS3 cross-browser: Columnizer jQuery

Come abbiamo potuto notare, siamo ancora lontani dal poter utilizzare nella pratica la proprietà CSS3 multi-columns. Il framework jQuery ci mette però a disposizione un plugin che fa esattamente quanto abbiamo visto fin’ora. Ecco cosa dobbiamo fare: scarichiamo Columnizer jQuery Plugin e colleghiamolo alla nostra pagina HTML da dividere in colonne, così:

Scriviamo poi in pagina il nostro contenuto, agganciandovi una classe, per esempio columns:

CSS3 e jQuery multi-column module

  The Columnizer jQuery Plugin will automatically layout your content
  in newspaper column format. You can specify either column width or a static
  number of columns. And, of course, it’s easy to use!

Adesso agganciamo il plugin a questa classe, così:

$(document).ready (function() {
  $('.columns').columnize({columns:2});
});

Ecco cosa succede: il plugin suddivide il contenuto in div ai quali assegna una classe column: alla prima aggancia la classe first, all’ultima la classe last.

jQuery e le colonne ad altezza uguale

Terminiamo con un ottima funzione che permette di impostare uguale altezza per elementi flottanti, semplicemente includendo questo script e agganciandolo al .mioElementoFloattante:

$(document).ready(function(){
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
} ;
equalHeight($(".mioElementoFloattante"));

});

Di questa funzione è stato realizzato anche un plugin.

Letture consigliate

NetTuts: Quick Tip: The Multi-Column CSS3 Module
CSS3 Multi-Column Thriller
CSS3 Multi-column layout module
Smart Columns w/ CSS & jQuery
CSS3 multi-column: pagina di test
Multi-column layout: CSS3 Previews
W3C Multi column
CSS3 multiple columns
A list apart: css3 multicolumn
Equal Height Columns with jQuery
Few-column list
Implementare i CSS3 con jQuery

Articoli correlati:

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

Articoli correlati:

Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità

Giacomo Paita — Tue, 09 Feb 2010 21:45:11 +0000

Rimuovere il bordo tratteggiato dei link in Firefox è relativamente semplice, è sufficiente impostare una regola CSS per i link per assicurarci che non compaia più. Ma facendo questo, non si tengono in considerazione alcuni principi di usabilità per gli utenti che non hanno la possibilità di usare il mouse, e che hanno la necessità di qualche indicazione visiva che segnali loro un collegamento attivo. Per impostazione predefinita, TAB e SHIFT + TAB permettono di spostarsi da un elemento attivabile (collegamenti, i form e textarea) a quella successivo.

La prprietà outline disegna una linea tratteggiata intorno all’elemento cui è applicata: outline è simile a border, nel senso che viene disegnata una linea intorno all’elemento, fuori dal bordo dell’elemento, ma a differenza di border, non è impossibile impostare una larghezza diversa per ogni lato, oppure impostare i colori e stili diversi per ogni lato. La struttura è la stessa su tutti i lati.

La proprietà outline non intacca il box model, non viene aggiunto in alcun modo alla larghezza o altezza dell’elemento.
Per azzerare la sua comparsa, settiamo così i CSS:

a {
	outline:none;
}

Così facendo lo abbiamo azzerato completamente per tutti gli stati del link, per esempio:

/* link - yellow */
/* link visitato - cyan */
/* mouse over sul link - firebrick */
/* link selezionato - lawn green */

a.one:link {color: yellow}
a.one:visited {color: #00FFFF}
a.one:hover {color: #B22222}
a.one:active {color: #7CFC00}

non avranno il bordo tratteggiato.

C’è da notare che le pseudoclassi per funzionare correttamente devono, a causa delle regole della Ereditarietà, cascade, conflitti tra stili, seguire un ordine ben prestabilito: l’ordine in cui vanno inserite in un CSS le dichiarazioni relative ai link è:

link
visited
hover
active

Per venire incontro alle esegenze estetiche senza intaccare l’usabilità, la soluzione migliore tra le tante, è settarlo a none solo per lo stato hover e active

a:hover, a:active { outline: none; }

Siamo così sicuri che gli utenti che utilizzano la tastiera potranno vedere i bordi tratteggiati quando scorreranno col TAB su un link e attiveranno lo stato focus.

Letture consigliate

Outline
Outline: description
Removing The Dotted Outline
Don’t remove the outline from links
Remove Dotted Outline VS Accessibility
Removing Dotted Border on Clicked Links
Better CSS outline suppression
Remove the outline from links on :active only
Don’t Lose Your :focus

Articoli correlati:

Cheat Sheets per il Web Design

Giacomo Paita — Fri, 29 Jan 2010 19:37:29 +0000

Le Cheat Sheets per il Web Design sono degli strumenti utili per ricordare le cose in fretta, soprattutto se si parla di sintassi di codice che magari non scriviamo tutti i giorni, e per avere un aiuto veloce con facili riferimenti visivi.
Se abbiamo dimenticato il nome di una funzione o la proprietà di un foglio di stile CSS – le Cheat Sheets forniscono le informazioni che stiamo cercando – immediatamente.

Le Cheat Sheet sono uno strumento di riferimento che fornisce semplici, brevi istruzioni per realizzare un compito specifico.

Ecco quindi di seguito una selezione di riferimenti rapidi per numerosi linguaggi e tecnologie web, gratuiti e stampabili:

ASCII – Caratteri speciali

Character Entity References in HTML 4 and XHTML 1.0
HTML: Special Characters
Decimal ASCII code, Reference, URL code and HTML entity
HTML special character reference
HTML – Special Entity Codes
Using HTML Symbol Entities

Colori e web

Coloreminder.com; find colors palette easily and inspiration
RGB Hex Colour Chart
Web safe color chart
The browser safe colors

CSS

CSS2.1 Sheet
CSS3 Sheet
CSS Shorthand Guide
CSS Property Index
CSS Cheat Sheet (V2)
CSS Cheat Sheet: Inheritance, Cascade, Specificity
CSS Shorthand Cheat Sheet
CSS Properties and Values
Esempi di utilizzo di CSS
Will the browser apply the rule(s)?

CSS3

Tutto quello che c’è da sapere su CSS3

Google

Google Guide Quick Reference: Google Advanced Operators
The Google Cheat Sheets: Everything You Need To Know

Freelance

Esempio di contratto per prestazione occasionale
Pubblicare un sito web: verifiche e controlli preventivi

HTML 5

HTML 5 Visual Cheat Sheet (Reloaded)
HTML 5 Cheat Sheet

HTML/XHTML

HTML Cheat Sheet
HTML Codes Cheat Sheet
Character Entity References in HTML 4 and XHTML 1.0
HTML Cheat Sheet: quick reference guide
A Simple Guide To HTML
Browser Compatibility Master Table
HTML/XHTML in one page

jQuery

jQuery 1.4 Cheat Sheet
Woork: jQuery Visual Cheat Sheet

Lorem Ipsum generators

Render dummy text in English, French, German…

Mac OS

The OS X Keyboard

Programmi Adobe

Dreamweaver CS4: Cheat Sheet and shortcuts
Photoshop: Toolbox Reference
Flash CS4: PC Shortcuts

SEO

Web Developer’s SEO Cheat Sheet

Tipografia e Font

The New CSS Font-Family List
Approximate Conversion from Points to Pixels
PX to EM conversion made simple.
Compare screen type
16 Gorgeous Web Safe Fonts To Use With CSS
Top 10 (Web Safe) Blogging Fonts
How safe are Web-safe Font Families really? Font preview

UI and wireframing

Sketching & Wireframing kit free set
UI and wireframing tools
Browser Safe Area

Windows

Alt Key + Numeric Codes

WordPress

WordPress Cheat Sheet
WordPress Help Sheet in Italiano

Cheat Sheet per tutto, tutte insieme!

All cheat sheets, round-ups, quick reference cards.

Letture consigliate

30+ CSS Cheat Sheets & Quick Reference Guides
70+ Practical Cheat Sheets For Web Designers And Developers
16 useful Mac cheat Sheets

Articoli correlati:

CSS: immagine di sfondo a tutto schermo

Giacomo Paita — Mon, 28 Dec 2009 11:16:05 +0000

I siti web con immagine di sfondo a tutto schermo sono di sicuro molto eleganti e di grande effetto, perchè allargano la percezione dello spazio dietro ai contenuti principali, e se le fotografie sono "d’autore", il layout può essere minimalista e lasciar parlare solamente le immagini.

Vediamo di seguito non solo come impostare una immagine di sfondo, ma anche come fare affinchè l’immagine si adatti alla pagina del browser, senza usare javascript, ma solo CSS.

Immagine di sfondo al 100%

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.

Ecco il codice HTML…

…a cui associamo queste riche di CSS:

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#sfondo{
	position:absolute;
	height:100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Ecco come appare il nostro esempio.

Immagine di sfondo scalabile

Un limite dell’esempio precedente è che l’immagine, adattandosi alla dimensione della pagina, di fatto si distorce. Vediamo come poter aggirare il problema.
Inseriamo in pagina questo:

Ed ecco come impostare il CSS relativo:

html, body, #bg, #bg table, #bg td {
	height:100%;
	overflow:hidden;
	width:100%;
}

#bg div {
	height:200%;
	left:0;
	position:absolute;
	top:0;
	width:200%;
}

#bg img {
	margin:0 auto;
	min-height:50%;
	min-width:50%;
}

#bg td {
	text-align:left;
	vertical-align:top;
}

Per vedere il risultato, ecco la pagina di esempio.

jQuery: Immagine di sfondo scalabile!

Ecco un aggiornamento al post con il quale segnalo un semplice plugin di jQuery che permette di aggiungere un’immagine di sfondo ridimensionata dinamicamente a una pagina qualsiasi. L’immagine verrà allunagata per adattarsi alla pagina, e verrà automaticamente ridimensionata quando l’utente cambia la dimensione della finestra.
Il plugin si chiama jQuery Backstretch, ed ecco come inserirlo:

Letture consigliate

Perfect Full Page Background Image
How to: CSS Large Background
100 percent background image in css
Inspiration: 80 Large Background Websites
Inspiration: Backgrounds In Web Design: Examples And Best Practices

Articoli correlati:

CSS: Bottoni espandibili con una sola immagine

PHP CSS o jQuery: come evidenziare la pagina corrente nel menù di navigazione

Giacomo Paita — Sun, 27 Dec 2009 19:23:26 +0000

Quando i visitatori navigano nel nostro sito, è importante fare in modo che abbiano più informazioni possibili: dalla semplice visione di insieme, alla rintracciabilità delle sezioni corrette in relazione all’informazione cercata. Ai fini dell’usabilità, è inoltre importante segnalare in ogni pagina in quale sezione o punto del sito ci si trova. Per fare questo in modo automatico, utilizzeremo un po’ di programmazione in PHP e assegneremo al menù degli stili tramite i CSS.

Il primo metodo che suggerisco consente di segnalare la pagina corrente in modo dinamico, ma ha il limite di non poter essere utilizzato con menù che sfruttano la tecnica CSS dello "sprite image". Il secondo metodo sfrutta il body id ed è compatibile con lo "sprite image", ma non è dinamico.

PHP: evidenziare la pagina corrente in modo dinamico

Ecco un esempio di menù di navigazione generico per un sito web:


  
    Home
    Identity
    Logo
    Small Graphic
    Video
    Contatti

Salviamolo come file esterno nella cartella dei file inclusi e al suo posto scriviamo in pagina queste righe di codice:

(.*)|U", "$1", $menu);
	echo $menu;
?>

Ecco cosa stiamo facendo: memorizziamo nella variabile menu il nostro menù di navigazione.
Utilizziamo poi la funzione basename che restituisce, dato un percorso, la componente di questo identificata da un nome di file ($_SERVER è un array contenente delle variabili impostate dal Web Server oppure direttamente legate all’ambiente di esecuzione dello script corrente; PHP_SELF restituisce il nome del file dello script correntemente in esecuzione), e la memorizziamo nella variabile base. Nella riga successiva preg_replace effettua una ricerca di una espressione regolare e la sostiutisce: in questo caso ricerca il link con attributo href uguali alla pagina in cui ci troviamo e lo sostituisce con un elemento li con assegnata la classe current, che definisce lo stile da assegnare al link della pagina corrente.
Infine tramite echo $menu stampiamo in pagina il menù. È da notare che stiamo sostituendo un link con un elemento list-item, in modo tale che il collegamento alla pagina in cui siamo non sia attivo.

CSS: evidenziare la pagina corrente con il body id

Se per esigenze di layout abbiamo impostato il menù tramite la tecnica cosiddetta “css sprite image“, non possiamo utilizzare la programmazione come nell’esempio precedente, ma possiamo evidenziare la pagina corrente nel menù di navigazione dichiarando un id specifico per il tag body e assegnando nel foglio di stile un comportamento specifico per il link della pagina in cui siamo. Ecco un esempio di codice html:


...

  
    Home
    Identity
    LogoSmall Graphic
    Video
    Contatti
  

...

Ed ecco come impostare il codice CSS associato:

/* pagina "Logo" */
#logo #main_nav #main_nav_logo a {
  background:url(../gfx/main_nav.gif) no-repeat -90px -61px; /*Posizionamento dell'immagine per evienziare la pagina corrente */
}

Come rendere questo esempio più dinamico? Possiamo sfruttare anche in questo caso gli snippet PHP che abbiamo usato nell’esempio precedente:

">

...

In questo modo l’ID dela pagina sarà uguale all’indirizzo della pagina in cui è inserito il menù.

jQuery: evidenziare la pagina corrente in modo semplice!

Ecco un esempio di codice per il menù di navigazione che si autoevidenzia con jQuery:


 
  Home
  Chi sono
  Cosa faccio
  Dove sono

Occorre prima scaricare il plugin jQuery URL Parser e poi scrivere queste righe di codice:

	$page = jQuery.url.attr('file');
	if(!$page) {
		$page = 'index.html';
	}
	$('ul.navigation li a').each(function(){
		var $href = $(this).attr('href');
		if ( ($href == $page) || ($href == '') ) {
			$(this).addClass('on');
		} else {
			$(this).removeClass('on');
		}
	});

Letture consigliate

jQuery and CSS: highlight the current page in a navigation
Showing current page with PHP
Highlight current page in navigation with PHP
Setting the current menu state with CSS

Suggeriscimi un argomento!

CSS e float: blocchi flottanti e altezza del contenitore. Le soluzioni

Giacomo Paita — Tue, 08 Dec 2009 17:53:25 +0000

In questo articolo precedente, che riguardava i modi per ottimizzare il nostro CSS per rendere uniforme la visualizzazione del nostro sito su tutti i maggiori browser, abbiamo affrontato il bug di IE6 che riguarda l’altezza di un blocco contenente dei blocchi flottanti. Dato che questo comportamento errato del browser è uno dei primi problemi a cui un webdesigner deve fare fronte, e spesso risulta incomprensibile, facciamo il punto della situazione e vediamo tutte le soluzioni possibili.

Ma prima, partiamo dal problema.

Blocchi flottanti e altezza del contenitore: perchè ti comporti così?

Dobbiamo realizzare un layout che preveda una impaginazione a due colonne e un footer: assegnamo ai nostri blocchi la proprietà float: left, definiamo una larghezza per entrambi in modo tale che non superi la larghezza del blocco contenitore, inseriamo il footer, cui assegnamo la proprietà clear: both e se abbiamo fatto tutto senza errori dovremmo ottenere cioò che ci aspettiamo, cioè che l’altezza del contenitore si adatta a quella dei blocchi flottanti, e invece in tutti i browser (tranne che in IE6, che apparentemente, si comporta correttamente) l’altezza del contenitore non varia, in quanto i blocchi flottanti sono a tutti gli effetti sottratti dal flusso della pagina.
Questo comportamento, che potrebbe sembrare assurdo, ha in realtà una spiegazione: esso è necessario per gestire, per esempio, l’altezza di paragrafi contenenti immagini flottanti. Se l’altezza del paragrafo fosse determinata dall’altezza dell’immagine flottante, il testo del successivo paragrafo non potrebbe salire e disporsi attorno all’immagine stessa. Non è ancora chiaro? Ecco una pagina di esempio con il comportamento corretto e quello errato.

Ecco di seguito i fix per fare in modo che tutti i browser abbiano un comportamento uniforme:

1) Inserire un elemento vuoto con "clear: both"

Questa tecnica ristabilisce il normale flusso della pagina inserendo dopo gli elementi flottanti un elemento vuoto con proprietà clear: both. Il punto debole di questa tecnica è l’inserimento in pagina di un elemento con valore semantico pari a zero. Ecco un esempio:


  Contenuto del blocco
  Contenuto del blocco

Ed ecco come impostare correttamente i CSS:

#contenitore {
	width:700px;
  background:#C30;
}
.floatLeft {
  float:left;
  background:#0C0;
  color:#FFF;
  padding:20px;
  width:50px;
  margin:0 50px 0 0;
}
.clearBoth {
	clear:both;
}

2) Utilizzare la pseudoclasse :after

Utiliziamo la pseudoclasse :after per aggiungere un "punto invisibile" al termine del contenitore:

Ecco la pagina di esempio.

3) Utilizzare overflow:hidden

Ecco la soluzione più semplice:

Di seguito il codice css…

div.container {
   border: 1px solid #000000;
   overflow: hidden;
   width: 100%;
}

div.left {
   width: 45%;
   float: left;
}

div.right {
   width: 45%;
   float: right;
}

…ecco la pagina di esempio.

Letture consigliate

All About Floats: What is “Float” and What are floats used for?
The Mystery Of The CSS Float Property
Simple clearing of floats
Clearing floats
Tre proprietà speciali: display, float clear
How To Clear Floats Without Structural Markup

Articoli correlati:

CSS: Bottoni espandibili con una sola immagine

Giacomo Paita — Sun, 29 Nov 2009 11:47:50 +0000

Questa tecnica è ottima se dobbiamo creare dei bottoni che siano pronti per essere utilizzati con testi diversi, cioè che siano liquidi in orizzontale (si adattino cioè alla lunghezza del testo inserito).

In più vogliamo utilizzare il minor numero di immagini possibile (tecnica della “sprite image” e “sliding door”), avere codice più semantico possibile, e avere la possibilità di bordi arrotondati.

Ecco la pagina di esempio.

Esempio css bottoni espandibili con una sola immagine

Ed ecco il listato html:

Testo del bottone

Ecco come settare il css:

1) al link associamo come background l’immagine, posizionata a destra (attenzione: non è possibile utilizzare questa tecnica con immagini png):

a.button {
background: transparent url(bg_button.gif) no-repeat scroll
top right;
font: bold 12px arial, sans-serif;
float:left; /* la proprietà float è necessaria, può essere settata
anche in right*/
height: 24px;
margin:15px 0 0 0;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

2) allo span associamo come background l’immagine, che si posizionerà normalmente a sinistra:

a.button span {
background: url(bg_button.gif) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
color: #FFF;
}

Per modificare il comportamento al mouse-over:

a.button:hover {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
color: #FFF;
font-weight:bold;
}

a.button:hover span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
color: #FFF;
font-weight:bold;
}

Letture consigliate

CSS: bottoni con rollover flessibili
How to make sexy buttons with css

Articoli correlati:

IE6: Fix per i più comuni bug

Giacomo Paita — Sun, 22 Nov 2009 12:34:59 +0000

Prima o poi tutti i web-designer, anche quelli più competenti, si trovano a dover sbattere la testa contro gli strani comportamenti dell’anziano browser della casa di Redmond, Internet Explorer 6. Nonostante il suo utilizzo sia in costante declino, è bene tenerne conto, anche perchè, ahinoi, Microsoft ha recentemente annunciato che continuerà il supporto a IE6 fino al 2014.

Dato che avremo a che fare ancora per un po’ di tempo con la bestia nera, tanto vale attrezzarci per essere pronti, alla bisogna, a tirare fuori l’asso nella manica, e ottimizzare il nostro CSS per rendere uniforme la visualizzazione del nostro sito su tutti i maggiori browser.

1) Blocchi flottanti e altezza del blocchi contenitori

Questo bug riguarda il comportamento di un box contentente uno o più elementi flottanti. Vediamo un esempio di codice HTML:


   Testo e altro

ecco il codice CSS associato:

.contenitore {
   background: #CCFFCC;
}

contenuto {
   float: left;
   width: 300px;
}

Abbiamo innestato dentro a un blocco un box flottante con larghezza definita (se non specificata, il blocco flottante assume la larghezza di ciò che racchiude, a meno che non si tratti di un elemento rimpiazzato). Dato che i blocchi flottanti sono estratti dal flusso, l’altezza del blocco contenitore non dovrebbe essere influenzata da quella del blocco flottante. In IE6 invece l’altezza del box contenitore è influenzata da quella del box contenuto. Per risolvere questo baco, è necessario riprsitinare il flusso all’interno del blocco contenitore, inserendo un blocco con proprietà clear:both; dopo il blocco flottante:


   Testo e altro

clear {
   clear: both;
}

2) Blocchi flottanti e doppio margine

A volte accade che se al blocco flottante è applicato un margine sullo stesso lato in cui flotta, IE6 raddoppia questo margine. Per risolvere questo baco è sufficiente applicare all’elemento flottante la proprietà display:inline; che di fatto non ha conseguenze sul layout del blocco, in quanto un blocco flottante è sempre implicitamente un elemento a livello di bocco.

3) Impostare altezza / larghezza minima

#elemento {
   min-height:150px;
   height:auto !important;
   height:auto;
}

4) Spazio tra gli elementi in lista

IE6 aggiunge dello spazio verticale tra gli elementi di una lista settati a livello di blocco:


   Link 1
   Link 2
   Link 3

Ecco come settare i CSS per aggirare il problema:

ul {
   margin:0;
   padding:0;
   list-style:none;
}
li {
   display: inline; /* bug-fix */
}
li a {
   background: #95CFEF;
   display: block;
}

5) Evitare l’effetto scaletta nelle liste orizzontali

Ecco come evitare l’effetto scaletta nelle liste orizzontali:

ul 	{
   list-style:none;
   margin:0;
   padding:0;
}

ul li {
   display:inline;
   margin:0;
   padding:0;
}

ul li a {
   display:block; /*IE6 Hack*/
   float:left;
   height:30px;
   margin:0 0 0 20px;
   padding:0;
}

6) Incapacità di avere elementi con altezza piccola

Il nostro layout richiede una linea orizzontale separatrice? Ecco il listato CSS:

#horizontal_row{
   background: #95CFEF;
   border: solid 1px #36F;
   width: 300px;
   height: 2px;
   margin: 30px 0;
   overflow: hidden; /* l'elemento collassa all'altezza definita*/
}

7) Elementi che appaiono scompaiono in modo strano

A volte capita che elementi appaiano scompaiano in modo strano nella pagina, nonostante il nostro html e i CSS siano scritti bene. Per risolvere questo bug, settiamo la proprietà position: relative al contenitore dell’elemento che appare/scompare.

8) Compatibilità con immagini PNG trasparenti

Se il layout del sito che dobbiamo produrre necessita di immagini con effetti di trasparenza, dobbiamo aggirare il problema del mancato supporto alle png su IE6. Ecco cosa dobbiamo fare:

Scaricare da questa pagina l’archivio zip, copiare iepngfix.htc nella cartella dei CSS, e il file spacer.gif nella cartella immagini;
Incollare questo codice nella head della pagina html:

9) L’ultima spiaggia: colpire il browser con la precisione di un cecchino!

Quando non sappiamo più dove sbattere la testa, ecco come dichiarare proprietà CSS selettivamente per i maggiori browser con questo codice:

#selettore {
   width: 200px !important;     /* browsers moderni*/
   width: 100px;                /* IE6 e precedenti */
}

html>body #selettore {
   width: 150px; !important;    /* solo firefox */
}

..oppure con questo codice:

#selettore {
   background: red; 	/* browsers moderni */
   *background: green; 	/* IE 7 e precedenti */
   _background: yellow; /* IE6 */
}

..o questo codice:

#selettore {
      color: red; /* tutti i browsers */
      color : green\9; /* IE8 and below */
     *color : yellow; /* IE7 and below */
     _color : orange; /* IE6 */
}

Update! Ecco una lista di hack per i maggiori browser.

10) Internet Explorer: testare il sito su tutte le versioni!

Come verificare che il bug-fix sia efficace su tutte le versioni di IE? Non ci resta che testarlo: dimenticaveti di Multiple IEs o emulatori affini (non sempre affidabili al 100%), con IETester possiamo testare IE8, IE7 IE6 e IE5.5 su Windows 7, Vista and XP con risultati del tutto equivalenti alle versioni orginali (a patto che sulla macchina sia installto Internet Explorer 8 e il .NET framework sia aggiornato). Da provare!

Letture consigliate

IE6 bug fixing: articoli e risorse

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
Positioniseverything.net: The weird and wonderful world of Internet Explorer
Definitive Guide to Taming the IE6 Beast
9 Most Common IE Bugs and How to Fix Them
10 Awful IE Bugs and Fixes
All CSS Properties Listed Alphabetically

Testare in IE6+ e differenti browser

18+ Handy Tools To Check Cross-Browser Compatibility Issues
13 Ways to Browser Test and Validate Your Work
Internet Explorer Application Compatibility VPC Image

Articoli correlati:

CSS e float: blocchi flottanti e altezza del contenitore. Le soluzioni