Išreikšdami IT

Įdėkite Stylesheets viršų

Jei norite puslapį įkelti palaipsniui, tai yra, mes norime naršyklę rodyti, bet turinys turi kuo greičiau, CSS dokumento HEAD viduje puslapio viršuje. Tai daro, puslapiai atrodo pakrovimo greičiau, nes tai palengvina palaipsniui suteikimo puslapio. Tai ypač svarbu, puslapių su daug turinio ir vartotojų wolniejszych interneto ryšio.

Tai yra dokumentuotas faktas, kad siekiant padidinti bendrą vartotojų patirtį, svarbu pateikti pažangos rodiklius ir vaizdo Atsiliepimai. Siekiant išvengti perbraižyti puslapio elementus, jei jų stilių kaita, kai kurios naršyklės, įskaitant IE, blokai utilizavimo puslapio, kol CSS pilnai pakrautas. Dėl to, vartotojas gali matyti tuščias baltas puslapis.

W3 HTML Specifikacijoje taip pat teigiama, kad CPT turi mane įtraukti į HTML puslapį HEAD skyriuje. at the bottom of the page, so it's best not to use it. Taip pat atkreipkite dėmesį, kad IE @import elgiasi pats kaip naudojant <link> puslapio apačioje, todėl geriau jo nenaudoti.

Venkite naudojantis naršykle ypatumus

Filtrai: Naudokite skirtų filtrų padidina atminties vartojimą ir už kiekvieną elementą, o ne už įvaizdį, todėl problema yra dauginama. Be to, Filtrai IE Patentuotas, todėl bus neveikti taip, kaip numatyta kitų naršyklių. Jei norite skaidrius arba gradientas fonas, naudokite 1Pixel su nuotraukomis.
Išraiškos: CSS išsireiškimai yra gražus bruožas turėti CSS, bet vis dar yra IE ypatumas. Be to, svarbu pažymėti, kad šios išraiškos yra įvertinti puslapio vaizdas ir jo dydis, przewijany ir net kai vartotojas pajudina pelę puslapio. Nereikia nė sakyti, tai gali paveikti jūsų puslapio veikimą. Taigi Paprastais žodžiais tariant, Venkite CSS išraiškos, jeigu manote, kad, jo privalumai "sveria daugiau nei jos trūkumus"

Išorę jums CSS

Naudojant išorinį CSS bus greičiau pakrovimo puslapius, nes JavaScript ir CSS failų talpyklos naršyklės. Inline CSS HTML dokumentų siųstis HTML dokumentas yra prašoma kiekvieną kartą. Tai iš tiesų gali sumažinti skaičių HTTP prašymus, tačiau vėliau padidėja HTML dokumento dydį. Išorės CSS talpyklos naršyklės HTML dokumento dydis sumažinamas nedidinant HTTP užklausas.

Atkreipkite dėmesį, kad, jei jūsų svetainės vartotojai turi keletą puslapių peržiūrų per sesiją, ir daugelis iš jūsų puslapiuose vėl naudoti tie patys scenarijai ir stilių, yra didesnė nauda iš talpyklos išorinius failus.

Pakuotės savo CSS failą

Pakavimo ir crunching savo CSS pašalinti nereikalingus simbolius iš kodą sumažinti jos dydį ir taip pagerinti apkrovos metu praktika.

CSS gali mane krizės paliestose pašalinant visus komentarus ir nereikalingus simbolius, pavyzdžiui, baltųjų erdvių, naujas eilutes ir tt

Standartinė IE 6, MSIE buvo natūra Pakanka mus UI kūrėjams pridedant keletą CSS daugumai kitų standartinių naršyklių standartines savybes. Viena tokia naudinga "min-aukštis" nuosavybė. Gana važiuoti tiesiai į priekį nuosavybė, nereikia ilgai kalbantis paaiškinimą. Min aukštis skaidymui vykdyti, visada išlaiko tą nustatytą aukštį, kai turinys ji namai užima mažiau nei jis gali turėti ir svarbiausia (skirtingai nuo paprasto vanilės "aukščio" nuosavybė) svarstyklių arba CSS tariant, ji elgiasi kaip padalinys, kurio "Aukštis" yra nustatytas į "auto" ...

Kai kurie iš mūsų skurdžių kūrėjams, kurie vis dar reikalingi kodas CSS, kad taip pat turi dirbti IE6 ir prieinamumas "min-aukštis", gali pasirodyti šou kamštį kažkada ... Donot neviltį.

Laimei, mes turime pakankamai Photoshop IE, kad mes turėtume naudoti iš pranašumo ir nulaužti mūsų būdas pasiekti savo tikslą ... ty skyrius Skyriaus lyg min aukštis IE6

Sprendimas 1: Naudokite pabraukimo Hack [ ... daugiau ]

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

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

---

Sprendimas 2: Naudojant CSS Selector Pavadinimas 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 charakteristika ieškiklis Hack pasinaudoja tuo, naršyklių anksčiau THA IE6 ignoravo atribute-selector. Atkreipkite dėmesį į reikalavimą kitos konteinerių padalint class = "someclass". Tiesiog klasės atributą šio skyriaus matomumą, yra viršesnis už aukštį auto Opera, Mozilla ir MSIE7 ir vėliau. IE6, kuris nepalaiko atribute selektoriai, jį ignoruoja.

Peržiūrėti Demo min aukštis Hack IE6

Jei naudojate XML ir XSL, tada jūs galbūt Natknąć metu, kai jūs turite žaisti aplink su XML mazgų jums XSL, atributų ir vertybių. Yra apkrovų svetaines su ilgai kalbantis info apie tai, tačiau nė viena radau buvo trumpa ir tiksli ... Tai NO XML / XSL TUTORIAL, tačiau mano bandymas įdėti kartu kažkokią cheat sąrašą ...

XML pavyzdys, kad mes dirbame su atrodo taip ...

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

Taigi galime pradėti transformuoti mūsų aukščiau XML naudojant XSL

1 pavyzdys: Parodyta vertę pasirinktą charakteristika

<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 rezultatas atrodys

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

2 pavyzdys: Anglų k, per ir rodyti visas XML atributų vardai ir jų reikšmės

<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 rezultatas atrodys


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


Stebėkite šią erdvę, aš nuolat atnaujinti šį naujus nustatytus faktus ...