השמיים :has()
מעמד פסאודו היא, מטה, תכונת ה-CSS החדשה האהובה עלי. אני יודע שזה גם עבור רבים מכם, לפחות אלה מכם שלקחו את סקר מצב ה-CSS. היכולת לכתוב בוררים הפוך מעניקה לנו עוד כוחות על שמעולם לא חשבתי שאפשריים.
אני אומר "עוד כוחות על" כי כבר היו המון רעיונות חכמים באמת מדהימים שפורסמו על ידי חבורה של אנשים סופר חכמים, כמו:
מאמר זה אינו מדריך סופי :has()
. זה גם לא כאן כדי לשחזר את מה שכבר נאמר. זה רק אני (היי 👋) קופץ על העגלה לרגע כדי לחלוק כמה מהדרכים שבהן הכי סביר שאשתמש :has()
בעבודה היומיומית שלי... כלומר, ברגע שהוא נתמך רשמית על ידי Firefox שהוא קרוב.
כשזה יקרה, אתה יכול להמר שאני אתחיל להשתמש :has()
בכל המקום. הנה כמה דוגמאות מהעולם האמיתי לדברים שבניתי לאחרונה וחשבתי לעצמי, "אה, זה יהיה הרבה יותר נחמד פעם אחת :has()
זוכה לתמיכה מלאה".
הימנע מהצורך להגיע מחוץ לרכיב ה-JavaScript שלך
האם אי פעם בנית רכיב אינטראקטיבי שלפעמים צריך להשפיע על סגנונות במקום אחר בעמוד? קח את הדוגמה הבאה, איפה <nav>
הוא תפריט מגה, ופתיחתו משנה את הצבעים של ה <header>
תוכן מעליו.
אני מרגיש שאני צריך לעשות דבר כזה כל הזמן.
הדוגמה הספציפית הזו היא רכיב React שיצרתי עבור אתר. הייתי צריך "להגיע החוצה" לחלק ה-React של הדף איתו document.querySelector(...)
והחלף מחלקה ב- <body>
, <header>
, או רכיב אחר. זה לא סוף העולם, אבל זה בהחלט מרגיש קצת איכס. אפילו באתר React מלא (אתר Next.js, למשל), אצטרך לבחור בין ניהול של א menuIsOpen
מצב גבוה יותר בעץ הרכיבים, או בצע את אותה בחירת רכיבי DOM - שהיא לא מאוד React-y.
עם :has()
, הבעיה נעלמת:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
לא עוד להתעסק עם חלקים אחרים של ה-DOM ברכיבי JavaScript שלי!
פסי שולחן טובים יותר UX
הוספת "פסים" של שורה חלופית לטבלאות שלך יכולה להיות שיפור UX נחמד. הם עוזרים לעיניים שלך לעקוב אחר איזו שורה אתה נמצא בזמן שאתה סורק את הטבלה.
אבל מניסיוני, זה לא עובד מצוין על שולחנות עם שתיים או שלוש שורות בלבד. אם יש לך, למשל, טבלה עם שלוש שורות ב- <tbody>
ואתה "מפשפש" כל שורה "שווה", אתה יכול בסופו של דבר עם פס אחד בלבד. זה לא ממש שווה דפוס וייתכן שמשתמשים תוהים מה כל כך מיוחד בשורה המודגשת האחת.
באמצעות טכניקה זו היכן ברמוס משתמש :has()
ליישם סגנונות על סמך מספר הילדים, נוכל ליישם פסי שולחן כאשר יש יותר מ, למשל, שלוש שורות:
מה לעשות יותר מפואר? אתה יכול גם להחליט לעשות זאת רק אם הטבלה כוללת לפחות מספר מסוים של עמודות:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
הסר את הלוגיקה של המחלקה המותנית מתבניות
לעתים קרובות אני צריך לשנות פריסת עמוד בהתאם למה שמופיע בדף. קח את פריסת הרשת הבאה, שבה המיקום של התוכן הראשי משנה אזורי רשת בהתאם לאם יש סרגל צד.
זה משהו שעשוי להיות תלוי אם יש דפי אחים המוגדרים ב-CMS. בדרך כלל הייתי עושה את זה עם היגיון תבנית כדי להוסיף על תנאי שיעורי שינוי BEM למעטפת הפריסה כדי לקחת בחשבון את שתי הפריסות. ה-CSS הזה עשוי להיראות בערך כך (חוקים מגיבים ודברים אחרים הושמטו לקיצור):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
מבחינת CSS, זה בסדר גמור, כמובן. אבל זה הופך את קוד התבנית לקצת מבולגן. בהתאם לשפת התבניות שלך, זה יכול להיות די מכוער להוסיף על תנאי חבורה של כיתות, במיוחד אם אתה צריך לעשות את זה גם עם הרבה אלמנטים של ילדים.
להשוות את זה עם א :has()
גישה מבוססת:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
בכנות, זה לא הרבה יותר טוב מבחינת CSS. אבל הסרת מחלקות השינוי המותנה מתבנית ה-HTML היא ניצחון נחמד אם תשאל אותי.
קל לחשוב על החלטות מיקרו עיצוב עבור :has()
- כמו כרטיס כאשר יש בו תמונה - אבל אני חושב שזה יהיה ממש שימושי גם לשינויי פריסת המאקרו האלה.
ניהול ספציפי יותר טוב
אם אתה קורא המאמר האחרון שלי, אתה תדע שאני דבק בספציפיות. אם, כמוני, אתה לא רוצה שציוני הספציפיות שלך יתפוצצו בעת ההוספה :has()
ו :not()
בכל הסגנונות שלך, הקפד להשתמש :where()
.
זה בגלל הספציפיות של :has()
מבוסס על האלמנט הספציפי ביותר ברשימת הארגומנטים שלו. אז, אם יש לך משהו כמו תעודת זהות שם, יהיה קשה לעקוף את הבורר שלך במהלך המפל.
מצד שני, הספציפיות של :where()
הוא תמיד אפס, אף פעם לא מוסיף לציון הספציפיות.
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
העתיד מזהיר
אלה רק כמה דברים שאני לא יכול לחכות כדי להיות מסוגל להשתמש בייצור. גם לאלמנך CSS-Tricks יש המון דוגמאות. עם מה אתה מצפה לעשות :has()
? באיזה סוג של דוגמאות מהעולם האמיתי נתקלת איפה :has()
היה הפתרון המושלם?
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- יכולת
- יכול
- אודות
- מֵעַל
- חֶשְׁבּוֹן
- להשפיע על
- תעשיות
- כְּבָר
- תמיד
- מדהים
- ו
- אחר
- החל
- גישה
- אזורים
- טענה
- מאמר
- מבוסס
- כי
- להמר
- מוטב
- בֵּין
- קצת
- מַשָׁב
- נבנה
- צרור
- יכול לקבל
- כרטיס
- מפלה
- מסוים
- שינוי
- שינויים
- ילד
- בחרו
- בכיתה
- כיתות
- CMS
- קוד
- עמודות
- רְכִיב
- מכיל
- תוכן
- יכול
- קורס
- CSS
- החלטות
- סופי
- תלוי
- עיצוב
- לא
- עושה
- DOM
- לא
- מטה
- אלמנטים
- במיוחד
- וכו '
- אֲפִילוּ
- אי פעם
- כל
- דוגמה
- דוגמאות
- ניסיון
- עיניים
- חביב
- מאפיין
- מעטים
- סוף
- Firefox
- הבא
- קדימה
- החל מ-
- לגמרי
- לקבל
- נותן
- Goes
- הולך
- גדול
- רֶשֶׁת
- רשת-תבנית-אזורים
- מדריך
- לקרות
- יש
- לעזור
- כאן
- hi
- גבוה יותר
- מודגש
- HTML
- HTTPS
- חולה
- רעיונות
- תמונה
- השבחה
- in
- אינטראקטיבי
- IT
- JavaScript
- רק אחד
- שמור
- סוג
- לדעת
- שפה
- אחרון
- מערך
- סביר
- קְצָת
- נראה
- הסתכלות
- מגרש
- מאקרו
- עשוי
- ראשי
- לעשות
- ניהול
- רב
- יכול
- רֶגַע
- יותר
- רוב
- מוזילה
- צורך
- צרכי
- חדש
- הבא
- Next.js
- בדרך כלל
- מספר
- רשמית
- ONE
- פתיחה
- אחר
- בחוץ
- חלק
- מסוים
- חלקים
- תבנית
- אֲנָשִׁים
- מקום
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- אפשרי
- להציג
- יפה
- בעיה
- הפקה
- לאור
- לְהַגִיעַ
- להגיב
- חומר עיוני
- עולם אמיתי
- לאחרונה
- הסרת
- תגובה
- שׁוּרָה
- כללי
- הפעלה
- אמר
- אותו
- סריקה
- מבחר
- סט
- שיתוף
- אתר
- חכם
- So
- פִּתָרוֹן
- כמה
- משהו
- אי שם
- מיוחד
- ספציפי
- ספֵּצִיפִיוּת
- התחלה
- מדינה
- פס
- פסים
- סגנון
- סוּפֶּר
- נתמך
- שולחן
- לקחת
- TD
- תבנית
- השמיים
- המדינה
- העולם
- דבר
- דברים
- מחשבה
- שְׁלוֹשָׁה
- בכל
- ל
- טון
- גַם
- לְגַמרֵי
- לעקוב
- נָכוֹן
- Upside
- us
- להשתמש
- משתמשים
- ux
- לחכות
- דרכים
- מה
- אם
- אשר
- מי
- לנצח
- תוהה
- תיק עבודות
- עוֹלָם
- ראוי
- היה
- לכתוב
- אתה
- זפירנט