2008 20 giugno 2008
Se avete mai fatto (o fare uno) un menu verticale con voci di elenco (LI) e tag CSS, è possibile incontrare, questo ennesimo bug in Internet Explorer, dove IE 6 inserti in questi spazi vuoti tra gli elementi dell'elenco che contengono elementi a livello di blocco, vale a dire se c'è qualche spazio bianco tra le voci di elenco nel markup. Grazie, ma no grazie, la versione IE 7 sembra esente da questo bug.
Se, come me, e molti altri, tu appartieni a questa fascia di sviluppatori frustrati, che ancora devono ottenere i loro nuovi layout, lavorando anche in IE6, allora questo potrebbe rivelarsi utile. Dai un'occhiata ...
Esempio di markup:
<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Chi </ a> </ li>
<li> <a href="#"> Servizi </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contatti </ a> </ li>
</ Ul>
Si potrebbe creare qualche CSS, simile a quello riportato di seguito, per transfrom il codice sopra in un menu verticale ....
Esempio di CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}
I risultati si vedono ...
Soluzione per questo bug ... (modificato / aggiunto CSS in grassetto corsivo)
# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * questo contiene elementi di una lista float * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Questo risolve il * /
width: 100%; / * bug spazi in IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}
Se il doesnot soluzione di cui sopra sembra funzionare (per ragioni note solo a IE6) ... provare questo metodo, invece
Basta aggiungere questo ulteriore stili IE6 solo al markup ...
<- [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->
non ci sono commenti | tags: bug di IE , le correzioni di IE e Hacks di IE , i Problemi IE e IE6 e Tutorial | posted in Quirks Browser , CSS
2008 6 giugno 2008
Più gli elementi DOM della pagina, rende più lento, più lento è l'accesso DOM in JavaScript. Un elevato numero di elementi DOM può essere dovuta progettazione del layout male. Ad esempio, tabelle nidificate potrebbe essere stato usato a scopo di impaginazione. Utilizzare qualsiasi Tag HTML in cui si ha un senso semanticamente. Per Ad esempio l'utilizzo di tavole DONOT per i layout, ma DONOT esitare a usarli in cui devi visualizzare i dati tabulari, e quindi userà ridurre gli elementi DOM, in confronto, ad una struttura simile creato usando solo DIV ..
Per verificare il numero di elementi DOM nella pagina HTML, è sufficiente digitare quanto segue nella console di Firebug: document.getElementsByTagName('*').length
Non esiste uno standard impostato da quanti elementi DOM sono troppi. Controllare altre pagine simili che hanno markup.Eg bene. Home Page Yahoo! è una pagina piuttosto trafficata e ancora meno di 700 elementi (tag HTML).
no comments | tags: Best Practices , DOM | posted in Best Practices , User Interface Desgin
2008 2 Giugno 2008
Utilizzare GET per le richieste AJAX
È stato trovato che quando si utilizza XMLHttpRequest, POST viene attuata nelle browser come un processo in due fasi: invio gli header, poi l'invio di dati. Quindi è meglio usare GET, che richiede solo un pacchetto TCP di inviare (a meno che hai un sacco di biscotti). La lunghezza massima di URL in IE è 2K, quindi se si inviano più dati 2K potrebbe non essere in grado di utilizzare GET.
Un effetto lato interessante è che il POST senza effettivamente inviare tutti i dati si comporta come GET. GET è pensato per il recupero di informazioni, quindi ha senso (semanticamente) da utilizzare GET quando si sta solo chiedendo i dati, al contrario di invio di dati da memorizzare sul lato server.
Evitare sincrone le chiamate AJAX
Quando si effettuano le richieste di "Ajax", si può scegliere la modalità asincrona o sync. Async mode esegue la richiesta in background mentre le attività di altri browser può continuare a elaborare. Sync modalità attenderà per la richiesta di tornare prima di continuare.
Le richieste effettuate con modalità di sincronizzazione dovrebbe essere evitato. Queste richieste farà sì che il browser in modo da bloccare per l'utente fino al ritorno di richiesta. Nei casi in cui il server è occupato e la risposta richiede molto tempo, il browser dell'utente (e forse OS) non permette niente altro da fare. Nei casi in cui una risposta non è mai ricevuto correttamente, il browser potrebbe continuare a bloccare fino a quando la richiesta è scaduta.
Se pensate che la vostra situazione richiede la modalità di sincronizzazione, è il momento più probabile per ripensare il progetto. Situazioni molto pochi (se presente) in realtà impongono che le richieste Ajax in modalità di sincronizzazione.
1 commento | Tags: AJAX , le Best Practices | postato in AJAX , le Best Practices , le User Interface Desgin