CSS Tricks ที่ต้องรู้สำหรับขั้นสูง

1. Absolute positioning inside a relative positioned element.
การใส่ absolute อยู่ใน relative เราต้องกำหนดคำนวณตำแหน่งให้กับ absolute นี้เป็นเทคนิคที่เยี่ยมมากทีเดียว
สำหรับการ stick ตำแหน่งที่คุณต้องการ


สามารถอ่านเพิ่มเติม
PositionisEverything
W3 Specifications

2. Z-Index and positioning
มีหลายครั้งที่ designers ชอบ design object ซ้อนกัน หรือทับกัน z-index ก็เป็นวิธีที่ช่วยได้อีกหนึ่งอย่าง
สำหรับ web develop ข้อจำกัดในการใช้ z-index นั้น เราต้องกำหนดค่าของ position ด้วย ไม่ดังนั้น z-index จะไม่ทำงานได้
จำไว้ง่าย ๆ ว่า ถ้ามี z-index ก็ต้องมี position ตามมาด้วย มันเป็นกฎของตัวมันเอง


สามารถอ่านเพิ่มเติม
Z-index Screencast
W3 Specifications

3. Margin Auto
มีใครหลาย ๆ คนสงสัยว่าอยากจะให้ box element อยู่ตรงกลางยังไง หลาย ๆ คนเข้าใจผิดว่าใช้ text-align:center จะทำให้ box element อยู่ตรงกลาง อันนั้นเป็นสิ่งที่เข้าใจผิดกันมากมาย เมื่อคุณอยากได้ div ตัวหนึ่งที่มี ความกว้าง 200px ให้อยู่ตรงกลาง ดังนั้นคุณควรจะใส่ margin-left:auto;margin-right:auto;
แค่นี้เท่านั้นเอง....คุณจะได้ div ตัวนั้นอยู่ตรงกลางหน้าจอ เห็นม่ะไม่ยากเลยสักนิด แต่คุณต้องทำความเข้าใจในเรื่อง text-align:center กับการใช้ margin-left:auto;margin-right:auto;
นะ แต่สิ่งสำคัญ div ทื่คุณอยากให้อยู่ตรงกลาง คุณต้องตั้ง width ด้วยนะ อย่าลืมเด็ดขาดดดดดดดดดด


สามารถอ่านเพิ่มเติม
Margin auto described

4. Use Padding Carefully and Appropriately
หนึ่งความผิดพลาดของหลาย ๆ คนนั้นคือ การใช้ padding กับ box element แล้วลืมคำนวณตัวของ box ที่คุณสร้างขึ้นมา ดังนั้นทำให้ box ตัวที่คุณสร้างขึ้นมา มีความกว้างกว่าปกติหรือเปล่า
อะ ๆ ๆ ๆ ลองกับไปดู css ของคุณจิ สมมุติว่าคุณสร้าง css ชื่อว่า

#box1{
widht:200px;
padding:30px;
}

box1 ของคุณจะมีความกว้างเท่าไร ที่แน่ ๆ box1 ของคุณไม่ได้มีค่าความกว้างแค่ 200px แต่จะมีค่าเท่ากับ 200+30+30 = 260px นั้นเอง padding:30px จะแตกออกมาเป็น

padding-top:30px; (ด้านบน)
padding-right:30px; (ด้านขวา)
padding-bottom:30px; (ด้านล่าง)
padding-left:30px; (ด้านซ้าย)

ดังนั้น เราต้องเอาค่า 30 ด้านซ้ายกับขวามาบวกกับ 200 นั้นเอง....จงจำไว้ว่าต้องเอาค่า padding มาบวกกับ width ที่คุณได้กำหนดไว้

สามารถอ่านเพิ่มเติม
W3 Padding Properties

5. Hiding text using text-indent
มาคุยเรื่องนี้กันดีกว่า เมื่อเว็บของคุณมี logo บนเว็บไซต์ <h1> ควรจะมี images logo ของคุณอยู่ใน tag นี้ ซึ่งจะดีสำหรับ SEO และจะช่วยในเรื่อง search engines ให้อ่านง่ายมากขึ้นด้วย อย่างไรก็ตาม พวกเราก็ไม่ต้องการเห็น text อยู่ใน tag <h1>อยู่ดีแต่ text-indent เป็นเทคนิคที่ดีอีกอย่างหนึ่งที่เราสามารถนำมาใช้ได้ ตัวอย่างคือ

h1{
text-indent:-9999px; /*--Hide Text, Keep for SEO--*/
width:948px;
background:url("images/logo.gif") no-repeat;
}

แน่นอนเลยว่าคุณสามารถใส่ text เข้าไปใน <h1>Logo Company</h1>แล้ว text ใน h1 ก็จะไม่ปรากฎ แต่จะแสดงให้เห็นรูปภาพเป็น logo ของคุณเอง

สามารถอ่านเพิ่มเติม
SitePoint-Using text-indent

6. IE Double Float Margin Bugs
ฉันแน่ใจได้เลยว่า ทุกคนต้องเคยเจอปัญหาแบบนี้มาก่อนแน่นอน นี้เป็นการ "Hacks" css อีกอย่างหนึ่ง ฉันคิดว่าทุกคนต้องได้ใช้แน่นอน bug นี้จะเกิดขึ้นกับ IE6 อย่างเดียว เมื่อคุณให้ box element หนึ่งตัว float:left แล้วคุณตั้ง margin-right:10px;margin-right จะ doubled เข้าไปเป็น 20px ทันที ดังนั้น คุณสามารถใส่ display:inline ให้กับ box element ที่คุณสร้างขึ้นมา ดูตัวอย่างกันดีกว่า

.yourclass{
float:left;
widht:350px;
margin:20px 10px 15px 100px;
display:inline; /*--Hacks For IE6*/
}

สามารถอ่านเพิ่มเติม
Doubled Margin-Causes and Fixes.

7. CSS Cross Browser Transparency
เชื่อหรือไหม การใช้ css สำหรับ transparency ให้ support ทุก browser มันง่ายมากมาย

.yourClass {
filter:alpha(opacity=50);/*Needed for IE*/
-moz-opacity:0.5;/*Older mozilla broswers like NN*/
-khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/
opacity: 0.5;/*FF, Safari, and Opera*/
}

สามารถอ่านเพิ่มเติม
CSS Opacity Settings

8. Use CSS Image Sprites
CSS image sprites มันเป็นทางเลือกที่น่าอัศจรรย์ในการโหลด images มาใช้ในครั้งเดียว เป็นการช่วยลด http requests และ file size......เรื่องนี้คงไม่ต้องอธิบายมากมาย เพราะเคยเขียนไว้แล้ว ลองกลับไปดูตัวอย่างที่เคยเขียนไว้แย้วกันเนอะ



9. The *HTML hack
ถ้าคุณไม่ต้องการจะเพิ่มลิงค์ css สำหรับ IE6 อีกตัว เราสามารถ hack css ลงไปในไฟล์ css ที่เรามีอยู่ได้เลย และจะไม่มีผลกระทบต่อ IE ตัวอื่น ๆ ด้วย

* html body div#sidebar{
display:inline;
}

สามารถอ่านเพิ่มเติม
More on the Star HTML Bug
Explanation of the star HTML Bug