Source

ຕົວທ່ອງເວັບແລະອຸປະກອນ

ຮຽນຮູ້ກ່ຽວກັບຕົວທ່ອງເວັບແລະອຸປະກອນ, ຈາກທີ່ທັນສະໄຫມຈົນເຖິງເກົ່າ, ທີ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍ Bootstrap, ລວມທັງ quirks ແລະແມງໄມ້ທີ່ຮູ້ຈັກສໍາລັບແຕ່ລະຄົນ.

ຕົວທ່ອງເວັບທີ່ຮອງຮັບ

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, ເຊິ່ງໃຊ້ Browserslist ເພື່ອຈັດການສະບັບຂອງຕົວທ່ອງເວັບເຫຼົ່ານີ້. ປຶກສາຫາລືເອກະສານຂອງເຂົາເຈົ້າສໍາລັບວິທີການປະສົມປະສານເຄື່ອງມືເຫຼົ່ານີ້ເຂົ້າໃນໂຄງການຂອງທ່ານ.

ອຸປະກອນມືຖື

ໂດຍທົ່ວໄປແລ້ວ, Bootstrap ສະຫນັບສະຫນູນເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນຂອງແຕ່ລະແພລະຕະຟອມທີ່ສໍາຄັນ. ໃຫ້ສັງເກດວ່າຕົວທ່ອງເວັບຂອງຕົວແທນ (ເຊັ່ນ Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ແມ່ນບໍ່ຮອງຮັບ.

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ ບໍ່ມີ ຮອງຮັບ Android v5.0+ ສະຫນັບສະຫນູນ
iOS ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ ບໍ່ມີ ສະຫນັບສະຫນູນ
Windows 10 ມືຖື ບໍ່ມີ ບໍ່ມີ ບໍ່ມີ ບໍ່ມີ ສະຫນັບສະຫນູນ

ຕົວທ່ອງເວັບຂອງ desktop

ເຊັ່ນດຽວກັນ, ເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບ desktop ສ່ວນໃຫຍ່ໄດ້ຮັບການສະຫນັບສະຫນູນ.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ ບໍ່ມີ ບໍ່ມີ ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ
Windows ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ ຮອງຮັບ, IE10+ ສະຫນັບສະຫນູນ ສະຫນັບສະຫນູນ ບໍ່​ສະ​ຫນັບ​ສະ​ຫນຸນ

ສໍາລັບ Firefox, ນອກເຫນືອຈາກການປ່ອຍຄວາມຫມັ້ນຄົງປົກກະຕິຫລ້າສຸດ, ພວກເຮົາຍັງສະຫນັບສະຫນູນການ ຂະຫຍາຍການສະຫນັບສະຫນູນ (ESR) ຮຸ່ນຫຼ້າສຸດຂອງ Firefox.

ໂດຍບໍ່ເປັນທາງການ, Bootstrap ຄວນເບິ່ງແລະປະຕິບັດໄດ້ດີພຽງພໍໃນ Chromium ແລະ Chrome ສໍາລັບ Linux, Firefox ສໍາລັບ Linux, ແລະ Internet Explorer 9, ເຖິງແມ່ນວ່າພວກເຂົາບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເປັນທາງການ.

ສໍາລັບບັນຊີລາຍຊື່ຂອງບາງຂໍ້ບົກພ່ອງຂອງຕົວທ່ອງເວັບທີ່ Bootstrap ຕ້ອງຕໍ່ສູ້ກັບ, ເບິ່ງ Wall of browser bug ຂອງພວກເຮົາ .

Internet Explorer

ຮອງຮັບ Internet Explorer 10+; IE9 ແລະລົງບໍ່ແມ່ນ. ກະລຸນາຮັບຊາບວ່າບາງຄຸນສົມບັດຂອງ CSS3 ແລະອົງປະກອບ HTML5 ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນໃນ IE10, ຫຼືຕ້ອງການຄຸນສົມບັດ prefixed ສໍາລັບການເຮັດວຽກຢ່າງເຕັມທີ່. ເຂົ້າ ໄປເບິ່ງ Can I use… ສໍາລັບລາຍລະອຽດກ່ຽວກັບ browser support ຂອງ CSS3 ແລະ HTML5 features.

ຖ້າທ່ານຕ້ອງການການສະຫນັບສະຫນູນ IE8-9, ໃຫ້ໃຊ້ Bootstrap 3. ມັນເປັນເວີຊັນທີ່ຫມັ້ນຄົງທີ່ສຸດຂອງລະຫັດຂອງພວກເຮົາແລະຍັງໄດ້ຮັບການສະຫນັບສະຫນູນຈາກທີມງານຂອງພວກເຮົາສໍາລັບການແກ້ໄຂຂໍ້ບົກພ່ອງທີ່ສໍາຄັນແລະການປ່ຽນແປງເອກະສານ. ຢ່າງໃດກໍຕາມ, ບໍ່ມີຄຸນສົມບັດໃຫມ່ຈະຖືກເພີ່ມໃສ່ມັນ.

Modals ແລະ dropdowns ໃນມືຖື

ລົ້ນ ແລະ ເລື່ອນ

ການສະຫນັບສະຫນູນສໍາລັບ ອົງ overflow: hidden;ປະ <body>ກອບແມ່ນຂ້ອນຂ້າງຈໍາກັດໃນ iOS ແລະ Android. ເພື່ອເຮັດສິ່ງນີ້, ເມື່ອທ່ານເລື່ອນຜ່ານທາງເທິງຫຼືລຸ່ມຂອງ modal ໃນຕົວທ່ອງເວັບຂອງອຸປະກອນເຫຼົ່ານັ້ນ, <body>ເນື້ອຫາຈະເລີ່ມເລື່ອນລົງ. ເບິ່ງ ຂໍ້ບົກພ່ອງຂອງ Chrome #175502 (ແກ້ໄຂໃນ Chrome v40) ແລະ ຂໍ້ບົກພ່ອງ WebKit #153852 .

ຊ່ອງຂໍ້ມູນ iOS ແລະເລື່ອນ

ໃນຖານະເປັນ iOS 9.2, ໃນຂະນະທີ່ modal ເປີດ, ຖ້າການສໍາພັດເບື້ອງຕົ້ນຂອງ gesture ເລື່ອນແມ່ນຢູ່ໃນຂອບເຂດຂອງຂໍ້ຄວາມ <input>ຫຼື a <textarea>, <body>ເນື້ອໃນພາຍໃຕ້ modal ຈະຖືກເລື່ອນແທນທີ່ຈະເປັນ modal ຕົວຂອງມັນເອງ. ເບິ່ງ WebKit bug #153856 .

ອົງ ປະ .dropdown-backdropກອບດັ່ງກ່າວບໍ່ໄດ້ໃຊ້ໃນ iOS ໃນ nav ເນື່ອງຈາກຄວາມສັບສົນຂອງ z-indexing. ດັ່ງ​ນັ້ນ​, ເພື່ອ​ປິດ dropdowns ໃນ navbars​, ທ່ານ​ໄດ້​ໂດຍ​ກົງ​ຕ້ອງ​ໄດ້​ຄລິກ​ໃສ່​ອົງ​ປະ​ກອບ​ເລື່ອນ​ລົງ (ຫຼື ​ອົງ​ປະ​ກອບ​ອື່ນໆ​ທີ່​ຈະ​ຍິງ​ເຫດ​ການ​ຄລິກ​ໃນ iOS ​)​.

ການຊູມຂອງຕົວທ່ອງເວັບ

ການຊູມຫນ້າຢ່າງຫຼີກລ່ຽງບໍ່ໄດ້ສະເຫນີການສະແດງຜົນປອມໃນບາງອົງປະກອບ, ທັງໃນ Bootstrap ແລະສ່ວນທີ່ເຫຼືອຂອງເວັບ. ອີງຕາມບັນຫາ, ພວກເຮົາອາດຈະສາມາດແກ້ໄຂໄດ້ (ຄົ້ນຫາກ່ອນແລະຫຼັງຈາກນັ້ນເປີດບັນຫາຖ້າຕ້ອງການ). ຢ່າງໃດກໍຕາມ, ພວກເຮົາມີແນວໂນ້ມທີ່ຈະບໍ່ສົນໃຈສິ່ງເຫຼົ່ານີ້ຍ້ອນວ່າພວກເຂົາມັກຈະບໍ່ມີການແກ້ໄຂໂດຍກົງນອກເຫນືອຈາກການແກ້ໄຂບັນຫາ hacky.

ໜຽວ :hover/ :focusໃນ iOS

ໃນຂະນະທີ່ :hoverເປັນໄປບໍ່ໄດ້ຢູ່ໃນອຸປະກອນສໍາຜັດສ່ວນໃຫຍ່, iOS emulates ພຶດຕິກໍານີ້, ສົ່ງຜົນໃຫ້ "ຫນຽວ" ຮູບແບບ hover ທີ່ຍັງຄົງຢູ່ຫຼັງຈາກການແຕະຫນຶ່ງອົງປະກອບ. ຮູບແບບ hover ເຫຼົ່ານີ້ຈະຖືກລຶບອອກເມື່ອຜູ້ໃຊ້ແຕະອົງປະກອບອື່ນເທົ່ານັ້ນ. ພຶດຕິກຳນີ້ຖືວ່າບໍ່ສົມຄວນເປັນສ່ວນໃຫຍ່ ແລະເບິ່ງຄືວ່າບໍ່ເປັນບັນຫາຢູ່ໃນອຸປະກອນ Android ຫຼື Windows.

ຕະຫຼອດການປ່ອຍ v4 alpha ແລະ beta ຂອງພວກເຮົາ, ພວກເຮົາໄດ້ລວມເອົາລະຫັດທີ່ບໍ່ຄົບຖ້ວນແລະອອກຄໍາເຫັນສໍາລັບການເລືອກເຂົ້າໃນການສອບຖາມສື່ທີ່ຈະປິດການໃຊ້ງານຮູບແບບ hover ໃນຕົວທ່ອງເວັບຂອງອຸປະກອນສໍາຜັດທີ່ເຮັດຕາມແບບ hovering. ວຽກງານນີ້ບໍ່ເຄີຍສໍາເລັດສົມບູນຫຼືເປີດໃຊ້ງານ, ແຕ່ເພື່ອຫຼີກເວັ້ນການແຕກຫັກຢ່າງສົມບູນ, ພວກເຮົາໄດ້ເລືອກທີ່ຈະປະຕິເສດ shim ນີ້ ແລະຮັກສາ mixins ເປັນທາງລັດສໍາລັບ pseudo-classes.

ການພິມ

ແມ້ແຕ່ຢູ່ໃນບາງຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ການພິມສາມາດ quirky.

ໃນຖານະຂອງ Safari v8.0, ການນໍາໃຊ້ .containerລະດັບຄວາມກວ້າງຄົງທີ່ສາມາດເຮັດໃຫ້ Safari ໃຊ້ຂະຫນາດຕົວອັກສອນທີ່ນ້ອຍຜິດປົກກະຕິໃນເວລາພິມ. ເບິ່ງ ບັນຫາ #14868 ແລະ WebKit bug #138192 ສໍາລັບລາຍລະອຽດເພີ່ມເຕີມ. ຫນຶ່ງໃນການແກ້ໄຂທີ່ເປັນໄປໄດ້ແມ່ນ CSS ຕໍ່ໄປນີ້:

@media print {
  .container {
    width: auto;
  }
}

ຕົວທ່ອງເວັບຫຼັກຊັບ Android

ອອກຈາກກ່ອງ, Android 4.1 (ແລະແມ້ກະທັ້ງບາງລຸ້ນໃຫມ່ທີ່ປາກົດຂື້ນ) ສົ່ງກັບແອັບຯ Browser ເປັນຕົວທ່ອງເວັບທາງເລືອກເລີ່ມຕົ້ນ (ກົງກັນຂ້າມກັບ Chrome). ແຕ່ຫນ້າເສຍດາຍ, ແອັບຯ Browser ມີຂໍ້ບົກພ່ອງຫຼາຍຢ່າງແລະບໍ່ສອດຄ່ອງກັບ CSS ໂດຍທົ່ວໄປ.

ເລືອກເມນູ

ໃນ <select>ອົງປະກອບ, ຕົວທ່ອງເວັບຫຼັກຊັບ Android ຈະບໍ່ສະແດງການຄວບຄຸມດ້ານຂ້າງຖ້າມີ border-radiusແລະ / ຫຼື borderນໍາໃຊ້. (ເບິ່ງ ຄໍາຖາມ StackOverflow ນີ້ ສໍາລັບລາຍລະອຽດ.) ໃຊ້ snippet ຂອງລະຫັດຂ້າງລຸ່ມນີ້ເພື່ອເອົາ CSS ທີ່ກະທໍາຜິດແລະສະແດງ <select>ເປັນອົງປະກອບ unstyled ໃນຕົວທ່ອງເວັບຫຼັກຊັບ Android. ຕົວແທນຜູ້ໃຊ້ sniffing ຫຼີກເວັ້ນການແຊກແຊງກັບຕົວທ່ອງເວັບຂອງ 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 ນີ້.

ຜູ້ກວດສອບ

ເພື່ອໃຫ້ປະສົບການທີ່ດີທີ່ສຸດທີ່ເປັນໄປໄດ້ກັບຕົວທ່ອງເວັບເກົ່າແລະ buggy, Bootstrap ໃຊ້ CSS browser hacks ໃນຫຼາຍໆບ່ອນເພື່ອເປົ້າຫມາຍ CSS ພິເສດໃຫ້ກັບບາງຮຸ່ນຂອງຕົວທ່ອງເວັບເພື່ອເຮັດວຽກກັບແມງໄມ້ໃນຕົວທ່ອງເວັບຂອງຕົນເອງ. ການແຮັກເຫຼົ່ານີ້ເຂົ້າໃຈໄດ້ເຮັດໃຫ້ຜູ້ກວດສອບ CSS ຈົ່ມວ່າບໍ່ຖືກຕ້ອງ. ຢູ່ໃນສະຖານທີ່ສອງຢ່າງ, ພວກເຮົາຍັງໃຊ້ຄຸນສົມບັດ CSS ທີ່ມີເລືອດອອກທີ່ຍັງບໍ່ທັນໄດ້ມາດຕະຖານຢ່າງເຕັມສ່ວນ, ແຕ່ເຫຼົ່ານີ້ຖືກນໍາໃຊ້ຢ່າງດຽວສໍາລັບການເພີ່ມປະສິດທິພາບກ້າວຫນ້າ.

ຄໍາເຕືອນການຢືນຢັນເຫຼົ່ານີ້ບໍ່ສໍາຄັນໃນການປະຕິບັດເພາະວ່າສ່ວນທີ່ບໍ່ແມ່ນ hacky ຂອງ CSS ຂອງພວກເຮົາມີຄວາມຖືກຕ້ອງຢ່າງເຕັມສ່ວນແລະສ່ວນ hacky ບໍ່ໄດ້ແຊກແຊງການເຮັດວຽກທີ່ເຫມາະສົມຂອງສ່ວນທີ່ບໍ່ແມ່ນ hacky, ດັ່ງນັ້ນເປັນຫຍັງພວກເຮົາເຈດຕະນາບໍ່ສົນໃຈຄໍາເຕືອນໂດຍສະເພາະເຫຼົ່ານີ້.

ເອກະສານ HTML ຂອງພວກເຮົາເຊັ່ນດຽວກັນມີບາງຄໍາເຕືອນການກວດສອບ HTML ທີ່ບໍ່ສໍາຄັນແລະບໍ່ຖືກຕ້ອງເນື່ອງຈາກການລວມເອົາການແກ້ໄຂຂອງພວກເຮົາສໍາລັບ ບາງຂໍ້ຜິດພາດ Firefox .