مثل النظام الشمسي، الجدول الدوري تم إنجازه باستخدام CSS مرات عديدة... ولكن لم يتم إنجازه بهذه البساطة، كما سأعرضه لك.

لنبدأ ببعض العلامات الدلالية الأساسية:

    H
  

نستخدم قائمة مرتبة،

، لأن هذا نظام منظم من العناصر.

لدينا بعد ذلك علامة

1. لكل عنصر، وعلامة .

   اسم العنصر هو اختصار لكلمة "اختصار" وهي لطيفة.
   – هايدون بيكرينغ.

   الآن، بدلاً من البحث في Google عن الكتلة الذرية لكل عنصر، نطلب فقط من ChatGPT ملء بقية العلامات. ونطلب منه أيضًا إضافة فئة مكونة من 3 أحرف إلى كل عنصر، مع الإشارة إلى نوع العنصر، على سبيل المثال. "الغاز النبيل" (class = "nbl") وما إلى ذلك - وحصلنا على 118 عنصرًا:
   

   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   

   لا يبدو رائعًا بعد؛ إنها مجرد قائمة مرقمة تحتوي على اختصارات للعناصر.
   

   1. H
   2. He
   3. Li
   etc.
   

   دعونا نحول القائمة إلى شبكة مقاس 18 × 10:
   

   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;
     }
   }
   

   قبل أن نرى ما أنجزناه، دعونا نطلب من ChatGPT إضافة بعض الألوان إلى فئات "نوع العنصر" التي أضافها مسبقًا. الآن نحصل على:

   

   يبدو رائعًا، لكنه ليس تمامًا مثل الجدول الدوري الذي تعلمناه في المدرسة. دعونا نضيف بعض السحر الشبكة.

   بالنسبة لـ الهيليوم، نريد أن يتم دفعه إلى العمود الأخير. وكما نعلم أن عرض الشبكة هو 18 عمودًا، فإننا ببساطة نضيف:
   

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

   نظرًا لأن هذه قائمة مرتبة، فإن قيمة النوع n ستتوافق دائمًا مع العدد الذري لكل عنصر. نريد نقل البورون والألومنيوم إلى العمود 13:
   

   لي { &:nth-of-type(5), &:nth-of-type(13) { عمود الشبكة: 13; }

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

   دعونا نتحقق من ذلك:

   

   تحسين، بالتأكيد، ولكن بما أن عمود الشبكة يدفع الشبكة للأمام فقط، فكيف يمكننا إخراج العناصر 58-71 و90-103 (اللاتينيدات والأكتينيدات) تمامًا

   خارج تدفق الشبكة ] وأضفهم إلى هذين الصفين الموجودين أسفل الشبكة الرئيسية؟

   لذلك، يمكننا استخدام منطقة الشبكة، حيث نحدد:
   بداية الصف / بداية الصف / نهاية الصف / نهاية العمود
   في حالتنا، سيكون:

   
   

   لي { /* اللانثينيدات */ &:nth-type(58) { منطقة الشبكة: 9 / 4 / 9/ 4; } &:nth-type(59) { منطقة الشبكة: 9 / 5 / 9/ 5; } &:nth-type(60) { منطقة الشبكة: 9 / 6 / 9/ 6; } /* إلخ. */ /* الأكتينيدات */ &:nth-of-type(90) { منطقة الشبكة: 10 / 4 / 10 / 4; } &:nth-of-type(91) { منطقة الشبكة: 10 / 5 / 10 / 5; } &:nth-of-type(92) { منطقة الشبكة: 10 / 6 / 10 / 6; } / إلخ. */ }

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

   و

   الآن حصلنا على (للتوضيح، لقد قمت بتمكين مصور الشبكة أدوات التطوير):

   

   لاحظ كيف أن عناصر الشبكة

   بعد العنصر الذي نقلناه خارج التدفق، تستمر في التدفق الرئيسي!

   ---

   تصفية
   الآن، دعونا نستخدم فئات "نوع العنصر"، التي قمنا بإنشاء ChatGPT سابقًا، لتصفية

   الجدول الدوري. أولاً، دعونا نضيف بعض HTML الأساسي:

   
   

   مرشح

   المعادن القلوية التسمية> فيلدسيت>

   Filter

   Alkali Metals

   نحن بحاجة إلى مجموعة من جافا سكريبت للتصفية، أليس كذلك؟ لا، يمكننا القيام بذلك باستخدام CSS عادي:

   
   body:has(#alk:checked) li:not(.alk) { العتامة: 0.2؛ }

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

   لا تحتوي على

   . فئة الك. كرر لجميع الأنواع والفئات.

   دعونا نضغط على "أشباه الفلزات":

   ما مدى روعة ذلك؟

   بهذا ينتهي هذا البرنامج التعليمي... لكن انتظر... ماذا يفعل مرشح Heisenberg؟ لم يكن في قائمة المرشحات من ChatGPT؟

   ---

   دعونا نضغط عليه:

   ... والآن أنت تعرف برنامجي التلفزيوني المفضل على الإطلاق!

   تجريبي

   إليك Codepen — على الرغم من استجابته الكاملة، إلا أنني أوصي بمشاهدته على شاشات أكبر: