2008 20 juin 2008
Si vous avez déjà fait (ou en faisant un) un menu vertical à l'aide des éléments de liste (li) et les balises CSS, vous pourriez rencontrer, ce encore un autre bug dans Internet Explorer, IE 6 inserts où ces écarts entre les éléments de la liste qui contiennent des éléments de niveau bloc, à-dire s'il n'y a aucun espace entre les éléments de liste dans le balisage. Merci, mais non merci, la version d'IE 7 semble exempt de ce bug.
Si comme moi, et beaucoup d'autres, vous appartenez à ce groupe de développeurs frustrés, qui ont encore pour obtenir leurs nouvelles dispositions, qui travaillent dans IE6 trop, alors cela pourrait se révéler utile. Jetez un oeil ...
Balisage de l'échantillon:
<ul id="menu">
<li> <a href="#"> Accueil </ a> </ li>
<li> <a href="#"> propos </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefeuille </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contactez-nous </ a> </ li>
</ Ul>
Vous pouvez créer un peu de CSS, similaire à celui ci-dessous, à transfrom le balisage ci-dessus dans un menu vertical ....
Exemple de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; largeur: 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 solide # FFF;
}
Les résultats vous verrez ...
Solution pour ce bogue ... (modifié / ajouté CSS en gras et italique)
# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; largeur: 150px;
float: left; / * contient cette liste des articles flottants * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Ceci fixe le * /
largeur: 100%; / * espaces bug dans IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solide # FFF;
}
Si la solution ci-dessus doesnot semble pas fonctionner (pour des raisons connues d'IE6 seulement) ... essayer cette méthode au lieu
Il suffit d'ajouter cette supplémentaires IE6 seuls styles à votre balisage ...
<-! [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->
aucun commentaire | tags: les bogues d'IE , les corrections de IE , de Hacks IE , les questions d'IE , de IE6 , des didacticiels | Publié dans Quirks navigateur , CSS
2008 6 juin 2008
Plus les éléments DOM de la page, plus lent, il rend, plus lente est l'accès au DOM de JavaScript. Un nombre élevé d'éléments DOM peut être due schéma de configuration mauvaise. Par exemple, des tableaux imbriqués aurait pu être utilisé à des fins de mise en page. Utilisez n'importe quelle balise HTML où est sensé sémantiquement. Par exemple pour des tableaux de l'utilisation DONOT pour mises en page, mais DONOT hésiter à les utiliser là où vous avez pour afficher des données tabulaires, et donc de réduire utilisera des éléments DOM, en comparaison, à une structure similaire créé à l'aide DIV seulement ..
Pour tester le nombre d'éléments du DOM dans votre page HTML, il suffit de taper le texte suivant dans la console Firebug l': document.getElementsByTagName('*').length
Il n'existe pas de norme établie de manière à combien d'éléments DOM sont trop nombreux. Vérifiez les autres pages similaires qui ont markup.Eg bonne. Page d'accueil Yahoo! est une page très occupé et encore moins de 700 éléments (balises HTML).
pas de commentaires | tags: Best Practices , DOM | posté dans les meilleures pratiques , l'interface utilisateur Desgin
2008 2 juin 2008
Utilisez GET pour les requêtes AJAX
Il a été constaté que lorsque l'aide de XMLHttpRequest, POST est implémenté dans les navigateurs comme un processus en deux étapes: l'envoi des en-têtes d'abord, puis l'envoi de données. Donc, il vaut mieux utiliser la méthode GET, ce qui prend un seul paquet TCP pour envoyer (sauf si vous avez beaucoup de cookies). La longueur maximale URL dans IE est 2K, si vous envoyez plus de données 2K vous pourriez ne pas être en mesure d'utiliser GET.
Un effet secondaire intéressant, c'est que le POST sans réellement l'affichage toutes les données se comporte comme GET. GET est destiné à récupérer des informations, il est donc logique (sémantique) pour utiliser la méthode GET quand vous êtes seule demande de données, par opposition à l'envoi de données devant être stockées côté serveur.
Évitez les appels AJAX synchrone
Lorsque vous faites "Ajax" demandes, vous pouvez choisir soit asynchrone ou en mode synchronisation. Async mode exécute la demande en arrière-plan tandis que les activités d'autres navigateurs peut continuer à traiter. Sync mode d'attente pour la demande de retour avant de continuer.
Les demandes faites avec le mode de synchronisation doit être évitée. Ces demandes seront amener le navigateur à bloquer pour l'utilisateur jusqu'à ce que les rendements de demande. Dans le cas où le serveur est occupé et la réponse prend un certain temps, le navigateur de l'utilisateur (et peut-être OS) ne permettra rien d'autre à faire. Dans les cas où une réponse n'est jamais bien reçus, le navigateur peut continuer à bloquer jusqu'à ce que la demande est dépassé.
Si vous pensez que votre situation nécessite le mode de synchronisation, il est temps les plus susceptibles de repenser votre conception. Très peu de situations (le cas échéant) ont réellement besoin les requêtes Ajax en mode synchronisation.
1 commentaire | tags: AJAX , les meilleures pratiques | Publié dans AJAX , les meilleures pratiques , les Interface utilisateur Desgin