Жінка веб-дизайнер за роботою на своєму комп'ютері в сучасному офісі
Авторство зображення: monkeybusinessimages/iStock/Getty Images
Оригінальна специфікація каскадних таблиць стилів, а також її набагато пізніша версія CSS3 – це технології, які використовуються для покращення та форматування веб-сторінок HTML. Спочатку CSS був розроблений для більш ефективної обробки рівня презентації веб-сторінки, ніж форматування за допомогою HTML, яке ніколи не було призначене для обробки складної конструкції сучасного Інтернету. Оскільки CSS2 є загальноприйнятим розширенням CSS1, термін CSS без номера означає включення CSS2. Станом на липень 2014 року специфікація CSS3 все ще розробляється, тому веб-розробникам потрібно враховувати, що підтримка функцій залежить від браузера.
CSS3 зворотно сумісний із CSS
CSS3 — це оновлення CSS2, яке підтримує сумісність з усіма функціями CSS — CSS3 не забороняє жодного коду CSS. Код CSS3 розроблено для того, щоб веб-сторінки виглядали краще та швидше завантажувалися, а також скорочував час розробки для створення сторінок у браузері користувача. CSS3 робить веб-дизайн менш залежним від файлів зображень для елементів дизайну сторінки та зменшує запити на передачу файлів і час завантаження за рахунок використання меншої кількості зображень. CSS1 зосередився на форматуванні зовнішнього вигляду, тоді як CSS2 додав можливості позиціонування тексту та об’єктів. Старіші версії браузера, такі як IE 9 і попередні, широко не підтримують додані функції CSS3, що може вимагати додаткового часу на розробку для підтримки резервного коду CSS.
Відео дня
CSS3 додає закруглені кути та градієнти
До CSS3 веб-розробникам потрібно було розробляти файли зображень, щоб додати такі речі, як закруглені кути для структурних меж і градієнти фонового зображення; CSS3 включає схожі функції, які можна додати за допомогою кількох рядків коду. У CSS веб-розробник повинен розробити межу або градієнт, завантажити їх на сервер зображень, розмістити зображення на сторінці та використовувати CSS для правильного розташування межі. У CSS3 веб-розробник може зробити щось подібне за допомогою коду, наприклад ".roundBorder{border-radius: 10px;}". Фонові градієнти є дещо складнішими і вимагають різного коду для різних браузерів. Наприклад, градієнт від білого до чорного для Chrome та IE використовує такий код, як ".gradBG{background: liner-gradient (white, black);}".
CSS3 додає функції анімації та текстові ефекти
CSS3 має кілька функцій, яких немає в CSS, щоб покращити зовнішній вигляд елементів сторінки. За допомогою CSS3 веб-розробники можуть додати текстову тінь до тексту, щоб полегшити його читання, або додати візуальний ефект, а також можуть примусово розбивати рядки в довших словах, щоб вони поміщалися в стовпці з переносом слів. До CSS3 веб-розробникам потрібно було кодувати анімацію на таких мовах сценаріїв, як JavaScript і jQuery; CSS3 додає кілька функцій анімації до шару дизайну. W3C все ще працює над стандартом веб-анімації, щоб вирішити проблеми сумісності між різними техніками анімації.
CSS3 визначає текстові стовпці
CSS3 додає можливість розділяти текстові розділи на кілька стовпців, щоб читати як газету. У специфікації CSS2 веб-розробникам важко створювати текстові розділи з багатьма стовпцями, оскільки стандарт не обладнаний для автоматичного розділення тексту. Особливо для сайтів, які мають адаптивний дизайн, технологію розробки, яка перебудовує та змінює розмір вмісту на основі переглядаючи роздільну здатність екрана пристрою, людям із великими моніторами може бути важко читати текстові рядки, які розкидані по всьому екран.
