При використанні CSS 3.0 більше не потрібно робити завантаження фонових зображень, на зміну стандартному розширенню зображень .PNG приходять відповідні інструменти, для роботою з зображеннями. З кожним місяцем, все більше сайтів переходять на використання нової технології CSS 3.0, таким чином оновлена версія мови дуже впевнено, але хоч і повільно, адаптується в мережі інтернет. Оновлена технологія мови CSS версії 3.0 сприяє збільшенню швидкості прогрузки інтернет - сторінок, пов'язано це з тим що через зменшення розміром файлів значно скорочується кількість HTTP запитів. Провести відстеження часу завантаження сторінок інтернет ресурсів можна за допомогою Pingdom.
На зображенні вироблено порівняння двох версій мови CSS. Виходячи з цього можна з легкістю помітити що зображення було стиснуте на 81,3 кб, це дозволяє скоротити час завантаження сторінки інтернет ресурсу на 1, 4 секунди. Ще одним важливим результатом використання оновленого мови CSS 3.0 є час на розробку однієї і тієї ж сторінки. Час на розробку сторінки c CSS становить 73-78 хвилин, за допомогою мови CSS 3.0 45 хвилин, в результаті час на розробку скоротилося на 35%. Розмір зображень, які використовується у вигляді фонового стилю скорочується на 15%. Кількість запитів скоротилося вдвічі, у мови CSS - 22, у CSS 3.0 - 12.
В оновленій версії мови CSS 3.0 реалізована можливість створення анімації: дана функція підтримується лише за допомогою мови SVG, не реалізована підтримка в створенні анімації за допомогою мови CSS. У мові CSS версії 3.0 було впровадження кілька властивостей, які відповідають за створення анімації і повністю реалізовано використання і управління нею. Запишемо значення, які будуть описані в селекторі keyframe:
. де «wobble» - це назва функції анімації, з відповідними значеннями 0, 40%, 60% і 100% - це визначається момент часу, яке залежить від загального інтервалу часу.
Додатковим варіантом реалізації є завдання кожного фрагмента певної функції, яка управляє отрисовкой:
Даний метод дозволяє створити анімацію з ім'ям «bounce». яка складається з 4 кадрів, кожен з кадрів займає 25% загального часу анімації. Кожному фрагменту потрібно задати певну функцію «ease-in» або «easy-out».
Функція «ease-in» - відповідає за зміни відтворення елемента всередині якої-небудь області.
Функція «easy-out» - відповідає за зміни відтворення елемента за межами якої-небудь області.
Контроль стану елемента на площині. Ось пара прикладів реалізації: div
Додамо опис додаткових можливостей:
Додана можливість введення css - змінних, приклад використання:
@variables <
CorporateLogoBGColor: # fe8d12;
>
div.logoContainer <
background-color: var (CorporateLogoBGColor);
>
@variables
@variables print <
myMargin1: 2em;
>
.data, div.entry <
margin-left: 30px; margin-left: var (myMargin1);
>
Нові функції і можливості були придумані спеціально для CSS3. Ми постараємося продемонструвати деякі з них, які будуть реалізовані в будь-якому браузері Firefox. Konqueror. Opera або Google Chrome.
Межі
кордони кольору
над ділянкою
кордону радіус
коробка-тіні
фони
фон-історія створення та кліп
фон-розмір
кілька фонів
колір
HSL кольору
HSLA кольору
непрозорість RGBA кольору
текстові ефекти
Текст-тінь
текст переповнення
перенос слова
Користувальницький інтерфейс
коробка-розмірів
розмір
контур
NAV-топ, NAV-право, NAV-низ, NAV-лівий
селекціонери
селектори атрибутів
Базова модель вікно
Переповнення-х переповнення-у
інші модулі
CSS3 переходи
запити засобів масової інформації
Схема декількох стовпців
Веб-шрифти
мова