Come sopportare IE6 e vivere felici

Mercoledì 26 Novembre, 2008

Trovo sempre un certo "malore" quando affronto l'argomento "compatibilità tra i browser". Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più "antipatico" rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.
Un Web Developer deve quindi organizzarsi in modo tale da avere a disposizione tutti gli strumenti per il controllo e la verifica del proprio (sudato) lavoro su tutti i possibili browser (e piattaforme) disponibili. Microsoft Internet Explorer, più degli altri, rende questo compito più arduo in quanto - ad oggi - è necessario verificare le proprie pagine web sia con la più recente versione 8 (ancora in beta) sia con le precedenti versioni, come la 6 o la 5.5. Esistono vari modi per far convivere versioni diverse di Explorer (vedi Usare Microsoft Internet Explorer 6 e 7 contemporaneamente) ed in alternativa esistono anche ottimi (anche se un po' lenti) servizi online.

image

Un'altra ottima possibilità, che funziona bene su Windows Vista, è rappresentata da IETester, un'applicazione completamente gratuita e realizzata dagli stessi sviluppatori di DebugBar e Companion.JS. IETester, nonostante sia ancora in beta e con qualche crash in agguato, permette rapidamente di verficare le nostre pagine - contemporaneamente - sia su IE5.5, IE6, IE7 e IE8 beta.

Patch CSS

Se grazie a IETester riusciamo a scovare un difetto negli stili, cioè un'interpretazione diversa tra IE6 e IE7, o IE6 e FireFox, ad esempio, trovata la soluzione dobbiamo far in modo che solo IE6 usi la nuova definizione. A me, ad esempio, è capitato con un margine! Avevo una classe che impostava il margine destro a 28px e, su tutti i browser, il risultato era identico, tranne che con IE6! Su quest'ultimo, per rendere il layout identico, dovevo usare un valore di 8px.
Un modo assai semplice, facile da ricordare ed estremamente immediato per risolvere il problema, è quello di "sovrascrivere" il nostro stile caricando un diverso file ad hoc solo se il browser è il - temuto - IE6:

PLAIN TEXT
CSS:
  1. /** ___ file ie_override.css
  2. * uso questo file per sovrascrivere uno stile
  3. */
  4. div.mystyle{margin-left:8px}

PLAIN TEXT
HTML:
  1. <!-- stili per tutti i browser -->
  2. <link rel="stylesheet" href="css/style.css" type="text/css">
  3. <!-- stili solo per IE6 -->
  4. <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie_override.css" /><![endif]-->

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Internet, Software, Sviluppo, Windows Vista | 3 commenti »

Wordpress: migliorare la lista dei commenti

Mercoledì 22 Ottobre, 2008

Il template standard di Wordpress (come altri) normalmente preve un layout alternato per la lista dei commenti. Nel template standard di esempio è impostata una classe css alt, secondo la logica:

PLAIN TEXT
PHP:
  1. // file comments.php
  2. <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
  3. [...]
  4. /* Changes every other comment to a different class */
  5. $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

Questo fa si che nel tag li $oddcomment sia impostato una volta a vuoto ("") e una volta a class="alt". Una modifica utile potrebbe essere quella di introdurre un ulteriore classe quando è l'autore del blog a commentare un post:

image

Io, ad esempio, ho usato il seguente codice nel file comments.php:

PLAIN TEXT
PHP:
  1. <?php
  2.     $authcomment = ($comment->user_id==3)?' authcomment':'';
  3.     $classcomment = ( empty( $classcomment ) ) ? ( ($authcomment=='')?' alt':'' ) : ''; 
  4. ?>
  5. <li class="<?=$classcomment?><?=$authcomment?>" id="comment-<?php comment_ID() ?>">

La riga $comment->user_id==3 può variare in base all'ID del vostro utente. Io, ad esempio, non uso l'amministratore per rispondere sul blog, ma ho un mio utente con ID=3. Normalmente l'ID dell'amministratore è 1, se usate questa utenza potete scrivere: $comment->user_id==1. In questo modo oltre ad avere l'alternanza di layout sui commenti lasciati dai visitatori, risulta immediatamente riconoscibile la risposta dell'autore del blog.

Post correlati

Tags: , , , , , , , ,
Pubblicato in CSS, Internet, PHP, Sviluppo, Tutorials, WordPress | 2 commenti »

Furti, copie e cloni sul Web: mi hanno clonato il sito

Martedì 12 Agosto, 2008

Oggi stavo dando un'occhiata ai report generati da Google Analytics quando osservando alcune pagine del mio sito e-lementi.com mi accorgo di una serie di "strani" link:

image

Chi diavolo è PixelFabrica? Come diavolo è finito quel link sulle statistiche? Ho un virus?! Così cerco su Google e vado a capitare su:

image

Incredibile! Mi hanno copiato il "vecchio" (vedi anche: Case Study) Layout...!! Non solo hanno copiato il layout nel senso grafico... dopotutto è più che normale ispirarsi a lavori altrui. Ma costoro hanno proprio copiato il codice! Dall'HTML al CSS. Tra l'altro non sono stati nemmeno attenti, infatti passando con il mouse sopra il titolo "digitalcodices.org" delle tre news appare la scritta "Nasce undolog.com"!

image

Inoltre non hanno capito nemmeno il funzionamento "sottile" dei CSS. Cliccando sui menu della navigazione la selezione della pagina visualizzata rimane sempre sulla Home, cosa che non succedeva con il mio layout: cara PixelFabrica, se vuoi una consulenza mi puoi contattare! Insomma, se volete proprio "copiare" fatelo almeno bene!!

Qualcuno dirà che segnalando tutto questo gli sto facendo "pure" un favore... una bella operazione di Viral Marketing... tuttavia è la prima volta che vengo "clonato" in questo modo spudorato, e la sensazione che provo la devo ancora decifrare! :) Ecco come si presentava infatti e-lementi.com prima del restyling del 2008:

image

Post correlati

Tags: , , , , ,
Pubblicato in Internet | 12 commenti »