सौर मंडल की तरह, आवर्त सारणी को सीएसएस में कई बार किया गया है... लेकिन यह कभी भी इतनी सरलता से नहीं किया गया है, जितना मैं आपको दिखाने जा रहा हूं।

आइए कुछ बुनियादी, अर्थ संबंधी मार्कअप से शुरुआत करें:

    H
  

हम एक आदेशित सूची,

का उपयोग करते हैं, क्योंकि यह तत्वों की एक क्रमबद्ध प्रणाली है।

फिर हमारे पास प्रत्येक तत्व के लिए एक

1. टैग और एक टैग है।

   तत्व का नाम "संक्षेप" शब्द का संक्षिप्त रूप है, जो प्यारा है।
   - हेडन पिकरिंग।

   अब, प्रत्येक तत्व के परमाणु द्रव्यमान को गूगल करने के बजाय, हम चैटजीपीटी से शेष मार्कअप भरने के लिए कहते हैं। हम इसे प्रत्येक तत्व में 3-अक्षर वाला वर्ग जोड़ने के लिए भी कहते हैं, जो दर्शाता है कि तत्व कौन सा type है, अर्थात। एक "उत्कृष्ट गैस" (वर्ग = "एनबीएल") आदि - और हमें 118 तत्व मिलते हैं:
   

   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   

   यह अभी तक बहुत अच्छा नहीं लग रहा है; यह तत्वों के संक्षिप्ताक्षरों के साथ एक क्रमांकित सूची मात्र है।
   

   1. H
   2. He
   3. Li
   etc.
   

   आइए सूची को 18x10 ग्रिड में बदलें:
   

   ol {
     all: unset;
     container-type: inline-size;
     counter-reset: element;
     display: grid; 
     font-size: 2cqi;
     gap: 1px;
     grid-template-columns: repeat(18, 1fr);
     grid-template-rows: repeat(10, 1fr);
   }
   

   अब, हम प्रत्येक

2. को एक वर्गाकार बॉक्स के रूप में सेट करते हैं और परमाणु क्रमांक को ऊपर-बाएँ, द्रव्यमान (डेटा-द्रव्यमान) को ऊपर-दाएँ और टैग को नीचे रखने के लिए एक आंतरिक ग्रिड बनाते हैं। :
   

   li {
     aspect-ratio: 1 / 1;
     background: #EEEEEE;
     counter-increment: element;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     padding: .25ch;
     transition: scale .125s ease-in;
     &::before {
       content: counter(element);
     }
     &::after {
       content: attr(data-mass);
       grid-area: 1 / 2 / 2 / 2;
       justify-self: end;
     }
     &::before, &::after {
       font-size: .33em;
     }
   }
   

   इससे पहले कि हम देखें कि हमने क्या हासिल किया है, आइए चैटजीपीटी से पहले जोड़े गए "तत्व-प्रकार"-वर्गों में कुछ रंग जोड़ने के लिए कहें। अब हमें मिलता है:

   

   बहुत अच्छा लग रहा है, लेकिन बिल्कुल उस आवर्त सारणी जैसा नहीं जो हमने स्कूल में सीखा था। आइए कुछ ग्रिड-जादू जोड़ें।

   हीलियम के लिए, हम चाहते हैं कि इसे अंतिम कॉलम में धकेल दिया जाए। जैसा कि हम जानते हैं कि ग्रिड 18 कॉलम चौड़ा है, हम बस जोड़ते हैं:
   

   li {
     &:nth-of-type(2) { grid-column: 18; }
   }
   

   चूंकि यह एक आदेशित सूची है, nवें-प्रकार का मान हमेशा प्रत्येक तत्व की परमाणु संख्या के अनुरूप होगा। हम बोरॉन और एल्युमीनियम को कॉलम 13 में ले जाना चाहते हैं:
   

   li {
     &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; }
   

   आइए इसकी जांच करें:

   

   एक सुधार, निश्चित रूप से, लेकिन चूंकि ग्रिड-कॉलम सिर्फ ग्रिड को आगे बढ़ाता है, हम 58-71 और 90-103 (लैथेनाइड्स और एक्टिनाइड्स) तत्वों को पूरी तरह से कैसे ले सकते हैं उनके ग्रिड-प्रवाह से बाहर और उन्हें मुख्य ग्रिड के नीचे उन 2 पंक्तियों में जोड़ें?

   इसके लिए, हम ग्रिड-क्षेत्र का उपयोग कर सकते हैं, जहां हम परिभाषित करते हैं:

   रो-स्टार्ट / कॉल-स्टार्ट / रो-एंड / कॉलम-एंड

   हमारे मामले में, यह होगा:
   

   li {
      /* Lanthenides */
     &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; }
     &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; }
     &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; }
     /* etc. */
   
     /* Actinides */
     &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; }
     &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; }
     &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; }
     / etc. */
   }
   

   और अब हमें मिलता है (स्पष्टता के लिए, मैंने Dev Tools' ग्रिड-विज़ुअलाइज़र सक्षम किया है):

   

   ध्यान दें कि ग्रिड-तत्व के बाद जिस तत्व को हम प्रवाह से बाहर ले गए हैं, वह मुख्य प्रवाह में कैसे जारी रहता है!

   ---

   छनन

   अब, आइए इन "तत्व प्रकार"-वर्गों का उपयोग करें, हमने आवर्त सारणी को फ़िल्टर करने के लिए पहले ChatGPT जेनरेट किया था।

   सबसे पहले, आइए कुछ बुनियादी HTML जोड़ें:
   

   Filter

   Alkali Metals

   फिर, हम चैटजीपीटी को बाकी भरने के लिए कहते हैं, और बिना किसी आईडी के एक "सभी"-विकल्प जोड़ते हैं:

   

   फ़िल्टर करने के लिए हमें बहुत सारे जावास्क्रिप्ट की आवश्यकता है, है ना? नहीं, हम इसे सादे सीएसएस में कर सकते हैं:
   

   body:has(#alk:checked) li:not(.alk) { 
     opacity: 0.2;
   }
   

   तर्क इस तरह काम करता है: यदि बॉडी में id='alk' के साथ एक चेकबॉक्स है और इसे चेक किया गया है, तो शैलियाँ उन सभी

3. तत्वों पर लागू की जाएंगी जिनमें नहीं है। एल्क क्लास.

   सभी प्रकार और वर्गों के लिए दोहराएं।

   आइए "मेटलॉइड्स" पर क्लिक करें:

   

   वह कितना शांत है?

   ---

   यह इस ट्यूटोरियल का समापन करता है... लेकिन रुकिए... वह हाइजेनबर्ग फ़िल्टर क्या करता है? यह ChatGPT के फ़िल्टर की सूची में नहीं था?

   आइए इसे क्लिक करें:

   

   … और अब आप मेरे सर्वकालिक पसंदीदा टीवी-शो को जानते हैं!

   डेमो

   यहां एक कोडपेन है - भले ही यह पूरी तरह उत्तरदायी है, मैं इसे बड़ी स्क्रीन पर देखने की सलाह देता हूं: