רשתות מרומזות, דפוסי פריסה הניתנים לחזרה, ודגלרים

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

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

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

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

מפרקים את זה:

• יש לנו מיכל הורה של .items.
• אם המיכל :has() an .item ילד שהוא האחרון מסוגו,
• …וזה .item במקרה זה מופע אי-זוגי,
• ...ואז בחר את הראשון .item אלמנט מהסוג הזה וסגנון אותו!

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

אם... אז... ל-CSS יש כוחות לוגיקה מותנים! אנחנו מדברים רק על תמיכה ב-Safari TP ו-Edge/Chrome Canary כרגע, אבל זה די מדהים.

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

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