إنشاء بطاقات متحركة وقابلة للنقر باستخدام: () فئة زائفة علائقية

CSS :has() يتم طرح الفئة الزائفة في العديد من المتصفحات باستخدام الكروم و سفاري بالفعل يدعمها بشكل كامل. غالبًا ما يُشار إليه باسم "المحدد الأصلي" - حيث يمكننا تحديد نمط عنصر أصلي من محدد فرعي - ولكن هناك ما هو أكثر من ذلك بكثير :has() يمكن أن تساعدنا في حل. أحد هذه الأشياء هو إعادة اختراع نمط البطاقة القابلة للنقر الذي يحب الكثير منا استخدامه من وقت لآخر.

سنلقي نظرة على كيفية ذلك :has() يمكن أن يساعدنا في التعامل مع البطاقات المرتبطة، ولكن أولاً...

ما هذا :has() الطبقة الزائفة؟

يوجد بالفعل ملف باقة of عظيم المشاركات تطفو حولها التي تقوم بعمل ممتاز في شرح ما :has() هو وما يتم استخدامه من أجله، ولكنه لا يزال جديدًا بدرجة كافية بحيث يجب أن نقول بضع كلمات عنه هنا أيضًا.

:has() هي فئة زائفة علائقية تشكل جزءًا من مسودة عمل المستوى 3 لمحددات W4C. هذا هو كل ما تدور حوله الأقواس: مطابقة العناصر المرتبطة بـ - أو بشكل أكثر دقة، تحتوي على - عناصر فرعية معينة.

/* Matches an article element that contains an image element */
article:has(img) { }

/* Matches an article element with an image contained immediately within it */
article:has(> img) { }

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

/* Matches an article without images  */
article:not(:has(img)) { }

ولكن هذه مجرد بداية لكيفية الجمع بين القوى للقيام بالمزيد :has(). قبل أن ننتقل تحديدًا إلى حل معضلة البطاقة القابلة للنقر، دعنا نلقي نظرة على بعض الطرق التي نتعامل معها حاليًا دون استخدام :has().

كيف نتعامل حاليًا مع البطاقات القابلة للنقر

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

نهج "الارتباط كغلاف".

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

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

الايجابيات:

• سريع التنفيذ
• صحيح لغويا

سلبيات:

• مخاوف إمكانية الوصول
• النص غير قابل للتحديد
• هناك الكثير من المتاعب لاستبدال الأنماط التي استخدمتها على روابطك الافتراضية

طريقة جافا سكريبت

باستخدام JavaScript، يمكننا إرفاق رابط لبطاقتنا بدلاً من كتابته في العلامات. لقد وجدت هذا العرض التوضيحي الرائع لـ CodePen بواسطة com.costdev الذي جعل نص البطاقة أيضًا قابلاً للتحديد في العملية:

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

الايجابيات:

• يمكن جعلها في متناول الجميع بشكل مثالي
• القدرة على اختيار النص

سلبيات:

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

• ::after نهج التحديد

تتطلب هذه الطريقة منا ضبط البطاقة بالموضع النسبي، ثم ضبط الموضع المطلق على الروابط ::after محدد زائف للارتباط. لا يتطلب هذا أي جافا سكريبت وهو سهل التنفيذ:

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

الايجابيات:

• سهل التنفيذ
• رابط يمكن الوصول إليه بدون نص منتفخ
• يعمل على التمرير والتركيز

سلبيات:

• النص غير قابل للتحديد
• يمكنك فقط تحريك الرابط لأن هذا هو العنصر الذي تحوم حوله.

نهج جديد: استخدام ::after مع :has()

الآن بعد أن قمنا بتأسيس الأساليب الحالية للبطاقات القابلة للنقر، أريد أن أوضح كيفية تقديمها :has() هذا المزيج يحل معظم تلك العيوب.

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

لنبدأ بالترميز:

  
  

    
Some Heading
    
Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.
  

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

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

/* The card element */
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;

  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

عظيم! أضفنا مقياسًا أوليًا للصورة (--img-scale: 1.001)، اللون الأولي لعنوان البطاقة (--title-color: black) وبعض الخصائص الإضافية التي سنستخدمها لإخراج السهم من الرابط. لقد قمنا أيضًا بتعيين حالة فارغة لـ box-shadow إعلان من أجل تحريكه في وقت لاحق . يؤدي هذا إلى إعداد ما نحتاجه للبطاقة القابلة للنقر الآن، لذلك دعونا نضيف بعض عمليات إعادة التعيين والتصميم إليها عن طريق إضافة تلك الخصائص المخصصة إلى العناصر التي نريد تحريكها:

article h2 {
  margin: 0 0 18px 0;
  font-family: "Bebas Neue", cursive;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  color: var(--title-color);
  transition: color 0.3s ease-out;
}
article figure {
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
article img {
  max-width: 100%;
  transform-origin: center;
  transform: scale(var(--img-scale));
  transition: transform 0.4s ease-in-out;
}
article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #28666e;
}
article a:focus {
  outline: 1px dotted #28666e;
}
article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

.article-body {
  padding: 24px;
}

دعونا نكون لطفاء مع الناس ونضيف أيضًا أ فئة قارئ الشاشة مخفي خلف الرابط:

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

بدأت بطاقتنا تبدو جميلة جدًا. حان الوقت لإضافة القليل من السحر إليها. مع ال :has() فئة زائفة، يمكننا الآن التحقق مما إذا كان الرابط الخاص بنا تم تحريكه أو التركيز عليه، ثم تحديث خصائصنا المخصصة وإضافة box-shadow. مع هذا الجزء الصغير من CSS، تنبض بطاقتنا بالحياة:

/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #28666e;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

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

وهناك لديك. مجرد حالة استخدام قوية أخرى لـ :has() محدد. لا يمكننا فقط مطابقة العنصر الأصلي من خلال الإعلان عن عناصر أخرى كوسيطات، ولكن يمكننا أيضًا مطابقة استخدام العناصر الزائفة لمطابقة العناصر الأصلية ونمطها أيضًا.

الايجابيات:

• متاحة
• متحرك
• لا حاجة لجافا سكريبت
• استخدام :hover على العنصر الصحيح

سلبيات:

• لا يمكن تحديد النص بسهولة.
• يقتصر دعم المتصفح على Chrome وSafari (وهو مدعوم في Firefox خلف علامة).

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

حصلت على بعض أمثلة أخرى ترغب في المشاركة؟ نرحب بالحلول أو الأفكار الأخرى في قسم التعليقات.