Выражая IT

Положите стилей в Top

Если вы хотите, чтобы страница загружается постепенно, то есть, мы хотим, чтобы браузер отобразить все содержимое он как можно скорее, поставить CSS в верхней части страницы внутри документа HEAD. Это делает страницы, как представляется, загрузка быстрее, так как это способствует прогрессивным оказание страницы. Это особенно важно для страниц с большим количеством контента и для пользователей медленных подключений к Интернету.

Это документированный факт, что для повышения общего пользовательского опыта, важно обеспечить прогресс показателей и визуальное обратной связи. Чтобы избежать перерисовки элементов на странице, в случае их изменения стилей, некоторые браузеры, включая Internet Explorer, блоков рендеринга страницы, пока CSS полностью загружен. Благодаря этому, пользователь получает видеть пустая белая страница.

W3 HTML характеристики "также заявляет, что CSS должна включать меня в головной части HTML-страницы. at the bottom of the page, so it's best not to use it. Также отметим, что в IE @import ведет себя так же, как использование <link> в нижней части страницы, поэтому лучше не использовать.

Избегайте использования браузера особенности

Фильтры: Использование фильтров увеличивает потребление памяти и применяется для каждого элемента, а не на изображение, так что проблема умножается. Кроме того, Фильтры IE собственности, следовательно, не будет работать, как предполагалось в других браузерах. Если вы хотите прозрачных или градиент фона, использовать 1Pixel с изображениями.
Выражения: CSS выражения хорошая возможность, чтобы в CSS, но до сих пор IE особенность. Кроме того, важно отметить, что эти выражения оценивается при отображении страницы и размер, и даже прокручивается, когда пользователь перемещает указатель мыши на странице. Нечего и говорить, это может повлиять на производительность вашей странице. Таким образом, в простых словах, Избегайте использования CSS выражения, если вы чувствуете свои плюсы "весит больше, чем минусов"

Externalise вы CSS

Использование внешних CSS приведет к более быстрой загрузки страницы, поскольку JavaScript и CSS файлы кэшируются в браузере. Встроенные CSS в документах HTML получить скачали каждый раз, когда документ HTML запрашивается. Это может действительно уменьшить количество запросов HTTP сделано, но впоследствии увеличивает размер HTML-документа. Внешний CSS кэшируются браузером, размер документа HTML уменьшается, не увеличивая число запросов HTTP.

Обратите внимание, что, если пользователи на вашем сайте есть несколько просмотров страниц за сеанс, и многие из ваших страниц повторно использовать те же скрипты и таблицы стилей, есть большая потенциальная выгода от кэшированные внешние файлы.

Пакет Ваш CSS файл

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

CSS может меня хрустел, удаляя все комментарии и любые нежелательные символы, такие как пробелы, новые строки и т.д.

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

Для некоторых из нас, бедных разработчиков, которые все еще ​​необходимы для кода CSS, которые должны работать в IE6, не-наличие "мин-высота", может оказаться показывать пробки где-то ... Не допускайте попадания отчаяния.

К счастью, у нас достаточно причуды в IE, что мы будем использовать, чтобы из преимуществ и взломать наш путь для достижения нашей цели ... то есть сделать DIVISION разделение, как будто ее мини-высота в IE6

Решение 1: Использование подчеркивания Hack [ Читать далее ... ]

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

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

---

Решение 2: Использование атрибутов CSS 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 Selector Hack использует тот факт, что браузер IE6 Tha ранее игнорировались atribute-селектор. Обратите внимание на требование другой контейнер деление с классом = "SomeClass". Просто presense класса атрибута для этого отдела, перекрывает рост к авто для Opera, Mozilla и MSIE7 и выше. IE6, который не поддерживает atribute селекторов, игнорирует его.

Посмотреть демо мин высота хак для IE6

Если вы используете XML и XSL, то вы могли встретить то время, когда нужно играть с атрибутами и значениями узлами вы XSL. Они нагрузок сайтов долго наматывается информацию об этом, но никто не нашел были краткими и точными ... Это не XML / XSL учебника, но мои попытки поставить вместе, какой-то обман список ...

Образец 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


Смотреть это пространство, я буду обновлять этот новым выводам ...