Що таке css3
Специфікація CSS3 - це незаперечна майбутнє в області декоративного оформлення веб-сторінок, і її розробка ще далека від завершення. Більшість модулів все ще продовжує удосконалюватися і модифікуватися, і жоден браузер не підтримує всі модулі. Це означає, що CSS3 зазнає таких самих складності, як і HTML5. Веб-розробникам потрібно вирішувати, які можливості використовувати, а які ігнорувати, а також яким чином заповнити зяючі прогалини в браузерної підтримки.
Специфікація CSS3 не є частиною специфікації HTML5. Ці два стандарти були розроблені окремо один від одного, різними людьми, які працюють в різний час в різних місцях. Але навіть організація W3C закликає веб-розробників використовувати HTML5 та CSS3 разом, як частина однієї нової хвилі сучасного веб-дизайну.
Впроваджувати CSS3 в веб-сайт можна, за великим рахунком, використовуючи три стратегії:
Стратегія 1: використовуйте те, що можна
Стратегія 2: розглядайте можливості CSS3 як удосконалення
У фанатів CSS3 є бойовий клич: "Веб-сайти не повинні виглядати абсолютно однаково на всіх браузерах".
Браузери, що підтримують властивість border-radius, будуть використовувати його, a старі браузери просто ігнорувати його, залишаючи кути рамок квадратними:
Що стосується підтримки CSS3, Internet Explorer великий слабак в цій області. Існує войовниче меншість веб-дизайнерів, які вважають, що веб-дизайнери повинні ігнорувати цей браузер і застосовувати можливості CSS3 як тільки вони починають підтримуватися іншими браузерами. А як інакше чинити тиск на Microsoft і стимулювати вдосконалення Інтернету?
Стратегія 3: додавайте резервні рішення за допомогою бібліотеки Modernizr
Використання частково підтримуваної можливості CSS3 хороша ідея, якщо веб-сайт буде гідно виглядати і без неї. Але іноді без цієї можливості легко втратити важливу частину дизайну свого веб-сайту, або ж сайт може виглядати просто негарно. Розглянемо, наприклад, що трапиться, якщо використовувати багатобарвну рамку, підтримувану тільки в браузері Firefox:
Іноді цю проблему можна вирішити, встановивши кілька властивостей в правильному порядку. Тут базовим методом буде установка спочатку загальних властивостей, а за ними нових, які заміщають попередні властивості. Коли цей підхід працює, він задовольняє всі браузери - старі браузери використовують стандартні настройки, в той час як нові браузери перекривають ці настройки новими. Далі показаний приклад застосування цього методу для заміни звичайного фону градієнтним:
Результати застосування цього правила показані на малюнку:
Вгорі: браузери, які не розуміють CSS3, використовують першу частину правила для header і забарвлюють фон суцільним жовтим кольором. Внизу: браузери, які розуміють CSS3, використовують другу частину правила і заповнюють фон радіальним градієнтом.
У деяких випадках заміщення властивостей стилю не працює, тому що встановлюються комбіновані властивості. Прикладом комбінованого властивості є багатобарвна рамка. Ефект многоцветности встановлюється властивістю border-colors, але з'являється тільки якщо встановлено велику товщина рамки за допомогою властивості border-thickness. У браузерах, які не підтримують багатобарвні рамки, товста рамка одного кольору ріже очі незалежно від кольору.
За допомогою цієї бібліотеки можна визначити альтернативні настройки стилів для браузерів, які не підтримують властивості стилів, які ви хочете використовувати в першу чергу. Припустимо, що нам потрібно створити дві версії рамки для заголовка. Ми хочемо використовувати закруглені кути в браузерах, які підтримують цю можливість, і подвійну рамку в браузерах, які цю можливість не підтримують. Додавши в розмітку сторінки посилання на сценарій Modernizr, можна використовувати наступну комбінацію правил таблиці стилів:
Цей набір правил працює наступним чином. В кореневий елемент сторінки вставляється атрибут class = "no-js":
Наявність в цьому списку класу без префікса no- означає, що даний браузер підтримує відповідну можливість. Якщо ж клас зазначений з префіксом, відповідна можливість в даному браузері не підтримується. В даному випадку приклад запущений на останній версії Chrome, тому підтримуються майже всі можливості.
Ці класи можна вставити в селектори таблиці стилів, щоб відфільтрувати настройки стилів в залежності від наданої підтримки. Наприклад, якщо даний браузер підтримує властивість border-radius, селектор .borderradius header отримає всі елементи
Але тут є своя заковика, яка полягає в тому, що Modernizr надає класи тільки для певного підмножини всіх можливостей CSS3. У цей підмножина входять деякі найбільш популярні і розвинені можливості CSS3, але не багатобарвні рамки, тому що ця можливість підтримується тільки браузером Firefox. З цієї причини краще утриматися від використання багатобарвних рамок в своїх розробках, принаймні на даному етапі.
Стилі, специфічні для конкретних браузерів
При розробці нових можливостей CSS часто доводиться стикатися з дилемою курки і яйця. Для того щоб удосконалити можливості, розробникам потрібно мати відгуки та зауваження про ці можливості від розробників браузерів і веб-дизайнерів. Але щоб розробники браузерів і веб-дизайнери могли надати такі відгуки і зауваження, їм потрібно реалізувати ці нові і недосконалі можливості.
Це породжує цикл тестувань і надання відгуків за результатами тестувань, в результаті якого багато удосконалення приймають закінчену форму. Але в процесі цього циклу синтаксис і реалізація можливостей змінюються. Така ситуація породжує безпосередню загрозу застосування будь-якої нової вражаючої можливості необізнаними веб-розробниками, які не усвідомлюють, що майбутні версії стандарту можуть змінити правила, внаслідок чого ця можливість більше не буде працювати на веб-сайтах.
Щоб запобігти такому розвитку подій, розробники браузерів використовують систему префіксів розробників (vendor prefixes). щоб змінювати назви властивостей і функцій CSS, поки вони ще знаходяться в процесі розробки. Візьмемо, наприклад, нову властивість радіального градієнта. Щоб використовувати його в браузері Firefox, потрібно встановити разработочной версію цієї властивості, яке називається -moz-radial-gradient. Префікс розробника -moz- (скорочення від Mozilla - організації, що займається проектом Firefox) позначає властивість для браузера Firefox.
Для кожного браузера існує власний префікс розробника:
Префікси розробників браузерів
Хоча префікси розробників браузерів неймовірно ускладнюють життя веб-розробників, для їх використання є гарне підставу. Різні розробники браузерів додають підтримку можливостей в різний час, при цьому часто використовуючи різні попередні версії однієї і тієї ж специфікації. Хоча всі браузери будуть підтримувати однаковий синтаксис для кінцевої версії, синтаксис властивостей і функцій, специфічних для конкретних розробників, часто буває різним.
Тому, якщо ви хочете використовувати в своєму веб-сайті радіальний градієнт вже сьогодні, для того щоб він правильно відображався у всіх браузерах (включаючи Internet Explorer 10), вам потрібно використовувати роздуте правило CSS щось схоже на це:
Використання префіксів розробників браузерів - складне і важке заняття. Веб-розробники розділилися в думці, чи є ці префікси необхідним злом для отримання найостанніших і кращих можливостей або ж великим попередженням для розсудливих розробників не зв'язуватися з ними. Але можна бути впевненим в одному: якщо не використовувати префікси розробників, деяка частина можливостей CSS3 в даний час буде недоступна.
- Погана кросбраузерності підтримка "наворочених" можливостей CSS3.
- Мала кількість інструментарію для створення коду анімацій, змушуючи розробника набирати код вручну.
- Можливості анімацій, переходів і трансформацій CSS3 набагато нижче, ніж у Silverlight і Flash.
Flash і Silverlight
- Відмінні IDE для створення складних анімацій та ефектів (Expression Blend, Adobe Flash).
- Можливість створювати дуже складні анімації і переходи, аж до створення тривимірних сцен і ігор.
- Наявність мови сценаріїв, який полегшує кодування (для Flash - ActionScript, для Silverlight - C #).