Висловлюючи 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


Дивитися це простір, я буду оновлювати цей нових висновків ...