ilDavid.com

Sitepoint, importante sito di riferimento per lo sviluppo web, offre gratuitamente uno dei suoi più importanti libri The Art & Science of CSS per 12 giorni ancora. Ci sono 2 modi per ottenerlo: lasciando la propria email, alla quale viene inviato il link per il download del PDF, oppure seguire il loro Twitter.

Sitepoint è una “online media company” che si occupa di advertising e servizi per webdevelopers (sua la community di 99designs.com). Negli ultimi mesi hanno pubblicato due reference per i linguaggi web: HTML e CSS. Una terza, su JavaScript, è in arrivo. Questi manuali sono molto utili per i webdesigners, perchè spiegano in dettaglio come funzionano gli elementi e gli attributi, e come si comportano nei diversi browser. Indispensabile nei bookmarks.

In questo articolo di CSS-Tricks vengono spiegati tutti i trucchi e le varie compatibilità della proprietà css float.
Fondamentale per poter essere sicuri di un risultato cross-browser.

Un menu a tab, con l’uso esclusivo di xhtml e css. Semplice ed efficace. CSS Tabs Menu E la relativa lista di menu orizzontali.

E una raccolta di 56 menu moderni di Smashing Magazine

Uno dei grossi problemi che un webdesigner si trova ad affrontare quando ha a che fare con righe orizzontali <hr> e i browser Microsoft, è il bordo che Internet Explorer decide di mettere quando si usa una immagine di sfondo a fare da separazione tra una sezione e un’altra.

In tanti hanno proposto delle soluzioni, e la più seguita credo sia quella di Marek Prokop, tradotta in italiano da risorse.net. La soluzione è certamente la più corretta a livello semantico e di standard, rimane però il problema che non sempre è possibile usare un <div> contenitore (per esempio in un CMS).

Jaroslav Polakovič ha però trovato una soluzione a mio avviso più interessante, ovvero utilizzare un attributo css proprietario di IE: lo zoom.

Presente fin da IE 5 la proprietà zoom permette appunto di ingrandire (o diminuire) un oggetto in percentuale. In questo modo, rimpicciolendo la dimensione del <hr> a un quarto della sua dimensione, i bordi “spariscono”. Per fare questo è però necessario un commento condizionale per IE e una immagine di sfondo 4 volte più grande di quella usata per i browser standard compliant.

Il codice:

<!--[if lte IE 7]>
<style type="text/css">
hr {
  background-image: url('four-times-larger-image.gif');
  height: 60px;zoom: 25%;
}
  </style>
<![endif]-->