Изражавајући ИТ

Пут стилесхеетс на врх

Ако желите страницу да постепено учитавање, који је, желимо прегледач да приказује садржај год она има што је пре могуће, ставите ЦСС на врху странице унутар ХЕАД докумената. То чини странице изгледа да се учитава брже, јер то олакшава прогресивни приказ странице. Ово је нарочито важно за странице са пуно садржаја и за кориснике на споријим Интернет везама.

То је документована чињеница да се побољша укупни кориснички доживљај, важно је да пружи показатеље о напретку и визуелне повратне спреге. Да не бисте морали да прекраја елементе странице, у случају да њихова промена стилова, неки претраживачи, укључујући и ИЕ, блокови за рендеровање стране док је ЦСС у потпуности учитан. Због тога, корисник може да види празна бела страница.

У В3 ХТМЛ спецификације 'такође наводи да мора да ми ЦСС укључити у ХЕАД секцију ХТМЛ странице. at the bottom of the page, so it's best not to use it. Такође имајте на уму да у ИЕ @import понаша исто као и коришћење <link> на дну странице, тако да најбоље је да га не користите.

Избегавајте коришћење читача специфичне карактеристике

Филтери: Употреба филтера повећава потрошњу меморије, а примењује се по елементу, а не по лику, па проблем је умножава. Такође, филтери су Власнички ИЕ, па неће радити како треба и у другим прегледачима. Ако желите транспарентних или градијент позадине, користите 1Пикел са сликама.
Изрази: ЦСС изрази су лепа могућност да у ЦСС, али и даље је ИЕ специфичност. Такође, важно је напоменути да, ови изрази се процењује када је страница изречена и промењена величина, и помера чак и када корисник помера миша преко странице. Непотребно је рећи да би то могло утицати на перформансе вашег странице. Отуда у једноставним речима, ЦСС Избегавајте изразе, уколико осећате њене предности "тежак више од својих мана '

Ектерналисе Вам ЦСС

Коришћење спољног ЦСС ће резултирати бржим утовара страна јер су ЈаваСцрипт и ЦСС фајлови су Сачувано од стране претраживача. Инлине ЦСС у ХТМЛ документима се преузети сваки пут ХТМЛ документ се не траже. То може заправо смањити број ХТТП захтева али је накнадно направљених повећава величину ХТМЛ документа. Екстерни ЦСС су Сачувано од стране претраживача, величина се смањује ХТМЛ документа без повећања број ХТТП захтева.

Имајте на уму да, ако корисници на вашем сајту имати више страница ставове по седници, а многи од ваших страница поново користе исте скрипте и стилове, постоји већа потенцијална корист од кешираних спољних датотека.

Пацк Иоур ЦСС Филе

Паковање или анализирање ваше ЦСС је пракса уклањања непотребних знакова из кода да смањи своју величину и тако повећава време учитавања.

ЦСС може да ми претрпан уклањајући све коментаре и неке нежељене ликове попут белих просторе, нове линије итд

Пост ИЕ 6, Виндовс НТ је био љубазан да нам УИ девелопер додавањем још неколико ЦСС својства стандардне за већину осталих стандардних претраживача. Један такав користан имовина у "мин-висине". Прилично равно напред имовина која не захтева дуго даха објашњење. Када мин-хеигхт за поделу подешено, он увек задржава тог скупа висину када садржаја куће заузима мање него што може да држи и важније (за разлику од обичног ваниле "хеигхт" имовине) скала или у ЦСС речима, она се понаша као Подела чије "хеигхт" је постављен на "ауто" ...

За неке од нас сиромашних програмера, који још увек се тражи да код ЦСС који такође морају да раде у ИЕ6, не-доступност "мин-хеигхт", могли да докажу негде запушачем схов ... Донот очај.

Срећом, имамо довољно куиркс у ИЕ, да бисмо користе за излаз предност и пијук кроз наш начин да се постигне наш циљ ... ​​тј направити поделу СЕКТОРА као да је његова висина мин у ИЕ6

Решење 1: Користећи доњу Хацк [ ... реад море ]

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

ХТМЛ је: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Решење 2: Коришћење ЦСС својстава Селектор Хацк

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

ХТМЛ је: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


ЦСС Пијук Селектор Атрибут узима предност од чињенице да прегледачи раније Тха ИЕ6 игнорисала атрибуте-селектора. Обратите пажњу на услов другу посуду подели са цласс = "сомецласс". Само пресенсе у цласс атрибут за ове поделе, замењује висину назад у ауто за Опера, Мозилла и МСИЕ7 и касније. ИЕ6, који не подржава селекторе атрибуте, да га игнорише.

Погледајте демонстрацију на мин-хеигхт хацк за ИЕ6

Ако користите КСМЛ и КССЛ, онда сте можда наишли на време, када морате да играте са атрибутима и вредностима КСМЛ чворова у вама КССЛ-а. Они су гомила сајтова са дугог даха информација о овоме, али ни сам нашао биле су кратке и јасне ... ово није КСМЛ / КССЛ туториал, али мој покушај да се стави-заједно неку врсту варања листи ...

Узорак КСМЛ да ћемо рад са изгледа овако ...

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

Дакле Летс почети трансформацију наше горе КСМЛ помоћу КССЛ

Пример 1: Приказујем вредност на изабрани атрибута

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

ХТМЛ резултат ће изгледати

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

Пример 2: лоопинг кроз приказивање и све КСМЛ атрибут Имена и њихове вредности

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

ХТМЛ резултат ће изгледати


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


Погледајте овај простор, ја ћу ажурирати овај са новим сазнањима ...