Чи стикалися ви з тим, що сайт виглядає одноманітно, без кольорів і структури? Або хотіли змінити шрифт чи розташування елементів, але не знали, як це зробити?
CSS (Cascading Style Sheets) – це мова стилів, яка визначає зовнішній вигляд HTML-елементів на вебсторінці: від кольорів і шрифтів до розташування та анімації.
У цій статті ми пояснимо, як працює CSS, з чого почати його вивчення та як використовувати стилі для створення сучасного дизайну сайту. Ви отримаєте базові рекомендації та приклади застосування на практиці.
Що таке CSS?
Усе, що ваш браузер може виводити на екран або запускати, називається фронтендом, тобто це HTML, CSS і JavaScript. Сьогодні розбираємося для чого потрібна і як працює каскадна таблиця стилів (CSS).
CSS (Cascading Style Sheets, каскадні таблиці стилів) – мова опису зовнішнього вигляду HTML-документа. Це одна з базових технологій у сучасному інтернеті. Практично жоден сайт не обходиться без CSS, тому HTML і CSS діють у єдиній зв’язці.
Каскадні таблиці стилів працюють з HTML, але це зовсім інша мова. HTML структурує документ і впорядковує інформацію, а CSS взаємодіє з браузером, щоб надати документу оформлення.
Мовою HTML ми створюємо розмічений текст – документ із гіперпосиланнями, таблицями, маркованими списками, різними накресленнями шрифтів, заголовками, підзаголовками тощо. Отримуємо «простирадло» тексту з таблицями та ілюстраціями. Інтернет винайшли вчені, і для них такий стан речей був прийнятним.
Але все змінилося, коли WWW пішов у маси та свої сторінки почали створювати прості користувачі, які хотіли індивідуальності та самовираження, а також комерційні компанії зі своїми корпоративними стандартами оформлення. Загалом, веб-сторінкам знадобилося індивідуальне оформлення: стиль.
Тому беремо HTML-основу – і підключаємо до неї стиль CSS. За допомогою CSS красиво оформляємо наявний текст, тобто прописуємо унікальні властивості елементам HTML.
Каскадна таблиця стилів
Згадаймо, як усе починалося. Перша версія стандарту CSS опублікована 17 грудня 1996 року. Основний посил – додати оформлення документа без програмування або складної логіки. Оформлення – це кольори, шрифти, розташування окремих блоків на сторінці тощо.
У таблиці стилів ми прописуємо стилі (правила) оформлення. Кожне правило складається з селектора і блоку оголошень. Селектор визначає, на які частини документа поширюється правило. Блок оголошень поміщається у фігурні дужки і складається з одного або більше оголошень, розділених крапкою з комою. Насправді це дуже просто.
CSS просто вказує стиль оформлення для елементів HTML і всього документа загалом. Це поля, особливі шрифти для заголовка, підзаголовків і основного тексту, колір фону тощо. Непросто підібрати всі ці значення, щоб було красиво. Але зате тут відкривається простір для творчості.
Сама мова CSS дуже проста. Точніше, вона була досить простою на початку. Передбачалося, що власник наявного сайту просто під’єднає стиль – і отримає «цукерочку» HTML+CSS із красивим оформленням. Потім за необхідності легко і швидко змінить оформлення сайту, трохи відредагувавши файл CSS. Але потім почалися складнощі.
Поділ контенту (HTML) і подання (CSS)
Сама концепція CSS підштовхувала до ідеї повністю розділити контент і оформлення документа.
У стародавні часи верстку документа виконували HTML-таблицями. Наприклад, якщо ви хотіли бічне меню або сайт у три колонки, то створювали в HTML таблицю з колонками відповідної ширини і прозорими межами. Для «роздування» окремих осередків таблиці вставляли прозорі картинки. Загалом, було багато цікавих «милиць».
Проблема в тому, що при верстці таблицями оформлення прив’язувалося до контенту, тобто при зміні контенту часто доводилося міняти оформлення, переверстувати ці нескінченні таблиці. Це зводило з розуму дизайнерів. Вони з полегшенням зітхнули, коли з’явився CSS.
Вище наведено приклад простого використання CSS. Важливо зауважити, що CSS від самого початку не був спроектований для верстки та макетування, а тільки для оформлення сторінки. Однак веб-дизайнери та верстальники вже не могли зупинитися.
Макети на основі CSS float
Перші макети на CSS використовували властивість CSS float, хоча спочатку її запровадили для розміщення зображення всередині колонки тексту зліва чи справа. Веб-дизайнери і верстальники придумали спосіб, як створювати CSS для простих макетів із колонками.
Макети на основі CSS flexbox
Властивість CSS flexbox запропонували 2009 року, і вона отримала широку підтримку в браузерах приблизно до 2015 року. Ця властивість визначає, як розподіляється простір в одній колонці або рядку, тобто вона від початку вже «заточена» на верстку. Так макетування сторінок значно спростилося. Те, що раніше вимагало спеціальних хитрощів і різних трюків, на Flexbox стало виконуватися набагато простіше й логічніше.
Flexbox елегантно розв’язав класичну задачу з триколонковою версткою, як у прикладі вище. Ба більше, Flexbox відкрив нову еру адаптивної верстки – сайтів, які розробляються з прицілом на мобільні пристрої та мають гарний вигляд на екранах будь-якого розміру, тобто в будь-якій величині вікна браузера.
Макети на основі CSS grid
Нарешті, у 2011 році було запропоновано властивість CSS grid, яка зараз підтримується більшістю браузерів. Найголовніше, що завдяки CSS grid стало можливо повністю відмовитися від елементів верстки типу <div class=”container”>, які доводилося раніше додавати в HTML. Тепер уся верстка й оформлення виконуються засобами CSS.
CSS grid можна назвати ідеальним способом верстки. Нарешті досягнуто початкової мети повного поділу змісту (HTML) і оформлення (CSS).
Майбутнє за CSS3
Cascading Style Sheets3 (CSS3) – третє покоління стандарту CSS, що зараз перебуває в активній розробці. Як HTML5 для HTML, так і CSS3 для CSS став наймасштабнішою ревізією в історії стандарту.
На відміну від попередніх версій, специфікацію розбито на модулі, розробка та розвиток яких тривають незалежно. Тобто CSS3 – це теж не просто стандарт, а «набір технологій», як і HTML5. Ці технології потроху проникають у браузери. Кожна нова версія Chrome або Firefox підтримує якийсь новий шматочок CSS3, кілька нових властивостей. Тобто з кожним місяцем розширюються наші можливості з оформлення документів.
За ходом розробки CSS3 можна стежити на сторінці Консорціуму W3C. До речі, вже почалося розроблення стандарту CSS4, але поки що всі його специфікації перебувають у статусі чернеток.
Методології CSS
Ми розібралися, що робить CSS. Однак професійна робота з цією мовою на великих кодових базах неможлива без спеціального інструментарію та стандартів написання CSS, щоб код був підтримуваним і його могли використовувати в колективній роботі. Такі рекомендації з написання називаються методологіями CSS.
Немає однієї загальноприйнятої методології CSS. Їх кілька, а з часом можлива поява нових. Коли ви опануєте саму мову, то почнете розбиратися в методологіях – і перед вами відкриється абсолютно новий світ, у якому вирує життя, вирують обговорення на форумах, стикаються непримиренні точки зору, народжуються й помирають, на кшталт релігійних культів, нові методології.
Наприклад, в останні кілька років з’явилися і набрали силу дві: Atomic CSS (Functional CSS) і CSS в JS. Перша базується на ідеї створення маленьких вузькоспеціалізованих класів з назвами, які засновані на візуальній функції, а друга – на визначенні стилів CSS не в окремій таблиці стилів, а прямо всередині кожного компонента. Обидві явно суперечать усталеним кращим практикам CSS, але, можливо, з часом і самі стануть «кращими практиками».
Висновок
CSS пройшов довгий шлях від простої мови для оформлення HTML-сторінок до потужного інструмента повноцінної верстки, з підтримкою адаптивності, анімацій, змінних і сучасних архітектур.
Якщо ви прагнете створювати красиві, зручні й ефективні вебсайти – знання CSS є обов’язковим. Сучасний CSS – це не лише про стиль, це про структуру, зручність і масштабованість вашого коду.
