הכוח של :has() ב-CSS

היי כל המפתחים הנפלאים שלכם בחוץ! בפוסט זה אנו הולכים לחקור את השימוש ב :has() בפרויקט האינטרנט הבא שלך. :has() הוא חדש יחסית אך צבר פופולריות בקהילת הקצה הקדמי על ידי מתן שליטה על אלמנטים שונים בממשק המשתמש שלך. בואו נסתכל מהי מחלקת הפסאודו וכיצד אנו יכולים להשתמש בה.

תחביר

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

:has(<direct-selector>) {
  /* ... */
}

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

להסבר חזק יותר, DND עושה את זה בצורה מושלמת

בעיית הסטיילינג

בשנים עברו לא הייתה לנו דרך לעצב אלמנט הורה המבוסס על ילד ישיר של אותו הורה עם CSS או אלמנט המבוסס על אלמנט אחר. במקרה שהיינו צריכים לעשות זאת, נצטרך להשתמש בכמה JavaScript ולהפעיל/כיבוי מחלקות על סמך מבנה ה-HTML. :has() פתר את הבעיה הזו.

נניח שיש לך רכיב כותרת ברמה 1 (h1) זו הכותרת של פוסט או משהו כזה בדף רשימת בלוגים, ואז יש לך כותרת רמה 2 (h2) שעוקב ישירות אחריו. h2 זה יכול להיות כותרת משנה לפוסט. אם זה h2 הוא נוכח, חשוב, וישר אחרי ה h1, אולי תרצה להבליט את ה-h1 הזה. לפני שהיית צריך לכתוב פונקציית JS.

Old School Way - JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

פונקציית JS זו מחפשת את כל ה-h1 שיש להם a h2 ממשיכים בו, ומחילים מחלקה של תוכן הדגשה כדי ליצור את h1 להתבלט כמאמר חשוב.

חדש ומשופר עם ה-CSS המודרני שהגיע חם! היכולות של מה שאנחנו יכולים לעשות בדפדפן עברו כברת דרך. כעת אנו יכולים לנצל את ה-CSS כדי לעשות דברים שבאופן מסורתי היינו צריכים לעשות עם JavaScript, לא הכל, אלא כמה דברים.

New School Way - CSS

h1:has(+ h2) {
    color: blue;
}

תזרוק קצת :has() על זה!

עכשיו אתה יכול להשתמש :has() להשיג את אותו הדבר שפונקציית JS עשתה. CSS זה בודק עבור כל h1 ומשתמש ב- קומבינטור אחים בודק אם יש h2 שמיד אחריו, ומוסיף את הצבע הכחול לטקסט. להלן כמה מקרי שימוש של מתי :has() יכול להיות שימושי.

:יש בורר דוגמה 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:יש בורר דוגמה 2

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

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

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

האם אני יכול :has() את זה?

אתה יכול לראות את זה :has() יש תמיכה מצוינת בדפדפנים מודרניים.

:has() בקהילה!

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

"דוגמה אחת שיש לי היא עיצוב SVG ספציפי מחבילה של צד שלישי @saucedopen כי לא יכולתי לסגנן את זה ישירות."

זה מה ניק טיילור החל מ- OpenSauced היה צריך לומר על השימוש :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

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

אבי פריני החל מ- Nexcor Food Safety Technologies, Inc.

זה נהדר לראות כיצד חברי הקהילה משתמשים ב-CSS מודרני כדי לפתור בעיות בעולם האמיתי, וגם צעקה אל Abbey באמצעותו מטעמי נגישות!

דברים שכדאי לזכור

יש כמה נקודות עיקריות שכדאי לזכור בעת השימוש :has() נקודות תבליט שהפניה מ MDN.

• המחלקה הפסאודו מקבלת את הספציפיות של הבורר הספציפי ביותר בטיעון שלה
• אם :has() Pseudo-class עצמו אינו נתמך בדפדפן, כל בלוק הבורר ייכשל אלא אם כן :has() נמצא ברשימת בורר סלחנית, כגון ב :is() ו :where()
• השמיים :has() לא ניתן לקנן פסאודו-class בתוך אחר :has() 
• פסאודו-אלמנטים גם אינם בוררים חוקיים בתוכם :has() ואלמנטים פסאודו אינם עוגנים תקפים עבורם :has()

סיכום

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

קישורים:

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• PlatoData.Network Vertical Generative Ai. העצים את עצמך. גישה כאן.
• PlatoAiStream. Web3 Intelligence. הידע מוגבר. גישה כאן.
• PlatoESG. פחמן, קלינטק, אנרגיה, סביבה, שמש, ניהול פסולת. גישה כאן.
• PlatoHealth. מודיעין ביוטכנולוגיה וניסויים קליניים. גישה כאן.
• מקור: https://css-tricks.com/the-power-of-has-in-css/