IT kifejezése

Tedd Stíluslapok a Top

Ha szeretne egy oldal kiszámításának fokozatosan, vagyis szeretnénk megjeleníteni a böngésző, amit tartalommal azt a lehető leghamarabb, tedd a CSS az oldal tetején a dokumentum HEAD belül. Ez teszi oldalakat úgy tűnik, hogy gyorsabb betöltés, mert ez megkönnyíti a progresszív készít az oldalról. Ez különösen fontos olyan oldalakat, ahol sok a tartalom és a felhasználók lassabb internet kapcsolattal.

Ez egy dokumentált tény, hogy a felhasználói élmény fokozása, fontos, hogy a megvalósulási mutatókkal és vizuális visszajelzéssel. Hogy ne kelljen újrarajzolni az oldal elemeit, abban az esetben, ha a stílusok változását, egyes böngészők, beleértve az IE, blokkokat készít az oldalról, míg a CSS teljesen meg van töltve. Emiatt, a felhasználó kap, hogy egy üres fehér oldal.

A W3 HTML Specifications "is kimondja, hogy a CSS-t kell nekem is a HEAD részben a HTML-oldal. at the bottom of the page, so it's best not to use it. Szintén fontos megjegyezni, hogy az IE @import ugyanúgy viselkedik, mint használ <link> alján található az oldalon, így legjobb, ha nem használja.

Kerülje a böngésző sajátosságai

Szűrők: a szűrő használata növeli a memória-felhasználás és alkalmazni elemenként, nem pedig a kép, ezért a problémát meg kell szorozni. Is, szűrők IE Egyedi, így nem fog működni a tervezettnek más böngészőkben. Ha azt szeretnénk, átlátszó vagy színátmenetes háttérrel, használja 1Pixel képekkel.
Kifejezések: CSS kifejezések egy szép vonás, hogy a CSS-ben, de még mindig az IE sajátossága. Szintén fontos megjegyezni, hogy ezek a kifejezések értékelni, ha az oldal megjelenítésekor és átméretezett, görgetni, és akkor is, ha a felhasználó megmozdítja az egeret az oldalon. Mondanom sem kell, ez befolyásolja a teljesítményét az oldal. Ezért egyszerű szavakkal, ne használja a CSS kifejezéseket, ha úgy érzi, a profik "nehezebb, mint a hátránya"

Kihelyezni úgy CSS

A külső CSS eredményez gyorsabb betöltését oldalakat, mert a JavaScript és CSS fájlok cache a böngésző. Inline CSS a HTML dokumentumokban kap minden egyes alkalommal letöltődnek a HTML dokumentum kérik. Ez talán valóban számának csökkentése HTTP kérések, de ezt követően növeli a méretét a HTML dokumentumba. A külső CSS vannak a böngésző cache, a méret a HTML dokumentum csökken anélkül, hogy növelné a HTTP kérések számát.

Felhívjuk figyelmét, hogy ha a felhasználók a honlapján több oldalletöltést per session és sok a lapok újra ugyanazt a szkriptek és stíluslapok, van egy nagyobb valószínűséggel részesül a külső fájlok cache-elt.

Csomagolja a CSS fájl

Csomagolási vagy ropogó a CSS a gyakorlatban kell törölni a felesleges karaktereket kód méretének csökkentésére és ezáltal javítja a rakodási idő.

A CSS-t nekem csikorgott azáltal, hogy megszünteti a megjegyzéseket és a nem kívánt karaktereket, mint a fehér terek, újsor stb

Hozzászólás IE 6, MSIE volt olyan kedves, hogy minket a fejlesztők UI hozzáadásával még néhány CSS tulajdonságok szabvány legtöbb szabványos böngészőkben. Az egyik ilyen hasznos tulajdonság "min-height". Szép egyenes továbbít tulajdonsága, amely nem igényel hosszú magyarázatot kifulladt. Amikor egy min-height egy részlege van beállítva, hogy mindig fenntartja, hogy a beállított magasság, ha a tartalom is kisebb helyet foglal, mint a házakat képes tárolni és a fontosabb (ellentétben a plain vanilla "height" tulajdon) mérlegek vagy CSS szavakat, akkor úgy viselkedik, mint egy részlege, amelynek "magassága" beállítása "auto" ...

Másoknak közülünk szegény fejlesztők, akik még mindig van szükség, hogy a CSS kódot is dolgozniuk kell az IE6, az ENSZ-elérhetőségét a "min-height" bizonyulhat hazavágja valamikor ... Donot kétségbeesés.

Szerencsére, van elég furcsa szokásai az IE-ben, hogy mi lenne arra használni, hogy előnyös, és csapkod a végig, hogy elérjük azt a célt ... azaz, hogy az osztály részlege, mintha a min-height az IE6

1. megoldás: A aláhúzás Hack [ ... Bővebben ]

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

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

---

2. megoldás: A CSS attribútum szelektor 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>


A CSS attribútum szelektor Hack kihasználja azt a tényt, a böngészők figyelmen kívül hagyja a korábbi tha IE6-1 attribútum a felhasznált választó. Megjegyzés: a követelmény másik tartályba szétválási class = "someclass". Csak a presense az osztály attribútum ezt a felosztást, felülírja az automatikus magasság vissza az Opera, Mozilla és MSIE7 majd. IE6, ami nem támogatja attribútum a felhasznált választókkal, figyelmen kívül hagyja azt.

Demo megtekintése a min-height csapkod IE6

Ha az XML és XSL, akkor lehet, hogy találkoznak, egy idő, amikor el kell játszani körül tulajdonságok és értékek az XML csomópontok benned XSL. Ők rengeteg helyszínek hosszú kifulladó erről, de egyik sem találtam voltak rövid és pontos ... Ez nem XML / XSL tutorial, de a kísérletet tenni, össze valamiféle csalás lista ...

Az XML-mintát, hogy mi dolgozunk így néz ki ...

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

Így lehetővé teszi kezdődik átalakítja a fenti XML-XSL felhasználásával

1. példa: érték kijelzése egy kiválasztott jellemző

<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 eredmény így fog kinézni

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

2. példa: a loop és megjelenítése az összes XML-attribútum nevek és értékek

<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 eredmény így fog kinézni


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


Nézd ezt a helyet, én folyamatosan frissítenek az új eredmények ...