ກຸ່ມຄັດເລືອກ CSS ຫລາຍເພື່ອປັບປຸງຄວາມໄວໃນການໂຫລດ
ປະສິດທິພາບເປັນປັດໃຈສໍາຄັນໃນເວັບໄຊທ໌ທີ່ປະສົບຜົນສໍາເລັດ. ເວັບໄຊທ໌ນັ້ນຄວນມີປະສິດທິພາບໃນ ການໃຊ້ຮູບພາບອອນລາຍ . ນີ້ຈະຊ່ວຍໃຫ້ແນ່ໃຈວ່າເວັບໄຊທ໌ທໍາງານດີສໍາລັບນັກທ່ອງທ່ຽວແລະ ໂຫຼດໄດ້ໄວ ໃນອຸປະກອນຂອງພວກເຂົາ. ປະສິດທິພາບຄວນຈະເປັນສ່ວນຫນຶ່ງຂອງຂະບວນການໂດຍລວມຂອງທ່ານ, ຊ່ວຍໃຫ້ທ່ານສາມາດຮັກສາຄວາມກ້າວຫນ້າຂອງເວັບໄຊທ໌ເປັນເວລາແລະງົບປະມານ.
ໃນທີ່ສຸດ, ປະສິດທິພາບຈະມີບົດບາດໃນທຸກດ້ານຂອງການສ້າງເວັບໄຊທ໌ແລະຜົນສໍາເລັດໃນໄລຍະຍາວ, ລວມທັງໃນຄໍເຕົ້າໄຂ່ທີ່ຂຽນສໍາລັບແຜ່ນ CSS ຂອງເວັບໄຊທ໌ນັ້ນ. ເປັນຄວາມສາມາດທີ່ຈະສ້າງຄວາມເຄັ່ງຕຶງ, ໄຟລ໌ CSS ທີ່ສະອາດແມ່ນເຫມາະສົມ, ແລະຫນຶ່ງໃນວິທີທີ່ທ່ານສາມາດບັນລຸນີ້ແມ່ນການຈັດກຸ່ມຄັດເລືອກ CSS ຫຼາຍ.
Grouping Selectors
ເມື່ອທ່ານ ຄັດເລືອກເອົາຕົວເລືອກ CSS , ທ່ານນໍາໃຊ້ຮູບແບບດຽວກັນກັບອົງປະກອບທີ່ແຕກຕ່າງກັນຫຼາຍໂດຍບໍ່ຕ້ອງຊ້ໍາຮູບແບບໃນເອກະສານສະໄຕຂອງທ່ານ. ແທນທີ່ຈະມີກົດລະບຽບ CSS ສອງຫາສາມຫຼືຫຼາຍກວ່ານັ້ນ, ທັງຫມົດທີ່ເຮັດສິ່ງດຽວກັນ (ຕົວຢ່າງ, ກໍານົດສີຂອງບາງສິ່ງບາງຢ່າງເປັນສີແດງ), ທ່ານມີກົດລະບຽບ CSS ດຽວທີ່ເຮັດສໍາລັບຫນ້າຂອງທ່ານ.
ມີຈໍານວນເຫດຜົນວ່າເປັນຫຍັງ "ກຸ່ມຂອງຕົວເລືອກນີ້" ໄດ້ຮັບຜົນປະໂຫຍດຈາກຫນ້ານີ້. ຫນ້າທໍາອິດ, ເອກະສານສະໄຕຂອງທ່ານຈະມີຂະຫນາດນ້ອຍແລະໂຫຼດໄດ້ໄວຂຶ້ນ. ຍອມຮັບວ່າແຜ່ນຮູບແບບບໍ່ແມ່ນຫນຶ່ງໃນຄໍາປະທ້ວງຕົ້ນຕໍໃນເວລາທີ່ມັນມາກັບເວັບໄຊທ໌ທີ່ໂຫລດຊ້າ. ໄຟລ໌ CSS ແມ່ນໄຟລ໌ຂໍ້ຄວາມ, ດັ່ງນັ້ນເຖິງແມ່ນວ່າແຜ່ນ CSS ຍາວກໍ່ມີຂະຫນາດນ້ອຍໆ, ມີຂະຫນາດທີ່ມີປັນຍາ, ເມື່ອທຽບກັບຮູບພາບທີ່ບໍ່ໄດ້ຮັບຄວາມນິຍົມ. ຍັງ, ທຸກໆນ້ອຍນັບນ້ອຍ, ແລະຖ້າທ່ານສາມາດ shave ບາງຂະຫນາດຂອງ CSS ຂອງທ່ານແລະໂຫຼດຫນ້າທີ່ໄວຫຼາຍ, ທີ່ເປັນສິ່ງທີ່ດີທີ່ຈະເຮັດ.
ໂດຍທົ່ວໄປ, ຄວາມໄວໃນການໂຫຼດສູງສຸດຂອງສະຖານທີ່ແມ່ນຫນ້ອຍກວ່າ 3 ວິນາທີ; 3 ຫາ 7 ວິນາທີແມ່ນກ່ຽວກັບສະເລ່ຍ, ແລະຫຼາຍກ່ວາ 7 ວິນາທີແມ່ນພຽງແຕ່ຊ້າເກີນໄປ. ຕົວເລກຕ່ໍາເຫຼົ່ານີ້ຫມາຍຄວາມວ່າ, ເພື່ອບັນລຸໃຫ້ເຂົາເຈົ້າມີເວັບໄຊທ໌ຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງເຮັດທຸກຢ່າງທີ່ທ່ານສາມາດເຮັດໄດ້! ນີ້ແມ່ນເຫດຜົນທີ່ທ່ານສາມາດຊ່ວຍຮັກສາເວັບໄຊທ໌ຂອງທ່ານໄດ້ໄວໂດຍໃຊ້ຕົວເລືອກ CSS ແບບກຸ່ມ.
ວິທີການກຸ່ມ CSS Selectors
ການຄັດລອກຕົວເລືອກ CSS ໃນຮູບແບບຂອງທ່ານ, ທ່ານ ໃຊ້ໂຄມມາກເພື່ອແຍກຕົວເລືອກທີ່ມີກຸ່ມຫລາຍ ໃນແບບ. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ຮູບແບບຜົນກະທົບຕໍ່ອົງປະກອບ p ແລະ div:
div, p {color: # f00 }ຈຸດຫມາຍປາຍທາງແມ່ນຫມາຍຄວາມວ່າ "ແລະ". ດັ່ງນັ້ນຕົວເລືອກນີ້ໃຊ້ກັບອົງປະກອບວັກທັງຫມົດແລະອົງປະກອບສ່ວນທັງຫມົດ. ຖ້າຫາກວ່າຕົວຫຍໍ້ໄດ້ຫາຍໄປ, ມັນແທນທີ່ຈະເປັນອົງປະກອບວັກທັງຫມົດທີ່ເປັນລູກຂອງພະແນກ. ນັ້ນແມ່ນຕົວເລືອກທີ່ແຕກຕ່າງກັນຫຼາຍ, ດັ່ງນັ້ນສະແປມນີ້ກໍ່ປ່ຽນຄວາມຫມາຍຂອງຕົວເລືອກ!
ທຸກຮູບແບບຂອງຕົວເລືອກສາມາດຖືກຈັດເປັນກຸ່ມດ້ວຍຕົວເລືອກອື່ນໆ. ໃນຕົວຢ່າງນີ້, ຕົວເລືອກຫ້ອງຮຽນຖືກຈັດກຸ່ມດ້ວຍຕົວເລືອກ ID:
pred, #sub {color: # f00 }ດັ່ງນັ້ນແບບນີ້ໃຊ້ກັບວັກໃດທີ່ມີ attribute ຊັ້ນຂອງ "red", AND ທຸກອົງປະກອບ (ເພາະວ່າພວກເຮົາບໍ່ໄດ້ລະບຸຊະນິດໃດ) ທີ່ມີ attribute ID ຂອງ "sub".
ທ່ານສາມາດຈັດກຸ່ມຈໍານວນຕົວເລືອກໃດຫນຶ່ງຮ່ວມກັນ, ລວມທັງຕົວເລືອກທີ່ເປັນຄໍາດຽວແລະຕົວເລືອກ compund. ຕົວຢ່າງນີ້ມີສີ່ຕົວເລືອກທີ່ແຕກຕ່າງກັນຄື:
p, red, #sub, div a: link {color: # f00 }ດັ່ງນັ້ນກົດລະບຽບ CSS ນີ້ຈະນໍາໃຊ້ຕໍ່ໄປນີ້:
- ທຸກອົງປະກອບວັກ
- ອົງປະກອບໃດທີ່ມີຊັ້ນຮຽນ "ສີແດງ"
- ອົງປະກອບທີ່ມີ ID ຂອງ "sub"
- ຊັ້ນຮຽນ pseudo "ການເຊື່ອມໂຍງ" ຂອງອົງປະກອບມໍລະດົກທີ່ເປັນອະນຸພາກຂອງພະແນກ.
ຕົວເລືອກສຸດທ້າຍທີ່ເປັນຕົວເລືອກປະສົມ. ທ່ານສາມາດເບິ່ງມັນໄດ້ຖືກລວມເຂົ້າກັບຕົວເລືອກອື່ນໆໃນກົດ CSS ນີ້. ດ້ວຍກົດລະບຽບດັ່ງກ່າວ, ພວກເຮົາກໍານົດສີຂອງ # f00 (ທີ່ມີສີແດງ) ໃນ 4 ຕົວເລືອກເຫຼົ່ານີ້ເຊິ່ງມັກຂຽນ 4 ຕົວເລືອກແຍກຕ່າງຫາກເພື່ອບັນລຸຜົນດຽວກັນ.
ຜົນປະໂຫຍດອີກອັນຫນຶ່ງຂອງການຄັດເລືອກກຸ່ມແມ່ນວ່າ, ຖ້າທ່ານຕ້ອງການປ່ຽນແປງ, ທ່ານສາມາດແກ້ໄຂກົດດຽວກັນຂອງ CSS ໄດ້ແທນທີ່ຈະໃຊ້ຫຼາຍ. ນີ້ຫມາຍຄວາມວ່າວິທີການນີ້ຊ່ວຍປະຢັດນ້ໍາຫນັກເວລາແລະເວລາໃນການຮັກສາເວັບໄຊໃນອະນາຄົດ.
ຕົວເລືອກໃດສາມາດຖືກຈັດກຸ່ມໄດ້
ດັ່ງທີ່ທ່ານສາມາດເຫັນໄດ້ຈາກຕົວຢ່າງຂ້າງເທິງ, ຕົວເລືອກທີ່ຖືກຕ້ອງສາມາດຖືກຈັດໄວ້ໃນກຸ່ມ, ແລະອົງປະກອບທັງຫມົດໃນເອກະສານທີ່ກົງກັບທຸກອົງປະກອບທີ່ຈັດກຸ່ມຈະມີແບບດຽວກັນໂດຍອີງໃສ່ຄຸນລັກສະນະແບບນັ້ນ.
ບາງຄົນຕ້ອງການລາຍການອົງປະກອບທີ່ຖືກຈັດໃສ່ຢູ່ໃນເສັ້ນແຍກສໍາລັບຄວາມເຂົ້າໃຈໃນລະຫັດ. ຮູບລັກສະນະກ່ຽວກັບເວັບໄຊທ໌ແລະຄວາມໄວຂອງການໂຫຼດຍັງດຽວກັນ. ຕົວຢ່າງເຊັ່ນ, ທ່ານສາມາດສົມທົບຄໍເຕົ້າໄຂ່ທີ່ແຍກກັນໂດຍໃຊ້ຕົວເປັນຕົວແບບຫນຶ່ງໃນລະຫັດຫນຶ່ງ:
th, td, pred, div # firstred {color: red }
ຫຼືທ່ານສາມາດລາຍຊື່ຄໍເຕົ້າໄຂ່ທີ່ຢູ່ໃນສາຍຕ່າງໆສໍາລັບຄວາມຊັດເຈນ:
th,
td,
pred,
div # firstred
{
ສີ: ສີແດງ;
}
ວິທີການໃດຫນຶ່ງທີ່ທ່ານນໍາໃຊ້ເພື່ອຄັດເລືອກເອົາຕົວເລືອກ CSS ຫຼາຍໆຕົວເຮັດໃຫ້ເວັບໄຊທ໌ຂອງທ່ານເຮັດໃຫ້ງ່າຍຕໍ່ການຈັດການຮູບແບບໃນໄລຍະຍາວ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 5/8/17.