CSS3 вже сьогодні

За цей рік у світі веб-технологій появилось дуже багато нового - появився IE9, Firefox зріс з версії 3.6 до 8, Chrome - з 9 до 14, появилось багато нових фішок CSS3... Але коли розробник бачить нову фічу - головне питання яке виникає: яка підтримка цієї можливості старими браузерами, особливо IE6/7/8? Деякі можливості занадто нові і підтримуються тільки одним браузером, для деяких є бібліотеки які додають її підтримку до старих браузерів, а деякі можливості є чисто декоративними - не велика біда якщо в якомусь браузері якась штучка буде виглядати трохи гірше. Тож які CSS3 можливості можна використовувати сьогодні, а які ні? Про це та інше і піде мова.

План:

IE6/7 вимирають, ура!
IE9.js
PIE
SASS + Compass
Інші можливості

IE6/7 вимирають, ура!

Коли говорять про «старі браузери» то переважно мають на увазі IE6/7. Нагадаю, що IE6 вийшов 2001 року, а IE7 - 2006. IE6 довгий час залишався популярним в основному через успіх Windows XP, а IE7 не став надто популярним через провал Windows Vista.
Наскільки важливою є підтримка цих браузерів сьогодні?

Загалом тенденція по браузерах така:

Тенденція браузерів станом на жовтень 2011

Видно що домогосподарки почали пересідати на хром.

Тепер ситуація з розподілом версій IE - я спробував зібрати статистику з різних джерел за жовтень 2011:

Звідки дані	IE 9	IE 8	IE 7	IE 6
w3cschools	5.1 %	11.8 %	3.5 %	1.3 %
w3counter	7.3 %	17.7 %	6.9 %	2.2 %
statcounter світ	9.7 %	23.9 %	4.2 %	2.3 %
statcounter європа	10.4 %	18.1 %	3.3 %	0.9 %
statcounter україна	5.1 %	7.1 %	1.5 %	0.7 %
lukom.org	1.1 %	5.4 %	1.9 %	1.4 %

Популярність IE6 за різними даними не перевищує 2-3%, а його підтримка є складною. Популярність IE7 падає, але ще не впала дуже низько. Тому зараз важливою є підтримка IE7/8/9, причому IE7 можна підтримувати частково - не варто бути дуже прискіпливим до неточностей оформлення.

IE9.js

IE9.js – чудова javascript-бібліотека Дена Едвардса, яка виправляє баги і «підтягує» IE6/7/8 до IE9. Таким чином можна користуватись дуже багатьма можливостями які є в IE9 вже сьогодні! Звучить чудово, але є й недоліки:

швидкість завантаження сторінки в IE7/8 зменшується (ie9.js досить важкий скрипт - 42кб стиснутий)
не всі зазначені можливості працюють повністю, деколи можна напоротись на певні «особливості»

Ключові можливості, які надає бібліотека:

Комбінатори > + ~
:hover на всіх елементах
css2/3 селектори такі як :first-child, :checked, [attr], :not(), :nth-child(), ...
css-декларації: opacity, min-width, position:fixed, margin:auto, ...
напівпрозорість PNG
псевдоелементи :before та :after, а також content:attr() та content:url()
html5 елементи

Незважаючи на недоліки, ie9.js - це великий крок вперед, і раджу використовувати цю бібліотеку. Можна також використати ie8.js для IE7. Цікавою альтернативою є Selectivizr - він додає підтримку деяких селекторів і важить всього 5кб.

PIE

PIE (пиріг) — ще одна чудова бібліотека, яка додає для IE6/7/8/9 підтримку деяких «прогресивних» css3 декларацій.

Недоліки:

довше завантаження сторінки
якщо багато елементів може гальмувати сторінка загалом
не всі можливості працюють повністю (описано в доці)
треба додати до елемента на який навішується pie position:relative або position:absolute, або на батьківський елемент position:relative; z-index:1
є, звісно, і «особливості»

Додає такі css3 можливості:

border-radius
box-shadow
border-image
multiple background images
linear gradient
rgba

Без цих можливостей важко зараз зробити гарний сайт, тож рекомендую цю бібліотеку до використання!

SASS + Compass

SASS — покращений CSS, додає наслідування, функції та змінні. Сас в кінцевому результаті перетворюється на css-код.

Compass — фреймворк для SASS, який додає багато корисних хелперів, генерує спрайти, автоматично додає браузерні префікси (-moz, -webkit, ...), має інтеграцію з PIE, blueprint і таке інше.

Сас та компас потребують рубі.

Ці інструменти роблять роботу з css зручною для веб-розробника.

Інші можливості

Деякі цікаві css-трюки, які пов’язані з незнанням нових можливостей і не тільки:

Нестандартні шрифти (@font-face)
Не всі знають, що нестандартні шрифти підтримуються всіма браузерами, включно з IE6! До речі, безплатні шрифти можна підключати прямо з гугла.
Вбудовані картинки (data:url)
Картинки та шрифти можна вбудовувати прямо в CSS-файл - звичайно це актуально лише для маленьких картинок, які мають маленький розмір - пару сотень байт. Це потрібно робити для зменшення кількості реквестів до сервера. Цю можливість підтримують всі браузери, крім IE6/7 - для них можна зробити фолбек, наприклад:
```
.ui-widget-content {
  background: #fcfdfd url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAGElEQVQY02P48/fvf4YRSfzFSfz7N6wJAMTajFB8IEgoAAAAAElFTkSuQmCC') 50% bottom repeat-x;
  ...
}
.lt-ie8 .ui-widget-content {
  background-image: url(/assets/plugins/jquery-ui/ui-bg_inset-hard_100_fcfdfd_1x100.png);
}
```
Причому в компасі для цього є спеціальний хелпер.
До речі, для оптимізації png-шок рекомендую сервіс Smush.it

Спрайти
Об’єднувати картинки потрібно для зменшення кількості реквестів до сервера, та відповідно збільшення швидкості завантаження сторінки. Для цієї потреби я використовую компас - він автоматично будує спрайт з картинок в певній папці та виставляє відповідний background-position. Приклад:

@import "all-combined/*.png";  # all-combined - назва папки

.previous-button {
  @include all-combined-sprite(previous-button-hover);  # згенерує background-position для цієї картинки
  @include all-combined-sprite(previous-button, true);  # згенерує background-position та width/height цієї картинки
  @include all-combined-sprite(colorbox-controls-sprite, false, -76px, 0);  # це для спрайта у спрайті, 3/4 параметри - це зміщення картинки у вкладеному спрайті
}

іва

SVG-графіка
Для кросбраузерного svg є бібліотека Raphaël, а також можна вбудовувати за допомогою data:url з фолбеком для IE.
Трансформації
cssSandpaper - додає підтримку rotate, scale, skew, matrix
jqueryRotate - додає rotate за допомогою canvas/vml
Переходи (Transitions)
Не плутати з IE-фільтром! Не працюють в IE, але для ледь-помітних декоративних цілей можна додавати. Наприклад їх додає Twitter bootstrap для текстових полей.

Насамкінець треба згадати сайт на якому можнна подивитись підтримку браузерами можливостей CSS3 - http://caniuse.com/

P.S. Багато з оповіданих можливостей використано на цьому сайті, так що можете поінспектати елементи :)