Skryté v hloubkách specifikace CSS najdete čítače CSS. Jak název naznačuje, že vám umožní počítat věc na vaší stránce pomocí CSS, čímž se zvýší hodnota pokaždé, když se objeví v dokumentu.
To je v zásadě užitečné, pokud máte tutoriální web - ať už jde o vaření nebo vývoj webových aplikací - všichni mají kroky, které je třeba následovat, a nejspíš budete muset napsat číslo kroku před vlastním obsahem. CSS čítače vám to pomohou automaticky, dokonce je můžete použít k počítání obrázků ve vašem souboru a přidání čísel čísel před titulky.
V tomto příkladu budu demonstrovat, jak toho docílit vytvořením jednoduchého receptu pro palačinky a tím, že CSS vyhledá začátek každého odstavce a přidá číslo kroku před ním.
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.
Cílem tohoto kódu HTML je, že každý odstavec je jiný krok a pomocí CSS je můžeme dynamicky přidat tak, že zapíšeme jen 3 řádky kódu.
Čítače CSS používají protiúčet přírůstku. Bylo to po nějakou dobu, kdy byla skutečně implementována v CSS 2.1. Abychom ji mohli použít, musíme nejprve obnovit výchozí hodnotu počitadla na hodnotu 0, než se na stránce zobrazí cokoli, co chceme počítat. body styly, jako například:
body {counter-reset: steps;}Tento řádek pouze nastaví počitadlo zpět na 0 a také jej pojmenuje, což nám umožní později volat a také nám dovolit, aby na stránce obsahoval více než jeden čítač.
Dalším krokem je použití prvku pseudo : dříve, než zaměříte všechny odstavce a přidáte číslo kroku předtím, než začne celý text. Chcete-li to udělat, musíme použít proti-přírůstek a pak určit obsah. Můžeme pouze použít číslo, nebo můžeme připojit nebo předložit nějaký text, v tomto případě předem nastavíme "krok" před hodnotou čítače, a to takto:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Také bychom měli tento obsah vyniknout trochu, a proto jej udělíme větší velikost písma než odstavce a uděláme to tučně:
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;}Pokud chcete vidět tuto myšlenku v akci, můžete ji vidět pero, které jsem vytvořil.
Neustálý zájem o práci s CSS je podpora prohlížeče, ale vzhledem k tomu, že jde o implementaci CSS 2.1, je podpora prohlížeče skvělá: je podporována všemi hlavními prohlížeči, stolními a mobilními, jediným významným prohlížečem, který jej nepodporuje, je IE7, a podle mého statního pultu IE7 používá pouze 0,61% lidí, takže myslím, že můžeme říci, že IE7 brzy odjede. Potřebujete-li podporu IE7 záviset na statistikách vašeho webu.
Čítače CSS nejsou něco, co budete používat v každém projektu, ale je to něco, co byste měli držet v zádech své mysli, protože jednou se to hodí.
Používali jste čítače CSS v projektu? Co pro ně můžete použít? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, počítání obrázku přes Shutterstock.