ຄວາມແຕກຕ່າງລະຫວ່າງ "display: none" ແລະ "visibility: hidden" ໃນ CSS

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

ວິທີທີ່ສອງທີ່ສຸດທີ່ຈະຊ່ອນອົງປະກອບທີ່ຢູ່ໃນ HTML ຈະໃຊ້ຄຸນສົມບັດ CSS ສໍາລັບ "display" ຫຼື "visibility". ຢູ່ glance ທໍາອິດ, ທັງສອງຄຸນລັກສະນະອາດຈະເບິ່ງຄືວ່າສ່ວນໃຫຍ່ແມ່ນສິ່ງດຽວກັນ, ແຕ່ວ່າພວກເຂົາແຕ່ລະມີຄວາມແຕກຕ່າງທີ່ແຕກຕ່າງກັນທີ່ທ່ານຄວນຮູ້. ຂໍໃຫ້ພິຈາລະນາຄວາມແຕກຕ່າງລະຫວ່າງການສະແດງ: ບໍ່ມີແລະຄວາມເຂົ້າໃຈ: ເຊື່ອງໄວ້.

ການເບິ່ງເຫັນ

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

ຖ້າທ່ານວາງ DIV ໃນຫນ້າຂອງທ່ານແລະໃຊ້ CSS ເພື່ອໃຫ້ມັນມີຂະຫນາດ 100x100 ພິກະເຊນ, ການເບິ່ງເຫັນ: ຊັບສົມບັດທີ່ເຊື່ອງໄວ້ຈະເຮັດໃຫ້ DIV ບໍ່ສະແດງເທິງຫນ້າຈໍ, ແຕ່ຂໍ້ຄວາມຕໍ່ໄປນີ້ຈະປະຕິບັດຕາມມັນຍັງຄົງຢູ່, 100x100 spacing

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

ການສະແດງ

ບໍ່ຄືຄຸນສົມບັດການເບິ່ງເຫັນ, ຊຶ່ງອອກຈາກອົງປະກອບໃນການໄຫລຂອງເອກະສານປົກກະຕິ, ສະແດງ: none ເອົາສ່ວນປະກອບທັງຫມົດອອກຈາກເອກະສານ. ມັນບໍ່ໃຊ້ເວລາໃດກໍ່ຕາມ, ເຖິງແມ່ນວ່າ HTML ສໍາລັບມັນຍັງຢູ່ໃນລະຫັດແຫຼ່ງ. ນີ້ແມ່ນຍ້ອນວ່າມັນແມ່ນ, ແທ້ຈິງແລ້ວ, ຖືກໂຍກຍ້າຍອອກຈາກການໄຫລຂອງເອກະສານ. ສໍາລັບຈຸດປະສົງທັງຫມົດແລະຈຸດປະສົງ, ລາຍການແມ່ນຫມົດ. ນີ້ສາມາດເປັນສິ່ງທີ່ດີຫຼືເປັນສິ່ງທີ່ບໍ່ດີ, ໂດຍອີງຕາມຄວາມຕັ້ງໃຈຂອງທ່ານ. ມັນກໍ່ສາມາດທໍາລາຍຫນ້າເວັບຂອງທ່ານໄດ້ຖ້າທ່ານໃຊ້ຊັບສິນນີ້ຜິດ!

ພວກເຮົາມັກໃຊ້ "ການສະແດງ: ບໍ່ມີ" ເມື່ອການທົດສອບຫນ້າ. ຖ້າຫາກວ່າພວກເຮົາຕ້ອງການພື້ນທີ່ທີ່ "ອອກໄປ" ສໍາລັບການຊ່ວຍໃນຂະນະທີ່ພວກເຮົາສາມາດທົດສອບເຂດອື່ນໆຂອງຫນ້າເວັບ, ພວກເຮົາສາມາດນໍາໃຊ້ການສະແດງ: none ສໍາລັບມັນ. ສິ່ງທີ່ຕ້ອງຈື່ແມ່ນວ່າອົງປະກອບຄວນຖືກສົ່ງຄືນກັບຫນ້າກ່ອນທີ່ຈະເປີດຕົວຂອງເວັບໄຊທ໌ນັ້ນ. ນີ້ແມ່ນຍ້ອນວ່າລາຍການທີ່ຖືກເອົາອອກຈາກການໄຫລຂອງເອກະສານໃນວິທີການນີ້ບໍ່ໄດ້ຖືກເຫັນໂດຍເຄື່ອງຈັກຊອກຫາຫຼືຜູ້ອ່ານຫນ້າຈໍ, ເຖິງແມ່ນວ່າມັນຍັງຄົງຢູ່ໃນ HTML markup. ໃນໄລຍະຜ່ານມາ, ວິທີນີ້ໄດ້ຖືກນໍາໃຊ້ເປັນວິທີການຫມວກດໍາເພື່ອພະຍາຍາມມີອິດທິພົນຕໍ່ການຈັດລຽງຂອງເຄື່ອງຈັກຊອກຫາ, ດັ່ງນັ້ນລາຍການທີ່ບໍ່ໄດ້ສະແດງອາດຈະເປັນທຸງສີແດງສໍາລັບ Google ເພື່ອເບິ່ງວ່າເປັນຫຍັງວິທີການນີ້ຖືກໃຊ້.

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

ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. Edited by Jeremy Girard on 3/3/17