Wyrażając

Umieść stylów w górę

Jeśli chcesz, aby załadować stronę stopniowo, który chcemy przeglądarkę do wyświetlenia cokolwiek zawartość ma jak najszybciej, należy umieścić CSS na górze strony w głowie dokumentu. To sprawia, że strony wydają się być ładowanie szybsze, gdyż ułatwia stopniowe obraz aktualnej strony. Jest to szczególnie istotne dla stron z dużą ilością treści i dla użytkowników wolniejszych łączy internetowych.

Jest udokumentowanym faktem, że w celu zwiększenia ogólnej doświadczenie użytkownika, ważne jest, aby zapewnić wskaźniki postępu i wizualnych mechanizmów zwrotnych. Aby uniknąć konieczności rysowania elementów strony, w przypadku gdy ich zmiana stylów, niektóre przeglądarki, w tym IE, renderowania blokuje strony do CSS jest w pełni załadowany. Z tego powodu użytkownik dostaje zobaczyć pusta biała strona.

W standardami W3C HTML "również stwierdza, że ​​musi mi to CSS w sekcji HEAD strony HTML. at the bottom of the page, so it's best not to use it. Należy również pamiętać, że w IE @import zachowuje się tak samo, jak przy użyciu <link> na dole strony, więc nie jest najlepiej z niego korzystać.

Unikaj używania przeglądarki specyfikę

Filtry: Korzystanie z filtrem zwiększa zużycie pamięci i jest stosowana na elemencie, a nie na obrazie, więc problem jest mnożona. Także Filtry są IE Proprietary, stąd nie będzie działać zgodnie z przeznaczeniem w innych przeglądarkach. Jeśli chcesz przezroczyste lub gradient tła, użyj 1Pixel z obrazami.
Określenia: wyrażenia CSS są fajnym dodatkiem mieć w CSS, ale wciąż jest IE Specyficzną cechą. Również ważne jest, aby pamiętać, że te wyrażenia są ocenione, gdy strona jest renderowana i rozmiaru, przewijane i nawet kiedy użytkownik przesuwa kursor strony. Trzeba powiedzieć, może to wpłynąć na wydajność swojej stronie. Stąd w prostych słowach, Unikaj wyrażeń CSS, chyba że uważasz swoje plusy "waży więcej niż jego wad"

Uzewnętrznić ci CSS

Korzystanie z zewnętrznego CSS spowoduje szybsze ładowanie stron, ponieważ JavaScript i CSS są zapisywane przez przeglądarkę. Inline CSS w dokumentach HTML dostać pobierane za każdym razem dokument HTML jest wymagane. To może rzeczywiście zmniejszyć liczbę żądań HTTP wykonanych lecz następnie zwiększa rozmiar dokumentu HTML. Zewnętrzny CSS są buforowane przez przeglądarkę, rozmiar dokumentu HTML jest zmniejszona bez zwiększania liczby żądań HTTP.

Należy pamiętać, że jeśli użytkownicy witryny mają wiele odsłon na sesję i wielu stron ponownie wykorzystują te same skrypty i arkusze stylów, istnieje większe potencjalne korzyści z buforowanych plików zewnętrznych.

Zapakuj swój plik CSS

Pakowania lub pożerające swój CSS jest praktyka usuwania zbędnych znaków z kodu do zmniejszenia jej rozmiaru zwiększając w ten sposób czas wczytywania.

CSS może mnie nawał usuwając wszystkie komentarze i niepotrzebne znaki, takie jak białe spacje, znaki nowej linii itd.

Napisz IE 6, Firefox był na tyle uprzejmy dla nas programistów interfejsu użytkownika, dodając kilka dodatkowych właściwości CSS standardowe dla większości innych standardowych przeglądarek. Jednym z takich przydatna właściwość w "min-height". Dość prosta właściwość, że nie potrzebuje dużo dmuchania wyjaśnienia. Kiedy min-height dla podziału jest ustawiony, to zawsze zachowuje ten height, gdy zawartość mieści się zajmuje mniej niż może pomieścić i ważniejsze (w przeciwieństwie do zwykłego vanilla "wysokości" majątku) Wagi lub słownie CSS, zachowuje się jak Podział których wzniosłość jest ustawiony na "auto" ...

Dla niektórych z nas biednych deweloperów, którzy nadal są zobowiązane do kodu CSS, które muszą również działać w IE6, nie-dostępność "min-height", może okazać się korek pokazu kiedyś ... rozpacz dawca.

Na szczęście mamy tyle dziwactw w IE, które moglibyśmy wykorzystać na korzyść out i włamać naszą drogę, aby osiągnąć nasz cel ... czyli dokonania podziału DIVISION jakby jego min-height w IE6

Rozwiązanie 1: Użycie podkreślenia Hack [ ... Czytaj więcej ]

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

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

---

Rozwiązanie 2: Za pomocą atrybutów CSS Selector 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>


Atrybut CSS Selector Hack korzysta z faktu, że przeglądarki wcześniej tha IE6 ignorowany Atrybut o wybierak. Zwróć uwagę na wymóg innego rejonu zbiornika z class = "SomeClass". Wystarczy presense tego atrybutu klasy dla tego podziału, nadpisuje wysokość z powrotem na auto dla Opery, Mozilli i MSIE7 i późniejszych. IE6, który nie obsługuje selektory Atrybut, ignoruje go.

Zobacz demo min-height hack dla IE6

Jeśli korzystasz z XML i XSL, to mogłeś natknąć się na czas, kiedy trzeba się bawić z atrybutów i wartości węzłów XML w was XSL. Są one mnóstwo stron z długim nawijanej informacji na ten temat, ale żaden znalazłem były krótkie i precyzyjne ... To nie jest XML / XSL TUTORIAL, ale moja próba put-razem jakieś Cheat listy ...

Próbka XML, że będziemy pracować z wygląda tak ...

<?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>

A więc zaczynamy przekształcając naszą powyżej XML przy użyciu XSL

Przykład 1: Wyświetlanie wartości w wybranym Atrybut

<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 wynik będzie wyglądał

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

Przykład 2: krążący i wyświetlając wszystkie XML nazwy atrybutów i ich wartości

<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 wynik będzie wyglądał


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


Obserwuj ten miejsca, będę aktualizacji to z nowymi ustaleniami ...