CSS-määrityksen syvyyksissä on CSS-laskurit. Kuten nimestä käy ilmi, niiden avulla voit laskea asiaa sivullasi, kun CSS lisää arvoa joka kerta, kun se näkyy asiakirjassa.
Tämä on ensisijaisesti hyödyllistä, jos sinulla on tutorial-sivusto - oli kyse ruoanlaittoon tai verkkokehitykseen - niillä kaikilla on ohjeita, ja sinun on todennäköisesti kirjoitettava askeleen numero ennen varsinaista sisältöä. CSS-laskurit voivat auttaa tekemällä niin automaattisesti, voit jopa käyttää sitä laskeaksesi tiedoston tiedostot ja lisäämällä lukujen numerot ennen kuvatekstejä.
Tässä esimerkissä esitän, miten tämä voidaan saavuttaa luomalla yksinkertainen resepti pannukakkuihin ja tekemällä CSS-haku kunkin kappaleen alusta ja lisäämällä vaiheen numero sen eteen.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
Tämän HTML: n tavoite on, että jokainen kappale on erilainen askel ja CSS: llä voimme lisätä ne dynaamisesti kirjoittamalla vain 3 riviä koodia.
CSS-laskurit käyttävät omaisuuden laskureittoa. Se on ollut jonkin aikaa, kun se on tosiasiallisesti toteutettu CSS 2.1 -ohjelmassa. Sen käyttämistä varten meidän on ensin nollattava laskurin oletusarvo arvoon 0 ennen kuin haluamme luottaa siihen, mikä näkyy sivussa. On siis hyvä määritellä tämä kehon tyylejä, kuten:
body {counter-reset: steps;}Tämä rivi asettaa laskurin takaisin 0: ksi, ja se myös nimeää sen, jolloin voimme myöhemmin kutsua sen ja antaa myös meille useita sivuja.
Seuraava askel on käyttää pseudoelementtiä : ennen kohdistaa kaikki kappaleet ja lisätä vaiheen numero ennen kuin kaikki teksti alkaa. Tätä varten meidän on käytettävä vastapainoa ja määritettävä sisältö. Voimme vain käyttää numeroa tai voimme liittää tai kirjoittaa joitain tekstiä, tässä tapauksessa hyppäämme "Step" ennen laskurin arvoa, kuten:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Meidän pitäisi myös tehdä tämä sisältö erottua hieman ja tehdä se antamalla sille suuremman kirjasimen koon kuin kappaleet ja tehdä sen lihavoitu:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Jos haluat nähdä tämän idean toiminnassa, voit nähdä kynä, jonka luon.
CSS: n kanssa jatkuva huolenaihe on selaintuki, mutta koska tämä on CSS 2.1 -standardin toteutus, selainkantaus on loistava: kaikki tärkeimmät selaimet, työpöytä ja mobiililaitteet tukevat, ainoa merkittävä selain, joka ei tue sitä, on IE7, ja minun stat laskurin IE7 käyttää vain 0,61% ihmisistä, joten mielestäni voimme sanoa, että IE7 on lähtemässä pian. Riippumatta siitä, tarvitsetko tukea IE7: lle, riippuu oman sivustosi tilastoista.
CSS-laskurit eivät ole jotain, jota käytät jokaisessa projektissa, mutta se on jotain, jonka pitäisi säilyttää mielesi takana, koska jonain päivänä se voi tulla kätevästi.
Oletko käyttänyt CSS-laskuria projektissa? Mitä hyötyjä näet heille? Kerro meille kommentit.
Esitetty kuva / pikkukuva, laskentakuva kautta Shutterstock.