В этом уроке мы будем создавать счетчики CSS и игру Реверси при помощи CSS3. Это отличный способ потренировать свои навыки кодинга, а также положить в свою копилку техник несколько приемов. Читайте, повторяйте урок и создавайте собственные проекты.

У счетчиков CSS есть гораздо больше возможностей для применений, чем думают многие веб-разработчики. Общепринятое использование счетчиков CSS примерно следующее:

somecontainer { counter-reset: foocount; }

Ε { counter-increment: foocount; }
Ε::before { content: counter(foocount) ". "; }

Такую запись обычно используют, чтобы добавить нумерацию заголовкам разделов или воссоздать числа у нумерованного списка, чтобы иметь возможность задавать им стили.

Но счетчики CSS можно применить не только в вышеперечисленных ситуациях. Например, можно посчитать элементы и показать их общее количество где-то, используя только CSS и селекторы CSS3, что дает очень много возможностей. Речь идет, например, о следующей записи:

ul { counter-reset:foo; }

li { counter-increment:foo; }
p::after { content:counter(foo); }

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

Другая редко используемая сторона счетчиков CSS, хотя и встречающаяся чаще, чем описанный выше пример, — возможность объединить несколько счетчиков в одном псевдоэлементе. Например, чтобы сосчитать ряды и ячейки таблицы и показать результат в каждой ячейке, можно использовать подобный код:

table {
        counter-reset:row;
}

tr {
        counter-increment:row;
        counter-reset:cell;
}

td {
        counter-increment:cell;
}
td::after {
        content:counter(row, upper-alpha) counter(cell);
}

В результате в ячейках отображаются результаты, такие как A1, A2, A3, B1, B2, B3 и т. д.

Для демонстрации этого принципа и некоторых других интересных возможностей, например,  псевдокласса :empty, без использования изображений создана игра Реверси. Она выглядит, как задумано, во всех современных и многих устаревших версиях браузеров.

Показываемое в правом верхнем углу количество фишек обоих игроков — просто счетчики CSS. Это же относится и к названиям ячеек. Это скорее доказательство работоспособности, а не законченная игра, так как невозможно определить, выиграл ли кто-то, используя только CSS, так что нужно будет считать фишки и с помощью JS.

Кстати, счетчики CSS – очень старая технология, еще CSS 2.1, хотя и сейчас мало кто знает и использует все ее возможности, а для создания игры Реверси используются и свойства CSS3.

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также: