Блог

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).

На зорі появи Інтернету, структура веб-сторінок і їх стилізація були змішаними. Стилізація додавалася безпосередньо в саму структуру, підтримка сайту хоча б з декількох сторінок була досить трудомістким завданням. Якщо, наприклад, хтось вирішував, що основний заголовок кожної сторінки потрібно змінити з чорного на синій, а сайт складався з десяти сторінок, вам доводилося міняти стиль цього заголовка 10 разів – по разу на кожну сторінку. На сьогодні, стилізація повністю відокремлена від структури.

Такий підхід дає наступні переваги:

  • Каскадні таблиці стилів можна спільно використовувати для безлічі веб-сторінок.
  • Сайти простіше підтримувати і вони стають більш гнучкими.
  • Файли стилів можна розробляти так, щоб вони підходили до безлічі різних пристроїв/умов.

У сучасному інтернеті, роль CSS важливіша, ніж будь-коли. Так як технології просунулися, а засоби отримання доступу до мережі стали більш різноманітними, CSS повинен розвиватися так, щоб відповідати як бажанням користувачів, які хочуть отримати доступ до інформації, так і розробників, які хочуть представляти цю інформацію певним способом. Найважливіший аспект CSS – зворотна сумісність. Так як кожен новий рівень специфікації ґрунтується на попередньому, він продовжує гарантувати повну сумісність з попередніми версіями.

Хоча деякі властивості стають НЕ рекомендованими, в сучасних браузерах вони все одно працюють, тому що нові рівні тільки додають функціональність або покращують існуючу.

Для розвитку мережі, збільшення доступності і поліпшення показу інформації CSS3 пропонує багато нових можливостей.

При назрілої потреби в різних способах входу в мережу, одними з найбільш важливих властивостей CSS3 стали медіа запити Media Queries. Коли був розроблений CSS2, стало ясно, що надавати різні стилі слід на базі доступу до веб-сторінці, так як виникли нові типи пристроїв.

Майбутнє CSS

Медіа запити CSS3 грунтуються на розпізнанні типів пристроїв, даючи розробнику можливість з’ясовувати певні аспекти (такі як ширина і висота) пристроїв і оточення, в якому переглядається веб-сторінка, і призначати застосовані стилі тільки тоді, коли вони відповідають певним умовам.

Крім того, специфікації додають нові характеристики відображення сторінок, такі як градієнти і закруглені кути, які полегшують виконання завдань, над якими роками билися розробники, більшу кількість способів вибору елементів, яким слід призначити стилі (так звані селектори), і веб-шрифти, що дозволяє збільшити кількість безпечних в застосуванні шрифтів з десятків до тисяч, а то й десятків тисяч!

Загалом, CSS3 полегшує створення веб-сторінок і робить цей процес більш захоплюючим, ніж коли раніше. Веб міг би прожити і без CSS, але ніколи не став би таким доступним і гарним, як зараз. Його значення, особливо, нових властивостей CSS3, значно зростає в міру зміни способів доступу до мережі. CSS продовжує розвиватися, надаючи нам безліч дивовижних можливостей.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *