CSS Feature Queries מאפשר לבדוק האם הדפדפן של הגולש תומך באפשרות מסויימת לפני שאנחנו משתמשים בה. בעצם, מדובר בתחליף לFeature Detection המוכר והטוב שמתבצע באמעות JS אלא שכאן אפשר לבצע את הבדיקה בצורה פשוטה וקלה יותר באמצעות קריאה מובנית של JS או בתוך קובץ הCSS.
אפשר להשתמש?
התשובה הקצרה היא: לא לגמרי. למרות שהמפרט כבר מועמד לשחרור, לפי האתר Can I use – פיירפוקס כרום ואופרה כבר תומכים (עם באגים פה ושם), הדפדפנים האחרים עדיין עובדים על זה.
איך עושים את זה?
אפשר לקרוא לבדיקה ב JS באמצעות CSS.supports וגם בCSS באמצעות @supports
CSS
נדגים את התחביר לשימוש בCSS: במשפט הבא אנחנו נבדוק אם הדפדפן תומך בFlexbox לפני שאנחנו משתמשים בתכונה.
[css]
@supports (display: flex) {
div { display: flex; }
}
[/css]
בשורה מספר 1 אנחנו בודקים את תמיכת הדפדפן בשורה display: flex, במידה והדפדפן תומך הוא יבצע את הפקודות שנמצאות בתוך הבלוק.
למעשה, השימוש כאן מאוד דומה לMedia Queries, אם יש התאמה של התנאי אז הדפדפן מבצע את המשפטים שבתוך הבלוק.
ניתן גם לשלול תנאי ע"י מילת המפתח not כך:
[css]
@supports not (display: flex) {
div { float: left; } /* alternative styles */
}
[/css]
כאן אנחנו מבצעים בדיקה הפוכה: אם הדפדפן לא תומך בשורה display: flex, הוא יבצע את המשפטים הנמצאים בבלוק.
ניתן גם להשתמש במילות המפתח or ו- and כדי לבדוק מספר התאמות:
[css]
/* or */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
/* use styles here */
}
/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
/* something crazy here */
}
[/css]
בחלק הראשון, אם תימצא התאמה של אחד מהתנאים הדפדפן יבצע את כל המשפטים שנמצאים בתוך הבלוק ואילו בחלק השני רק אם כל התנאים נתמכים, רק אז יבצע הדפדפן את כל המשפטים הנמצאים בתוך הבלוק.
JavaScript
כדי לבדוק תמיכה של הדפדפן באמצעות JS, המפרט מספק 2 דרכים מעט שונות.
בדוגמה הראשונה ניצור משתנה בוליאני, ולתוכו נשמור את תוצאות הבדיקה. כדי לבצע את הבדיקה עצמה נכניס בפונקציה 2 פרמטרים: מאפיין וערך.
[js]
var supportsFlex = CSS.supports("display", "flex");
[/js]
לעומת זאת, בדוגמה הבאה נעביר משפט שלם לבדיקה ואת התוצאה נחזיר לערך הבוליאני:
[js]
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
[/js]
אירוניה: נכון ליוני 2014, אם הדפדפן של הגולש שלכם תומך בCSS Feature Queries, אז סביר להניח שהוא יתמוך ברוב האפשרויות שאתם מנסים להשתמש בהם, אז נכון לעכשיו הייתי ממליץ לכם להמשיך להשתמש בFeature Detection מהשיטה הישנה באמצעות JS או תוך שימוש בModernizr.
בעתיד הקרוב יהיה שימוש נרחב יותר גם לאפשרויות שעליהם כתבתי כאן.