Ausdruck ihrer IT-

Setzen Sie Stylesheets an der Spitze

Wenn Sie eine Seite zu laden wollen progressiv, das heißt, wir wollen den Browser, um anzuzeigen, was auch immer es Inhalte so schnell wie möglich hat, setzen die CSS am oberen Rand der Seite innerhalb des Dokuments HEAD. Das macht Seiten angezeigt werden, schneller zu sein Laden, da dies ermöglicht eine progressive Darstellung der Seite. Dies ist besonders wichtig für Seiten mit viel Inhalt und für die Nutzer bei langsameren Internet-Verbindungen.

Es ist eine dokumentierte Tatsache, dass die allgemeine Benutzerfreundlichkeit zu verbessern, ist es wichtig, Statusanzeigen und visuelle Rückmeldungen geben. Um zu vermeiden, Elemente der Seite neu zu zeichnen, für den Fall, wenn ihre Stile ändern, manche Browser, inklusive IE, Blöcke Version der Seite, bis der CSS voll beladen ist. Aus diesem Grund ist der Benutzer zu sehen bekommt Eine leere weisse Seite.

Die W3 HTML-Spezifikationen "auch fest, dass die CSS muss mich im HEAD-Abschnitt der HTML-Seite einbinden. at the bottom of the page, so it's best not to use it. Beachten Sie auch, dass im IE @import die gleiche verhält sich wie mit <link> am unteren Rand der Seite, also ist es am besten nicht zu benutzen.

Vermeiden der Verwendung von Browser unabhängig

Filter: Die Verwendung von Filter erhöht Speicherverbrauch und pro Element angelegt wird, nicht pro Bild, so dass das Problem multipliziert wird. Auch Filter IE proprietär sind, wird daher nicht wie vorgesehen in anderen Browsern. Wenn Sie transparente oder Gradienten Hintergründe möchten, verwenden Sie 1 Pixel mit Bildern.
Expressions: CSS-Ausdrücke sind ein nettes Feature, um in CSS haben, aber noch ist IE Besonderheit. Es ist auch wichtig anzumerken, dass, sind diese Ausdrücke ausgewertet, wenn die Seite gerendert wird und in der Größe, gescrollt und auch wenn der Benutzer die Maus über die Seite. Unnötig zu sagen, könnte dies die Performance Ihrer Seite auswirken. Daher wird in einfachen Worten, Vermeiden Sie die Verwendung CSS Ausdrücke, es sei denn, Sie fühlen sich seine Profis "wiegt mehr als seine Nachteile"

Externalisieren Sie CSS

Die Verwendung externer CSS wird in schnelleres Laden der Folge Seiten, da die JavaScript-und CSS-Dateien vom Browser zwischengespeichert sind. Inline-CSS in HTML-Dokumenten erhalten jedes Mal, wenn das HTML-Dokument angefordert wird heruntergeladen. Dies könnte in der Tat die Zahl der HTTP-Anfragen gemacht, aber es anschließend erhöht die Größe des HTML-Dokuments. Externe CSS sind vom Browser zwischengespeichert werden, die Größe des HTML-Dokuments ist ohne die Erhöhung der Anzahl von HTTP-Anfragen reduziert.

Bitte beachten Sie, dass, wenn Nutzer auf Ihrer Website mehrere Seitenaufrufe pro Session haben und viele von Ihren Seiten wieder verwenden die gleichen Skripte und Stylesheets, gibt es eine größere potentielle Nutzen von externen Dateien zwischengespeichert.

Packen Sie Ihre CSS-Datei

Verpackung oder Knirschen Ihrer CSS ist die Praxis der Beseitigung unnötiger Zeichen aus Code, um seine Größe reduzieren damit die Verbesserung der Ladezeiten.

Die CSS kann mir knirschte durch Entfernen aller Kommentare und unerwünschte Zeichen wie Leerzeichen, Zeilenumbrüche usw.

Beitrag IE 6 hat MSIE war so freundlich, uns UI-Entwickler, indem noch ein paar Standard-CSS-Eigenschaften zu den meisten anderen Standard-Browser. Eine solche nützliche Eigenschaft in "min-height". Ziemlich geradlinig Eigenschaft, dass keine langatmigen Erklärung bedarf. Wenn ein min-height für eine Teilung eingestellt ist, er behält immer, dass die eingestellte Höhe, wenn der Inhalt es Häuser belegt weniger als es halten kann und vor allem (im Gegensatz zu den Plain-Vanilla "height"-Eigenschaft) Waagen oder in CSS Worten, verhält es sich wie ein Abteilung, deren "Höhe" auf "Auto" eingestellt ...

Für einige von uns armen Entwickler, die noch auf CSS-Code erforderlich sind, das auch in IE6 müssen daran arbeiten, könnte un-Verfügbarkeit der "min-height", eine Show Stopper irgendwann beweisen ... Donot Verzweiflung.

Zum Glück haben wir genug Macken im IE, die wir aus Vorteil zu nutzen und zu hacken unseren Weg durch unser Ziel erreichen würde ... also machen eine Division Division, als ob seine min-height im IE6

Lösung 1: mit dem Unterstrich Hack [ ... Lesen Sie mehr ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Lösung 2: Mit dem CSS-Attribut-Selektor Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


Das CSS-Attribut Selector Hack nutzt die Tatsache, die älteren Browsern IE6 tha eine atribute-Selektor ignoriert. Beachten Sie die Forderung nach einem anderen Container Division mit class = "SomeClass". Genau das presense der Klasse Attribut für diesen Bereich, überschreibt die Höhe zurück zum Auto für Opera, Mozilla und MSIE7 und später. IE6, der nicht die atribute Selektoren, ignoriert es.

Demo ansehen der min-height Hack für IE6

Wenn Sie XML-und XSL verwenden, dann könnten Sie über eine Zeit kommen können, wenn Sie spielen, um mit Attributen und Werten von XML-Knoten in XSL Sie haben. Sie sind Lasten von Standorten mit langatmigen Infos dazu, aber keiner fand ich waren kurz und präzise ... Dies ist KEINE XML / XSL-Tutorial, aber mein Versuch, Put-zusammen eine Art von Cheat-Liste ...

Die Probe XML, dass wir mit Arbeit sieht wie folgt aus ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

So Beginnen wir verändern unsere obige XML mit XSL

Beispiel 1: angezeigte Wert bei einem gewählten Attribut

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML-Ergebnis aussehen wird

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Beispiel 2: Durchschleifen und Anzeigen aller XML-Attributnamen und deren Werte

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML-Ergebnis aussehen wird


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Watch this space, ich werde eine Aktualisierung dieser mit neuen Erkenntnissen ...