ພວກເຂົາແມ່ນຫຍັງແລະເປັນຫຍັງທ່ານຄວນໃຊ້ມັນ
ຄໍານໍາຫນ້າຂອງ CSS vendors, ຊຶ່ງເອີ້ນວ່າ Prefixes browser ຫຼື CSS , ແມ່ນວິທີການສໍາລັບຜູ້ສ້າງຕົວທ່ອງເວັບເພື່ອເພີ່ມການສະຫນັບສະຫນູນສໍາລັບ ຄຸນນະສົມບັດ CSS ໃຫມ່ ກ່ອນທີ່ຈະມີຄຸນນະສົມບັດສະຫນັບສະຫນູນທັງຫມົດໃນທຸກຕົວທ່ອງເວັບ. ນີ້ອາດຈະເຮັດໃນໄລຍະການທົດສອບແລະໄລຍະເວລາທົດລອງທີ່ຜູ້ຜະລິດເບົາເຊີກໍານົດຢ່າງແນ່ນອນວ່າວິທີການ CSS ເຫຼົ່ານີ້ຈະຖືກປະຕິບັດ. ປະໂຫຍກເຫຼົ່ານີ້ໄດ້ກາຍເປັນທີ່ນິຍົມຫລາຍທີ່ສຸດກັບການເພີ່ມຂຶ້ນຂອງ CSS3 ສອງສາມປີກ່ອນ.
ເມື່ອ CCS3 ໄດ້ຖືກນໍາສະເຫນີເປັນຄັ້ງທໍາອິດ, ມີຄຸນສົມບັດທີ່ຫນ້າຕື່ນເຕັ້ນຈໍານວນຫນຶ່ງໄດ້ເລີ້ມຕີຕົວທ່ອງເວັບຕ່າງໆໃນເວລາທີ່ແຕກຕ່າງກັນ. ຕົວຢ່າງ, ຕົວທ່ອງເວັບ webkit-powered (Safari ແລະ Chrome) ແມ່ນຄົນທໍາອິດທີ່ແນະນໍາບາງຄຸນສົມບັດແບບເຄື່ອນໄຫວແບບເຄື່ອນໄຫວເຊັ່ນການຫັນປ່ຽນແລະການປ່ຽນແປງ. ໂດຍການນໍາໃຊ້ຄຸນສົມບັດທີ່ຕິດຕັ້ງມາກ່ອນຜູ້ຂາຍ, ຜູ້ອອກແບບເວັບສາມາດໃຊ້ຄຸນນະສົມບັດໃຫມ່ເຫຼົ່ານັ້ນໃນວຽກງານຂອງເຂົາເຈົ້າແລະໃຫ້ພວກເຂົາເຫັນໃນເບົາເຊີທີ່ສະຫນັບສະຫນູນພວກເຂົາທັນທີ, ແທນທີ່ຈະຕ້ອງລໍຖ້າຜູ້ຜະລິດເບົາເຊີອື່ນ ໆ ທຸກໆຄົນ!
ດັ່ງນັ້ນຈາກມຸມມອງຂອງຜູ້ພັດທະນາເວັບໄຊທ໌ທາງຫນ້າ, ຄໍານໍາຫນ້າຂອງຕົວທ່ອງເວັບຖືກນໍາໃຊ້ເພື່ອເພີ່ມລັກສະນະ CSS ໃຫມ່ໃນເວັບໄຊທ໌ຫນຶ່ງໃນຂະນະທີ່ມີຄວາມສະບາຍໂດຍຮູ້ວ່າຕົວທ່ອງເວັບຈະສະຫນັບສະຫນູນຮູບແບບເຫລົ່ານັ້ນ. ນີ້ສາມາດເປັນປະໂຫຍດໂດຍສະເພາະໃນເວລາທີ່ຜູ້ຜະລິດເບລາເຊີແຕກຕ່າງກັນປະຕິບັດຄຸນສົມບັດໃນວິທີທີ່ແຕກຕ່າງກັນເລັກນ້ອຍຫຼືດ້ວຍວິທີການແຕກຕ່າງກັນ
ຕົວຫນັງສືຕົວທ່ອງເວັບ CSS ທີ່ທ່ານສາມາດນໍາໃຊ້ (ແຕ່ລະເວັບທີ່ສະເພາະຕົວທ່ອງເວັບທີ່ແຕກຕ່າງກັນ) ແມ່ນ:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ການນໍາໃຊ້ຄຸນສົມບັດແບບ CSS ແບບໃຫມ່, ທ່ານໃຊ້ຄຸນສົມບັດ CSS ມາດຕະຖານແລະເພີ່ມຄໍານໍາຫນ້າສໍາລັບແຕ່ລະຕົວທ່ອງເວັບ. ຮຸ່ນທີ່ມີຄໍາວ່າ prefixed ຈະມາກ່ອນ (ໃນຄໍາສັ່ງໃດໆທີ່ທ່ານຕ້ອງການ) ໃນຂະນະທີ່ຊັບສິນ CSS ປົກກະຕິຈະມາຮອດສຸດທ້າຍ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການເພີ່ມການປ່ຽນ CSS3 ໄປຍັງເອກະສານຂອງທ່ານ, ທ່ານຈະໃຊ້ຄຸນສົມບັດການປ່ຽນແປງດັ່ງລຸ່ມນີ້:
-webkit- transition: all 4s ease
-moz- transition: all 4s ease
-ms- transition: all 4s ease
-o transition: all 4s ease
transition: all 4s ease
ຫມາຍເຫດ: ຈົ່ງຈື່ໄວ້ວ່າບາງບັນດາຕົວທ່ອງເວັບມີໄວຣັດທີ່ແຕກຕ່າງກັນສໍາລັບຄຸນສົມບັດທີ່ແນ່ນອນກ່ວາຄົນອື່ນເຮັດ, ດັ່ງນັ້ນຢ່າສົມມຸດວ່າສະບັບຂອງຕົວທ່ອງເວັບທີ່ຖືກນໍາຫນ້າກ່ອນຫນ້ານັ້ນແມ່ນຄືກັນກັບຄຸນສົມບັດມາດຕະຖານ. ຕົວຢ່າງເຊັ່ນ, ເພື່ອສ້າງ gradient CSS , ທ່ານນໍາໃຊ້ຄຸນສົມບັດຂອງເສັ້ນເລິກ. Firefox, Opera ແລະສະບັບ Chrome ແລະ Safari ທີ່ທັນສະໄຫມໃຊ້ຄຸນສົມບັດທີ່ມີ prefix ທີ່ເຫມາະສົມໃນຂະນະທີ່ເວີຊັ່ນ Chrome ແລະ Safari ຕົ້ນສະບັບໃຊ້ຄຸນສົມບັດກ່ອນຫນ້ານີ້ - web-gradient. ນອກຈາກນີ້, Firefox ໃຊ້ຄຸນຄ່າທີ່ແຕກຕ່າງກັນກ່ວາມາດຕະຖານ.
ເຫດຜົນທີ່ວ່າທ່ານສະເຫມີສິ້ນສຸດການປະກາດຂອງທ່ານກັບສະບັບປົກກະຕິ, ບໍ່ມີຕົວຕົນຂອງຄຸນສົມບັດ CSS ແມ່ນເພື່ອວ່າໃນເວລາທີ່ຕົວທ່ອງເວັບບໍ່ສະຫນັບສະຫນູນກົດລະບຽບ, ມັນຈະໃຊ້ມັນ. ຈື່ຈໍາວິທີການອ່ານ CSS. ກົດລະບຽບຕໍ່ມາໃຊ້ກ່ອນຫນ້ານີ້ກ່ອນຖ້າບໍ່ດັ່ງນັ້ນຖ້າວ່າຄວາມສະເພາະແມ່ນຄືກັນ, ດັ່ງນັ້ນ, ຕົວທ່ອງເວັບຈະອ່ານມາດຕະຖານຜູ້ຂາຍຂອງກົດລະບຽບແລະໃຊ້ວ່າຖ້າມັນບໍ່ສະຫນັບສະຫນູນປະກະຕິ, ແຕ່ເມື່ອມັນເຮັດ, ມັນຈະ override ເວີຊັນຂອງຜູ້ຂາຍດ້ວຍ ກົດລະບຽບ CSS ທີ່ແທ້ຈິງ.
ຕົວແທນຜູ້ຂາຍບໍ່ແມ່ນ Hack
ໃນເວລາທີ່ຄໍາແນະນໍາຂອງຜູ້ຂາຍໄດ້ຖືກນໍາສະເຫນີເປັນຄັ້ງທໍາອິດ, ຜູ້ຊ່ຽວຊານເວັບຕ່າງໆໄດ້ສົງໄສວ່າພວກເຂົາເຈົ້າເປັນ hack ຫຼືກັບຄືນສູ່ມື້ທີ່ມືດຂອງການລ້າໂຄ້ດຂອງເວັບໄຊທ໌ເພື່ອສະຫນັບສະຫນູນຕົວທ່ອງເວັບທີ່ແຕກຕ່າງກັນ. ແນວໃດກໍ່ຕາມ, ພວກເຮົາບໍ່ມີຂໍ້ສະເຫນີກ່ຽວກັບການນໍາໃຊ້ພວກມັນໃນວຽກງານຂອງທ່ານ.
hack CSS exploits ຂໍ້ບົກພ່ອງໃນການປະຕິບັດຂອງອົງປະກອບຫຼືຊັບສົມບັດອື່ນເພື່ອໃຫ້ຊັບສິນອື່ນເຮັດວຽກຢ່າງຖືກຕ້ອງ. ຕົວຢ່າງ, ແບບຈໍາລອງກ່ອງການຂຸດຄົ້ນຂໍ້ບົກພ່ອງໃນການວິເຄາະຂອງ ຄຸນສົມບັດສຽງຄອບຄົວ ຫຼືໃນວິທີການຕົວທ່ອງເວັບຂອງຫຼອກລວງຍ້ອນກັບ (\). ແຕ່ການກະທໍາເຫຼົ່ານີ້ຖືກນໍາໃຊ້ເພື່ອແກ້ໄຂບັນຫາຂອງຄວາມແຕກຕ່າງລະຫວ່າງ Internet Explorer 5.5 ການຄຸ້ມຄອງຮູບແບບກ່ອງແລະວິທີການແປພາສາ Netscape, ແລະບໍ່ມີຫຍັງທີ່ຈະເຮັດກັບແບບຄອບຄົວສຽງ. ຂໍຂອບໃຈທີ່ເຫຼົ່ານີ້ທັງສອງຕົວທ່ອງເວັບທີ່ລ້າສະໄຫມແມ່ນສິ່ງທີ່ພວກເຮົາບໍ່ມີຄວາມກັງວົນຕົວເອງກັບມື້ນີ້.
ຕົວແທນຂອງຜູ້ຂາຍບໍ່ແມ່ນການ hack ເພາະມັນອະນຸຍາດໃຫ້ຂໍ້ກໍານົດໃນການກໍານົດກົດລະບຽບກ່ຽວກັບຊັບສິນທີ່ອາດຈະຖືກຈັດຕັ້ງປະຕິບັດ, ໃນຂະນະດຽວກັນ, ຜູ້ໃຫ້ບໍລິການຂອງຕົວທ່ອງເວັບສາມາດປະຕິບັດຊັບສິນໃນທາງທີ່ແຕກຕ່າງກັນໄດ້ໂດຍບໍ່ຕ້ອງທໍາລາຍທຸກສິ່ງທຸກຢ່າງ. ນອກຈາກນີ້, ຄໍາແນະນໍາເຫລົ່ານີ້ເຮັດວຽກຮ່ວມກັບຄຸນສົມບັດ CSS ເຊິ່ງ ໃນທີ່ສຸດຈະເປັນສ່ວນຫນຶ່ງຂອງຂໍ້ກໍານົດ . ພວກເຮົາພຽງແຕ່ເພີ່ມລະຫັດຈໍານວນຫນຶ່ງໃນການເຂົ້າເຖິງຊັບສິນທໍາອິດ. ນີ້ແມ່ນເຫດຜົນອີກເຫດຜົນທີ່ວ່າທ່ານຢຸດກົດລະບຽບ CSS ດ້ວຍຄຸນສົມບັດປະກະຕິ, ທີ່ບໍ່ມີຕົວຕົນ. ວິທີທີ່ທ່ານສາມາດລຸດລົງລຸ້ນກ່ອນທີ່ຈະສະຫນັບສະຫນູນຕົວທ່ອງເວັບເຕັມຮູບແບບ.
ຕ້ອງການຮູ້ສິ່ງທີ່ສະຫນັບສະຫນູນຕົວທ່ອງເວັບສໍາລັບຄຸນສົມບັດສະເພາະໃດຫນຶ່ງແມ່ນ? CanIUse.com ເວັບໄຊທ໌ແມ່ນແຫຼ່ງຂໍ້ມູນທີ່ດີເລີດສໍາລັບການເກັບກໍາຂໍ້ມູນນີ້ແລະບອກໃຫ້ທ່ານຮູ້ວ່າຕົວທ່ອງເວັບໃດແລະສະບັບຂອງຕົວທ່ອງເວັບເຫຼົ່ານັ້ນທີ່ສະຫນັບສະຫນູນຄຸນນະສົມບັດ.
ນາມສະກຸນຜູ້ຂາຍແມ່ນຫນ້າຮໍາຄານແຕ່ຊົ່ວຄາວ
ແມ່ນ, ມັນອາດຈະມີຄວາມຮູ້ສຶກທີ່ຫນ້າລໍາຄານແລະຊໍ້າຊ້ອນທີ່ຕ້ອງຂຽນຄຸນສົມບັດ 2-5 ຄັ້ງເພື່ອໃຫ້ມັນເຮັດວຽກຢູ່ໃນທຸກຕົວທ່ອງເວັບ, ແຕ່ມັນເປັນສະຖານະການຊົ່ວຄາວ. ຕົວຢ່າງເຊັ່ນ, ພຽງແຕ່ສອງສາມປີກ່ອນ, ເພື່ອຕັ້ງແຈນມົນໃສ່ກ່ອງທີ່ທ່ານຕ້ອງຂຽນ:
-moz-border-radius: 10px 5px;
-webkit-border-top-left radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px
-webkit-border-bottom-left radius: 5px;
border-radius: 10px 5px
ແຕ່ໃນປັດຈຸບັນທີ່ຕົວທ່ອງເວັບໄດ້ມາສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນຄຸນນະສົມບັດນີ້, ທ່ານພຽງແຕ່ຕ້ອງການສະບັບມາດຕະຖານ:
border-radius: 10px 5px
Chrome ໄດ້ສະຫນັບສະຫນູນຄຸນສົມບັດ CSS3 ນັບຕັ້ງແຕ່ສະບັບ 5.0, Firefox ເພີ່ມມັນໃນຮຸ່ນ 40, Safari ເພີ່ມມັນໃນ 5.0, Opera ໃນ iOS, iOS 4.0 ແລະ Android ໃນ 2.1. ເຖິງແມ່ນວ່າ Internet Explorer 9 ສະຫນັບສະຫນູນມັນໂດຍບໍ່ມີຄໍານໍາຫນ້າ (ແລະ IE 8 ແລະລຸ່ມບໍ່ໄດ້ສະຫນັບສະຫນູນມັນດ້ວຍຫຼືບໍ່ມີຄໍານໍາຫນ້າ).
ຈົ່ງຈື່ໄວ້ວ່າຕົວທ່ອງເວັບຈະປ່ຽນແປງແລະວິທີການສ້າງສັນເພື່ອສະຫນັບສະຫນູນຕົວທ່ອງເວັບທີ່ມີອາຍຸຈະຕ້ອງມີເວັ້ນແຕ່ວ່າທ່ານກໍາລັງວາງແຜນໃນການ ສ້າງຫນ້າເວັບ ທີ່ຢູ່ເບື້ອງຫລັງວິທີທີ່ທັນສະໄຫມຫຼາຍທີ່ສຸດ. ໃນທີ່ສຸດ, ການຂຽນຄໍານໍາຫນ້າຂອງຕົວທ່ອງເວັບແມ່ນງ່າຍກວ່າການຊອກຫາແລະການຂຸດຄົ້ນຂໍ້ຜິດພາດທີ່ອາດຈະຖືກແກ້ໄຂໃນສະບັບໃນອະນາຄົດ, ເຊິ່ງຕ້ອງການໃຫ້ທ່ານພົບຂໍ້ຜິດພາດອື່ນທີ່ຈະຂຸດຄົ້ນແລະອື່ນໆ.