דפדפנים ומכשירים
למד על הדפדפנים והמכשירים, מהמודרניים ועד הישנים, הנתמכים על ידי Bootstrap, כולל מוזרויות ובאגים ידועים לכל אחד מהם.
Bootstrap תומך במהדורות האחרונות והיציבות של כל הדפדפנים והפלטפורמות הגדולות. ב-Windows, אנו תומכים ב-Internet Explorer 10-11 / Microsoft Edge .
דפדפנים חלופיים המשתמשים בגרסה העדכנית ביותר של WebKit, Blink או Gecko, בין אם ישירות או באמצעות ממשק ה-API של תצוגת האינטרנט של הפלטפורמה, אינם נתמכים במפורש. עם זאת, Bootstrap אמור (ברוב המקרים) להציג ולתפקד כהלכה גם בדפדפנים אלו. מידע תמיכה ספציפי יותר מסופק להלן.
אתה יכול למצוא את מגוון הדפדפנים הנתמך שלנו ואת הגרסאות שלהם בpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
אנו משתמשים ב- Autoprefixer כדי לטפל בתמיכה בדפדפן המיועדת באמצעות קידומות CSS, המשתמשת ב- Browserlist כדי לנהל את גרסאות הדפדפן הללו. עיין בתיעוד שלהם כיצד לשלב את הכלים הללו בפרויקטים שלך.
באופן כללי, Bootstrap תומך בגרסאות האחרונות של דפדפני ברירת המחדל של כל פלטפורמה מרכזית. שים לב שדפדפני פרוקסי (כגון Opera Mini, מצב הטורבו של Opera Mobile, UC Browser Mini, Amazon Silk) אינם נתמכים.
| כרום | פיירפוקס | ספארי | דפדפן אנדרואיד ו-WebView | מיקרוסופט אדג | |
|---|---|---|---|---|---|
| דְמוּי אָדָם | נתמך | נתמך | לא | Android v5.0+ נתמך | נתמך |
| iOS | נתמך | נתמך | נתמך | לא | נתמך |
| Windows 10 Mobile | לא | לא | לא | לא | נתמך |
באופן דומה, הגירסאות העדכניות ביותר של רוב הדפדפנים למחשבים שולחניים נתמכות.
| כרום | פיירפוקס | אינטרנט אקספלורר | מיקרוסופט אדג | אוֹפֵּרָה | ספארי | |
|---|---|---|---|---|---|---|
| מק | נתמך | נתמך | לא | לא | נתמך | נתמך |
| חלונות | נתמך | נתמך | נתמך, IE10+ | נתמך | נתמך | אינו נתמך |
עבור Firefox, בנוסף לגרסה היציבה הרגילה האחרונה, אנו תומכים גם בגרסה העדכנית ביותר של Extended Support Release (ESR) של Firefox.
באופן לא רשמי, Bootstrap אמור להיראות ולהתנהג בצורה מספיק טובה ב-Chromium וב-Chrome עבור Linux, Firefox עבור Linux ו-Internet Explorer 9, אם כי הם אינם נתמכים רשמית.
לרשימה של כמה מבאגי הדפדפן ש-Bootstrap צריך להתמודד איתם, עיין בקיר הבאגים בדפדפן שלנו .
Internet Explorer 10+ נתמך; IE9 ומטה לא. אנא שים לב שחלק ממאפייני CSS3 ורכיבי HTML5 אינם נתמכים באופן מלא ב-IE10, או שהם דורשים מאפיינים עם קידומת לפונקציונליות מלאה. בקר האם אני יכול להשתמש... לפרטים על תמיכת דפדפן בתכונות CSS3 ו-HTML5.
אם אתה זקוק לתמיכה ב-IE8-9, השתמש ב-Bootstrap 3. זוהי הגרסה היציבה ביותר של הקוד שלנו ועדיין נתמכת על ידי הצוות שלנו עבור תיקוני באגים קריטיים ושינויי תיעוד. עם זאת, לא יתווספו לו תכונות חדשות.
התמיכה overflow: hidden;ברכיב <body>די מוגבלת ב-iOS ואנדרואיד. לשם כך, כאשר תגללו מעבר לחלק העליון או התחתון של מודאל בכל אחד מהדפדפנים של אותם מכשירים, <body>התוכן יתחיל לגלול. ראה באג Chrome #175502 (תוקן ב-Chrome v40) ובאג WebKit #153852 .
החל מ-iOS 9.2, בעוד מודאל פתוח, אם הנגיעה הראשונית של תנועת גלילה היא בגבול של טקסט <input>או <textarea>, <body>התוכן שמתחת למודאל יגולל במקום המודאל עצמו. ראה באג ב-WebKit #153856 .
האלמנט .dropdown-backdropאינו בשימוש ב-iOS ב-nav בגלל המורכבות של יצירת אינדקס z. לפיכך, כדי לסגור תפריטים נפתחים בסרגלי הניווט, עליך ללחוץ ישירות על רכיב התפריט הנפתח (או כל רכיב אחר שיפעיל אירוע קליק ב-iOS ).
התקרבות עמודים מציגה בהכרח חפצי עיבוד בחלק מהרכיבים, הן ב-Bootstrap והן בשאר האינטרנט. בהתאם לבעיה, ייתכן שנוכל לתקן אותה (חפש תחילה ולאחר מכן פתח בעיה במידת הצורך). עם זאת, אנו נוטים להתעלם מאלה מכיוון שלעתים קרובות אין להם פתרון ישיר מלבד דרכים לעקיפת הבעיה.
למרות :hoverשזה לא אפשרי ברוב מכשירי המגע, iOS מחקה התנהגות זו, וכתוצאה מכך סגנונות ריחוף "דביקים" שנמשכים לאחר הקשה על אלמנט אחד. סגנונות ריחוף אלה מוסרים רק כאשר משתמשים מקישים על רכיב אחר. התנהגות זו נחשבת לרוב בלתי רצויה ונראה שאינה בעיה במכשירי אנדרואיד או Windows.
לאורך מהדורות v4 אלפא וביטא שלנו, כללנו קוד חלקי וחסר הערות להצטרפות ל-Shim של שאילתות מדיה שישבית סגנונות ריחוף בדפדפנים של מכשירי מגע המדמים ריחוף. העבודה הזו מעולם לא הושלמה או הופעלה במלואה, אבל כדי למנוע שבירה מוחלטת, בחרנו לבטל את ה- shim הזה ולשמור את המיקסים כקיצורי דרך לפסאודו-שיעורים.
אפילו בדפדפנים מודרניים מסוימים, הדפסה יכולה להיות מוזרה.
החל מ-Safari v8.0, שימוש .containerבמחלקה ברוחב קבוע עלול לגרום ל-Safari להשתמש בגודל גופן קטן במיוחד בעת ההדפסה. עיין בבעיה מס' 14868 ובאג ב- WebKit מס' 138192 לפרטים נוספים. פתרון אפשרי אחד הוא ה-CSS הבא:
@media print {
.container {
width: auto;
}
}מחוץ לקופסה, אנדרואיד 4.1 (ואפילו כמה מהדורות חדשות יותר ככל הנראה) נשלחות עם אפליקציית הדפדפן כדפדפן האינטרנט המוגדר כברירת מחדל (בניגוד לכרום). לרוע המזל, באפליקציית הדפדפן יש הרבה באגים וחוסר עקביות עם CSS באופן כללי.
ברכיבים, דפדפן המניות של Android <select>לא יציג את פקדי הצד אם יש border-radiusו/או borderמוחל. (ראה שאלה זו של StackOverflow לפרטים.) השתמש בקטע הקוד שלהלן כדי להסיר את ה-CSS הפוגע ולעבד אותו <select>כרכיב לא מעוצב בדפדפן המניות של Android. סוכן המשתמש המרחרח מונע הפרעה לדפדפני Chrome, Safari ומוזילה.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>רוצים לראות דוגמה? בדוק את ההדגמה הזו של JS Bin.
על מנת לספק את החוויה הטובה ביותר לדפדפנים ישנים ובאגגיים, Bootstrap משתמשת בפריצות לדפדפן CSS במספר מקומות כדי למקד CSS מיוחד לגרסאות דפדפן מסוימות על מנת לעקוף באגים בדפדפנים עצמם. פריצות אלה גורמות באופן מובן למאמתי CSS להתלונן שהם לא חוקיים. בכמה מקומות, אנו משתמשים גם בתכונות CSS מתקדמות שעדיין אינן סטנדרטיות לחלוטין, אך הן משמשות אך ורק לשיפור מתקדם.
אזהרות אימות אלו אינן חשובות בפועל, מכיוון שהחלק הלא-האקי של ה-CSS שלנו אכן תוקף במלואו והחלקים האקי אינם מפריעים לתפקוד התקין של החלק הלא-האקי, ומכאן מדוע אנו מתעלמים בכוונה מהאזהרות המסוימות הללו.
כמו כן, למסמכי ה-HTML שלנו יש כמה אזהרות אימות HTML טריוויאליות וחסרות משמעות עקב הכללתנו של פתרון לעקיפת באג מסוים ב-Firefox .