Vyjadrenie IT

Dajte štýly na začiatok

Ak chcete stránku načítať postupne, to znamená, chceme, aby prehliadač zobrazí obsah bez ohľadu na to má, akonáhle je to možné, dať CSS v hornej časti stránky vo vnútri dokumentu HEAD. Tým stránky sa zdajú byť rýchlejšie načítanie, pretože to uľahčuje postupné vykresľovanie stránky. To je dôležité najmä pre stránky s množstvom obsahu a pre užívateľa na pomalšom pripojení k Internetu.

Je zdokumentované, že pre celkové zlepšenie užívateľského prostredia, je dôležité, aby indikátory a vizuálnej spätnej väzby. Aby sa predišlo nutnosti prekreslenie prvkov na stránke, v prípade, ak ich štýly sa menia, niektoré prehliadače vrátane IE, bloky stvárnenie stránky, kým CSS je úplne zaplnený. Pretože toto, používateľ uvidí prázdna biela stránka.

V W3 HTML špecifikácie "ďalej uvádza, že CSS je mi zahrnúť do HEAD časti stránky HTML. at the bottom of the page, so it's best not to use it. Tiež si všimnite, že v IE @import sa chová rovnako ako pri použití <link> v dolnej časti stránky, takže je to najlepšie, aby ju používať.

Vyhnite sa použitie prehliadača špecifiká

Filtre: Použitie filtra zvyšuje spotrebu pamäte a aplikuje sa na prvok, a to za snímku, takže je problém sa násobí. Tiež Filtre sú IE Vlastné, bude teda fungovať podľa plánu v iných prehliadačoch. Ak chcete priehľadné pozadie alebo prechod, použite 1Pixel s obrázkami.
Výrazy: CSS výrazy sú pekná vlastnosť mať v CSS, ale stále je IE špecifické funkcie. Tiež je dôležité si uvedomiť, že tieto výrazy sú hodnotené, ak je stránka vydanie a veľkosť, posúvať a dokonca aj keď používateľ presunie kurzor myši na stránke. Netreba hovoriť, že by to mohlo ovplyvniť výkon vašej stránky. Preto v jednoduchých slov, nepoužívajte CSS výrazy, ak si myslíte, ich klady "váži viac ako jeho cons"

Externalizovať vám CSS

Pomocou externého CSS bude mať za následok rýchlejšie načítanie stránky, pretože JavaScript a CSS súborov sú ukladané do vyrovnávacej pamäte prehliadača. Inline CSS v dokumentoch HTML si stiahnuť každom dokumente HTML je požadované. To by v skutočnosti mohli znížiť počet HTTP požiadaviek vyrobených ale následne sa zväčší veľkosť dokumentu HTML. Externý CSS, sú uložené v prehliadači, veľkosť dokumentu HTML je znížená bez zvýšenia počtu HTTP požiadaviek.

Vezmite prosím na vedomie, že ak užívatelia na svojich stránkach majú viac zobrazení stránky na zasadnutí a mnoho z vašich stránok znova použiť rovnaké skripty a štýly, tam je väčší potenciálny prínos z externých súborov uložených vo vyrovnávacej pamäti.

Zabaľte svoj CSS súbor

Balenie alebo škrípať vaše CSS je prax odstránenie zbytočných znakov z kódu znížiť jeho veľkosť a tým zlepšuje načítanie krát.

CSS je mi praskali tým, že odstráni všetky pripomienky a nežiadúce znaky, ako je bielych miest, nové riadky pod

Príspevok IE 6, MSIE bol taký láskavý, že nám UI vývojárov tým, že pridá ešte niekoľko ďalších vlastností CSS štandardné pre väčšinu ostatných štandardných prehliadačov. Jeden taký užitočné majetok "min-height". Docela rovno vpred majetok, ktorý nepotrebuje dlhú zubořezu vysvetlenie. Ak je nastavená min-height pre rozdelenie, vždy si zachováva nastavenú výšku, že keď obsah je tu zaberá menej ako to môže mať a hlavne (na rozdiel od plain vanilla "Height" majetku) váhy, alebo v slovách CSS, chová sa ako divízie ktorých "výška" je nastavený na "AUTO" ...

Pre niektoré z nás chudobných vývojárov, ktorí ešte sú nutné pre CSS kód, ktorý musí tiež pracovať v IE6, by ne-dostupnosť "min-height", ukázať show zátky niekedy ... donot zúfalstva.

Našťastie máme dosť vtipy v IE, ktoré by sme použili na von výhodu a zaseknúť našu cestu k dosiahnutiu nášho cieľa ... teda urobiť Oddelenie Oddelenie, ako by jeho min-height v IE6

Riešenie 1: Použitie Podtržítkový hack [ ... Prečítajte si viac ]

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

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

---

Riešenie 2: pomocou atribútu CSS hack Selector

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


Atribút CSS Selector Hack využíva skutočnosť, že starší prehliadača IE6 tha ignoroval atribútom voliča. Na vedomie, že iné rozdelenie kontajnera s class = "someclass". Len presense zo atribút class pre túto divíziu, prepíše výšky späť na auto pre Opera, Mozilla a MSIE7 a novšie. IE6, ktorý nepodporuje atribútom selektory, ignoruje ju.

Zobraziť ukážku z min-height hacku pre IE6

Ak používate XML a XSL, potom ste možno narazili na dobu, kedy budete musieť pohrať s vlastnosťami a hodnotami XML uzlov vo vás XSL. Sú hŕbu miest s dlhou zubořezu informácií o tomto, ale žiadny som našiel boli krátke a presné ... To nie je XML / XSL tutoriál, ale môj pokus dať dohromady, nejaký cheat zoznam ...

Vzorka XML, že budeme pracovať s vyzerá takto ...

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

Umožňuje tak začína transformácia našej nad XML pomocou XSL

Príklad 1: Zobrazenie hodnoty na vybrané parametre

<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 Výsledok bude vyzerať

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

Príklad 2: Opakovanie pomocou XML a zobrazenie všetkých názvy atribútov a ich hodnoty

<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 Výsledok bude vyzerať


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


Na tomto mieste, budem držať aktualizáciu to s novými poznatkami ...