เทคโนโลยี CSS Sprites ในช่วงต้นปี 2548 Dave Shea เจ้าของ CSS Zengarden ได้เผยแพร่คำอธิบายโดยละเอียดเกี่ยวกับเทคโนโลยีนี้ใน ALA
เดิมทีมันถูกเผยแพร่ในหมู่ผู้เล่น CSS เป็นวิธีการผลิตเท่านั้น ต่อมามีกฎ 14 ข้อสำหรับเว็บไซต์ที่โหลดเร็วขึ้นและถูกเผยแพร่ในหมู่ช่างเทคนิค กฎข้อแรกสร้างคำขอ HTTP น้อยลง ซึ่งกล่าวถึง CSS Sprites ดังนั้นก็อบลินตัวน้อยนี้จึงได้รับความนิยม และแม้แต่เครื่องมือสร้างออนไลน์ก็ปรากฏขึ้น ซึ่งไม่มีใครหยุดยั้งได้ เมื่อเร็วๆ นี้ บล็อกในประเทศจำนวนมากได้กล่าวถึง CSS Sprites ตัวอย่างที่โด่งดังที่สุดคือภาพเคลื่อนไหวด้านล่าง google.co.kr ใน YUI รุ่นล่าสุด มีการใช้ CSS Sprites เกือบทั้งหมด ภาพตกแต่ง CSS จะถูกคลุมด้วยภาพขนาด 40×2000 Facebook ซึ่งเป็นเว็บไซต์โซเชียลเน็ตเวิร์กรายใหญ่ เพิ่งใช้รูปภาพขนาด 22×1150 เพื่อครอบคลุมไอคอนทั้งหมด ทันใดนั้น CSS Sprites ก็มีอยู่ทุกหนทุกแห่ง
CSS Sprites ทำงานอย่างไร
เรารู้ว่าตั้งแต่การปฏิวัติ CSS HTML มีแนวโน้มที่จะมีความหมาย โดยทั่วไป เนื้อหาการตกแต่งจะไม่ถูกเขียนในแท็กอีกต่อไป แต่งานการเรนเดอร์จะถูกส่งไปยัง CSS GUI มีสีสันและขาดไม่ได้ในการตกแต่งภาพสวยๆ ต่างๆ วิธีการผลิตในยุคใหม่คือการเติม HTML ด้วย hook ต่างๆ แล้วปล่อยให้ CSS จัดการ
เมื่อจำเป็นต้องใช้รูปภาพ ในปัจจุบันสามารถทำได้ผ่านแอตทริบิวต์ CSS background-image รวมกับ background-repeat, background-position เป็นต้น (การพูดนอกเรื่อง: ทำไมฉันต้องถอนขั้นตอนปัจจุบันออก เพราะหากเบราว์เซอร์รองรับเนื้อหาในอนาคต , วิธีการดำเนินการเพิ่มเติม) ตัวเอกของเราคือคุณต้องเดาตำแหน่งพื้นหลัง ด้วยการปรับค่าตำแหน่งพื้นหลัง ภาพพื้นหลังสามารถปรากฏต่อหน้าคุณได้ในรูปแบบต่างๆ ที่จริงแล้วรูปลักษณ์โดยรวมของภาพไม่ได้เปลี่ยนแปลงไป เนื่องจากตำแหน่งของภาพเปลี่ยนไป คุณจะเห็นเพียงสิ่งที่ควรเห็นเท่านั้น มันเหมือนกับวันที่บนนาฬิกา คุณเห็นเป็น 21 วันนี้และ 22 พรุ่งนี้ เพราะตำแหน่งกระโดดขึ้นมาหนึ่งช่อง คุณคงทราบแล้วว่า CSS Sprites โดยทั่วไปสามารถใช้ได้เฉพาะในกล่องขนาดคงที่ (กล่อง) เท่านั้น เพื่อให้สามารถบล็อกส่วนที่ไม่ควรมองเห็นได้
ลองใช้ sprite.png ของ YUI เป็นตัวอย่าง หากเรามีโค้ดดังกล่าว ค่า max แสดงถึงการขยายใหญ่สุด และ min แสดงถึงการลดขนาดลง เราจำเป็นต้องจับคู่พวกมันกับรูปภาพที่สวยงามที่สอดคล้องกัน (เพื่อให้เว็บไซต์ของเราน่าดึงดูด):
ขยายใหญ่สุด ย่อเล็กสุด |
ทั้งสองคลาสใช้อิมเมจเดียวกัน:
.นาที, .สูงสุด { ความกว้าง:16px; ความสูง:16px; ภาพพื้นหลัง: url (sprite.png); background-repeat: no-repeat; /*เราไม่ต้องการให้เรียงต่อกัน*/ text-indent:-999em; /*วิธีซ่อนข้อความ*/ - |
|