בראַוזערז און דעוויסעס
לערן וועגן די בראַוזערז און דעוויסעס, פון מאָדערן צו אַלט, וואָס זענען געשטיצט דורך Bootstrap, אַרייַנגערעכנט באַוווסט קווערקס און באַגז פֿאַר יעדער.
באָאָטסטראַפּ שטיצט די לעצטע, סטאַביל ריליסיז פון אַלע הויפּט בראַוזערז און פּלאַטפאָרמס. אויף Windows, מיר שטיצן Internet Explorer 10-11 / Microsoft Edge .
אַלטערנאַטיווע בראַוזערז וואָס נוצן די לעצטע ווערסיע פון WebKit, Blink אָדער Gecko, צי גלייך אָדער דורך די וועב View 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"
]
מיר נוצן אַוטאָפּרעפיקסער צו שעפּן בדעה בלעטערער שטיצן דורך CSS פּרעפיקסעס, וואָס ניצט בראַוזערזליסט צו פירן די בלעטערער ווערסיעס. באַראַטנ זיך זייער דאַקיומענטיישאַן פֿאַר ווי צו ויסשטימען די מכשירים אין דיין פּראַדזשעקס.
בכלל גערעדט, Bootstrap שטיצט די לעצטע ווערסיעס פון די פעליקייַט בראַוזערז פון יעדער הויפּט פּלאַטפאָרמע. באַמערקונג אַז פּראַקסי בראַוזערז (אַזאַ ווי אָפּעראַ מיני, אָפּעראַ מאָביל ס טורבאָ מאָדע, UC בראַוזער מיני, אַמאַזאָן סילק) זענען נישט געשטיצט.
| קראָום | פירעפאָקס | סאַפאַרי | אַנדרויד בלעטערער און וועבוויעוו | Microsoft Edge | |
|---|---|---|---|---|---|
| אַנדרויד | געשטיצט | געשטיצט | N/A | אַנדרויד וו5.0+ שטיצט | געשטיצט |
| יאָס | געשטיצט | געשטיצט | געשטיצט | N/A | געשטיצט |
| Windows 10 מאָביל | N/A | N/A | N/A | N/A | געשטיצט |
סימילאַרלי, די לעצטע ווערסיעס פון רובֿ דעסקטאַפּ בראַוזערז זענען געשטיצט.
| קראָום | פירעפאָקס | Internet Explorer | Microsoft Edge | אָפּעראַ | סאַפאַרי | |
|---|---|---|---|---|---|---|
| מעק | געשטיצט | געשטיצט | N/A | N/A | געשטיצט | געשטיצט |
| Windows | געשטיצט | געשטיצט | געשטיצט, IE10+ | געשטיצט | געשטיצט | ניט געשטיצט |
פֿאַר Firefox, אין אַדישאַן צו די לעצטע נאָרמאַל סטאַביל מעלדונג, מיר אויך שטיצן די לעצטע עקסטענדעד סופּפּאָרט ריליס (ESR) ווערסיע פון Firefox.
אַנאַפישאַלי, Bootstrap זאָל קוקן און ביכייוו געזונט גענוג אין Chromium און Chrome פֿאַר לינוקס, Firefox פֿאַר לינוקס און Internet Explorer 9, כאָטש זיי זענען נישט אַפישאַלי געשטיצט.
פֿאַר אַ רשימה פון עטלעכע פון די בלעטערער באַגז וואָס Bootstrap האט צו האַנדלען מיט, זען אונדזער וואנט פון בלעטערער באַגז .
Internet Explorer 10+ איז געשטיצט; IE9 און אַראָפּ איז נישט. ביטע זיין אַווער אַז עטלעכע CSS3 פּראָפּערטיעס און HTML5 עלעמענטן זענען נישט גאָר געשטיצט אין IE10, אָדער דאַרפן פּרעפיקסעד פּראָפּערטיעס פֿאַר פול פאַנגקשאַנאַליטי. באַזוכן קען איך נוצן ... פֿאַר דעטאַילס וועגן בלעטערער שטיצן פון CSS3 און HTML5 פֿעיִקייטן.
אויב איר דאַרפן IE8-9 שטיצן, נוצן Bootstrap 3. דאָס איז די מערסט סטאַביל ווערסיע פון אונדזער קאָד און איז נאָך געשטיצט דורך אונדזער מאַנשאַפֿט פֿאַר קריטיש באַגפיקס און דאַקיומענטיישאַן ענדערונגען. אָבער, קיין נייַע פֿעיִקייטן וועט זיין מוסיף צו עס.
שטיצן פֿאַר overflow: hidden;די <body>עלעמענט איז גאַנץ לימיטעד אין יאָס און אַנדרויד. צו דעם סוף, ווען איר מעגילע פאַרגאַנגענהייט די שפּיץ אָדער דנאָ פון אַ מאָדאַל אין איינער פון די בראַוזערז פון די דעוויסעס, דער <body>אינהאַלט וועט אָנהייבן צו מעגילע. זען קראָום זשוק #175502 (פאַרפעסטיקט אין קראָום וו40) און וועבקיט זשוק #153852 .
זינט יאָס 9.2, בשעת אַ מאָדאַל איז אָפן, אויב דער ערשט פאַרבינדן פון אַ מעגילע האַווייַע איז ין דער גרענעץ פון אַ טעקסט <input>אָדער אַ <textarea>, די <body>אינהאַלט אונטער די מאָדאַל וועט זיין סקראָלאַלד אַנשטאָט פון די מאָדאַל זיך. זען וועבקיט זשוק #153856 .
דער .dropdown-backdropעלעמענט איז נישט געניצט אויף יאָס אין די נאַוו ווייַל פון די קאַמפּלעקסיטי פון ז-ינדעקסינג. אַזוי, צו פאַרמאַכן דראָפּדאָוונס אין נאַוובאַרס, איר מוזן גלייך גיט די דראָפּדאָוון עלעמענט (אָדער קיין אנדערע עלעמענט וואָס וועט פייערן אַ קליק געשעעניש אין יאָס ).
בלאַט זומינג ינעוואַטאַבלי גיט רענדערינג אַרטאַפאַקץ אין עטלעכע קאַמפּאָונאַנץ, ביידע אין באָאָטסטראַפּ און די רעשט פון די וועב. דעפּענדינג אויף דעם אַרויסגעבן, מיר קען זיין ביכולת צו פאַרריכטן עס (זוכן ערשטער און דעמאָלט עפענען אַן אַרויסגעבן אויב נייטיק). אָבער, מיר טענד צו איגנאָרירן די ווייַל זיי אָפט האָבן קיין דירעקט לייזונג אנדערע ווי כאַקי וואָרקאַראָונדס.
כאָטש :hoverעס איז ניט מעגלעך אויף רובֿ פאַרבינדן דעוויסעס, יאָס עמיאַלייץ דעם נאַטור, ריזאַלטינג אין "קלעפּיק" האָווער סטיילז וואָס אָנהאַלטן נאָך טאַפּינג איין עלעמענט. די האָווער סטיילז זענען אַוועקגענומען בלויז ווען יוזערז צאַפּן אויף אן אנדער עלעמענט. דער אָפּפירונג איז לאַרגעלי אַנדיזייראַבאַל און איז נישט אַן אַרויסגע��ן אויף אַנדרויד אָדער Windows דעוויסעס.
איבער אונדזער וו4 אַלף און ביתא ריליסיז, מיר ינקלודעד דערענדיקט און קאַמענטאַד קאָד פֿאַר אַפּט אין אַ מעדיאַ אָנפֿרעג שים וואָס וואָלט דיסייבאַל האָווער סטיילז אין פאַרבינדן מיטל בראַוזערז וואָס עמיאַלייט כאַווערינג. די אַרבעט איז קיינמאָל גאָר געענדיקט אָדער ענייבאַלד, אָבער צו ויסמיידן גאַנץ ברייקידזש, מיר האָבן אַפּטיד צו דיפּרישיייט דעם שים און האַלטן די מיקסינס ווי דורכוועג פֿאַר די פּסעוודאָ-קלאסן.
אפילו אין עטלעכע מאָדערן בראַוזערז, דרוקן קענען זיין קווערקי.
ווי פון Safari v8.0, די נוצן פון די פאַרפעסטיקט-ברייט .containerקלאַס קענען אָנמאַכן Safari צו נוצן אַ אַניוזשואַלי קליין שריפֿט גרייס ווען דרוקן. זען אַרויסגעבן #14868 און WebKit זשוק #138192 פֿאַר מער דעטאַילס. איין פּאָטענציעל וואָרקאַראָונד איז די פאלגענדע CSS:
@media print {
.container {
width: auto;
}
}אויס פון די קעסטל, אַנדרויד 4.1 (און אפילו עטלעכע נייַער ריליסיז משמעות) שיף מיט די בראַוזער אַפּ ווי די פעליקייַט וועב בלעטערער פון ברירה (ווי קעגן צו קראָום). צום באַדויערן, די בראַוזער אַפּ האט פילע באַגז און ינגקאַנסיסטענסיז מיט CSS אין אַלגעמיין.
אויף <select>עלעמענטן, דער אַנדרויד לאַגער בלעטערער וועט נישט ווייַזן די זייַט קאָנטראָלס אויב עס איז אַ border-radiusאון / אָדער borderגעווענדט. (זען דעם StackOverflow קשיא פֿאַר דעטאַילס.) ניצן די סניפּאַט פון קאָד אונטן צו באַזייַטיקן די אַפענדינג CSS און מאַכן דעם <select>ווי אַן אַנסטיילד עלעמענט אין די אַנדרויד לאַגער בלעטערער. דער באַניצער אַגענט סניפינג אַוווידז ינטערפיראַנס מיט קראָום, סאַפאַרי און מאָזיללאַ בראַוזערז.
<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 זשוק .