ความรู้เบื้องต้นเกี่ยวกับความหมาย ข้อดี และข้อเสียของ CSS Sprites สำหรับเลย์เอาต์ CSS

เทคโนโลยี 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 แสดงถึงการลดขนาดลง เราจำเป็นต้องจับคู่พวกมันกับรูปภาพที่สวยงามที่สอดคล้องกัน (เพื่อให้เว็บไซต์ของเราน่าดึงดูด):

ทั้งสองคลาสใช้อิมเมจเดียวกัน:

เราเห็นก้อนเมฆสีเทา ใช่แล้ว เนื่องจากเราไม่ได้ระบุตำแหน่งพื้นหลังซึ่งมีค่าเริ่มต้นอยู่ที่ 0 0 คุณสามารถดูได้ที่ sprite.png ตำแหน่งนี้คือบล็อกสีเทา โอเค เราจำเป็นต้องหาตำแหน่งของเครื่องหมายบวกที่แสดงถึงการขยายใหญ่สุด และเครื่องหมายลบที่แสดงถึงการลดขนาด หลังการวัด ปุ่มขยายขนาดจะอยู่ที่ 350px บนแกน Y และปุ่มย่อจะอยู่ที่ 400px บนแกน Y ลองคิดดูว่าเราจะทำให้มันแสดงได้อย่างไร แน่นอนว่าเราจำเป็นต้องอัปเกรด sprite.png และโค้ดจะเป็นดังนี้:

ครั้งนี้เราทำสำเร็จ!

ข้อดีของ CSS สไปรท์

เราได้เรียนรู้จากก่อนหน้านี้ว่าเหตุใด CSS Sprites จึงหมดพลังกะทันหันนั้นเกี่ยวข้องกับความสามารถในการปรับปรุงประสิทธิภาพของเว็บไซต์ แน่นอนว่านี่คือข้อดีอย่างหนึ่งของมัน ขณะนี้รูปภาพจำนวนมากภายใต้วิธีการผลิตแบบธรรมดาถูกรวมเป็นรูปภาพเดียว ซึ่งช่วยลดจำนวนการเชื่อมต่อ HTTP ได้อย่างมาก จำนวนการเชื่อมต่อ HTTP มีผลกระทบสำคัญต่อประสิทธิภาพการโหลดของเว็บไซต์

ข้อเสียของ CSS Sprites

ในส่วนของการบำรุงรักษา โดยทั่วไปแล้วนี่เป็นดาบสองคม บางคนอาจชอบและบางคนอาจไม่ชอบเพราะทุกครั้งที่เปลี่ยนรูปภาพจะต้องลบหรือเพิ่มเนื้อหาลงในรูปภาพซึ่งดูยุ่งยากเล็กน้อย และการคำนวณตำแหน่งของรูปภาพ (โดยเฉพาะรูปภาพที่มีหลายพันพิกเซล) ก็ค่อนข้างไม่เป็นที่พอใจเช่นกัน แน่นอนว่าภายใต้สโลแกนของการปฏิบัติงาน สิ่งเหล่านี้สามารถเอาชนะได้

เนื่องจากตำแหน่งของรูปภาพจำเป็นต้องถูกกำหนดให้เป็นค่าสัมบูรณ์ ความยืดหยุ่น เช่น จุดศูนย์กลางจึงสูญเสียไป

ดังที่เราได้กล่าวไปแล้ว ขนาดของกล่องต้องถูกจำกัดก่อนจึงจะสามารถใช้ CSS Sprites ได้ มิฉะนั้นอาจรบกวนรูปภาพได้ กล่าวคือ CSS Sprites ไม่เหมาะในบางสถานการณ์ที่จำเป็นต้องมีพื้นหลังแบบเรียงต่อกันแบบไม่มีทิศทางเดียวและการปรับขนาดหน้าเว็บ วิธีแก้ปัญหาของ YUI คือการเพิ่มระยะห่างระหว่างรูปภาพเพื่อให้สามารถรักษาขนาดที่จำกัดไว้ได้

สรุป CSS Sprites

ประสิทธิภาพเหนือกว่าสิ่งอื่นใด CSS Sprites เป็นเทคโนโลยีที่ควรค่าแก่การส่งเสริม เหมาะอย่างยิ่งสำหรับ FIR เช่นการเปลี่ยนไอคอนขนาดคงที่ เพื่อรักษาความเข้ากันได้ เป็นความคิดที่ดีที่จะแยกส่วนของภาพออกจากกัน