יצירת כרטיסים מונפשים הניתנים ללחיצה עם מחלקת ה-Pseudo Relational :has()

ה- CSS :has() מחלקה פסאודו מתפרסמת בדפדפנים רבים עם Chrome ו ספארי כבר תומך בו באופן מלא. לעתים קרובות מתייחסים אליו כ"בורר האב" - כמו למשל, אנו יכולים לבחור סגנון הורה מתוך בורר ילדים - אבל יש כל כך הרבה יותר :has() יכול לעזור לנו לפתור. אחד הדברים האלה הוא להמציא מחדש את תבנית הקלפים הניתנים ללחיצה שרבים מאיתנו אוהבים להשתמש מעת לעת.

נסתכל איך :has() יכול לעזור לנו לטפל בכרטיסים מקושרים, אבל קודם...

מה זה :has() מחלקה פסאודו?

יש כבר א צְרוֹר of גדול הודעות צף מסביב שעושים עבודה מצוינת להסביר מה :has() הוא ולמה הוא משמש, אבל הוא עדיין חדש מספיק כדי שאנחנו צריכים לומר עליו כמה מילים גם כאן.

:has() הוא מחלקה פסאודו רלציונית שהיא חלק מה- טיוטה עבודה של W3C Selectors Level 4. זה מה שעוסק בסוגריים: התאמת אלמנטים שקשורים - או, יותר נכון, מכילים - אלמנטים צאצאים מסוימים.

/* 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

באמצעות JavaScript, אנו יכולים לצרף קישור לכרטיס שלנו במקום לרשום אותו בסימון. מצאתי את ההדגמה הנהדרת הזו של CodePen על ידי costdev שגם הפך את טקסט הכרטיס לבחירה בתהליך:

לגישה הזו יש הרבה יתרונות. הקישורים שלנו נגישים במיקוד ואנחנו יכולים אפילו לבחור טקסט. אבל יש כמה חסרונות כשזה מגיע לסטיילינג. אם אנחנו רוצים להנפיש את הכרטיסים האלה, למשל, נצטרך להוסיף :hover סגנונות על הראשי שלנו .card עטיפה במקום הקישור עצמו. אנחנו גם לא נרוויח מהאנימציות כאשר הקישורים נמצאים בפוקוס מהכרטיסייה במקלדת.

יתרונות:

• ניתן להנגיש בצורה מושלמת
• יכולת בחירת טקסט

חסרונות:

• דורש JavaScript
• לחיצה ימנית לא אפשרית (אם כי ניתן לתקן עם קצת סקריפטים נוספים)
• ידרוש הרבה סטיילינג על הכרטיס עצמו שלא יעבוד בעת מיקוד הקישור

השמיים ::after גישת בורר

שיטה זו מחייבת אותנו להגדיר את הכרטיס עם מיקום יחסי, ואז להגדיר מיקום מוחלט על הקישור ::after בורר פסאודו של קישור. זה לא דורש שום JavaScript והוא די קל ליישום:

יש כאן כמה חסרונות, במיוחד כשמדובר בבחירת טקסט. אלא אם כן תספק אינדקס z גבוה יותר בגוף הכרטיס שלך, לא תוכל לבחור טקסט, אך אם כן, הוזהר כי לחיצה על הטקסט לא תפעיל את הקישור שלך. אם אתה רוצה טקסט לבחירה או לא, זה תלוי בך. אני חושב שזה יכול להיות בעיית UX, אבל זה תלוי במקרה השימוש. הטקסט עדיין נגיש לקוראי מסך אבל הבעיה העיקרית שלי בשיטה היא היעדר אפשרויות אנימציה.

יתרונות:

• קל ליישום
• קישור נגיש ללא טקסט מנופח
• עובד על ריחוף ומיקוד

חסרונות:

• לא ניתן לבחור טקסט
• אתה יכול רק להנפיש את הקישור מכיוון שזהו האלמנט שאתה מרחף.

גישה חדשה: שימוש ::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() בוחר. לא רק שנוכל להתאים אלמנט אב על ידי הכרזה על אלמנטים אחרים כארגומנטים, אלא שנוכל להתאים גם להשתמש בפסאודו כדי להתאים ולעצב הורים.

יתרונות:

• נגיש
• ניתן להנפשה
• אין צורך ב-JavaScript
• אתה משתמש :hover על האלמנט הנכון

חסרונות:

• טקסט לא ניתן לבחירה בקלות.
• תמיכת הדפדפן מוגבלת לכרום ולספארי (היא נתמכת בפיירפוקס מאחורי דגל).

הנה הדגמה באמצעות טכניקה זו. אולי תבחין במעטפת נוספת מסביב לכרטיס, אבל זה רק אני משחק איתו שאילתות מכולה, שהוא רק אחד מאותם דברים פנטסטיים אחרים שמתגלגלים בכל הדפדפנים הגדולים.

יש לך דוגמאות אחרות אתה רוצה לשתף? פתרונות או רעיונות אחרים יתקבלו בברכה בקטע התגובות.