CSS Stacking Context inspector ໃນ Chrome ດ້ວຍ OffiDocs
CSS Stacking Context inspector ສ່ວນຂະຫຍາຍຮ້ານ Chrome
DESCRIPTION:
ແລ່ນສ່ວນຂະຫຍາຍຮ້ານເວັບ Chrome online CSS Stacking Context inspector ໂດຍໃຊ້ OffiDocs Chromium ອອນລາຍ.
ທ່ານເຄີຍພະຍາຍາມໃຊ້ຄຸນສົມບັດ z-index, ພຽງແຕ່ເພື່ອຊອກຫາວ່າ, ບໍ່ວ່າທ່ານຈະຕັ້ງມັນສູງເທົ່າໃດ, ມັນຈະບໍ່ເຮັດວຽກຕາມທີ່ຄາດໄວ້ບໍ? ນັ້ນແມ່ນຍ້ອນວ່າຄຸນສົມບັດ z-index ອີງໃສ່ແນວຄວາມຄິດ implicit ເອີ້ນວ່າ "stacking contexts".ຫຼັງຈາກຊອກຫາສິ່ງທີ່ພວກເຂົາເປັນແລະວິທີການເຮັດວຽກ (ຂໍ້ມູນທີ່ທ່ານສາມາດຊອກຫາຢູ່ໃນ MDN), ທ່ານສາມາດນໍາໃຊ້ການຂະຫຍາຍ devtools ນີ້ເພື່ອກວດກາສະພາບການເຫຼົ່ານີ້ແລະແກ້ໄຂບັນຫາ z-index ທີ່ທ່ານອາດຈະປະເຊີນ.
ສ່ວນຂະຫຍາຍນີ້ຈະເພີ່ມແຜງໃໝ່ທີ່ຈະສະແດງການຊ້ອນກັນໃນມຸມເບິ່ງຕົ້ນໄມ້, ແລະຍັງຈະເພີ່ມແຖບດ້ານຂ້າງໃໝ່ໃສ່ແຖບອົງປະກອບດ້ວຍຂໍ້ມູນທີ່ເປັນປະໂຫຍດບາງຢ່າງກ່ຽວກັບອົງປະກອບທີ່ເລືອກ.
ເພື່ອກວດສອບເອກະສານລະອຽດ ກະລຸນາເບິ່ງທີ່ໜ້າ github: https://github.
com/andreadev-it/stacking-contexts-inspector ຖ້າທ່ານຕ້ອງການລາຍງານບັນຫາ ຫຼືເຮັດການຮ້ອງຂໍຄຸນສົມບັດ, ກະລຸນາໃຊ້ພາກສ່ວນບັນຫາຢູ່ໃນບ່ອນເກັບຂໍ້ມູນ github ຂ້າງເທິງ.
ການປ່ຽນແປງ: • v.
1.
1.
13 - ຍ້າຍໄປ manifest v3.
ເພີ່ມ z-index ໃສ່ sidepan context panel stacking ເຊັ່ນກັນ.
• ວ.
1.
1.
12 - ແກ້ໄຂຂໍ້ບົກພ່ອງດ້ວຍຄຸນສົມບັດທີ່ນຳໜ້າຂອງຜູ້ຂາຍບໍ່ກວດພົບເມື່ອກວດສອບການວາງບໍລິບົດ.
• ວ.
1.
1.
11 - ເພີ່ມມູນຄ່າ z-index ໃສ່ພາກສ່ວນ "ລາຍລະອຽດຂອງສະພາບການ" ໃນແຖບດ້ານຂ້າງ.
• ວ.
1.
1.
10 - ເອົາຄໍາຮ້ອງຂໍການອະນຸຍາດທີ່ບໍ່ຈໍາເປັນອອກເພື່ອປະຕິບັດຕາມນະໂຍບາຍຄວາມປອດໄພ CWS.
• ວ.
1.
1.
9 - ປະຕິບັດການກວດສອບ DOM node context ພາຍໃນ iframes ແລະ shadowDOM.
ໃນປັດຈຸບັນສ່ວນຂະຫຍາຍຍັງເຮັດວຽກຢູ່ໃນໄຟລ໌ທ້ອງຖິ່ນ (file:/// scheme).
• ວ.
1.
1.
8 - ເພີ່ມການເຕືອນເມື່ອຫນ້າມີການປ່ຽນແປງ, ສະຫນັບສະຫນູນສໍາລັບເງົາ DOM ແລະການຕັ້ງຄ່າພື້ນຖານ.
• ວ.
1.
1.
7 - ການແກ້ໄຂຮູບແບບເລັກນ້ອຍ.
ໃນປັດຈຸບັນມັນຍັງມີຢູ່ໃນ Firefox ເນື່ອງຈາກມີການປ່ຽນແປງລະຫັດເລັກນ້ອຍ.
ລະຫັດທີ່ສະອາດແລ້ວ.
• ວ.
1.
1.
5 - ແກ້ໄຂຂໍ້ບົກພ່ອງທີ່ກ່ຽວຂ້ອງກັບການປ່ຽນໂມດູນ css (ເຄື່ອງປັ່ນປ່ວນທີ່ບໍ່ມີຮູບແບບ).
• ວ.
1.
1.
4 - ເພີ່ມຮູບແບບສີສັນມືດ (ກ່ອນໜ້ານີ້ມັນໃຊ້ບໍ່ໄດ້ກັບຮູບແບບສີສັນມືດຢູ່).
• ວ.
1.
1.
3 - ແກ້ໄຂຂໍ້ຜິດພາດໃນການນໍາທາງຫນ້າ.
• ວ.
1.
1.
2 - ເພີ່ມການຮອງຮັບ iframes ໂດຍບໍ່ມີຄຸນລັກສະນະ "src" (ບາງ iframes ທີ່ມີ "src" ອາດຈະເຮັດວຽກ, ແຕ່ມັນບໍ່ຄວນຄາດຫວັງ).
ນອກຈາກນີ້, ຕົວຊີ້ວັດການໂຫຼດໄດ້ຖືກນໍາສະເຫນີຢູ່ໃນແຖບດ້ານຂ້າງ (ແຜງອົງປະກອບ) ເຊັ່ນດຽວກັນ, ແລະແຖບດ້ານຂ້າງໃນປັດຈຸບັນມີປຸ່ມ "ໂຫຼດຫນ້າຈໍຄືນ" ຂອງຕົນເອງ.
• ວ.
1.
1.
1 - ແກ້ໄຂຂໍ້ຜິດພາດທີ່ສະພາບຄົງທີ່ທີ່ສ້າງຂຶ້ນໂດຍພໍ່ແມ່ຂອງເຂົາເຈົ້າມີຈໍສະແດງຜົນ flex ຫຼືຕາຂ່າຍໄຟຟ້າບ່ອນທີ່ບໍ່ໄດ້ກວດພົບ.
• ວ.
1.
1.
0 - ໃນປັດຈຸບັນການຂະຫຍາຍເຮັດວຽກຢູ່ໃນແຖບທີ່ເປີດແລ້ວເມື່ອມັນຖືກຕິດຕັ້ງ.
- ຄລິກຂວາໃສ່ເມນູບໍລິບົດໄດ້ຖືກແທນທີ່ດ້ວຍປຸ່ມບໍລິບົດ, ເພາະວ່າມັນເຮັດວຽກບໍ່ຖືກຕ້ອງ (ມັນອາດຈະຖືກເພີ່ມອີກໃນອະນາຄົດ).
- ຕອນນີ້ໜ້າຕົ້ນໄມ້ບໍລິບົດຈະສະແດງຕົວຊີ້ບອກການໂຫຼດ ເມື່ອບໍລິບົດ stacking ໃຊ້ເວລາດົນໃນການໂຫຼດ.
- ໃນດ້ານນັກພັດທະນາ, ລະຫັດທັງຫມົດໄດ້ຖືກຍ້າຍໄປ preact, ເປັນຂັ້ນຕອນທໍາອິດເພື່ອເຮັດໃຫ້ມັນເປັນແຫຼ່ງເປີດ.
• ວ.
1.
0.
1 - ການປ່ຽນແປງການເຂົ້າເຖິງຂະຫນາດນ້ອຍແລະການປັບຮູບພາບ.
ຂໍ້ມູນເພີ່ມເຕີມ:
- ສະເໜີໂດຍ Andrea Dragotta
- ຄະແນນສະເລ່ຍ: 3.92 ດາວ (ມັກມັນ)
- ນັກພັດທະນາ ທີ່ຢູ່ອີເມວນີ້ຈະຖືກປ້ອງກັນຈາກສະແປມບອດ. ທ່ານຈໍາເປັນຕ້ອງເປີດການໃຊ້ງານຈາວາດຄິບກ່ອນ.
CSS Stacking Context inspector ສ່ວນຂະຫຍາຍເວັບປະສົມປະສານກັບ OffiDocs Chromium ອອນລາຍ