Kovos rinkinys - CSS-gudrybės

Turinys:

Anonim

counter-setCSS nuosavybė, tiesa, kad jo pavadinimas, nustato pradinę vertę CSS prekystalio. Žinote, kaip užsakyti sąrašai prasideda nuo 1, o po to didėja? counter-setNuosavybė leidžia mums nustatyti, kad pradedant vertę kažkas, tarkim, -1. Arba 2. Arba 200! Išskyrus tai, kad jis taikomas CSS skaitikliams, o ne išdėstytiems sąrašams.

Tarkime, kad mes turime pasirinktinį knygų skyrių sąrašo skaitiklį, kuriame skyriaus numeris pridedamas prie skyriaus pavadinimo.

Mes pradėtume apibrėždami skaitiklį su counter-resetnuosavybe. Mes jį pavadinsime chapterir apibrėžsime tėvų konteinerių klasėje, skirtoje mūsų skyriams, vadinamiems kūrybiškai .chapters.

.chapters ( counter-reset: chapter; )

Tada mes priskyrėme chapterskaitiklį elementui, naudodami counter-incrementypatybę. Kadangi tai yra knygų skyriai, mes juos pritaikysime

elementų, darant prielaidą, kad knygos pavadinimas bus

. Atkreipkite dėmesį, kad mes iš tikrųjų priskiriame jį :beforepseudo elementui, nes tai leidžia mums susieti savo skaitiklį su faktiniu

elementas. 
h2:before ( counter-increment: chapter; )

Šaunu, paskutinis dalykas, kurio mums reikės, yra pasakyti skaitikliui, ką jis turėtų rodyti. Tai atliekama contentnuosavybėje naudojant counter()funkciją. Mes taip pat išmesime šiek tiek spalvų ant prekystalio, nes to reikalauja dizainas.

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

Ei, mes gerai atrodome!

Bet palauk! Aš iš tikrųjų nesigilinu į tai, kad pradedame nuo 1 skyriaus. Aš turiu omenyje, kad „Pirmyn“ iš tikrųjų nėra skyrius. Jei kas, tai panašu į 0 skyrių.

Štai kur counter-setateina! Nustatykime, kad viskas prasidėtų nuo nulio:

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

Štai mes einame! Taip geriau. Tiesiog nustatydami nuosavybės vertę į skaitiklio pavadinimą, mes nustatėme skyrių sąrašą, kuris prasideda nuo 0 skyriaus. Mes taip pat lengvai galėtume nustatyti, kad jis prasidėtų nuo kažko kito, pvz., 100 skyriaus.

O jei naršyklė nepalaiko counter-set? Nieko tikrai. Tai paprasčiausiai bus ignoruojama ir sąrašas prasidės pagal numatytuosius nustatymus 1,.

Sintaksė

( ? )+ | none

Iš esmės tai yra išgalvotas būdas pasakyti, kad nuosavybei priskiriamas pasirinktinio skaitiklio pavadinimas ( ) ir pradinė vertė ( ). Arba nustatykite jį į noneir numeracija prasidės numatytuoju pradiniu tašku 1.

  • Pradinė vertė: none
  • Taikoma: visiems elementams (įskaitant ne vaizdinius)
  • Paveldima: ne
  • Animacijos tipas: pagal apskaičiuotą vertės tipą

Vertybės

/* 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;

Atminkite, kad counter-setsukursite naują skaitiklį, jei jame deklaruotas skaitiklio pavadinimas dar nebuvo apibrėžtas kažkur kitur.

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne Ne 68+ Ne Ne Ne
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mini“
Ne 79+ Ne Ne Ne
Šaltinis: caniuse

Papildoma literatūra

  • CSS sąrašų 3 lygio modulio specifikacija (darbo projektas)
  • Rodomas dabartinis žingsnis su CSS skaitikliais
  • Skaičiavimas su CSS skaitikliais ir tinkleliu
  • Kaip pakeisti CSS pasirinktinius skaitiklius