Браузерлер жана түзмөктөр
Bootstrap тарабынан колдоого алынган заманбапдан эскиге чейин браузерлер жана түзмөктөр, анын ичинде ар бири үчүн белгилүү кызыкчылыктар жана мүчүлүштүктөр жөнүндө билип алыңыз.
Bootstrap бардык негизги браузерлердин жана платформалардын эң акыркы, туруктуу релиздерин колдойт . Windows'до биз Internet Explorer 10-11 / Microsoft Edge колдойбуз .
Түздөн-түз же платформанын веб көрүү API'си аркылуу болобу, WebKit, Blink же Gecko акыркы версиясын колдонгон альтернативдик браузерлер ачык колдоого алынбайт. Бирок, 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дын Turbo режими, UC Browser Mini, Amazon Silk) колдоого алынбагандыгын эске алыңыз.
| Chrome | Firefox | Safari | Android браузери жана WebView | Текшерүү жагы | |
|---|---|---|---|---|---|
| Android | Колдоого алынган | Колдоого алынган | Жок | Android v5.0+ колдоого алынат | Колдоого алынган |
| iOS | Колдоого алынган | Колдоого алынган | Колдоого алынган | Жок | Колдоого алынган |
| Windows 10 Mobile | Жок | Жок | Жок | Жок | Колдоого алынган |
Ошо сыяктуу эле, көпчүлүк рабочий браузерлердин акыркы версиялары колдоого алынат.
| Chrome | Firefox | Internet Explorer | Текшерүү жагы | Опера | Safari | |
|---|---|---|---|---|---|---|
| Mac | Колдоого алынган | Колдоого алынган | Жок | Жок | Колдоого алынган | Колдоого алынган |
| Windows | Колдоого алынган | Колдоого алынган | Колдоого алынган, IE10+ | Колдоого алынган | Колдоого алынган | Колдоого алынбайт |
Firefox үчүн эң акыркы кадимки туруктуу релизден тышкары, Firefoxтун эң акыркы Extended Support Release (ESR) версиясын да колдойбуз .
Бейрасмий түрдө Bootstrap Chromium жана Linux үчүн Chrome, Linux үчүн Firefox жана Internet Explorer 9да жакшы көрүнүшү жана өзүн алып жүрүүсү керек, бирок алар расмий түрдө колдоого алынбайт.
Bootstrap менен күрөшө турган айрым серепчи мүчүлүштүктөрдүн тизмесин көрүү үчүн, биздин браузердин мүчүлүштүктөрү дубалын караңыз .
Internet Explorer 10+ колдоого алынат; IE9 жана төмөн эмес. Сураныч, кээ бир CSS3 касиеттери жана HTML5 элементтери IE10до толук колдоого алынбагандыгын же толук иштеши үчүн префикстүү касиеттерди талап кылаарын эске алыңыз. CSS3 жана HTML5 функцияларын браузерди колдоо боюнча чоо-жайын билүү үчүн колдоно аламбы… бөлүмүнө өтүңүз .
Эгер сизге IE8-9 колдоосу керек болсо, Bootstrap 3 колдонуңуз. Бул биздин кодубуздун эң туруктуу версиясы жана биздин команда олуттуу мүчүлүштүктөрдү оңдоо жана документтерди өзгөртүү үчүн дагы эле колдоого алынат. Бирок, ага эч кандай жаңы функциялар кошулбайт.
Элементти колдоо overflow: hidden;iOS <body>жана Androidде бир топ чектелген. Ушул максатта, сиз ошол түзмөктөрдүн браузерлеринин биринде модалдын өйдө же ылдый жагына өткөндө, <body>мазмун жылдыра баштайт. Chrome мүчүлүштүгү #175502 ( Chrome v40да оңдолгон) жана WebKit катасы #153852 караңыз .
iOS 9.2 версиясында, модаль ачык болуп турганда, сыдырма жаңсоосунун баштапкы тийүү тексттин <input>же а чегинде болсо <textarea>, <body>модалдын астындагы мазмун модалдын ордуна жылдырылат. #153856 WebKit катасын караңыз .
Элемент z - .dropdown-backdropиндекстөөнүн татаалдыгынан улам iOS'то nav'да колдонулбайт. Ошентип, навигация тилкелериндеги ачылуучу тизмелерди жабуу үчүн, сиз түз ылдый түшүүчү элементти (же iOS'те чыкылдатуу окуясын иштете турган башка элементти ) басышыңыз керек .
Баракты чоңойтуу сөзсүз түрдө Bootstrapте да, желенин калган бөлүгүндө да кээ бир компоненттерде рендердик артефакттарды көрсөтөт. Көйгөйгө жараша, биз аны оңдоп алышыбыз мүмкүн (адегенде издеп, керек болсо маселени ачыңыз). Бирок, биз аларды этибарга албайбыз, анткени алар көбүнчө бузук чечүүчү жолдордон башка түз чечимге ээ эмес.
Көпчүлүк :hoverсенсордук түзмөктөрдө мүмкүн болбосо да, iOS бул жүрүм-турумду эмуляциялайт, натыйжада бир элементти таптагандан кийин сакталып кала турган "жабышчаак" курсор стилдери пайда болот. Бул чаптоочу стилдер колдонуучулар башка элементти таптаганда гана өчүрүлөт. Бул жүрүм-турум негизинен жагымсыз деп эсептелет жана Android же Windows түзмөктөрүндө маселе эмес окшойт.
Биздин v4 альфа жана бета релиздерибизде биз толук эмес жана комментарийленген кодду киргиздик, ал медиа суроо-талапка кошулуу үчүн, сенсордук аспаптын серепчилеринде сүзүүнү туураган стилдерди өчүрө турган. Бул иш эч качан толугу менен бүткөрүлгөн эмес же иштетилген эмес, бирок толук бузулуп калбаш үчүн, биз бул таймашты жокко чыгарып , микстерди псевдокласстар үчүн жарлык катары калтырууну чечтик.
Кээ бир заманбап браузерлерде да басып чыгаруу кызык болушу мүмкүн.
Safari v8.0 версиясы боюнча, белгиленген тууралык .containerклассын колдонуу Safari басып чыгарууда адаттан тыш кичинекей шрифт өлчөмүн колдонууга алып келиши мүмкүн. Көбүрөөк маалымат алуу үчүн # 14868 чыгарылышын жана WebKit мүчүлүштүгү #138192 караңыз. Потенциалдуу чечүүнүн бири төмөнкү CSS болуп саналат:
@media print {
.container {
width: auto;
}
}Кутудан тышкары, Android 4.1 (жана кээ бир жаңы релиздер) Браузер колдонмосу менен демейки веб-браузер катары тандалган (Chrome караганда). Тилекке каршы, Браузер колдонмосунда көп мүчүлүштүктөр жана жалпысынан CSS менен дал келбестиктер бар.
Элементтерде Android <select>биржа серепчиси каптал башкаруу элементтерин көрсөтпөйт border-radiusжана/же borderколдонулса. ( Чоо-жайын билүү үчүн бул StackOverflow суроосун<select> караңыз.) Адепсиз CSSти алып салуу жана Android фондулук браузерде стили жок элемент катары көрсөтүү үчүн төмөндөгү код үзүндүсүн колдонуңуз . Колдонуучу агенттин жыттоосу Chrome, Safari жана Mozilla браузерлерине кийлигишүүдөн сактайт.
<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тин бузулбаган бөлүгү толугу менен текшерилет жана бузук бөлүктөрү бузук эмес бөлүктүн туура иштешине тоскоол болбойт, ошондуктан биз бул өзгөчө эскертүүлөрдү атайылап этибарга албайбыз.
Белгилүү бир Firefox мүчүлүштүктөрүн чечүү жолдорун камтыгандыктан, биздин HTML документтерибизде анча-мынча маанисиз жана маанисиз HTML текшерүү эскертүүлөрү бар .