काउंटर-सेट - सीएसएस-ट्रिक्स

counter-setसीएसएस संपत्ति, अपने नाम के साथ सच है, एक सीएसएस काउंटर के लिए शुरू कर मूल्य तय करता है। आप जानते हैं कि कैसे आदेशित सूचियाँ 1 से शुरू होती हैं और फिर वहाँ से वेतन वृद्धि होती है? counter-setसंपत्ति हमें सेट करने की अनुमति देता है कि कुछ करने के लिए मूल्य शुरू करने और कुछ का कहना है कि, -1। या 2. या 200! सिवाय इसके कि यह सूचीबद्ध सूचियों के बजाय CSS काउंटरों पर लागू होता है।

तो, मान लें कि हमारे पास पुस्तक अध्यायों की एक सूची के लिए एक कस्टम काउंटर है, जहाँ अध्याय संख्या अध्याय के नाम से पूर्व निर्धारित है।

हम 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 पर शुरू कर रहे हैं। मेरा मतलब है, "फॉरवर्ड" वास्तव में एक अध्याय नहीं है। कुछ भी हो, यह अध्याय ० जैसा है।

यहीं counter-setअंदर आता है! आइए शून्य पर शुरू करने के लिए चीजें सेट करें:

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

हम वहाँ चलें! वह बेहतर है। संपत्ति के मूल्य को काउंटर के नाम पर सेट करके, हमने अध्याय ० पर शुरू करने के लिए अध्यायों की सूची निर्धारित की है। हम बस १०० अध्याय की तरह इसे आसानी से किसी और चीज़ से शुरू कर सकते हैं।

और अगर कोई ब्राउज़र समर्थन नहीं करता है 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+ है	नहीं न	नहीं न	नहीं न

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ऑपेरा मिनी
नहीं न	79+	नहीं न	नहीं न	नहीं न

अग्रिम पठन

• सीएसएस सूचियाँ मॉड्यूल स्तर 3 विशिष्टता (कार्य प्रारूप)
• सीएसएस काउंटर के साथ वर्तमान कदम प्रदर्शित करना
• सीएसएस काउंटर्स और ग्रिड के साथ गिनती
• CSS Custom Counters को कैसे Reverse करें