Що таке CSS?
CSS (Cascade Style Sheets) це технологія, яка створена для повної стилізації елементів на сторінці. CSS використовуєтся як браузером, для створення “базових” стілів, так і верстальником, для створення красивого, зручного дизайну.
CSS складаєтся з селекторів, та властивостей. Селектор це шлях збудований на основі структури HTML документу, і який дозволяє браузеру вибрати один або декілька елементів на сторінці. Властивості це звичайні властивості елемента, такі як колір, або розмір тексту.
Що таке CSS селектори?
CSS Селектор це набір ідентифікаторів елементів, завдяким можна виділити один, або декілька елементів на сторінці. Селектором, або часткою селектора можуть бути як назви тегів, назви классів, ідентифікатори, чи навіть просто порядковий номер тегу (однак слід розуміти, що будувати селектор лише за допомогою порядкових номерів, не є гароною ідеєю).
CSS селектори працюють на принципах “ваги селектору”, тобто браузер не просто застосовує властивості, спочатку визначаєтся ієрархія, тобто розраховуєтся, які властивості в кінцевому результаті мають бути встановлені. Більш того, кожен елемент селектору (назва тегу, назва классу, або ідентифікатор) має свою власну вагу, яка обчислюєтся за схемою 0-0-0. Де перше значення це id елемента, друге це class і третє значення це тип елементу, або назва тегу чи псевдоелементу. Всі три окремі значення слід розглядати окремо, тобто для селектора div#someDivId.some-class-for-div вага не буде дорівнювати 3, вона буде складати 1-1-1. Зазвичай, вираховувати вагу селектора не портібно. Звичайні селектори виглядаюсь приблизно як .parent-class .child-class, тобто є просто вказання классів або шдентифыкаторыв у відповідности до ієрархії в HTML.
Що таке властивості в CSS?
CSS властивість, як і видно з назви є властивістю сутності. Враховуючи те що CSS це інструмент стилізації, властивістями сутності можуть бути колір фону, стиль, колір та розмір тексту, наявність чи відсутність прозорості, тощо.
Крім простих властивостей CSS може створювати анімації, налаштовувати еффекти переходу стану (так звані transition, наприклад коли потрібно показати, або пересунути блок), накладати “маски” на блок (поняття накладання маски візуально повністю аналогічно єффекту маски в Photoshop) тощо.
Чи CSS єдиний інструмент для стилізації?
Якщо коротко то так. CSS це єдиний, зрозумілий всім браузерам інструмент для надання контенту бажанного зовнішнього вигляду, однак є певні моменти, про які необхідно пам’ятати
- CSS “розуміють” всі браузери, однак, кожен браузер відображає деякі властивості так, як собі уявляли його розробники. Це призводить до проблем з Safari (браузер від Apple), і з Internet Explorer (браузер від Microsoft). Останній вже вважаєтся таким, що не підтримуєтся (тобто самі розробники не випускають оновлень та нових версій), однак все залежить від вимог до сторінки. Наприклад для банківської системи, є сенс намагатись стилізувати сторінку так щоб вона була хочаб прийнятного виду в останніх Internet Explorer. В будь якому разі, вимоги до сторінки слід формувати відповідно до статистики;
- Частково-підтримувані властивості, або властивості які підтримуются лише з вендорним префіксом:
- Властивості з вендорним префіксом це властивості, які підтримаются браузером, однак, ці властивості ще не узгоджено W3C. Це означає що відображення браузером цієї властивості може бути змінене згодом. Такі властивості легко впізнати за так званим вендорним префіксом, абревіатурою дввигуна браузера, яка ставится перед назвою властивості;
- Властивості з частковою підтримкою це властивості які вже узгоджені W3C, однак дискусії та обговорення що до необхідних значень властивості ще в процесі.
- Кольори які не є в списку “беспечних” можуть відрізнятись в різних браузерах. Станом на 2023 рік, браузери мають дуже велику палітру, і відображають колькори коректно, однак, якщо в вимогах є старі, або мало популярні браузери, не зайвим буде пересвідчитись що на них колір відображаєтся коректно. Особисто це стосуєтся браузерів від компаній з особливим баченням світу, таких як Microsoft та Apple.