Брояч - CSS-трикове

Съдържание:

Anonim

В counter-setCSS имота, верен на името си, определя началната стойност за CSS брояч. Знаете ли как подредените списъци започват от 1 и след това се увеличават нагоре от там? В counter-setимота ни позволява да набор, че като се започне стойност към нещо друго, да речем, -1. Или 2. Или 200! С изключение на това, че се прилага за CSS броячи вместо подредени списъци.

И така, да предположим, че имаме персонализиран брояч за списък с глави на книги, където номерът на главата е добавен към името на главата.

Ще започнем с дефиниране на брояч със counter-resetсвойството. Ще го извикаме chapterи ще го дефинираме в клас родителски контейнер за нашите глави, наречени творчески .chapters,.

.chapters ( counter-reset: chapter; )

След това ще присвоим chapterброяча на елемент, използващ counter-incrementсвойството. Тъй като това са глави от книги, ще ги приложим

елементи, като приемем, че заглавието на книгата ще бъде

. Забележете, че всъщност го присвояваме на :beforeпсевдоелемента, тъй като той ни позволява да добавим брояча си към действителния

елемент. 
h2:before ( counter-increment: chapter; )

Готино, последното нещо, което би ни трябвало, е да кажем на брояча какво трябва да показва. Това се прави в contentимота чрез counter()функцията. Ще хвърлим малко цвят и върху плота, тъй като дизайнът го изисква.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Хей, изглеждаме добре!

Но почакай! Всъщност не копая факта, че започваме от глава 1. Искам да кажа, че „Напред“ всъщност не е глава. Ако не друго, това е като глава 0.

Ето къде counter-setидва! Нека зададем нещата да започват от нула:

h2:first-of-type::before ( counter-set: chapter; )

Ето! Това е по-добре. Само като зададохме стойността на свойството на името на брояча, ние зададохме списъка с глави да започва от глава 0. Можем също толкова лесно да го настроим да започне от нещо друго, като глава 100.

И ако браузърът не поддържа counter-set? Наистина нищо. Той просто ще бъде игнориран и списъкът ще започне по подразбиране 1,.

Синтаксис

( ? )+ | none

По принцип това е изискан начин да се каже, че свойството приема името на персонализиран брояч ( ) и началната стойност ( ). Или го задайте на noneи номерацията ще започне от началната точка по подразбиране 1,.

  • Начална стойност: none
  • Отнася се за: всички елементи (включително невизуалните)
  • Наследен: не
  • Тип анимация: по тип изчислена стойност

Стойности

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Обърнете внимание, че counter-setще създаде нов брояч, ако декларираното име на брояча вече не е дефинирано някъде другаде.

Поддръжка на браузър

IE Ръб, край Firefox Chrome Сафари Опера
Не Не 68+ Не Не Не
Android Chrome Android Firefox Браузър за Android iOS Safari опера мини
Не 79+ Не Не Не
Източник: caniuse

Допълнителна информация

  • Спецификация на модул списъци на CSS ниво 3 (работен проект)
  • Показване на текущата стъпка с CSS броячи
  • Преброяване с CSS броячи и решетка
  • Как да обърнем CSS персонализирани броячи