Ilmaista sitä

Laita Tyylitaulukkoja huipulla

Jos haluat sivu latautuu asteittain, eli haluamme selain näyttää mitä sisältöä siinä on mahdollisimman pian, laita CSS yläreunassa sivun sisältä dokumentin HEAD. Tämä tekee sivut näyttää olevan lastaus nopeammin, koska tämä helpottaa progressiivinen lajia sivun. Tämä on erityisen tärkeää sivua paljon sisältöä ja käyttäjille hitaammilla internet-yhteydet.

Se on dokumentoitu se, että se lisäisi käyttökokemusta, on tärkeää tarjota edistymistä mittaavat indikaattorit ja visuaalisia palautteita. Jottei tarvitsisi piirtää elementtejä sivulla, jos niiden tyyliä muutosta, jotkut selaimet, kuten IE, estää renderöinti sivun kunnes CSS on kokonaan latautunut. Tämän vuoksi, käyttäjä ei saa nähdä tyhjä valkoinen sivu.

W3 HTML Tekniset "todetaan myös, että CSS on minulle kuuluu HEAD-osioon HTML-sivun. at the bottom of the page, so it's best not to use it. Huomaa myös, että IE @import toimii samoin kuin käyttämällä <link> alareunassa sivun, joten se on parasta olla käyttämättä sitä.

Vältä selaimen erityispiirteet

Suodattimet: Käytä suodattimen lisää muistin kulutusta ja sitä sovelletaan kohti elementti, ei kuvaa kohti, joten ongelma kerrotaan. Myös suodattimet ovat IE suojattuja, joten ei toimi tarkoitetulla muissa selaimissa. Jos haluat läpinäkyvä tai liukuväri tausta, käytä 1Pixel kuviin.
Expressions: CSS ilmaisut ovat mukava ominaisuus on CSS, mutta silti on IE erityispiirre. Lisäksi on huomattava, että Nämä ilmaisut arvioidaan, kun sivu muodostetaan ja kokoa, selata ja silloinkin, kun käyttäjä siirtää hiirtä sivun. Tarpeetonta sanoa tämä saattaisi vaikuttaa suorituskykyyn oman sivun. Näin yksinkertaisin sanoin, Vältä CSS ilmaisuja, ellet tunne sen eduista "painaa enemmän kuin huonoja"

Ulkoistaa te CSS

Ulkoisen CSS mahdollistaa nopeammat kuormitus sivut, koska JavaScript-ja CSS-tiedostot välimuistiin selaimen. Inline CSS HTML-asiakirjoissa saa ladata aina HTML asiakirja on pyydetty. Tämä voi todella vähentää määrää HTTP-pyyntöjen mutta sen jälkeen koko kasvaa HTML asiakirjan. Ulkoinen CSS välimuistiin selaimen, koko HTML asiakirjan pienenee lisäämättä määrää HTTP-pyyntöjä.

Huomaa, että jos käyttäjät sivustossasi on useita sivun näyttökertaa istunto ja monet sivut uudelleen käyttää samaa skriptit ja stylesheets, on paremmat mahdollisuudet hyötyä välimuistiin ulkopuolisista tiedostoista.

Pakkaa CSS-tiedosto

Pakkaus tai murskaukseen CSS on käytäntö poistaa tarpeettomat merkit koodia sen pienentämiseksi ja siten parantaa latausaikoja.

CSS voi minua crunched poistamalla kaikki kommentit epätoivotut merkkejä kuten välilyöntejä, rivinvaihtoja yms.

Viesti IE 6, MSIE on ystävällisesti meille UI kehittäjille lisäämällä muutaman CSS-ominaisuuksia vakiona useimpiin muihin standardin selaimilla. Eräs tällainen käytännöllinen omaisuutta "min-height". Aika suoraviivainen ominaisuus joka ei kaipaa pitkiä winded selitystä. Kun min korkeus jako on asetettu, se jää aina että joukko korkeudelle, kun sisältöä on talot vie vähemmän kuin sille mahtuu ja tärkeintä (toisin kuin plain vanilla "height" omaisuus) asteikkojen tai CSS sanoen, se käyttäytyy kuin jako, jonka "korkeus" on "auto" ...

Joillekin meistä huonon kehittäjille, jotka edelleen vaaditaan koodin CSS on työskenneltävä myös IE6, un-saatavuus "min-height" saattaa osoittautua näytä tulppa joskus ... antaja epätoivoon.

Onneksi meillä on tarpeeksi koukero IE, että voisimme käyttää pois etua ja hakata tiemme läpi saavuttaa tavoitteemme ... eli tehdä DIVISION divisioona ikään kuin sen min-height on IE6

Ratkaisu 1: Käyttämällä alaviivaa Hack [ ... Lue Lisää ]

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

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

---

Ratkaisu 2: Käyttämällä CSS ominaisuus valitsin 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 Määritteiden valitsin Hack hyödyntää siitä selaimet aiemmin tha IE6 sivuuttaa atribute-valitsin. Huomaa vaatimus toiseen astiaan rajapinnan class = "jokinLuokka". Vain presense luokan attribuutin Tämän jaon, ohittaa korkeus takaisin auto, Opera, Mozilla ja MSIE7 ja myöhemmin. IE6, joka ei tue atribute valitsimet, ohittaa sen.

Katso esittely ja min-height hakata IE6

Jos käytät XML ja XSL, niin saatat törmännyt aika, kun on leikkiä määreitä XML solmujen sinua XSL. Ne ovat kuormien sivustoja pitkä hengästynyt tietoa tästä, mutta kukaan löysin olivat lyhyitä ja tarkkoja ... Tämä ei ole XML / XSL TUTORIAL, mutta minun yrittää laittaa keskustelutilaisuuteen jonkinlainen huijari lista ...

XML, että saamme työskennellä tämän näköinen ...

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

Joten avulla alkaa muuttaa meidän edellä XML XSL

Esimerkki 1: Tuotteet arvo on valittu ominaisuus

<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 tulos näyttää

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

Esimerkki 2: läpiohjaus ja näytetään kaikki XML-attribuuttien nimet ja niiden arvot

<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 tulos näyttää


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


Tilaihme, aion pitää päivittää tähän uusia tuloksia ...