CSS в сучасному вебі
Сучасний веб залишається тим самим, чим був завжди — джерелом доступної інформації. На відміну, однак, від своїх ранніх днів, коли він був всього лише підбіркою текстових файлів — сучасний веб доріс до підтримки численних медіаформатів і зараз, більш ніж будь-коли, багатьох різних способів доступу до інформації.
Ви більше не сидите біля настільного комп'ютера для того, щоб увійти в мережу. Сьогодні ви валяєтеся на пляжі, читаючи новини з планшета, йдете з ноутбуком в руках в кав'ярню поговорити з друзями з різних країн і намагаєтеся втриматися від сміху при вигляді кошенят, які бавляться на клавіатурі, дивлячись в екран свого смартфона під час поїздки потягом. Кількість інформації в мережі практично безконечна (створюється набагато більше вмісту, ніж ви зможете коли-небудь освоїти), і способи отримання доступу до неї продовжують збільшуватися.
Сучасний веб постійно росте і технології ледве встигають за ним.
Що таке CSS?
Каскадні таблиці стилів (CSS) — це проста мова, яка визначає стилі, котрі можна застосовувати до HTML. Якщо HTML описує структуру веб-сторінки, то CSS описує її спосіб подання.
Міжнародне співтовариство за назвою World Wide Web Consortium (W3C) створює та підтримує специфікації CSS, в яких визначається і стандартизується спосіб, яким потрібно писати CSS, і браузерні вендори (компанії, котрі створюють веб-браузери) повинні забезпечувати його виконання. Так як CSS-специфікація з моменту її подання в 1996р. досить сильно розширилась, то її остання версія — CSS3, була розбита на модулі, щоб кожен з них визначав частину CSS, полегшуючи підтримку всієї специфікації.
Специфікації CSS можна знайти на www.w3.org/Style/CSS/. Так як вони написані сухою технічною мовою та дуже докладні, то можуть збити вас з пантелику. Хоча час від часу до них корисно звертатися, читати їх нецікаво та й не обов'язково.
Перед тим, як детальніше розглянути те, що може запропонувати нам CSS, слід зрозуміти їх поточний стан. Для початку визначимо, що таке CSS, CSS2 та CSS3. В чому між ними різниця?
CSS відноситься до всіх трьох рівнів специфікації: CSS рівня 1 (CSS1), CSS Рівень 2 (CSS2) та CSS Рівень 3 (CSS3). Кожен рівень CSS побудований на базі свого попередника. Початок шляху CSS2 був хитким і проблемним, що призвело до перегляду цієї специфікації та випуску CSS2.1. Тому CSS3 містить аспекти свого попередника — CSS2.1, а CSS2.1 — аспекти CSS2 та CSS1.
Хоча кожен рівень CSS ґрунтується на попередньому, не рекомендується застосовувати окремі властивості попереднього рівня там, де це суттєво. Іншими словами, при зверненні до CSS3 ви насправді звертаєтеся до будь-яких властивостей, які доступні у всіх рівнях CSS, крім нерекомендованих.
Роль CSS
Основна мета CSS складається у відділенні структури (HTML) від її подання (CSS).
На малюнку показана веб-сторінка, що складається лише з HTML, без CSS.
На іншому малюнку показана та ж сама сторінка, але із застосованими до неї CSS-стилями.
Різниця величезна! Сторінка стає набагато привабливішою.
На зорі вебу, структура веб-сторінок та подання їх стилів були змішаними. Подання безпосередньо додавалося до структури, а отже, технічна підтримка сторінок була складним завданням. Якщо, для прикладу, хтось вирішував, що основний заголовок кожної сторінки потрібно змінити з чорного на синій, а сайт складався з десяти сторінок, вам доводилося міняти стиль цього заголовку 10 разів — по разу на кожну сторінку.
На сьогодні, подання стилів сторінки є відділеним від її структури.
Це несе з собою певні переваги:
— Каскадну таблицю стилів можна спільно використовувати для безлічі веб-сторінок.
— Сайти простіше підтримувати і вони стають більш гнучкими.
— Застосовані до сторінки стилі можна перекроювати так, щоб вони підходили до безлічі різних пристроїв/умов.
— Сайти простіше підтримувати і вони стають більш гнучкими.
— Застосовані до сторінки стилі можна перекроювати так, щоб вони підходили до безлічі різних пристроїв/умов.
У сучасному вебі, роль CSS є важливішою, ніж будь-коли. Так як технології просунулися, а способи отримання доступу до мережі стали більш різноманітними, CSS повинен розвиватися так, щоб відповідати як бажанням користувачів, що хочуть отримувати доступ до інформації, так і розробників, які хочуть представляти цю інформацію певним способом.
Найважливіший аспект CSS — зворотня сумісність. Так як кожен новий рівень специфікації ґрунтується на попередньому, він продовжує гарантувати повну сумісність з попередніми версіями. Хоча властивості іноді стають нерекомендованими, однак в сучасних браузерах вони все одно працюють, тому що нові рівні тільки додають функціональності або покращують вже існуючі. При роботі в зворотному напрямку в першу чергу, у специфікації є шанс прокласти собі міцний шлях у майбутнє.
Для розвитку мережі, збільшення доступності та поліпшення показу інформації CSS3 пропонує багато нових можливостей. При назрілій потребі в різних способах входу в мережу, однією з найбільш важливих властивостей CSS3 став модуль медіазапитів Media Queries, який ґрунтується на типах пристроїв.
Коли було розроблено CSS2, стало зрозумілим, що надавати різні стилі слід на базі доступу до веб-сторінки, так як виникли нові типи пристроїв. Вони дали можливість визначати різні стилі для різних пристроїв, таких як монітор (призначених для кольорових комп'ютерних дисплеїв), роздруківка (призначених для принтерів і друкованих документів) і портативних (призначених для пристроїв з маленькими екранами з обмеженою шириною смуги пропускання).
Сьогодні, при такій кількості переносних пристроїв у продажу, визначення девайсів, які входять в категорію портативних, звичайно, є недостатньо описовим. Подібно і дисплеї настільних ПК теж доволі сильно відрізняються за своїми характеристиками.
Модуль медіазапитів CSS3 ґрунтується на розпізнанні типів пристроїв, даючи розробнику можливість з'ясовувати певні аспекти (такі як ширина і висота) пристрю та оточення, в якому переглядається веб-сторінка, і призначати застосовані стилі тільки тоді, коли вони відповідають певним умовам.
Крім того, специфікацією додаються нові характеристики відображення сторінок, такі як градієнти і заокруглені кути, які полегшують виконання завдань, над якими роками билися розробники, більша кількість способів вибору елементів, яким слід призначити стилі (так звані селектори), та веб-шрифти, що дозволяє збільшити кількість безпечних у застосуванні шрифтів з десятків до тисяч, якщо не десятків тисяч!
В загальному, CSS3 полегшує створення веб-сторінок і робить цей процес більш захоплюючим, ніж будь коли раніше.
Веб міг би прожити і без CSS, але ніколи не став би таким доступним і красивим, як зараз.
Його значення, а особливо, нових властивостей CSS3, значно зростає по мірі зміни способів отримання доступу до мережі. CSS продовжує розвиватися, надаючи нам безліч дивовижних можливостей.
