CSS

La homepage di Google e gli standard web

Se credete che gli standard web e le norme del W3C servano a poco, c’è una pagina che potrebbe farvi ricredere.

Roger Johansson ha pubblicato sul suo blog un articolo dove presenta una homepage di Google di aspetto assolutamente identico all’originale, realizzata con html valido e css, in alternativa a tabelle, immagini spacer gif, e tutti gli altri orrori che appartengono ormai al web del passato.

Ebbene, questa nuova versione occupa 3902 bytes, mentre l’originale è 4944 bytes. Se non avete idea di cosa questo possa significare, la versione che segue gli standard risparmia il 21,07% di banda, che è straordinario se provate ad immaginare il numero di utenti che ogni giorno passano dalla homepage di Google.

Pensare che in generale le pagine realizzate con div e css occupino più risorse è quindi un falso mito, senza contare tutti i vantaggi di avere un codice ben strutturato e separato dagli aspetti presentazionali.

IE7 ed i CSS: le novità

Internet Explorer 7 è ormai in dirittura d’arrivo, e proprio ieri (22 Agosto 2006) sono state elencate su IE7Blog alcune importanti novità sul supporto dei CSS.

Se siete degli sviluppatori web e volete conoscere con esattezza tutti i bug e gli pseudo-bug risolti, il mio consiglio è di studiare attentamente l’articolo in questione.

Finalmente :hover funzionerà su tutti gli elementi, così come background-attachment: fixed, ma le novità sono diverse.

Considerando che IE7 sarà distribuito con gli aggiornamenti automatici di Windows, la sua diffusione sarà senza dubbio rapida tra i possessori di Windows XP: è tempo di cominciare ad osare con i CSS se non l’avete già fatto, utilizzando proprietà fino ad ora supportate solo da Firefox e pochi altri standard-compliant browser!

Giocare con i CSS

Automobile - pixel artDa quando sono stati introdotti, i CSS hanno fatto passi considerevoli, o meglio sono stati gli sviluppatori web ad imparare a gestirli con sempre maggior profitto.
Ma uno degli aspetti più belli dei fogli di stile è che difficilmente potranno essere scritti nello stesso modo da persone diverse: è facile infatti arrivare al medesimo obiettivo tramite più strade, tutte corrette.

Uno dei maestri nella gestione dei CSS è senza ombra di dubbio Stu Nicholls, che nel suo CSS Play mostra tutte le potenzialità di questo linguaggio. Font ed immagini realizzate tramite fogli di stile sono all’ordine del giorno sul suo sito: senza dubbio non saranno il massimo dell’accessibilità o del web semantico, ma sono un chiaro esempio di cosa sia possibile fare con un pò di fantasia e molta pazienza.

Adesso divertitevi.. se avete la pazienza: per realizzare l’automobile dell’immagine in testa a questo articolo sono state impiegate 20 ore!

Utilizzare PNG trasparenti su Internet Explorer

Il formato PNG per le immagini è sempre più diffuso sul web da quando è stato creato nel 1995, e con l’utilizzo delle trasparenze consente di ottenere ottimi risultati.

E’ infatti possibile sovrapporre immagini trasparenti ad altri elementi per arrivare ad interessanti combinazioni irraggiungibili con il formato GIF, se non fosse per i soliti problemi di compatibilità con Internet Explorer.

Al contrario dei vari Firefox, Opera, ecc.., il browser di casa Microsoft non supporta le trasparenze dei PNG mostrando un improbabile sfondo grigio.

La soluzione in attesa di IE7 consiste in un hack CSS che permette di aggirare il problema utilizzando un particolare filtro per IE (dalla versione 5.5 in poi).

Potete vedere subito l’esempio che ho realizzato; per i vostri test tutto quello che dovrete fare è usare il seguente codice CSS:

#overlay{
background: url(opaco70.png);
}
* html #overlay { /* Regole per IE (dalla 5.5 in poi) */
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="opaco70.png" ,sizingMethod="scale");
}

Ovviamente la vostra immagine PNG andrà a sostituire opaco70.png dell’esempio, così come il nome dell’elemento a cui applicare la trasparenza.

I problemi di questa tecnica? Eccoli:

  • Non è supportata da Internet Explorer 5 ed inferiori, quindi se il vostro sito è studiato per funzionare anche con questo browser, meglio evitare di utilizzarla
  • L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute (decisamente restrittivo, lo so)
  • L’utilizzo di CSS hack deprecati e non standard

Traete le vostre conclusioni, la cosa potrebbe tornare sicuramente utile aspettando l’uscita ufficiale di IE7, ma sono da valutare bene i pro ed i contro.

Controllo del codice html non standard: B.R.A.T.

ImportantVi è mai capitato di realizzare un sito, creare delle pagine con codice xhtml valido, e poi scoprire che gli editori a cui l’avete affidato l’hanno rivoluzionato? Purtroppo è facile trovarsi in situazioni del genere, con pagine diventate inaccessibili magari a causa di editor di testo visuali, riempite di tag html come font e center che vanno a rovinare il vostro lavoro.

Un rimedio molto semplice ma altrettanto efficace è stato ideato su accessites.org da Marco Battilana, che ha chiamato la tecnica B.R.A.T.: acronimo di Big Red Angry Text.

Nel suo intervento presenta un sistema molto semplice ma altrettanto efficace per controllare il testo inserito dagli editori nei siti che avete pazientemente creato, evitando che venga usato codice non standard ed elementi deprecati, come appunto i tag font, center o l’attributo align.

Basta aggiungere delle righe di codice nel vostro css, che potete vedere direttamente nell’articolo originale. Non sto a riportarle qui per evitare problemi di copyright, e mi sembra giusto così.
Il risultato? Quando verranno usati i tag che voi indicherete nel css, appariranno delle enormi scritte rosse, che probabilmente convinceranno l’editore a cambiare qualcosa.

Che cosa ne pensate? Avete avuto mai problemi di questo tipo? Io sono quotidianamente alle prese con questioni simili, che possono in parte essere risolte tramite css, ma a volte dipende tutto dall’editore e da quanto è stato ben istruito. Facile trovarsi inserite immagini dal peso di 2mb.. e questo è solo un esempio!

CSS Reboot 2006 e gli standard web

Mi sono imbattuto in un interessante articolo che analizza i partecipanti al CSS Reboot 2006, esaminando il rispetto per gli standard del W3C. L’argomento mi interessava non poco, visto che anche questo sito ha partecipato all’evento, ma i risultati di questo studio sono qualcosa di impressionante.

Su più di 700 siti partecipanti, il 71,8% non ha codice valido, per errori nell’xhtml/html, nei CSS, o in entrambi.

Avete capito bene, il 71,8%.

Ed alcuni di questi siti non hanno addirittura nessuna doctype dichiarata!

La questione su cui mi vorrei soffermare è: perchè studiare le tecniche xhtml + css, realizzare un sito o rinnovarlo, e non preoccuparsi del rispetto degli standard web? Il collegamento tra le due cose dovrebbe essere immediato, ma a quanto pare c’è ancora molto lavoro da fare a riguardo.

CSS3 Preview

E’ da un pò di tempo che ho tra i miei bookmarks il sito di Joost de Valk sui CSS3 e sulle loro possibilità. Visto che in questi giorni è tornato alla ribalta, ve lo segnalo: le anteprime sono decisamente interessanti, e le potenzialità sono incredibili.

Se siete curiosi, trovate in questa pagina le proprietà che fino ad ora sono supportate da almeno un browser tra Firefox, Opera e Safari.

Per adesso le cose migliori che ho visto riguardano:

  1. La possibilità di attribuire più immagini di sfondo ad un’unico div: addio contenitori multipli utilizzati solo per arricchire il background!
  2. I bordi degli elementi, che con i CSS3 potranno essere arrotondati o utilizzare immagini.
  3. Effetto ombra sui testi

Peccato che ci vorranno anni prima di vedere i CSS3 supportati pienamente, basti pensare che allo stato attuale non sono totalmente operativi nemmeno i CSS2. Forse con Internet Explorer 7…

Come è stato realizzato questo sito?

La risposta alla domanda del titolo potrebbe essere veloce, di due-tre frasi, breve ed indolore.
Ma visto che mi piacciono le cose complicate, mi sembra giusto mettere da parte le risposte banali e descrivere nei dettagli come ho creato questo sito.

1. Il pannello di controllo

E’ sul pannello di controllo che ho concentrato le mie attenzioni fin dai primi momenti. Volevo integrare alcune funzioni nel sito senza che restassero sempre in vista, e volevo farlo utilizzando qualche script interessante.

Quando ho sperimentato moo.fx, ho capito subito che faceva per me.

Continua a leggere Come è stato realizzato questo sito? »