От автора: счетчик CSS можно реализовать с помощью CSS Grid. Я уверен, вы слышали про CSS Grid. Его сложно не заметить, когда вся вселенная front end разработчиков гудела об этой технологии весь прошлый год.
Знаете вы CSS Grid или еще нет, пост мы должны начать с краткого описания прямо с W3C: «Grid Layout – новая модель CSS разметки с мощной способностью контролировать размер и положение блоков и их контента. В отличие от Flexible Box разметки, которая ориентирована на одну ось, Grid Layout оптимизирован под двумерную разметку: разметку, в которой контент выравнивается в обоих измерениях.»
Своими словами, CSS Grid – это сетка из невидимых горизонтальных и вертикальных линий. Мы можем управлять элементами в пространстве между этими линиями и создавать макеты. Это более простой, стабильный и стандартизированный способ структурировать контент веб-страницы.
Кроме того, CSS Grid обеспечивает преимущество разметки, независящей от исходного порядка: вне зависимости от положения элемента сетки в коде его можно спозиционировать в любое место сетки по обеим осям. Это очень важно не только, когда трудно обновлять HTML при перестройке элементов на странице, но и тогда, когда вы обнаружите, что некоторые места размещения ограничивают разметку.
Мы можем двигать элемент в желаемые координаты на экране с помощью других техник типа translate, position или margin, однако их сложнее писать и обновлять, когда создаешь адаптивный дизайн, по сравнению с настоящими механизмами разметки типа CSS Grid.
В этом посте мы продемонстрируем, как с помощью независимости исходного порядка в CSS Grid решать проблемы с макетом, которые и появились из-за ограниченности исходного порядка. В частности, мы разберем чекбоксы и CSS Counters.
Считаем с помощью чекбоксов
Не беспокойтесь, если не работали с CSS Counters. Концепция довольно простая! Задается счетчик, который считает набор элементов на одном уровне DOM. Счетчик увеличивается по инкременту в CSS правилах этих же элементов, тем самым подсчитывая их.
Ниже приведен код, подсчитывающий выбранные и снятые чекбоксы:
|
1 2 3 4 5 6 7 8 |
<input type="checkbox">Checkbox #1<br> <input type="checkbox">Checkbox #2 <!-- more checkboxes, if we want them --> <div class="total"> <span class="totalChecked"> Total Checked: </span><br> <span class="totalUnChecked"> Total Unchecked: </span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
::root { counter-reset: checked-sum, unchecked-sum; } input[type="checkbox"] { counter-increment: unchecked-sum; } input[type="checkbox"]:checked { counter-increment: checked-sum; } .totalUnChecked::after { content: counter(unchecked-sum); } .totalChecked::after { content: counter(checked-sum); } |
В коде сверху на корневой элемент установлено 2 счетчика с помощью свойства counter-reset. Счетчики инкрементируются в соответствующих правилах: одно для выбранной галки и другое для снятой, используя counter-increment. Далее значения счетчиков отображаются в двух пустых псевдоэлементах тега с помощью counter().
Ниже представлена урезанная версия:
Довольно неплохо. Эту технику можно использовать в списках дел, интерфейсах входящих электронных писем, формах опросов, да где угодно, где пользователи переключают блоки и хотят видеть, сколько элементов выбрано и сколько нет. И все это на CSS! Полезно, правда?
Но эффективность counter() снижается, когда понимаешь, что элемент, показывающий общее количество, может появляться только после того, как все элементы будут подсчитаны в исходном коде. Так происходит потому, что браузеру перед показом общего количества сначала нужно посчитать все элементы. Поэтому мы не можем просто поменять разметку так, чтобы счетчики располагались сверху чекбоксов:
|
1 2 3 4 5 6 7 |
<!-- Не сработает! --> <div class="total"> <span class="totalChecked"> Total Checked: </span><br> <span class="totalUnChecked"> Total Unchecked: </span> </div> <input type="checkbox">Checkbox #1<br> <input type="checkbox">Checkbox #2 |
Как же еще можно расположить счетчики над чекбоксами в нашем макете? Вот тут нам и поможет CSS Grid со своей силой рендера.
Добавление Grid
По факту, мы оборачиваем предыдущий HTML-код в новый элемент
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="grid"> <input type=checkbox id="c-1"> <label for="c-1">checkbox #1</label> <input type=checkbox id="c-2"> <label for="c-2">checkbox #2</label> <input type=checkbox id="c-3"> <label for="c-3">checkbox #3</label> <input type=checkbox id="c-4"> <label for="c-4">checkbox #4</label> <input type=checkbox id="c-5"> <label for="c-5">checkbox #5</label> <input type=checkbox id="c-6"> <label for="c-6">checkbox #6</label> <div class=total> <span class="totalChecked"> Total Checked: </span> <span class="totalUnChecked"> Total Unchecked: </span> </div> </div> |
И CSS нашей сетки:
|
1 2 3 4 5 6 7 8 9 |
.grid { display: grid; /* создаем grid */ grid-template-columns: repeat(2, max-content); /* создаем два столбца сетки, размер столбцов основывается на их контенте */ } .total { grid-row: 1; /* В первую строку помещаем счетчик */ grid-column: 1 / 3; /* чтобы счетчик span занимал всю ширину и остальной контент располагался под ними */ } |
В результаты мы получим вот это (с парой дополнительных стилей):
Видите? Теперь счетчики расположены над чекбоксами!
Мы задали 2 колонки на grid элемент в CSS, каждая колонка вмещает контент по максимуму.
Когда мы превратили элемент в grid, его контент (текст в том числе) превратился в блоковый, т.е. контент стал блоковым на уровне grid (как с block-level box) и автоматически поместился в доступные ячейки сетки.
В демо выше счетчики занимают обе ячейки первой строки, а после каждый чекбокс расположен в первом столбце, а текст после чекбокса — в последнем столбце.
Мы не меняли исходный порядок, поэтому счетчик работает, и мы видим текущее общее количество отмеченных и снятых чекбоксов вверху точно так же, как раньше они были снизу. Функциональность осталась нетронутой!
Если честно, существует огромное количество способов записи и реализации CSS Grid. Можно использовать номера линий сетки, именованные области сетки, а также другие методы. Чем больше вы о них знаете, тем легче и полезнее они становятся. Мы рассмотрели лишь верхушку айсберга. Вы можете найти и другие подходы к созданию сетки, которая так же хорошо работает (или лучше).
Автор: Preethi
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Метки: css grid
