المتقدمة مربع التصميم التصميم مع CSS الشبكة
ال CSS الشبكة تخطيط وحدة لا يمكن حل مشكلة ضخمة في التصميم فحسب ، بل أيضًا في بعض مشكلات mulish القديمة الجيدة التي كنا عليها التعامل مع لفترة طويلة, مثل تصميم تسمية مربع.
بينما هناك طريقة واضحة نسبيًا لتصميم التسمية عند ظهورها بعد مربع الاختيار ، ليس بهذه السهولة عندما تظهر التسمية قبل هذا.
مربع اختيار التصميم دون CSS الشبكة
تصميم ملصق بعد مربع الاختيار هو شيء نقوم به مطورو البرامج منذ أن قرأنا عنه في مكان ما. هذه التقنية هي واحدة من الأمثلة الرئيسية والقديمة للديناميات القوية التي يمكن أن تمتلكها CSS.
إليك الكود الذي قد تكون على دراية به بالفعل أنماط تسمية بعد خانة اختيار محددة:
المدخلات: تم تحديد علامة + / * style me * /
ا التسمية على غرار بعد مربع الاختيار قد يبدو مثل هذا (ومع ذلك ، يمكنك استخدام قواعد أنماط أخرى أيضًا):
يستخدم كود CSS أعلاه متحد الأخوة المجاورة تميزت + مفتاح. عندما يكون مربع الاختيار في :التحقق حالة, عنصر بعد هذا (عادة ما تكون التسمية) يمكن تصميمها باستخدام هذه الطريقة.
هذه تقنية بسيطة وفعالة! ما يمكن ربما أخطأ في ذلك؟ لا شيء - حتى تريد عرض الملصق قبل مربع الاختيار.
الموحد الأخوة المجاور يختار العنصر التالي. هذا يعني أن التسمية يجب أن تأتي بعد مربع الاختيار في شفرة مصدر HTML.
لذلك ، لجعل التسمية تظهر قبل مربع اختيار الانتماء على الشاشة ، لا يمكننا نقله قبل مربع الاختيار في الكود المصدري ، ك محدد الأخوة السابق غير موجود في CSS.
مما يترك خيارًا واحدًا فقط: إعادة وضع مربع الاختيار والتسمية استخدام تحول أو موضع أو حافة أو خاصية CSS أخرى بها نوع من القدرة على التليين ، بحيث تظهر الملصق على يسار مربع الاختيار على الشاشة.
مشاكل مع الطريقة التقليدية
لا يوجد شيء أساسي معظم خطأ في التقنية المذكورة أعلاه ولكن يمكن أن يكون غير فعال في بعض الحالات. أعني الحالات التي لم تعد تعمل فيها المواضع المعاد ترتيبها من مربع الاختيار والتسمية.
فكر في الاستجابة, على سبيل المثال. قد تضطر إلى تغيير حجم أو تغيير موضع مربع الاختيار وفقًا للجهاز الذي يتم عرضه عليه. عندما يحدث ذلك ، سوف بحاجة إلى إعادة وضع الملصق كذلك, حيث لن تتم إعادة التنسيق التلقائي للتسمية استجابةً لإعادة تحديد موضع / تغيير حجم مربع الاختيار.
يمكننا القضاء على هذا العيب إذا استطعنا فقط توفير بعض التصميم الصلب لخانة الاختيار والتسمية, بدلاً من وضعهم تقريبًا على الصفحة.
لكن جميع أنظمة التخطيط تقريبًا ، مثل الجداول أو الأعمدة ، تتطلب منك ذلك أضف الملصق قبل مربع الاختيار في الكود المصدري لجعلها تظهر بنفس الطريقة على الشاشة. هذا شيء لا نريد القيام به لأن محدد العنصر التالي في الملصق سوف يتوقف عن العمل.
CSS Grid ، من ناحية أخرى ، هو نظام تخطيط ليس يعتمد على وضع / ترتيب العناصر في شفرة المصدر.
قدرات إعادة ترتيب تخطيط الشبكة تؤثر عمدا فقط التقديم البصري, ترك ترتيب الكلام والتنقل بناءً على الطلب المصدر. يسمح هذا للمؤلفين بمعالجة العرض التقديمي المرئي مع ترك الأمر المصدر كما هو ... - CSS Grid Layout Module Level 1، W3C
وبالتالي ، فإن شبكة CSS هي الحل الأمثل ل نمط التسمية التي تظهر قبل مربع الاختيار.
مربع الاختيار التصميم مع CSS الشبكة
لنبدأ برمز HTML. سيبقى ترتيب مربع الاختيار والتسمية كما كان من قبل. نحن فقط إضافة كل منهما إلى الشبكة.
CSS المصاحب هو كما يلي:
#cbgrid display: grid؛ مناطق قالب الشبكة: "اليسار إلى اليمين" ؛ العرض: 150 بكسل ؛ الإدخال [نوع = خانة اختيار] شبكة منطقة: يمين ؛ التسمية شبكة منطقة: اليسار ؛
لن أتعمق في كيفية عمل شبكة CSS ، كما كتبت بالفعل مقالة مفصلة حول هذا الموضوع, يمكنك أن تقرأ هنا. بعض الأساسيات ، ولكن: عرض: الشبكة تحول الخاصية عنصرًا إلى حاوية شبكة, شبكة منطقة يحدد مساحة الشبكة التي ينتمي إليها العنصر ، و شبكة قالب والمناطق يشكل تخطيط الشبكة ، ويتألف من مناطق الشبكة المختلفة.
في الرمز أعلاه ، هناك منطقتين الشبكة: "اليسار" و "حق". وهم يشكلون عمودين من صف الشبكة. مربع الاختيار ينتمي إلى "حق" المنطقة والتسمية إلى "اليسار". من هنا كيف تبدو على الشاشة:
نظرًا لأننا لم نغير الموضع النسبي لمربع الاختيار والتسمية في الكود المصدري ، يمكننا ذلك لا تزال تستخدم Combinator الأخوة المجاورة:
المدخلات: تم تحديد علامة + / * style me * /
لاحظ أن عنصر الشبكة هو محظور دائما. يبدو مع مربع المحيطة المعروفة باسم مربع مستوى الشبكة. إذا كنت لا تريد ذلك ، على سبيل المثال للتسمية, وضع غلاف على هذا البند (لفه في عنصر آخر) و تحويل هذا المجمع في منطقة الشبكة.
هذا كل شيء ، الناس. نأمل أن تساعدك شبكة CSS على وضع حد أدنى لمخططات مربعات الاختيار هذه.
