CSS Sprites

ใจจริงอยากจะเขียนบทความนี้ตั้งแต่ที่ได้ยินคุณโยส(Boss) พูดถึงแล้ว ตอนแรกที่เข้าไปประชุม เจ้านายก็ถามว่ารู้จัก CSS sprites ไหม เราก็สั่นหัวอย่างงงงงงงงง นึกในใจมันคือไรฟ่ะ hahaha เจ้านายด้วยความเป็นคนดีก็อธิบายให้ฟัง แต่เด็กกระเหรี่ยงอย่างเรา จับใจความรู้มั่งไม่รู้มั่ง(ส่วนใหญ่จะไม่รู้เรื่องซะมากกว่า) พอเลิกประชุมก็ลอง Search ใน google เลย แต่ไม่ค่อยแน่ใจว่า Sprites มันสะกดยังไง ตัดสินใจเดินเข้าไปถามนายดีกว่า เอาให้ชัวร์ หลังจากนั้นก็หาบทความเกี่ยวกับ CSS Sprites
Oh!!!!!! อ่านไปอ่านมา โถถถถถถถถถ....เราเคยเขียน css มาก่อนแล้ว แต่เมื่อก่อนไม่รู้ว่าเขาเรียก CSS Sprites เพราะเจ้านายญี่ปุ่นสอนเทคนิคการเขียนเว็บให้ save HTTP requests (โง่อีกแล้วเรา ทำไมถึงไม่รู้ว่าเขาเรียก CSS Sprites นะ) เอาเป็นว่ามาดู Code กันเลยดีกว่า

มารู้กันก่อนว่าเราทำไมถึงต้องเขียน CSS Sprites ขึ้นมา เป็นเพราะมันช่วยลด HTTP requests ได้เป็นอย่างดีเลยเชียวล่ะ เวลาคุณโหลดเว็บหนึ่งตัวคุณจะใช้เวลา 5% ถึง 38% เอง ไม่งั้นคุณจะต้องใช้เวลาโหลด 62%-95% ของหน้าเว็บนั้น ๆ โอ้วๆๆมันชั่งใช้เวลาที่แตกต่างกันโดยสิ้นเชิง ดูตัวอย่างกันเลย....

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


ปกติแล้ว ถ้าเราเห็นรูปที่เป็น icon แบบนี้ เราจะตัดรูปเป็นชิ้น ๆ แต่การเขียน css แบบนี้ เราจะไม่ตัดรูปออกเป็นชิ้นเด็ดขาด เราจะตัดให้เป็นรูปเดียวกันหมด ดังรูป

/*-----Code CSS------*/
#nav li {
    list-style-type:none;
    font-size:2em;
}

#nav li a {
    background-image:url('../img/image_nav.gif');
    background-repeat:no-repeat;
    padding:18px 90px;
    line-height:80px;
}

#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover।item1 {background-position:0px -72px;}

#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

#nav li a.item3 {background-position:0px -287px;}
#nav li a:hover.item3 {background-position:0px -359px;}

#nav li a.item4 {background-position:0px -431px;}
#nav li a:hover.item4 {background-position:0px -503px;}

#nav li a.item5 {background-position:0px -575px;}
#nav li a:hover.item5 {background-position:0px -647px;}

<ul id="nav">
     <li><a class="item1" href="#" title="Link 1">Item 1</a></li>
     <li><a class="item2" href="#" title="Link 2">Item 2</a></li>
     <li><a class="item3" href="#" title="Link 3">Item 3</a></li>
     <li><a class="item4" href="#" title="Link 4">Item 4</a></li>
     <li><a class="item5" href="#" title="Link 5">Item 5</a></li>
</ul>

ดูแรก ๆ แล้วอาจจะงงนะ แต่ต้องค่อย ๆ เข้าใจในเรื่องแกน x กับ y
อธิบาย Code หลัก ๆ กันดีกว่า
1.  #nav li เราจะกำหนดในเรื่อง type ของ list ซะก่อน
2.  #nav li a ในเมนูของเราทุกตัวต้องเป็นลิงค์ ดังนั้น เราจะให้ลิงค์ทุกตัวมีภาพ
3.  มาถึง class ของแต่ละตัวเลย เมื่อ #nav เป็น li และมีลิงค์ <a> เรียก class ชื่อว่า item[เลข] ดังนั้น เราไม่จำเป็นที่จะต้องเรียก bg อีกรอบ เราสามารถกำหนด position ของ bg นั้น ๆ ได้เลย เพราะเราได้เรียกรูปภาพตั้งแต่ #nav li a (ข้อที่2)ดังนั้น
List ที่ 1 ต้องมี position เป็น 0 และ 0 เมื่อเรานำเมาส์ไป hover ที่ List เราต้องเปลี่ยนภาพ ดังนั้นเราจึงตั้ง position เป็น 0 และ -72px position 0 ตัวแรกคือแนวนอน ส่วน positon -72px คือแนวตั้ง ทำไมถึง -72px เพราะ 72px เป็นความสูงของรูป เราติดลบเพราะต้องการให้รูปขยับขึ้นข้างบน ดังนั้นเมื่อเมาส์ไป over รูปจะเปลี่ยนทันที
List ที่ 2 position ที่ยังไม่ hover ทำไมถึงเป็น 0 กับ -143px ค่าของ 143px มาจาก 72+71 และเมื่อ hover ค่าตัวเลขก็จะเปลี่ยนไปอีก ก็คือนำ 72+71+72 ก็จะได้ 215 ดังนั้นการคำนวณ position ของรูปก็เป็นสิ่งสำคัญ และปัจจัยอีกอย่างก็คือ การตัดรูปภาพ ถ้าอยากจะให้ง่ายขึ้น คุณควรจะตัดรูปภาพให้มีขนาดของความสูงเท่ากัน และไม่ต้องมีระยะห่างของรูปก็ได้ จะทำให้เราคำนวณได้ง่ายขึ้นอีกเยอะ