in English

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

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

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

Bootstrap ສະຫນັບສະຫນູນການປ່ອຍ ຫລ້າສຸດ, ຫມັ້ນຄົງ ຂອງຕົວທ່ອງເວັບແລະເວທີທີ່ສໍາຄັນທັງຫມົດ. ໃນ Windows, ພວກເຮົາຮອງຮັບ Internet Explorer 10-11 / Microsoft Edge .

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

ທ່ານ​ສາ​ມາດ​ຊອກ​ຫາ​ໄລ​ຍະ​ສະ​ຫນັບ​ສະ​ຫນູນ​ຂອງ​ພວກ​ເຮົາ​ຂອງ​ຕົວ​ທ່ອງ​ເວັບ​ແລະ​ສະ​ບັບ​ຂອງ​ພວກ​ເຂົາ ​ໃນ.browserslistrc file ​:

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

ພວກເຮົາໃຊ້ Autoprefixer ເພື່ອຈັດການການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບທີ່ຕັ້ງໃຈຜ່ານຄໍານໍາຫນ້າ CSS, ເຊິ່ງໃຊ້ Browserslist ເພື່ອຈັດການສະບັບຂອງຕົວທ່ອງເວັບເຫຼົ່ານີ້. ປຶກສາຫາລືເອກະສານຂອງເຂົາເຈົ້າສໍາລັບວິທີການປະສົມປະສານເຄື່ອງມືເຫຼົ່ານີ້ເຂົ້າໃນໂຄງການຂອງທ່ານ.

ອຸປະກອນມືຖື

ໂດຍທົ່ວໄປແລ້ວ, Bootstrap ສະຫນັບສະຫນູນເວີຊັນຫຼ້າສຸດຂອງຕົວທ່ອງເວັບເລີ່ມຕົ້ນຂອງແຕ່ລະແພລະຕະຟອມທີ່ສໍາຄັນ. ໃຫ້ສັງເກດວ່າຕົວທ່ອງເວັບຂອງຕົວແທນ (ເຊັ່ນ Opera Mini, ໂໝດ Turbo ຂອງ Opera Mobile, 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, ນອກເຫນືອຈາກການປ່ອຍຄວາມຫມັ້ນຄົງປົກກະຕິຫລ້າສຸດ, ພວກເຮົາຍັງສະຫນັບສະຫນູນ Extended Support Release (ESR) ຮຸ່ນຫຼ້າສຸດຂອງ Firefox.

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

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

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, ທ່ານຕ້ອງໄດ້ໂດຍກົງຄລິກອົງປະກອບ dropdown (ຫຼື ອົງປະກອບອື່ນໆທີ່ຈະ fire event ຄລິກໃນ 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 .