pevere web css design accessibilità e usabilità 

IE 6, il bug dei magini con il float

Il pretesto per questo articolo mi arriva proprio dalla grafica di questo mio sito.
Fino ad ora non ho mai trattato l’argomento bug, ma realizzando la grafica del sito mi sono imbattuto proprio in un bug.... e indovinate su quale browser?....... si si Internet Explorer 6. Ma veniamo ai fatti.

Leggi il resto dell'articolo »

Ereditarietà e specificità dei CSS

Con i css à possibile applica definizioni di stile generiche Assegnando una definizione ad un elemento, la stessa definizione verrà ripetuta ogni volta che l’elemento compare nel nostro listato, indipendentemente dalla sua posizione o dal suo annidiamento.

Leggi il resto dell'articolo »
  • Autore:
    Paolo Pevere
  • Categorie: grafica CSS
  • data pubblicazione:
    27 Febbraio 2007

I Formati delle immagini per il web e le loro caratteristiche

Immagini GIF

E’ un formato usato da più di 20 anni ed è senza perdita di dettaglio. Supporta una profondità di colori fino a 256 equivalente a 8 bit e la trasparenza a 1 bit ovvero, completamente trasparente o completamente opaco. Il formato è ottimo per l’uso su aree a basso numero di colori, per il testo ecc.

Leggi il resto dell'articolo »

Inserimento immagini con css

Per inserire immagini tramite css, il metodo di gran lunga più supportato è l’uso del background.

Leggi il resto dell'articolo »
  • Autore:
    Paolo Pevere
  • Categorie: grafica CSS
  • data pubblicazione:
    25 Gennaio 2007

Tecniche di sostituzione delle immagini in CSS

Molto spesso vengono usate tecniche per sostituire i testi contenuti nei tag H con immagini. Per prima regola ricordiamoci di inserire altezza e larghezza dell’immagine altrimenti, essendo probabilmente il box dell’H1 per esempio, più piccolo, l’immagine verrebbe tagliata.

H1 {
	background: transparent url(mia_immagine.jpg)
	 left no-repeat;
	width: 450px;
	height: 20px;
}

Una prima tecnica spesso usata è quella di sostituire i titoli con delle immagini. Per fare questo è sufficiente racchiudere il testo con un tag span e poi applicare l’immagine all’elemento. Questa soluzione, anche se molto usata è inaccessibile agli screen reader pertanto un cieco non potrà leggere il nostro titolo.

<h1 id=”intestazione”><span>Questo è il mio sito</span>
</h1>

#intestazione {
	background: url(titolo.jpg) top left 
		no-repeat;
	width: 500px;
	height: 30px;
}

#intestazione span {
	dispaly: none;
}

Per rendere accessibile il nostro codice, potremmo utilizzare una sintassi di questo tipo, anche se
però, come spesso succede alcuni browser mal supportano l'overflow.

<h1 id=”intestazione”> Questo è il mio sito</h1>

#intestazione {
	padding: 25px 0 0 0;
	overflow: hidden;
	background: transparent url(immagine.jpg) 
		no-repeat;
	height: 0 !important;
	height /**/:25px;
}

Nel tempo, sono state pubblicate diverse soluzioni grazie alla sperimentazione ed all'intuito di alcuni abili designer. Ecco alcuni esempi:

Soluzione di Mike Rundle.
Questa soluzione utilizza il comando text-indent con un valore negativo, in modo da spingere il testo fuori dallo schermo. Nonostante possa sembrare una soluzione molto elegante, ci sono comunque problemi di compatibilità con Explorer nella versione 5 e precedenti.

<h1 id="intestazione">Questo è il mio titolo</h1>

#intestazione {
	text-indent: -100000px;
	background: transparent url(mia_foto.jpg) 
		no repeat;
	height: 25px;
}

Soluzione di Alexander Levin.
Questa soluzione prevede l’uso di span, ma senza metterci all’interno il teso. Lo span serve per caricare una immagine e con una azione di replace, metterla sopra il testo. E’ una tecnica un po’ laboriosa e poco ortodossa, ma rispetta perfettamente le regole di accessibilità anche per quanto riguarda i CSS attivi, con la disattivazione delle immagini. Inoltre questa soluzione è accessibile anche agli screen reader.

<h1 class="sostituisci" id="h1_pers">Questo è il mio 
		titolo<span></span></h1>


.sostituisci {
	position: relative;
	margin: 0;
	padding: 0;
	/*nascondi l'overflow per i browser da 
		Explorer 5/mac */
	overflow:hidden;
	/**/
}

.sostituisci span {
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1; /*accorgimento per Opera 5 e 6*/
}


#h1_pers, #h1_pers span {
	width: 400px;
	height: 20px;
	background: transparent url(mia_foto.jpg) top 
		left no-repeat;
}
  • Autore:
    paolo
  • Categorie: grafica CSS
  • data pubblicazione:
    25 Gennaio 2007

Tecniche per centrare un box con css

Molto spesso incontriamo siti che si posizionano perfettamente al centro del nostro monitor indipendentemente dalla risoluzione e dalle dimensioni. Per fare questo abbiamo a nostra disposizione diverse tecniche con diversi pro o contro. La scelta ottimale la possiamo fare solo in base al tipo di risultato che vogliamo ottenere e soprattutto al tipo di compatibilità che vogliamo avere con browser antiquati.

Leggi il resto dell'articolo »
  • Autore:
    Paolo Pevere
  • Categorie: grafica CSS
  • data pubblicazione:
    02 Gennaio 2007

Impostare XHTML per i CSS

Per prima cosa, imparate ad usare un id specifico per il tag Body. Questa tecnica viene chiamata “mettere la firma” ed evita che un foglio stile importato erroneamente possa compromettere il design della nostra pagina. Un altro beneficio è che partendo così abbiamo la possibilità di scrivere regole per i browser css compatibili con i selettori figli e regole specifiche che saranno ignorate da questi ma interpretate da Explorer. Forse quanto scritto non è moto chiaro, ma un semplice esempio fugherà ogni dubbio.

Leggi il resto dell'articolo »