טיפ CSS: המילה matches
23/04/2020
אחת היכולות המדליקות של Scss שהרבה זמן היתה חסרה לי ב CSS היא היכולת לארגן Selectors אחד בתוך השני. כלומר במקום לכתוב:
header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
font-weight: normal;
}
אנחנו יכולים לכתוב פשוט:
header {
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
}
מסתבר שממש בקרוב נוכל להתחיל להשתמש בכתיב שנקרא matches כדי להגיע לאותה תוצאה בדיוק ב CSS:
header :matches(h1, h2) {
font-weight: normal;
}
הבעיה היחידה אגב שבינתיים דפדפנים לא ממש תומכים בכתיב זה. בצד החיובי רובם כן תומכים בדיוק בפיצ'ר הזה בשם אחר - באמצעות מילת הקוד any ותוספת Vendor Prefix. כלומר הקוד הבא כן עובד ברוב הדפדפנים המודרניים היום:
header :-moz-any(h1, h2) {
font-weight: normal;
}
header :-webkit-any(h1, h2) {
font-weight: normal;
}
כך שאם אתם מריצים סקריפט שמוסיף Vendor Prefix בצורה אוטומטית או ב prefixfree אתם כבר יכולים להנות מהכתיב החדש (ורק תזכרו שבקרוב הכתיב של any יהפוך ל matches ותהיו מוכנים להחליף כשיגיע היום).