קידומות ספק CSS

מה הם ולמה אתה צריך להשתמש בהם

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

כאשר CCS3 היה הראשון להיות הציג, מספר נכסים נרגשים החלו להכות דפדפנים שונים בזמנים שונים. לדוגמה, הדפדפנים המופעלים על ידי Webkit (Safari ו- Chrome) היו הראשונים להציג חלק מהמאפיינים בסגנון האנימציה, כגון המרה ומעבר. על ידי שימוש בספק תכונות קדם של הספק, מעצבי אתרים היו מסוגלים להשתמש בתכונות החדשות הללו בעבודתם ולראות אותם בדפדפנים שתמכו בהם מיד, במקום לחכות לכל יצרן דפדפן אחר כדי להתעדכן!

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

הקידומות של דפדפן CSS שניתן להשתמש בהן (כל אחת מהן ספציפית לדפדפן אחר) הן:

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -Moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• אופרה:
• ספארי: -webkit-

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

-webkit- המעבר: כל הקלות 4;
-Moz- המעבר: כל הקלות 4;
-MS- מעבר: כל הקלות 4;
- מעבר: כל הקלות 4;
המעבר: כל הקלות 4;

הערה: זכור, לדפדפנים מסוימים יש תחביר שונה עבור מאפיינים מסוימים מאשר לאחרים, לכן אין להניח שהגרסה המקודמת בדפדפן של נכס זהה בדיוק למאפיין הרגיל. לדוגמה, כדי ליצור שיפוע CSS , אתה משתמש במאפיין שיפוע לינארי. Firefox, Opera והגירסאות המודרניות של Chrome ושל Safari משתמשות בנכס זה עם הקידומת המתאימה, בעוד שהגירסאות המוקדמות של Chrome ושל Safari משתמשות במעבר הקבוע של המאפיין - Webkit-gradient. כמו כן, Firefox משתמש בערכים שונים מאלה הרגילים.

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

קידומות ספק אינן גרזן

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

CSS גרזן מנצל פגמים ביישום אלמנט או רכוש אחר כדי לקבל נכס נוסף לעבוד כראוי. לדוגמה, מודל גרף הקופסאות ניצל פגמים בניתוח של הרכוש הקולי של המשפחה או באיזו דפדפנים יש לנתח קו נטוי הפוך (\). אבל פריצות אלה שימשו כדי לתקן את הבעיה של ההבדל בין איך Internet Explorer 5.5 טיפל מודל תיבת וכיצד Netscape לפרש את זה, ואין להם שום קשר עם סגנון המשפחה הקול. למרבה המזל אלה שני דפדפנים מיושנים הם אלה שאנחנו לא דאגות עם עצמנו בימים אלה.

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

רוצה לדעת מה תומך הדפדפן עבור תכונה מסוימת? האתר CanIUse.com הוא משאב נפלא לאיסוף מידע זה ומאפשר לך לדעת אילו דפדפנים, ואילו גירסאות של דפדפנים אלה, תומכים כעת בתכונה.

הקידומות ספק הם מעצבנים אבל זמניים

כן, זה עלול להרגיש מרגיז וחוזר על עצמו כדי לכתוב את המאפיינים 2-5 פעמים כדי לקבל את זה לעבוד בכל הדפדפנים, אבל זה מצב זמני. לדוגמה, רק לפני כמה שנים, כדי להגדיר פינה מעוגלת על קופסה היית צריך לכתוב:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

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

border-radius: 10px 5px;

Chrome תמך במאפיין CSS3 מאז גרסה 5.0, Firefox הוסיף אותו בגרסה 4.0, Safari הוסיף אותו ב 5.0, Opera ב 10.5, iOS 4.0, ו- Android ב 2.1. אפילו Internet Explorer 9 תומך בו ללא קידומת (ו- IE 8 ומטה לא תומכים בו עם קידומות או ללא קידומות).

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