Informaticando.NET un intorno web sull'informatica di Giorgio Borelli

Con HTML5 si sono introdotte tante novità nello sviluppo delle pagine web, e molte hanno agevolato il lavoro dei web develooper. Tra le più utilizzate vi è sicuramente l'attributo placeholder per i tag input e textarea.

L'attributo placeholder consente di specificare un testo, visualizzato all'interno di un tag input, come suggerimeto per l'utente di quello che il campo deve ricevere, e scompare non appena vi si clicca dentro (focus) per cominciare ad inserire il testo. Con il placeholder abbiamo un tooltip comodissimo, facile ed immediato da implementare per i nostri input, effetto che prima potevamo ottenere solo con "scomodi" script Javscript.

Fin qui tutto chiaro, ma il punto su cui desidero soffermarmi è il colore del testo del placeholder, che di default è grigio, e se volessimo cambiarlo? Per esigenze grafiche o altro, abbiamo necessità di cambiare il colore del testo inserito tramite placeholder. Come fare? Beh con i CSS ovviamente.

Prosegue...

Ancora una volta ci ritroviamo a parlare di un bug, nello specifico Javascript, che affligge la compatibilità cross browser d'Internet Explorer 8. In particolare facciamo riferimento alla funzione del DOM (Document Object Model) window.onload(), responsabile di gestire (handler) gli eventi al caricamento della finestra (window) del browser. Quando andiamo a definire uno script Javascritp con all'interno window.onload al quale assegniamo una funzione, questa non viene "invocata" al load della pagina in Internet Explorer 8, il tutto sembra apparentemente inspiegabile, poichè il metodo onload così definito funziona perfettamente con gli altri browser o versioni superiori di IE.

Risolere il bug di IE8 con window.onload è davvero semplice, andiamo a scoprire come fare. Prosegue...

Quando definiamo una textarea la sua visualizzazione in internet explorer viene rappresentata con una scrollbar laterale, questo effetto è spesso non gradito, anche perchè si presenta anche se il contenuto della textarea è vuota, inoltre questo problema si presenta in tutte le versioni di IE anche tra le più recenti come la 9.

A differenza di Explorer, invece, tutti gli altri browser la visualizzano come un normale box senza scroll, in pratica ci ritroviamo nuovamente di fronte ad una differenza di resa grafica di Explorer rispetto agli altri browser, fortunatamente risolvere (fix) questo problema di compatibilità cross browser è facilmente risolvibile inserendo una semplicissima regola css, andiamo a vedere quale.

Prosegue...

Sebbene l'argomento specifico è sicuramente datato, torniamo a parlare nuovamente di compatibilità cross-borwser, problema invece sempre attuale, ed indovinate chi è il colpevole? Internet Explorer versione 7. Lo so, lo so che ormai la migrazione degli utenti verso la versione 9 ed adesso la 10 con il nuovo Windows 8 procede celermente, ma ancora vi sono molti utenti che usano Internet 8 o come nel caso in questione IE7, e poi per chi sviluppa web, bisogna assicurare una certa resa grafica per tutti i browser in tutte le versioni dei siti realizzati, non dico che la compatibilità sia raggiungibile al 100% (soprattutto con le versioni più vecchie) ma quanto meno cerchiamo di risolvere i problemi più comuni.

Il problema è questo, quando andiamo a creare delle liste numerate tramite il tag ol, in Internet Explorer 7, la lista viene presentata con una numerazione non crescente, ovvero ogni elemento presenta sempre il numero 1. Risolvere questo bug è semplice, andiamo a vedere come fare.

Prosegue...

Come visto anche nell'articolo precedente, la compatibilità Cross Browser ha un'importanza fondamentale nella realizzazione e nel successo di un sito web.

Visto e considerato che non tutti i browser interpretano correttamente ed allo stesso modo i tag HTML, e soprattutto se ne infischiano delle direttive del W3C (almeno nel passato), i Web Designer si ritrovano a dover risolvere problemi di compatibilità grafica tra i vari browser a dir poco ostici. Non solo abbiamo un elevato numero di browser, ma questi si moltiplicano ancora per le loro varie versioni, e riuscire a far vedere bene un sito con tutti, credetemi, è un'impresa faraonica se non impossibile. Comunque noi non ci scoraggiamo ed oggi cerchiamo di rendere la vita più facile agli sviluppatori web parlando di come risolvere (Fix) un bug dell'odiatissimo Internet Explorer 6 (ed anche IE5.5).

Il bug in questione riguarda la non corretta interpretazione della pseudo class hover in Internet Explore 6 e versioni precedenti.

Prosegue...

Quando si sviluppa un sito web, sarebbe buona norma di ogni professionista del web, quella di testare la resa grafica del proprio lavoro su diversi browser e sulle loro diverse versioni, ossia testare che il proprio sito web sia Cross Browser. Tra i diversi browser usati dai navigatori, troviamo: FireFox, Safari, Oppra ed Internet Explorer, almeno tra i più usati.

Per fare ciò è necessario che il Web Designer abbia installato sulla propria macchina i diversi browser nelle loro diverse versioni. Questo non è sempre facile, innanzitutto la seccatura di avere tutte queste installazioni e poi le varie versioni dello stesso browser difficilmente convivono sulla stessa macchina. Ad es. a meno di non mettere in atto alcuni trucchetti, è difficile installare sullo stesso PC differenti versioni d'Internet Explorer. Il diffusissimo browser di casa Microsoft è sicuramente il più usato, i sondaggi parlano che oltre l'80% dell'utenza usa Internet Explorer (nelle sue diverse versioni) per navigare.

Proprio per la sua larga diffusione non possiamo esimerci dal testare la nostra applicazione web su Internet Explorer (IE), il quale soprattutto nelle versioni antecedenti la 7.0 presenta non pochi problemi di compatibilità con gli standard Web dettati dal W3C.

Prosegue...