מהן קידומות הספק או הדפדפן של CSS?

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

מקורות קידומות הספק

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

קידומות נפוצות

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

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

• דְמוּי אָדָם:

  -Webkit-

• כרום:

  -Webkit-

• Firefox:

  -מוז-

• אינטרנט אקספלורר:

  -גברת-

• iOS:

  -Webkit-

• אוֹפֵּרָה:

  -o-

• ספארי:

  -Webkit-

הוספת קידומת

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

-Webkit-מעבר: כל 4s קלות;
-moz-transit: כל 4s קלות;
-ms מעבר: כל 4s קלות;
-מעבר: כל 4s קלות;
מעבר: כל 4s קלות; 

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

כמו כן, Firefox משתמש בערכים שונים מהערכים הסטנדרטיים.

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

קידומות הספק אינן פריצה

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

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

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

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

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

רדיוס מוז-גבול: 10 פיקסלים 5 פיקסלים;
-Webkit-border-top-left-radius: 10px;
-Webkit-border-top-right-Radius: 5px;
-קובץ-גבול-רדיוס תחתון-ימין-רדיוס: 10 פיקסלים;
-Webkit-border-bottom-left-radius: 5px;
גבול רדיוס: 10 פיקסלים 5 פיקסלים; 

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

גבול רדיוס: 10 פיקסלים 5 פיקסלים; 

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

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