2008 20. Juni 2008

White Space Bug in Line / Listenelemente (li) im IE6

Wenn Sie schon einmal (oder machen ein) ein vertikales Menü haben mit Listenelemente (li)-Tags und CSS, könnte unter Umständen, dies ein weiterer Fehler im Internet Explorer, IE 6 Einsätze, wo diese Lücken zwischen Listenelemente, die Block-Level-Elemente enthalten, dh ob es einen Leerraum zwischen den Listenelementen im Markup. Danke, aber nein danke, scheint die IE-Version 7 frei von diesem Fehler.
Wenn Sie wie ich, und viele mehr, Sie zu diesem Band frustrierter Entwickler, die noch auf ihre neue Layouts, Arbeiten im IE6 zu bekommen, gehören, dann könnte dies als nützlich erweisen. Werfen Sie einen Blick ...

Probe-Markup:

<ul id="menu">
<li> <a href="#"> Startseite </ a> </ li>
<li> <a href="#"> Über </ a> </ li>
<li> <a href="#"> Dienstleistungen </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>

Vielleicht schaffen einige CSS, ähnlich wie ein unten, um die oben Markup in ein vertikales Menü transfrom ....

Beispiel CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menü li {margin: 0; padding: 0;}
# Menü a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Die Ergebnisse sehen Sie ...
null

Lösung für diesen Bug ... (modifiziert / CSS fett und kursiv hinzugefügt)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * Diese enthält schwebte Listenelemente * /
}
# Menü li {
margin: 0; padding: 0;
float: left; / * Dies behebt den * /
width: 100%; / * Leerzeichen Fehler im IE6 * /
}
# Menü a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Wenn die obige Lösung doesnot zur Arbeit erscheinen (bekannten Gründen nur IE6) ... Versuchen Sie diese Methode anstelle

Fügen Sie einfach dieses zusätzliche IE6 nur Vorlagen, um Ihre Markup ...

<-! [If lt IE 7>
<style type="text/css">
# Menü li a {display: inline-block;}
# Menü li a {display: block;}
</ Style>
<[Endif] ->


2008 6. Juni 2008

Best Practices: Halten Sie die Anzahl von DOM-Elementen Kleine

Mehr die DOM-Elemente auf der Seite, es macht langsamer, langsamer ist der DOM-Zugriff in der JavaScript. Eine hohe Anzahl von DOM-Elementen kann durch schlechte Layout-Design sein. Zum Beispiel könnte verschachtelte Tabellen zu Layout-Zwecken verwendet worden sein. Verwenden Sie ein beliebiges HTML-Tag, wo sinnvoll ist semantisch. Für zB DONOT Verwendung Tabellen für Layouts, aber DONOT zögern, sie zu benutzen, an der Sie tabellarische Daten dargestellt werden, und wird daher verwenden DOM-Elemente zu reduzieren, im Vergleich zu einer ähnlichen Struktur erstellt mit DIVs nur ..

Um die Anzahl der DOM-Elemente in Ihre HTML-Seite zu testen, geben Sie einfach folgendes in der Firebug-Konsole: document.getElementsByTagName('*').length

Es gibt keinen festgelegten Standard, wie viele DOM-Elemente sind zu viele. Überprüfen Sie andere ähnliche Seiten, die gute markup.Eg haben. Yahoo! Homepage ist eine Seite ziemlich beschäftigt und immer noch unter 700 Elemente (HTML-Tags).


2008 2. Juni 2008

Best Practices: Die Verwendung von AJAX

Verwenden Sie GET Requests für AJAX

Es wurde festgestellt, dass bei der Verwendung von XMLHttpRequest, POST in den Browsern wird als zweistufigen Prozess implementiert: Senden der Header zuerst, dann das Senden von Daten. Also ist es am besten zu nutzen GET, das dauert nur ein TCP-Paket zu senden (sofern Sie nicht eine Menge von Cookies haben). Die maximale URL-Länge im IE ist 2K, also, wenn Sie mehr als 2K Daten senden Sie vielleicht nicht in der Lage, verwenden zu können.
Eine interessante Seite beeinflussen ist, dass POST, ohne tatsächlich das Einstellen von Daten verhält sich wie GET. Wird zum Abrufen von Informationen gemeint GET, so macht es Sinn (semantisch) zu bekommen verwenden, wenn Sie nur beantragt sind Daten, wie zum Senden von Daten an Server-Seite gespeichert werden, entgegen.

Vermeiden Sie Synchronous AJAX-Aufrufe

Bei der "Ajax" Anfragen, können Sie entweder async oder sync-Modus. Async-Modus läuft die Anfrage im Hintergrund, während andere Browser-Aktivitäten weiterhin zu verarbeiten. Sync-Modus wird für die Anfrage an, bevor Sie fortfahren Rückkehr zu warten.
Anfragen mit Sync-Modus gemacht sollte vermieden werden. Diese Anfragen werden dazu führen, den Browser zu sperren für den Benutzer, bis die Anforderung Renditen. In Fällen, in denen der Server ausgelastet ist und die Reaktion dauert eine Weile, den Browser des Benutzers (und vielleicht OS) wird nicht zulassen, irgendetwas anderes zu tun. In Fällen, wo eine Antwort nie richtig empfangen wird, kann der Browser weiterhin blockieren, bis die Anfrage das Zeitlimit überschritten.
Wenn Sie denken, dass Ihre Situation Sync-Modus erfordert, ist es wahrscheinlich Zeit zu überdenken Ihrem Design. Nur sehr wenige (wenn überhaupt) Situationen tatsächlich benötigen Ajax-Requests im Sync-Modus.


NDK Hause | Ausdruck ihrer IT | Ausdruck Gaumen | Penmenship Ausdruck | Ausdruck Awe | mich auszudrücken