วิธีใช้ CSS Sprites ด้วยโหมดสว่างและมืด
CSS สไปรต์เป็นเทคนิคหนึ่งที่ใช้ในการพัฒนาเว็บเพื่อลดจำนวน HTTP คำขอที่ทำโดยหน้าเว็บ โดยจะเกี่ยวข้องกับการรวมรูปภาพขนาดเล็กหลายๆ ภาพเป็นไฟล์รูปภาพขนาดใหญ่ไฟล์เดียว จากนั้นใช้ CSS เพื่อแสดงส่วนเฉพาะของรูปภาพนั้นเป็นองค์ประกอบแต่ละรายการบนหน้าเว็บ
ประโยชน์หลักของการใช้ CSS sprite คือสามารถช่วยปรับปรุงเวลาในการโหลดหน้าเว็บสำหรับเว็บไซต์ ทุกครั้งที่โหลดรูปภาพบนหน้าเว็บ จะต้องมีคำขอ HTTP แยกต่างหาก ซึ่งอาจทำให้กระบวนการโหลดช้าลงได้ ด้วยการรวมรูปภาพหลายรูปไว้ในรูปภาพสไปรต์เดียว เราสามารถลดจำนวนคำขอ HTTP ที่จำเป็นในการโหลดหน้าเว็บ สิ่งนี้สามารถส่งผลให้เว็บไซต์เร็วขึ้นและตอบสนองมากขึ้น โดยเฉพาะอย่างยิ่งสำหรับไซต์ที่มีรูปภาพขนาดเล็กจำนวนมาก เช่น ไอคอนและปุ่มต่างๆ
การใช้ CSS sprites ช่วยให้เราสามารถใช้ประโยชน์จากการแคชของเบราว์เซอร์ได้ เมื่อผู้ใช้เข้าชมเว็บไซต์ เบราว์เซอร์จะแคชภาพสไปรต์หลังจากคำขอแรก ซึ่งหมายความว่าคำขอที่ตามมาสำหรับแต่ละองค์ประกอบบนหน้าเว็บที่ใช้ภาพสไปรต์จะเร็วขึ้นมาก เนื่องจากเบราว์เซอร์จะมีภาพอยู่ในแคชอยู่แล้ว
CSS Sprites ไม่ได้รับความนิยมอย่างที่เคยเป็นมา
CSS sprites ยังคงใช้กันทั่วไปเพื่อปรับปรุงความเร็วไซต์ แม้ว่ามันอาจจะไม่ได้รับความนิยมเท่าที่เคยเป็นมา เนื่องจากแบนด์วิธสูง webp รูปแบบ การบีบอัดภาพ, เครือข่ายการส่งเนื้อหา (CDN), ขี้เกียจโหลดและ แคชที่แข็งแกร่ง เทคโนโลยี เราไม่เห็น CSS sprites มากเท่าที่เราเคยพบบนเว็บ… แม้ว่ามันจะยังคงเป็นกลยุทธ์ที่ยอดเยี่ยม มีประโยชน์อย่างยิ่งหากคุณมีหน้าเว็บที่อ้างอิงรูปภาพขนาดเล็กจำนวนมาก
ตัวอย่าง CSS Sprite
ในการใช้ CSS sprite เราจำเป็นต้องกำหนดตำแหน่งของแต่ละภาพภายในไฟล์ภาพ sprite โดยใช้ CSS โดยทั่วไปจะทำได้โดยการตั้งค่า background-image
และ background-position
คุณสมบัติของแต่ละองค์ประกอบบนหน้าเว็บที่ใช้ภาพเทพดา ด้วยการระบุพิกัด x และ y ของภาพภายในสไปรต์ เราสามารถแสดงภาพแต่ละภาพเป็นองค์ประกอบแยกต่างหากในหน้า นี่คือตัวอย่าง... เรามีสองปุ่มในไฟล์ภาพเดียว:
หากเราต้องการให้แสดงภาพทางด้านซ้าย เราสามารถจัดเตรียม 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 ซึ่งใช้ในตัวอย่างที่ฉันให้ไว้เพื่อสลับระหว่างโหมดสว่างและโหมดมืด ซึ่งหมายความว่าคุณอาจต้องใช้เทคนิคอื่นเพื่อสลับระหว่างภาพสไปรต์เวอร์ชันต่างๆ สำหรับชุดสีที่ต่างกัน
ข้อจำกัดอีกประการหนึ่งคือไคลเอนต์อีเมลบางตัวไม่รองรับคุณสมบัติ CSS บางอย่างที่ใช้กันทั่วไปใน CSS sprite เช่น background-position
. ซึ่งอาจทำให้การวางตำแหน่งภาพแต่ละภาพภายในไฟล์ภาพสไปรต์ทำได้ยาก