Udtrykke det

Sæt Stylesheets på toppen

Hvis du ønsker en side til at indlæse gradvis, at der er, vi ønsker browseren til at vise det indhold, det er så hurtigt som muligt, sætte CSS øverst på siden inde i dokumentet HEAD. Dette gør sider synes at være indlæsning hurtigere, da dette letter progressiv destruktion af siden. Dette er især vigtigt for sider med masser af indhold og for brugere på langsomme internetforbindelser.

Det er et dokumenteret faktum, at for at forbedre den overordnede brugeroplevelse, er det vigtigt at give fremskridtsindikatorer og visuelle feedbacks. For at undgå at skulle tegne elementer på siden, i tilfælde, hvis deres stilarter forandring, nogle browsere, herunder IE, blokerer udgave af siden, indtil CSS er fuldt lastet. På grund af dette, bliver brugeren at se en tom hvid side.

W3 HTML Specifikationer 'også, at CSS skal jeg medtage i HEAD del af HTML-side. at the bottom of the page, so it's best not to use it. Bemærk også, at I IE @import opfører sig på samme som at bruge <link> nederst på siden, så det er bedst ikke at bruge det.

Undgå at bruge Browser Specifikke træk

Filtre: Brug af filter øger hukommelsen forbrug og anvendes pr element, ikke pr billede, så problemet er mangedoblet. Også Filtre er IE Proprietary, vil derfor ikke virke efter hensigten i andre browsere. Hvis du vil have gennemsigtige eller gradient baggrunde, skal du bruge 1Pixel med billeder.
Udtryk: CSS udtryk er en god egenskab at have i CSS, men stadig er IE bestemt funktion. Det er også vigtigt at bemærke, at disse udtryk er evalueret, når siden gengives, og størrelse, rullet og selv når brugeren bevæger musen hen over siden. Det er overflødigt at sige det kan påvirke ydeevnen af ​​din side. Derfor har man i enkle ord, Undgå at bruge CSS udtryk, medmindre du føler sine fordele "vejer mere end sine ulemper"

Eksternalisere du CSS

Brug af ekstern CSS vil resultere i hurtigere indlæsning af sider, fordi JavaScript-og CSS-filer er cached af browseren. Inline CSS i HTML-dokumenter bliver hentet hver gang HTML dokument der anmodes om. Dette kan faktisk reducere antallet af HTTP-forespørgsler der foretages, men det efterfølgende øger størrelsen på HTML-dokumentet. Ekstern CSS er cached af browseren, størrelsen af ​​HTML-dokumentet er reduceret uden at øge antallet af HTTP-anmodninger.

Bemærk venligst, at hvis brugerne på dit websted har flere sidevisninger per besøg, og mange af dine sider genbruge de samme scripts og stylesheets, er der et større potentiale gavn af cachede eksterne filer.

Pak din CSS fil

Pakning eller crunching din CSS er den praksis at fjerne unødvendige tegn fra kode for at reducere dens størrelse og dermed forbedre load tider.

CSS kan jeg kværnet ved at fjerne alle de kommentarer og eventuelle uønskede tegn som hvide rum, flere linjer osv.

Indlæg IE 6, har MSIE været så venlig at os UI udviklere ved at tilføje nogle flere CSS egenskaber standard til de fleste andre standard browsere. En sådan nyttig egenskab i "min-højde". Temmelig ligetil ejendom, som ikke behøver lange forpustet forklaring. Når en min-højde for en afdeling er indstillet, er det altid bevarer det sæt højde, når det indhold, husene optager mindre end den kan rumme og vigtigere (i modsætning til plain vanilla "højden" ejendom) skalaer eller i CSS ord, den opfører sig som en spaltningen, hvis "højde" er sat til "auto" ...

For nogle af os fattige udviklere, der stadig er forpligtet til at kode, CSS, som også skal arbejde i IE6, kan un-tilgængeligheden af "min-height", vise et show prop engang ... donot fortvivlelse.

Heldigvis har vi nok særheder i IE, at vi ville bruge til at ud fordel og hacke vores vej igennem for at nå vores mål ... nemlig at gøre en division division, som om den min-højde i IE6

Løsning 1: Ved hjælp af understregning Hack [ ... Læs mere ]

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

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

---

Løsning 2: Brug af CSS attribut 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>


CSS attribut Selector Hack drager fordel af det faktum, de browsere tidligere THA IE6 ignoreret en atribute-vælgeren. Bemærk kravet om en anden beholder division med class = "someclass". Bare presense i klassen attributten for denne opdeling, tilsidesætter højden tilbage til Auto, for Opera, Mozilla og MSIE7 og senere. IE6, som ikke understøtter atribute vælgere, ignorerer det.

Se demo af min højde hack for IE6

Hvis du bruger XML-og XSL, så er du måske stødt på et tidspunkt, når du skal lege med attributter og værdier af XML noder i dig XSL. De er masser af sites med lang forpustet info om dette, men ingen jeg fandt, var kort og præcis ... dette er ikke XML / XSL TUTORIAL, men mit forsøg på at sætte-sammen en slags cheat liste ...

Prøven XML, at vi vil arbejde med ser sådan her ud ...

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

Så lad os begynde at omdanne vores ovenfor XML ved hjælp af XSL

Eksempel 1: Viser værdien på en valgt data

<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 resultat vil se ud

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

Eksempel 2: Looping igennem og vise alle XML-attribut navne og deres værdier

<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 resultat vil se ud


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


Se dette rum, vil jeg holde opdatere denne med nye fund ...