CSS Stacking Context inspector in Chrome ກັບ OffiDocs

ລາຍລະອຽດ

ທ່ານເຄີຍພະຍາຍາມໃຊ້ຄຸນສົມບັດ 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 web extension ປະສົມປະສານກັບ OffiDocs Chromium ອອນໄລນ໌