ວິທີການໃຊ້ CSS Sprites ດ້ວຍຮູບແບບແສງສະຫວ່າງແລະຊ້ໍາ
CSS sprites ແມ່ນເຕັກນິກທີ່ໃຊ້ໃນການພັດທະນາເວັບເພື່ອຫຼຸດຜ່ອນຈໍານວນ HTTP ຄໍາຮ້ອງຂໍທີ່ເຮັດໂດຍຫນ້າເວັບ. ພວກມັນກ່ຽວຂ້ອງກັບການລວມຮູບພາບຂະຫນາດນ້ອຍຫຼາຍເຂົ້າໄປໃນໄຟລ໌ຮູບພາບຂະຫນາດໃຫຍ່ດຽວແລະຫຼັງຈາກນັ້ນນໍາໃຊ້ CSS ເພື່ອສະແດງພາກສ່ວນສະເພາະຂອງຮູບພາບນັ້ນເປັນອົງປະກອບສ່ວນບຸກຄົນໃນຫນ້າເວັບ.
ຜົນປະໂຫຍດຕົ້ນຕໍຂອງການໃຊ້ CSS sprites ແມ່ນວ່າພວກເຂົາສາມາດຊ່ວຍປັບປຸງເວລາໂຫຼດຫນ້າສໍາລັບເວັບໄຊທ໌. ທຸກໆຄັ້ງທີ່ຮູບພາບຖືກໂຫລດຢູ່ໃນຫນ້າເວັບ, ມັນຮຽກຮ້ອງໃຫ້ມີການຮ້ອງຂໍ HTTP ແຍກຕ່າງຫາກ, ເຊິ່ງສາມາດເຮັດໃຫ້ຂະບວນການໂຫຼດຊ້າລົງ. ໂດຍການລວມເອົາຫຼາຍຮູບພາບເຂົ້າໄປໃນຮູບພາບ sprite ດຽວ, ພວກເຮົາສາມາດຫຼຸດຜ່ອນຈໍານວນຄໍາຮ້ອງຂໍ HTTP ທີ່ຕ້ອງການເພື່ອໂຫລດຫນ້າ. ນີ້ສາມາດສົ່ງຜົນໃຫ້ເວັບໄຊທ໌ໄວຂຶ້ນແລະຕອບສະຫນອງຫຼາຍຂຶ້ນ, ໂດຍສະເພາະສໍາລັບເວັບໄຊທ໌ທີ່ມີຮູບພາບຂະຫນາດນ້ອຍຫຼາຍເຊັ່ນໄອຄອນແລະປຸ່ມ.
ການນໍາໃຊ້ CSS sprites ຍັງອະນຸຍາດໃຫ້ພວກເຮົາໃຊ້ປະໂຍດຈາກຖານຄວາມຈໍາຂອງຕົວທ່ອງເວັບ. ເມື່ອຜູ້ໃຊ້ໄປຢ້ຽມຢາມເວັບໄຊທ໌, ຕົວທ່ອງເວັບຂອງພວກເຂົາຈະ cache ຮູບພາບ sprite ຫຼັງຈາກການຮ້ອງຂໍຄັ້ງທໍາອິດ. ນີ້ຫມາຍຄວາມວ່າການຮ້ອງຂໍຕໍ່ໄປສໍາລັບອົງປະກອບສ່ວນບຸກຄົນໃນຫນ້າເວັບທີ່ກໍາລັງໃຊ້ຮູບພາບ sprite ຈະໄວຂຶ້ນຫຼາຍເພາະວ່າຕົວທ່ອງເວັບຈະມີຮູບພາບຢູ່ໃນ cache ຂອງມັນແລ້ວ.
CSS Sprites ບໍ່ເປັນທີ່ນິຍົມເທົ່າທີ່ເຄີຍມີມາ
CSS sprites ຍັງຖືກນໍາໃຊ້ທົ່ວໄປເພື່ອປັບປຸງຄວາມໄວຂອງເວັບໄຊທ໌, ເຖິງແມ່ນວ່າພວກເຂົາອາດຈະບໍ່ເປັນທີ່ນິຍົມເທົ່າທີ່ເຄີຍເປັນ. ເນື່ອງຈາກແບນວິດສູງ, ເວັບ ຮູບແບບ, ການບີບອັດຮູບພາບ, ເຄືອຂ່າຍການຈັດສົ່ງເນື້ອຫາ (CDN), ການໂຫຼດຂີ້ກຽດ, ແລະ ການເກັບຂໍ້ມູນທີ່ເຂັ້ມແຂງ ເຕັກໂນໂລຢີ, ພວກເຮົາບໍ່ເຫັນ CSS sprites ຫຼາຍເທົ່າທີ່ພວກເຮົາເຄີຍໃຊ້ຢູ່ໃນເວັບ ... ເຖິງແມ່ນວ່າມັນຍັງເປັນຍຸດທະສາດທີ່ດີ. ມັນເປັນປະໂຫຍດໂດຍສະເພາະຖ້າທ່ານມີຫນ້າທີ່ອ້າງອີງຫຼາຍຮູບພາບຂະຫນາດນ້ອຍ.
ຕົວຢ່າງ CSS Sprite
ເພື່ອໃຊ້ CSS sprites, ພວກເຮົາຈໍາເປັນຕ້ອງກໍານົດຕໍາແຫນ່ງຂອງແຕ່ລະຮູບພາບພາຍໃນໄຟລ໌ຮູບພາບ sprite ໂດຍໃຊ້ CSS. ນີ້ປົກກະຕິແລ້ວແມ່ນເຮັດໄດ້ໂດຍການຕັ້ງຄ່າ background-image
ແລະ background-position
ຄຸນສົມບັດສໍາລັບແຕ່ລະອົງປະກອບໃນຫນ້າເວັບທີ່ໃຊ້ຮູບພາບ sprite. ໂດຍການລະບຸຈຸດປະສານງານ x ແລະ y ຂອງຮູບພາບພາຍໃນ sprite, ພວກເຮົາສາມາດສະແດງຮູບພາບສ່ວນບຸກຄົນເປັນອົງປະກອບແຍກຕ່າງຫາກໃນຫນ້າ. ນີ້ແມ່ນຕົວຢ່າງ… ພວກເຮົາມີສອງປຸ່ມຢູ່ໃນໄຟລ໌ຮູບພາບດຽວ:
ຖ້າຫາກວ່າພວກເຮົາຕ້ອງການຮູບພາບທາງຊ້າຍເພື່ອໃຫ້ໄດ້ຮັບການສະແດງ, ພວກເຮົາສາມາດສະຫນອງ div ໄດ້ arrow-left
ເປັນຫ້ອງຮຽນດັ່ງນັ້ນຈຸດປະສານງານພຽງແຕ່ສະແດງດ້ານນັ້ນ:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
ແລະຖ້າພວກເຮົາຕ້ອງການສະແດງລູກສອນທີ່ຖືກຕ້ອງ, ພວກເຮົາຈະກໍານົດຫ້ອງຮຽນສໍາລັບ div ຂອງພວກເຮົາ arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
CSS Sprites ສໍາລັບຮູບແບບແສງສະຫວ່າງແລະຊ້ໍາ
ຫນຶ່ງໃນການນໍາໃຊ້ທີ່ຫນ້າສົນໃຈນີ້ແມ່ນກັບໂຫມດແສງສະຫວ່າງແລະຊ້ໍາ. ບາງທີເຈົ້າມີໂລໂກ້ ຫຼືຮູບທີ່ມີຕົວໜັງສືມືດໃສ່ມັນທີ່ເບິ່ງບໍ່ເຫັນໃນພື້ນຫຼັງມືດ. ຂ້າພະເຈົ້າໄດ້ເຮັດຕົວຢ່າງນີ້ຂອງປຸ່ມທີ່ມີສູນກາງສີຂາວສໍາລັບໂຫມດແສງສະຫວ່າງແລະສູນກາງຊ້ໍາສໍາລັບໂຫມດຊ້ໍາ.
ການນໍາໃຊ້ CSS, ຂ້ອຍສາມາດສະແດງພື້ນຫລັງຮູບພາບທີ່ເຫມາະສົມໂດຍອີງໃສ່ວ່າຜູ້ໃຊ້ກໍາລັງໃຊ້ໂຫມດແສງສະຫວ່າງຫຼືໂຫມດຊ້ໍາ:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
ຂໍ້ຍົກເວັ້ນ: ລູກຄ້າອີເມວອາດຈະບໍ່ສະຫນັບສະຫນູນສິ່ງນີ້
ບາງລູກຄ້າອີເມລ໌, ເຊັ່ນ Gmail, ບໍ່ສະຫນັບສະຫນູນຕົວແປ CSS, ເຊິ່ງຖືກນໍາໃຊ້ໃນຕົວຢ່າງທີ່ຂ້ອຍສະຫນອງໃຫ້ເພື່ອປ່ຽນລະຫວ່າງໂຫມດແສງສະຫວ່າງແລະຊ້ໍາ. ນີ້ຫມາຍຄວາມວ່າທ່ານອາດຈະຕ້ອງໃຊ້ເຕັກນິກທາງເລືອກເພື່ອປ່ຽນລະຫວ່າງຮຸ່ນທີ່ແຕກຕ່າງກັນຂອງຮູບພາບ sprite ສໍາລັບຮູບແບບສີທີ່ແຕກຕ່າງກັນ.
ຂໍ້ຈໍາກັດອີກອັນຫນຶ່ງແມ່ນວ່າບາງລູກຄ້າອີເມວບໍ່ສະຫນັບສະຫນູນຄຸນສົມບັດ CSS ບາງຢ່າງທີ່ຖືກນໍາໃຊ້ທົ່ວໄປໃນ CSS sprites, ເຊັ່ນ: background-position
. ນີ້ສາມາດເຮັດໃຫ້ມັນຍາກທີ່ຈະຈັດຕໍາແຫນ່ງຮູບພາບສ່ວນບຸກຄົນພາຍໃນໄຟລ໌ຮູບພາບ sprite.