Цоунтер-сет - ЦСС-трикови

Преглед садржаја:

Anonim

counter-setЦСС имовине, веран свом имену, поставља почетну вредност за ЦСС цоунтер. Знате како уређене листе почињу од 1, а затим се одатле повећавају? counter-setИмовина нам омогућава да скуп који почиње вредност на нешто друго, рецимо, -1. Или 2. Или 200! Осим што се примењује на ЦСС бројаче уместо на уређене листе.

Дакле, рецимо да имамо прилагођени бројач за листу поглавља књига, где је број поглавља додан имену поглавља.

Почели бисмо са дефинисањем бројача са 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ће створити нови бројач ако име бројача на њему није већ дефинисано негде другде.

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
Не Не 68+ Не Не Не
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари опера мини
Не 79+ Не Не Не
Извор: каниус

Додатна литература

  • Спецификација нивоа 3 модула ЦСС листа (радни нацрт)
  • Приказ тренутног корака помоћу ЦСС бројача
  • Бројање помоћу ЦСС бројача и мреже
  • Како обрнути ЦСС прилагођене бројаче