Laskuri - CSS-temppuja

Sisällysluettelo:

Anonim

counter-setCSS omaisuus, nimensä, asettaa lähtöarvo CSS laskuri. Tiedätkö, kuinka tilatut luettelot alkavat yhdestä ja kasvavat sitten sieltä ylöspäin? counter-setOmaisuus antaa meille mahdollisuuden asettaa joka alkaa arvo jotain muuta, sano, -1. Tai 2. Tai 200! Paitsi että sitä käytetään CSS-laskureissa järjestettyjen luetteloiden sijaan.

Joten sanotaan, että meillä on mukautettu laskuri kirjan lukujen luettelolle, jossa luvun numero on lisätty luvun nimeen.

Aloitamme määrittelemällä laskurin counter-resetkiinteistölle. Kutsumme sitä chapterja määrittelemme sen vanhempien säilöluokkien kanssa luvuillemme, joita kutsutaan luovasti .chapters.

.chapters ( counter-reset: chapter; )

Seuraavaksi osoitamme chapterlaskurin elementille, joka käyttää counter-incrementominaisuutta. Koska nämä ovat kirjan lukuja, käytämme niitä

olettaen, että kirjan otsikko olisi

. Huomaa, että osoitamme sen itse asiassa :beforepseudoelementille, koska se antaa meille mahdollisuuden ennakoida laskuri todelliseen

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

Siistiä, viimeinen asia mitä tarvitsemme on kertoa laskurille mitä sen pitäisi näyttää. Se tehdään contentkiinteistössä counter()toiminnon kautta . Heitämme myös pienen värin tiskille, koska suunnittelu vaatii sitä.

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

Hei, näytämme hyvältä!

Mutta odota! En todellakaan kaivaa sitä tosiasiaa, että aloitamme luvusta 1. Tarkoitan, että "eteenpäin" ei oikeastaan ​​ole luku. Jos jotain, se on kuin luku 0.

Sieltä counter-settulee! Asetetaan asiat alkamaan nollasta:

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

Siellä mennään! Tuo on parempi. Ainoastaan ​​asettamalla ominaisuusarvoksi laskurin nimi, olemme asettaneet luetteloluettelon alkamaan luvusta 0. Voisimme yhtä helposti asettaa sen alkamaan jostakin muusta, kuten luvusta 100.

Ja jos selain ei tue counter-set? Ei oikeastaan ​​mitään. Se yksinkertaisesti ohitetaan ja lista alkaa sen oletusarvoisesti 1.

Syntaksi

( ? )+ | none

Tämä on pohjimmiltaan hienostunut tapa sanoa, että ominaisuus ottaa mukautetun laskurin nimen ( ) ja lähtöarvon ( ). Tai aseta se arvoon noneja numerointi alkaa oletusaloituspisteestä 1.

  • Alkuarvo: none
  • Koskee kaikkia elementtejä (myös ei-visuaalisia)
  • Peritty: ei
  • Animaatiotyyppi: lasketun arvotyypin mukaan

Arvot

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

Huomaa, että counter-setse luo uuden laskurin, jos siihen ilmoitettua laskurin nimeä ei ole jo määritelty muualla.

Selaimen tuki

IE Reuna Firefox Kromi Safari Ooppera
Ei Ei 68+ Ei Ei Ei
Android Chrome Android Firefox Android-selain iOS Safari ooppera Mini
Ei 79+ Ei Ei Ei
Lähde: caniuse

Lisälukemista

  • CSS-luetteloluettelomoduulin tason 3 määrittely (työluonnos)
  • Näytetään nykyinen vaihe CSS-laskureilla
  • Laskeminen CSS-laskureilla ja ruudukolla
  • Kuinka kääntää CSS-mukautetut laskurit