2008 24 април 2008 г.

Най-добри практики: Работа с CSS

Поставете стилове на върха

Ако искате страницата да се зареди постепенно, това означава, че искате браузъра да показва каквото и съдържание е възможно най-скоро, сложи на CSS в горната част на страницата в документа глава. Това прави страниците се появяват, за да се зарежда по-бързо, тъй като това улеснява постепенно предоставяне на страницата. Това е особено важно за страници с много съдържание и за потребителите на по-бавни интернет връзки.

Това е документирано факта, че за да се подобри цялостно изживяване на потребителя, е важно да се предоставят на показателите за напредък и визуалната обратна връзка. За да се избегне като да преначертае елементи на страницата, в случай, ако им стилове на климата, някои браузъри, включително IE, блокира предоставянето на страницата, докато CSS е напълно зареден. Поради това, потребителят може да вижда празна бяла страница.

W3 на HTML спецификации "посочва също, че СГО трябва да ме включи точка в главата на HTML страницата. at the bottom of the page, so it's best not to use it. Също така имайте предвид, че в IE @import държи същата като използване на <link> в долната част на страницата, така че най-добре е да не го използвате.

Избягвайте да използвате Браузър Особености

Филтри: Използване на филтър увеличава потреблението на памет и се прилага един елемент, а не на изображението, така че проблемът се умножава. Също така, филтрите се IE Имуществена, следователно не могат да работят както е предвидено в други браузъри. Ако искате прозрачни или градиент фон, използвайте 1Pixel с изображения.
Изрази: на CSS изрази са хубава черта, да има в CSS, но все още е IE специфична особеност. Също така е важно да се отбележи, тези изрази са оценени, когато страницата е постановено и преоразмерява, превъртат и дори, когато потребителят се движи мишката върху страницата. Излишно е да кажа, че това може да повлияе на функционирането на вашата страница. Затова с прости думи, избягвайте използването на CSS изрази, освен ако не се чувстват своите плюсове "тежи повече, отколкото" против "

Изнесе навън ви CSS

Използването на външен CSS ще доведе до по-бързо зареждане на страници, защото на JavaScript и CSS файловете се кешират от браузъра. Inline CSS в документи на HTML да се изтеглят всеки път, когато HTML документа се иска. Това всъщност може да се намали броят на исканията на HTTP, направени, но впоследствие увеличава размера на HTML документ. Външен CSS са кеширани от браузъра, се намалява размера на HTML документа, без да се увеличава броя на молбите за HTTP.

Моля, обърнете внимание, че ако потребителите на сайта си имат множество изгледи страница на сесия и много от вашите страници повторно използване на същите скриптове и стилове, има по-голяма потенциалната полза от на кеширани външни файлове.

Опаковка Вашият CSS файл

Опаковане или схрусквате на вашия CSS е практиката на премахване на ненужните знаци от код, за да се намали неговия размер, като по този начин се подобрява времето за зареждане.

CSS може да ме схруска чрез премахване на всички коментари и нежелани символи като бели пространства, нови редове и др.


2008 12 април 2008 г.

CSS кръст Browser рана Минимална височина

Мнение IE 6, MSIE е бил така любезен да ни потребителския интерфейс на разработчиците, чрез добавяне на още няколко свойства на CSS стандарт за повечето други стандартни браузъри. Една такава полезна имот в "мин. височина". Доста чисти напред собственост, която не се нуждае от много раздухан обяснение. Когато мин височина за разделение е зададена, тя винаги запазва този набор на височина, когато съдържанието в нея се помещава заема по-малко, отколкото тя може да побере и важното (за разлика от обикновеното "височина", собственост) скали или по думите на СГО, тя се държи като разделянето, чиито "височина" е настроен на "AUTO" ...

За някои от нас, бедните предприемачи, които все още са необходими за код CSS, които трябва да работят в IE6, ООН наличието на "мин. височина", може да се окаже запушалка шоу някъде ... Donot отчаяние.

За щастие, имаме достатъчно странности в IE, че ние ще се използват за извън предимство и проникна нашия път до постигането на нашата цел ... т.е. направи разделение по споровете, като че мин височина в IE6

Решение 1: Използване на долна рана [ ... Прочети повече ]

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

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


Решение 2: Използване на CSS атрибута 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>

Атрибутът CSS селектор рана се възползва от факта, браузъри рано Tha IE6 игнорира едно atribute, селектора. Обърнете внимание на изискването за разделение с друг контейнер клас = "someclass". Само присъствие на класа атрибут за това разделение, има предимство над височината обратно към Коли Opera, Mozilla и MSIE7, и по-късно. IE6, който не подкрепа на atribute селектори, го игнорира.

Преглед на Демо на мин. височина хак за IE6



2008 Апр 4 2008

Работа с възли атрибути на XML, XSLT

Ако използвате XML и XSL, тогава бихте могли да се намира време, когато трябва да си поиграете с атрибути и стойности на XML възли ви XSL. Те са много сайтове с дълъг раздухан информация за това, но никой откриха са кратки и точни ... Това е НЕ XML / XSL TUTORIAL, но моят опит да се сложи заедно някакъв вид измама списък ...

Пробата на XML, че ние ще работим с изглежда по този начин ...

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

Така че ви позволява да започнете да трансформират нашата по-горе XML Използване на XSL

Пример 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>

HTML резултатът ще изглежда така

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


Пример 2:, присвойте и показване на всички XML имена на атрибут и техните стойности

<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 резултатът ще изглежда така


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


Изтегляне на всички тези файлове, тук (248 сваляния)



Гледайте това място, аз ще да актуализира с нови открития ...


НДК начало | Изразявайки | Изразявайки Вкус | Изразявайки Penmenship | Изразявайки страхопочитание | Изразяване на себе си