Розширений прапорець Стиль з CSS Grid
The CSS Grid Layout Module може не тільки вирішити мамонта проблеми макета, а й деякі старі добрі проблеми тривалий час, як от стилізація позначки.
Хоча існує відносно простий метод стилю етикетки, коли вона з'являється після встановіть прапорець, це не так просто, коли з'являється мітка раніше це.
Стилізація прапорця без CSS Grid
Укладка етикетки після прапорець - це те, що ми робили розробникам з того часу, як ми десь читали про нього. Ця методика є одним з найперших і старих прикладів потужної динаміки, якою може володіти CSS.
Ось код, який ви вже можете знати Стилі етикетки після прапорець із позначкою:
input: check + label / * стиль me * /
A стилі етикетці після прапорець може виглядати наступним чином (однак також можна використовувати інші правила стилю):
Наведений вище код CSS використовує суміжний комбінатор sibling позначено + . Коли встановлено прапорець у полі : перевірено стан, елемент після це (зазвичай це мітка) можна використовувати в цьому стилі.
Така проста і ефективна техніка! Що може можливо помилятися з ним? Нічого - поки ви не хочете відобразити ярлик раніше прапорець.
Суміжний комбінатор sibling вибирає наступний елемент; це означає, що етикетка повинна прийти після прапорець у вихідному коді HTML.
Отже, щоб з'явилася мітка раніше прикріпляючий прапорець на екрані, ми не можемо просто перемістити його перед полем у вихідному коді, як a попередній селектор братів не існує в CSS.
Що залишає лише один варіант: змінити положення прапорця та мітки використання перетворення або позиції або маржа або інше властивість CSS з деякою телекінетичною потужністю, так що мітка з'являється ліворуч від прапорця на екрані.
Проблеми з традиційним методом
Немає нічого majorly неправильно з вищезазначеною технікою, але це може бути в деяких випадках неефективні. Я маю на увазі випадки, коли переставлені позиції прапорця і мітки більше не працюють.
Подумайте, реагувати, наприклад. Можливо, вам доведеться змінити розмір або змінити положення відповідно до пристрою, на якому він відображається. Коли це станеться, ви будете потрібно змінити позицію етикетки, тому що на етикетці не відбудеться автоматичне перерозподіл у відповідь на зміну / зміну розміру прапорця.
Ми можемо усунути цей недолік, якщо тільки зможемо надайте деяку тверду розкладку для прапорця та мітки, замість того, щоб грубо розмістити їх на сторінці.
Але майже всі системи макетів, такі як таблиці або стовпці, вимагають від вас додайте позначку перед прапорець у вихідному коді щоб на екрані з'явився такий самий спосіб. Це те, що ми не хочемо робити, тому що наступний селектор елементів на етикетці перестане працювати.
З іншого боку, CSS Grid - це система компонування, яка є ні залежить від розміщення / порядку елементів вихідного коду.
Можливості зміни порядку розташування сітки навмисно впливають тільки візуальне візуалізація, виходячи з порядку мовлення та навігації на основі вихідного порядку. Це дозволяє авторам маніпулювати візуальною презентацією, залишаючи вихідний порядок непошкодженим… - Модуль CSS Grid Layout Level 1, W3C
Таким чином, сітка CSS є ідеальним рішенням Стиль етикетки, що з'являється раніше прапорець.
Стиль прапорця з CSS Grid
Почнемо з HTML-коду. Порядок прапорець і мітки залишиться таким же, як і раніше. Ми просто додаємо обидва з них до сітки.
Супровідний CSS такий:
#cbgrid display: grid; grid-template-areas: "ліворуч праворуч"; ширина: 150px; input [type = checkbox] grid-area: right; label grid-area: left;
Я не піду в глибину, як працює сітка CSS, як я вже писав докладну статтю на цю тему, що ви можете прочитати тут. Деякі основи, однак: дисплей: сітка властивість перетворює елемент в контейнер сітки, площа сітки ідентифікує область сітки, до якої належить елемент, і сітки-шаблонні області формує макет сітки, що складається з різних областей сітки.
У наведеному вище коді є дві області сітки: "зліва" і "право". Вони складають два стовпці рядка сітки. Прапорець належить до "право" і мітку до "зліва". Ось як вони виглядають на екрані:
Оскільки ми не змінили відносне розміщення прапорця і мітки в вихідному коді, ми можемо як і раніше використовувати комбінатор сусідніх братів:
input: check + label / * стиль me * /
Зверніть увагу, що елемент сітки є завжди блокується; вона з'являється з навколишнім вікном, відомим як вікно на рівні сітки. Якщо ви не бажаєте цього, наприклад, для мітки, покладіть обгортку на цей елемент (оберніть його в інший елемент) і поверніть цю обгортку в область сітки.
Ось це, люди. CSS сітка сподівається допоможе вам закріпити макети цих зухвалих прапорців.
