เทคนิคการเร่งความเร็ว CSS ตอนที่ 3
1.ใช้ CSS แบบย่อจะช่วยให้มีการทำงานเร็วกว่า
div {
border-color: red;
border-style: solid;
border-width: 1px;
}
div {
border: 1px solid red;
}วิธีด้านล่างคือการเขียนแบบย่อ (Short hand) ซึ่งจะทำให้การประมวลผลเร็วกว่าแบบแรก และ ไฟล์ CSS มีขนาดเล็กกว่าด้วย
2.หลีกเลี่ยงการมี Selector หลายๆชั้น เนื่องการการเขียน CSS ยิ่งมากอันดับก็จะทำให้ Browser ต้องทำการตรวจสอบความถูกต้องของ element ในอันดับที่สูงขึ้นตามกฏ เป็นจำนวนมาก
div ul li a {
}
tr > td > a {
}3.หลีกเลี่ยง การใช้ Universal Selector (*) เนื่องจากมันจะทำให้ CSS มีผลกับทุก Element โดยไม่จำเป็น
* {
}
div > * {
}หลีกเลี่ยงการกำหนด ชื่อ tag ให้กับ Selector แบบ id
div#test {
}โค้ดด้านบน div ไม่มีความจำเป็นต้องใส่ เนื่องจาก #test เพียงอย่างเดียวก็สามารถกำหนด CSS ไปยัง element ที่ถูกต้องได้แล้ว เนื่องจาก #test จะมีเพียงตัวเดียวในหน้าเว็บ ทำให้เราไม่จำเป้นต้องตรวจสอบอีกว่ามันเป็น div หรือไม่
4.หลีกเลี่ยงการใช้ pseudo-selector เช่น :hover กับ tag ที่ไม่ใช่ลิงค์ เนื่องจากบน IE ที่ต่ำกว่า 8 จะไม่สามารถใช้งาน property นี้ได้
li:hover {
}