CSS السابق محددات الأخوة وكيفية وهمية لهم

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

أعلم أنك تريد ذلك ، أنت تعرف أنني أريد ذلك ، ولكن الحقيقة القاسية هي أنها غير موجودة (وربما لن تكون كذلك). هناك مليون وظيفة حول أسبابه. هناك حتى مقترحات حول كيفية تنفيذها. لكننا عالقون في المعالجة أحادية الاتجاه لقواعد CSS ، والأرجح أن يحمينا من "نقص الخبرة" لدينا يجعلنا عالقين في إعادة التدفقات وحتى الحلقات اللانهائية.

لحسن الحظ ، كما هو الحال مع معظم قيود CSS ، يمكننا وهمية.

أول شيء يجب مراعاته هو السبب في أننا نريد أن يبدأ الأشقاء السابقون.
حالتان تتبادر إلى الذهن:

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

1. اختيار جميع الأشقاء

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

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

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

حالة الاستخدام النموذجي لهذا هي القوائم:

سيتم رفض الشفرة أعلاه عتامة جميع العناصر

  • ولكن العنصر الذي يتم تمريره.

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

    مع بعض التصميم ، يجب أن تعمل مثل هذا:

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

    2. اختيار ما جاء من قبل

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

    هناك طرق متعددة للقيام بذلك. أبسط وربما الأقدم هو تغيير اتجاه الكتابة من الحاوية لدينا:

    إذا احتجت عناصرك إلى عرض النص الفعلي ، فيمكنك دائمًا عكسه مرة أخرى:

    لكن هذا يمكن أن يخرج عن السيطرة بعدة طرق. لحسن الحظ ، يجعل مربع أدوات CSS الحديث الأمر أكثر بساطة وأمانًا. يمكننا فقط استخدام Flexbox على الحاوية وعكس الترتيب مع flex-direction: row-revers:

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

    استخدام "الأشقاء السابقين" لإنشاء نظام تصنيف النجوم CSS-Only

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

    لذلك دعونا نبدأ من هناك:

    كما ناقشنا سابقًا ، يتم ترتيب العناصر بترتيب عكسي للسماح بتحديد محدد سابق للأخ. لاحظ أننا نستخدم حرف "النجمة البيضاء" الموحد (U + 2606) لتمثيل النجوم الفارغة.

    دعنا نعرضهم جنبًا إلى جنب ، بالترتيب الصحيح (العكسي):

    الآن إخفاء أزرار الراديو أنفسهم ، لا أحد يريد أن يرى ما يلي:

    وتطبيق بعض التصميم على شخصيات النجوم:

    الخط الوحيد المهم حقا هو الموقف: نسبي. سيسمح لنا بوضع عنصر زائف (U + 2605) بنجمة مطلقة فوقه ، وسيتم إخفاؤه في البداية.

    عندما نمرر فوق نجم ، يجب أن يصبح العنصر الزائف للنجمة المملوءة مرئيًا لجميع الأشقاء السابقين.

    نفس الشيء بالنسبة للتصنيف المحدد ، عن طريق مطابقة جميع التصنيفات التي تأتي قبل زر الاختيار المحدد:

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

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

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

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

    وهناك لدينا ، نظام تصنيف نجوم CSS فقط يعمل بمتصفح كامل ، باستخدام محددات "الأشقاء السابقين".

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

    مذكرة بشأن إمكانية الوصول

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

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

    لا تسميات "els" المتطابقة غير مفيدة لقارئات الشاشة ، لذا فإن أفضل طريقة هي أن يكون لديك داخل الملصق مع نص "n Stars" ، سيتم إخفاؤه من المستخدمين المشاهدين.

    أيضًا عرض مصدر HTML العكسي +: تجعل منهج الصف العكسي تقييم لوحة المفاتيح حرجًا ، حيث لا يتم عكسها. يعد الوصول إلى لوحة المفاتيح Flexbox ولوحة المفاتيح موضوعًا فوضويًا ، ولكن الأقرب إلى حل لهذا الحل هو إضافة aria-flowtotag إلى كل عنصر ، مما يعمل على إصلاح المشكلة لبعض قارئات الشاشة + مجموعات المستعرضات.

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