.:: Maurizio Pelizzone ::.

Sembra che il team di sviluppo di Internet Explorer 7 sia stato illuminato, realizzado ed implementando alcune delle caratteristiche per cui ormai avevo quasi perso le speranze …

* Enable :hover on all elements not just on < a >
* Background-attachment: fixed works on all elements
* Improved < object > fallback

* Min/max width/height support (also for images)
* Transparent borders
* Fixed positioning support
* Selectors: first-child, adjacent, attribute, child
* Alpha channel PNG support

… sono commosso.

Technorati: ie7, css2.1
BlogBabel: ie7, css2.1

La separazione della struttura della pagina dalle sue regole di visualizzazione è sicuramente un vantaggio sia in temini di scalabiltà che di progettazione, ma da quando ho incominciato a utilizare in modo massiccio marcatori come DIV e Liste di definizione, realizzando di fatto siti con un uso molto limitato di tabelle (tableless), la dimensione dei fogli di stile è aumentata notevolemente, generando spesso un po’ confusione dovuta ad una cattiva organizzazione delllo stesso.

Ho quindi cercato di standardizzare, trovando alcune regole che potessero aitarmi.

• Nomi significativi alle classi, e agli ID
• Aggiunta di un appropriata quantita di commenti
• Organizzazione del foglio di stile in sezioni (es. common , wrapper , header , main , footer)
• Utilizzare per alcune proprietà come margin, padding , border, font e background le forme contratte
• Verificare la validazione del foglio di stile ( gli errori di distrazione sono i più comuni )

Mi sforzo poi di prestare attenzione durante la creazione di nuovi stili in modo da evitare inutili rindondanze, creando piuttosto classi generiche da applicare in aggiunta alla pricipale.

Faccio un esempio …

che verranno applicati alla proprietà class infilando entrambe le classi separate da un spazio

anche se non indicato nelle classi il font utilizzato sarà un verdana, in quanto la sia definizione è stata applicata a tutti gli elementi della pagina tramite il segno “*”.

Quanto scritto non è solo frutto della mia esperienza ma è il risultato di lettura delle molte fonti disponibili sulla rete di cui qui sotto potete vederne un piccolo e parziale elenco.

Links di riferimento:

• Ottimizzare i css
• errori da evitare
• 5 tips for organizing your css

Technorati: css , fogli di stile
BlogBabel: css, fogli di stile

Implementare il drag and drop su una pagina web tramite javascript fa molto web 2.0
Gli esempi che mi vengono in mente sono ben rappresentati del siti come questo, questo o questo

Anche i siti di commercio elettronico potrebbero trarre vantaggio da questa “tecnologia” rendendo un pò più interattiva e divertente la navigazione.
Sul script.aculo.us potete trovare un bellissimo esempio per un carrello web 2.0

Quando ho iniziato a cercare materiale sull’argomento ho trovato questo script su dynamic drive il cui studio mi ha portato a alla realizzazione di questa semplice demo .

Cliccando sull’icona “informazioni” vengono enumerati i prodotti all’interno del carrello, trascinandoli sopra vengono aggiunti e trascinandoli dal carrello al cestino vengono cancellati.

Le molte cose da dire per per raccontarvi come sono arrivato a “scoprire l’acqua calda” mi hanno portato alla decisione di preparare il mio primo post a puntate.

Questo che state leggendo consideratelo un introduzione mentre questi che seguono sono i titoli delle prossime puntate

1. gli eventi relativi al movimento del mouse
2. intercettare l’elemento sotto il mouse
3. portare a spasso gli elementi ( prendere e lasciare )
4. assembliamo il tutto

Update: 25.11.2005 la prima puntata è online !!

Update: 22.08.2006 ecco la seconda ….

Nel tentativo di seguire la tendenza che suggerisce la creazione di siti web “tableless” mi sono ritrovato con un banalissimo problema che mi ha fatto perdere un sacco di tempo.

Il comportamento di default di una tabella con una cella (TD) con altessa fissa prevede il posizionamento del testo centrato

cosa che come possiamo vedere è diverso se utilizziamo il tag DIV

Leggi il resto »

Qualche giorno fa geeksquare mi ha dato l’occasione per scoprire un uso dei css che non conoscevo, infatti questa pagina mi ha fatto passare quasi un ora prima di capire come funzionasse ( ma quanto sono ignorante ??? )

il “trucco” ( se così possiamo chiamarlo ) è la combinazione dell’utilizzo di un header impostato via codice …
<!-- nocode -->

… e del relativo file css ( richiamato dell’header ) nel quale vengono impostate le proprietà della pagina.
body { background: #9EAEB3 url(grad.jpg) repeat-x top; font-size: 20px; text-decoration: blink; font-weight: bold; } body:after { content: “This page contains 0 bytes of HTML (excluding comments). View the source code, no CSS! Move your mouse here…” } body:hover { text-decoration: none; color: green; } body:hover:after { content: “Look, no Javascript, ma! View source… ” url(http://cow.neondragon.net/ui/cow/images/comments.gif) ” cow.neondragon.net”; color: white; background-color: blue; font-size: 24px; line-height: 36px; }

Nelle specifiche css le istruzioni “:after” e “:hover” vengono chiamate Pseudo-classi, quella che segue è una brevissima spiegazione.
:after ci consente di inserire del contenuto alla fine di un elemento
:hover si applica ad un elemento metre questo ha il puntatore del mouse vi passa sopra.

Esistono molte altre pseudo-classi ma non tutti browser li renderizzano nello stesso modo.
questo tipo di “magia” per il momento funziona solo con Firefox e Opera 9 e quindi non è utilizzabile per la realizzazione di un sito, ma rimane comunque un interessante spunto per una riflessione sull’uso dei fogli di stile.

Link di riferimento

1. sitepoint.com
2. neondragon.net