:has הוא בורר לא סלחן

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

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

לִרְאוֹת ::scoobydoo שם? זה פסול לחלוטין. רשימת בורר סלחנית מתעלמת מהבורר המזויף הזה וממשיכה להעריך את שאר הפריטים כאילו נכתבו כך:

article:has(h2, ul) { }

:has() אכן היה בורר סלחן בטיוטה קודמת מיום 7 במאי 2022. אבל זה השתנה לאחר דיווח על בעיה שהטבע הסלחני מתנגש עם jQuery כאשר :has() מכיל בורר מורכב (למשל header h2 + p). ה-W3C נחת על החלטה ל לעשות :has() בורר "לא סלחן". רק לפני כמה שבועות.

אז, הדוגמה הקודמת שלנו? כל רשימת הבורר אינה חוקית מכיוון שהבורר המזויף אינו חוקי. אבל שני הבוררים האחרים הסלחניים, :is() ו :where(), נותרים ללא שינוי.

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

article:has(:where(h2, ul, ::-scoobydoo)) { }

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

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

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

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/has-is-an-unforgiving-selector/