التصميم المشروط للعناصر المحددة في حاوية الشبكة

التقاويم وعربات التسوق والمعارض ومستكشفات الملفات والمكتبات عبر الإنترنت هي بعض المواقف التي تظهر فيها العناصر القابلة للتحديد في الشبكات (مثل الشبكات المربعة). كما تعلم ، حتى تلك الفحوصات الأمنية التي تطلب منك تحديد جميع الصور باستخدام ممرات المشاة أو أي شيء آخر.

لقد وجدت طريقة رائعة لعرض خيارات قابلة للتحديد في شبكة. لا ، لا يتم إعادة إنشاء هذا reCAPTCHA ، ولكن ببساطة القدرة على تحديد عناصر متعددة. وعندما يتم تحديد عنصرين متجاورين أو أكثر ، يمكننا استخدام الذكاء :nth-of-type المجمعات والعناصر الزائفة و :checked فئة زائفة لتصميمها بحيث تبدو مجمعة معًا.

جاءت الفكرة الكاملة للجمعيات والزائفة للحصول على مربعات الاختيار المستديرة من ملف المقال السابق كتبته. كان تصميمًا بسيطًا لعمود واحد:

ولكن هذه المرة ، يتم تطبيق تأثير التقريب على العناصر الموجودة على طول المحورين الرأسي والأفقي على الشبكة. لست مضطرًا لقراءة مقالتي الأخيرة حول تصميم مربعات الاختيار لهذا لأنني سأغطي كل ما تحتاج إلى معرفته هنا. ولكن إذا كنت مهتمًا بتخفيض ما نقوم به في هذه المقالة ، فإن هذا الأمر يستحق المراجعة.

قبل أن نبدأ ...

سيكون من المفيد لك تدوين بعض الأشياء. على سبيل المثال ، أنا أستخدم HTML و CSS الثابت في العرض التوضيحي الخاص بي من أجل البساطة. اعتمادًا على التطبيق الخاص بك ، قد تضطر إلى إنشاء الشبكة والعناصر الموجودة فيها ديناميكيًا. أترك عمليات التحقق العملية لإمكانية الوصول من أجل التركيز على التأثير ، لكنك بالتأكيد تريد التفكير في هذا النوع من الأشياء في بيئة الإنتاج.

أيضًا ، أنا أستخدم CSS Grid للتخطيط. أوصي بنفس الشيء ، لكن بالطبع ، إنه تفضيل شخصي فقط وقد يختلف عدد الأميال التي قطعتها. بالنسبة لي ، يتيح لي استخدام الشبكة استخدام محددات الأشقاء بسهولة لاستهداف عنصر ::before و ::after الزائفة.

وبالتالي ، مهما كان معيار التخطيط الذي قد ترغب في استخدامه في التطبيق الخاص بك ، تأكد من أنه لا يزال من الممكن استهداف الصور الزائفة في CSS وتأكد من بقاء التخطيط في لباقة عبر المتصفحات والشاشات المختلفة.

لنبدأ الآن

كما لاحظت في العرض التوضيحي السابق ، فإن تحديد عنصر مربع الاختيار وإلغاء تحديده يعدل تصميم المربعات ، اعتمادًا على حالة التحديد لمربعات الاختيار الأخرى حوله. هذا ممكن لأنني قمت بتصميم كل مربع باستخدام العناصر الزائفة للعناصر المجاورة بدلاً من العنصر الخاص به.

يوضح الشكل التالي كيف أن ملف ::before العناصر الزائفة للصناديق في كل منها عمود (باستثناء العمود الأول) تتداخل المربعات الموجودة على يسارها ، وكيف أن ملف ::after العناصر الزائفة للصناديق في كل منها صف (باستثناء الصف الأول) تتداخل مع المربعات أعلاه.

هذا هو الكود الأساسي

الترميز واضح ومباشر:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

هناك المزيد يحدث في CSS الأولي. لكن ، أولاً ، الشبكة نفسها:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

هذه شبكة من خمسة صفوف وأربعة أعمدة تحتوي على مربعات اختيار. قررت مسح المظهر الافتراضي لمربعات الاختيار ، ثم منحهم خلفيتي ذات اللون الرمادي الفاتح وحدود فائقة التقريب:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

لاحظ أيضًا أن مربعات الاختيار نفسها عبارة عن شبكات. هذا هو المفتاح لوضع ملفات ::before و ::after العناصر الزائفة. بالحديث عن ذلك ، دعنا نفعل ذلك الآن:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

نحن نختار فقط العناصر الزائفة لمربعات الاختيار غير الموجودة في العمود الأول أو الصف الأول من الشبكة. input:not(:nth-of-type(4n+1)) يبدأ من مربع الاختيار الأول ، ثم يحدد ::before من كل عنصر رابع من هناك. لكن لاحظ ما نقوله :not()، لذا فإن ما نفعله حقًا هو تخطي ال ::before عنصر زائف من كل مربع اختيار رابع ، بدءًا من الأول. ثم نقوم بتطبيق الأنماط على ملف ::after صورة زائفة لكل خانة اختيار من المربع الخامس.

الآن يمكننا تصميم كل من ::before و ::after الصور الزائفة لكل خانة اختيار غير موجودة في العمود أو الصف الأول من الشبكة ، بحيث يتم نقلها إلى اليسار أو لأعلى ، على التوالي ، وإخفائها افتراضيًا.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

تصفيف :checked حالة

يأتي الآن تصميم مربعات الاختيار عندما تكون في ملف :checked حالة. أولاً ، دعنا نمنحهم لونًا ، على سبيل المثال أ limegreen خلفية:

input:checked { background: limegreen; }

يجب أن يكون المربع المحدد قادرًا على إعادة تصميم كافة المربعات المحددة المجاورة له. بمعنى آخر ، إذا حددنا مربع الاختيار الحادي عشر في الشبكة ، فيجب أن نكون قادرين أيضًا على تصميم المربعات المحيطة به في الأعلى والأسفل واليسار واليمين.

يتم ذلك عن طريق استهداف العناصر الزائفة الصحيحة. كيف نفعل ذلك؟ حسنًا ، هذا يعتمد على العدد الفعلي للأعمدة في الشبكة. إليك CSS إذا تم تحديد مربعين متجاورين في شبكة 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

إذا كنت تفضل يمكنك إنشاء الرمز أعلاه ديناميكيًا. ومع ذلك ، في الشبكة النموذجية ، على سبيل المثال معرض الصور ، سيكون عدد الأعمدة صغيرًا ومن المحتمل أن يكون عددًا ثابتًا من العناصر ، بينما قد تستمر الصفوف في الزيادة. خاصة إذا كانت مصممة لشاشات الجوال. هذا هو السبب في أن هذا النهج لا يزال وسيلة فعالة للذهاب. إذا حدث لسبب ما أن يحتوي التطبيق الخاص بك على صفوف محدودة وأعمدة متوسعة ، ففكر في تدوير الشبكة بشكل جانبي لأنه مع تدفق العناصر ، تقوم CSS Grid بترتيبها من اليسار إلى اليمين ومن أعلى إلى أسفل (أي صف بصف) .

نحتاج أيضًا إلى إضافة نمط لخانات الاختيار الأخيرة في الشبكة - فهي ليست كلها مغطاة بعناصر زائفة لأنها العناصر الأخيرة في كل محور.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

هذه بعض المحددات الصعبة! الاول…

input:nth-of-type(4n-1):checked + input:checked

... يقول هذا في الأساس:

فحص <input> بجوار عنصر محدد <input> في العمود الأخير الثاني.

وعلى nth-of-type يحسب على النحو التالي:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

لذلك ، نبدأ من مربع الاختيار الثالث ونختار كل رابع واحد من هناك. وإذا تم تحديد مربع اختيار في هذا التسلسل ، فسنقوم بتصميم مربعات الاختيار المجاورة أيضًا ، إذا تم تحديدها أيضًا.

وهذا الخط:

input:nth-of-type(4n):checked + * + * + * + input:checked

يقول هذا:

An <input> عنصر شريطة أن يتم التحقق منه ، يكون مجاورًا مباشرة لعنصر ، والذي يكون مجاورًا مباشرة لعنصر آخر ، والذي يكون أيضًا مجاورًا مباشرة لعنصر آخر ، والذي بدوره يكون مجاورًا مباشرة لـ <input> عنصر في حالة محددة.

ما يعنيه هذا هو أننا نختار كل مربع اختيار رابع يتم تحديده. وإذا تم تحديد مربع اختيار في هذا التسلسل ، فسنقوم بتصميم مربع الاختيار الرابع التالي من مربع الاختيار هذا إذا تم تحديده أيضًا.

وضعه للاستخدام

ما نظرنا إليه للتو هو المبدأ العام والمنطق وراء التصميم. مرة أخرى ، مدى فائدة ذلك في تطبيقك سيعتمد على تصميم الشبكة.

لقد استخدمت حدودًا مستديرة ، ولكن يمكنك تجربة أشكال أخرى أو حتى تجربة تأثيرات الخلفية (لقد غطت Temani للأفكار). الآن بعد أن عرفت كيف تعمل الصيغة ، فإن الباقي متروك تمامًا لخيالك.

إليك مثال عن الشكل الذي قد يبدو عليه في تقويم بسيط:

مرة أخرى ، هذا مجرد نموذج أولي تقريبي باستخدام الترميز الثابت. وسيكون هناك الكثير والكثير من اعتبارات إمكانية الوصول التي يجب مراعاتها في ميزة التقويم.

---

هذا هو التفاف! أنيق جدا ، أليس كذلك؟ أعني ، لا يوجد شيء "جديد" بالضبط حول ما يحدث. لكنه مثال جيد على اختيار الأشياء في CSS. إذا كان لدينا مقبض لتقنيات الاختيار الأكثر تقدمًا التي تستخدم الدمج والأشكال الزائفة ، فيمكن لقوى التصميم لدينا أن تصل إلى ما هو أبعد من تصميم عنصر واحد - كما رأينا ، يمكننا بشكل مشروط تصميم العناصر بناءً على حالة عنصر آخر.

---

التصميم المشروط للعناصر المحددة في حاوية الشبكة نشرت أصلا في حيل CSS. يجب احصل على النشرة الإخبارية.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/