Счетчик с помощью CSS Counters и CSS Grid

Счетчик с помощью CSS Counters и CSS Grid

От автора: счетчик 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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В этом посте мы продемонстрируем, как с помощью независимости исходного порядка в CSS Grid решать проблемы с макетом, которые и появились из-за ограниченности исходного порядка. В частности, мы разберем чекбоксы и CSS Counters.

Считаем с помощью чекбоксов

Не беспокойтесь, если не работали с CSS Counters. Концепция довольно простая! Задается счетчик, который считает набор элементов на одном уровне DOM. Счетчик увеличивается по инкременту в CSS правилах этих же элементов, тем самым подсчитывая их.

Ниже приведен код, подсчитывающий выбранные и снятые чекбоксы:

В коде сверху на корневой элемент установлено 2 счетчика с помощью свойства counter-reset. Счетчики инкрементируются в соответствующих правилах: одно для выбранной галки и другое для снятой, используя counter-increment. Далее значения счетчиков отображаются в двух пустых псевдоэлементах тега с помощью counter().

Ниже представлена урезанная версия:

Довольно неплохо. Эту технику можно использовать в списках дел, интерфейсах входящих электронных писем, формах опросов, да где угодно, где пользователи переключают блоки и хотят видеть, сколько элементов выбрано и сколько нет. И все это на CSS! Полезно, правда?

Но эффективность counter() снижается, когда понимаешь, что элемент, показывающий общее количество, может появляться только после того, как все элементы будут подсчитаны в исходном коде. Так происходит потому, что браузеру перед показом общего количества сначала нужно посчитать все элементы. Поэтому мы не можем просто поменять разметку так, чтобы счетчики располагались сверху чекбоксов:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как же еще можно расположить счетчики над чекбоксами в нашем макете? Вот тут нам и поможет CSS Grid со своей силой рендера.

Добавление Grid

По факту, мы оборачиваем предыдущий HTML-код в новый элемент

— он будет служить контейнером для сетки:

И CSS нашей сетки:

В результаты мы получим вот это (с парой дополнительных стилей):

Видите? Теперь счетчики расположены над чекбоксами!

Мы задали 2 колонки на grid элемент в CSS, каждая колонка вмещает контент по максимуму.

Когда мы превратили элемент в grid, его контент (текст в том числе) превратился в блоковый, т.е. контент стал блоковым на уровне grid (как с block-level box) и автоматически поместился в доступные ячейки сетки.

В демо выше счетчики занимают обе ячейки первой строки, а после каждый чекбокс расположен в первом столбце, а текст после чекбокса — в последнем столбце.

Мы не меняли исходный порядок, поэтому счетчик работает, и мы видим текущее общее количество отмеченных и снятых чекбоксов вверху точно так же, как раньше они были снизу. Функциональность осталась нетронутой!

Если честно, существует огромное количество способов записи и реализации CSS Grid. Можно использовать номера линий сетки, именованные области сетки, а также другие методы. Чем больше вы о них знаете, тем легче и полезнее они становятся. Мы рассмотрели лишь верхушку айсберга. Вы можете найти и другие подходы к созданию сетки, которая так же хорошо работает (или лучше).

Автор: Preethi

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree