CSS3 градієнти
Safari 4+, Chrome 1+, Firefox 3.6+ та Opera 11.10+ - всі підтримують CSS3 градієнти. Така велика підтримка створює прийнятні умови використання градієнтів. Хороша новина і в тому, що можна визначити зображення, яке буде використане у тому випадку, якщо ваш браузер не підтримує градієнти.
Але зачекайте… якщо ви так чи інакше використовуєте зображення, до чого турбуватися про градієнти CSS? Частково це спантеличує, але є важливий аспект, цінність якого ось у чому:браузери, які підтримують градієнти, не завантажують резервні зображення. Тим самим ми уникнемо непотрібного HTTP запиту, що зробить завантаження нашого сайту трохи швидшим.
Як це працює
Відразу переходимо до суті, ось CSS простого лінійного градієнта від початку до кінця.
Різний синтаксис для різних двигунів рендерингу
Mozilla (Firefox, Flock, etc)
Синтаксис для мозили виглядає так:
Для того щоб оголосити градієнт, достатньо прописати список кольорів через кому. Стартуємо з верху та рухаємося до основи з рівновіддаленими зупинками для кожного кольору. У демо прикладі також задана точка відліку та кут (90deg), під яким йде градієнт. Для радіального градієнта: -moz-radial-gradient.
WebKit (Safari, Chrome, etc)
WebKit синтаксис для Chrome 1-9 та Safari 4-5 виглядає так:
Вони спростили старий синтаксис і починаючи з Chrome 10 та Safari 5.1 синтаксис виглядає так:
Починаючи з Opera 11.10, Opera підтримує CSS3 градієнти у тому ж синтаксисі як Mozilla та останні WebKit's.
Trident (IE)
Насправді це зовсім не CSS3, але для trident's синтаксис виглядає так:
Filter повинен працювати в IE6-IE8, але це не валідний код. "-ms-filter" валідаціюпройде, але працюватиме лише в IE8.
Оптимізація запитів HTTP
Використовуючи firebug, відобразіть у вкладці мережу всі ресурси, задіяні на сторінці, ви побачите переваги.
Цей скріншот зроблено у Firefox 3.6. Ми можемо помітити, що резервне зображення не завантажене, тим самим ми позбулися зайвого запиту HTTP. Однак у firefox 3.5.8 резервне зображеннязавантажилося.
Ми не позбудемося зайвих HTTP запитів у старих версіях Firefox (3.5.8 на Vista). Резервне зображення градієнтів, як і раніше, завантажується (і використовується). У webkit браузерах невизначеності із запитами ще більше.
Працюємо з числами
Розтягуємо
Коли використовують зображення з градієнтом, зазвичай CSS застосовують повторення (repeat) вздовж осей (x або y). Для вирішення цієї задачі достатньо зображення шириною 1px, яке дуже ефективно,мудрий розмір. В результаті, певна частина фону буде з градієнтом (та частина, яку покриє зображення), а інша частина, яка вийде за зображення, матиме однорідний колір. Місцями, все ж таки, використовувати CSS3 градієнти, розтягнувши їх на всю висоту коробки, краще. Це ще одна штука, де можна використовувати CSS3 градієнти:
Отже, важливе питання. варто використовувати градієнти зараз?
Скоріше так, підіть на це, особливо для лінійних градієнтів. Лінійні градієнти забезпечують непогану кросбраузерну сумісність і досить швидко опускаються в тих браузерах, які не підтримують лінійні градієнти. Звичайно, все залежить від конкретного використання, але зазвичай градієнти більш привабливі ніж резервні зображення або зображення з однорідним кольором.