อยากรู้จริงว่า CSS เราถึงขั้นไหนแล้ว

ปรกติทุกวันก็นั่งดูเว็บนั่นเว็บนี่ หาความรู้ใส่ตัว แล้ววันนึงก็ไปสะดุดกับ Banner ตัวนี้

Unmatchedstyle CSS

แน่นอนว่าไม่รีรอที่จะคลิ๊กเข้าไปดู แล้วก็พบว่ามันเป็นการแข่งกันทำ CSS >_< Unmatchedstyle CSS

มีการให้คะแนนงานที่ทำมาด้วย ตอนนั้นรู้สึกเลยว่า เราทำ CSS มายังไม่เคยมีใครให้คะแนนเราแบบจริงจังเลย งานนี้ละมีคนให้คะแนนเราแล้ว เข้าไปดูหลักการให้คะแนนของเค้า เค้าจะแบ่งเป็นหัวข้อหลัก 4 หัวข้อ ตัดสินโดยกรรมการ 3 ท่าน คะแนนเต็ม 100 คะแนน โดยแต่ละหัวข้อมีดังนี้

Code

User Experience

Browser Support & Optimization

Responsiveness

ส่วนกรรมการนั้น ยอมรับว่ารู้จักอยู่แค่ 2 ท่าน คือ Chris Coyier แห่ง CSS Tricks กับ Christopher Schmitt ซึ่งเป็นจัดงาน CSSSummit ที่ผ่านมา โดยผลงานนึง ๆ จะมีกรรมการ 3 ท่านจากการสุ่มจากกรรมการทั้งหมด 13 ท่าน

กรรมการ

และตัว PSD ที่จะให้เราใช้งานนั้นก็ Design โดย Paravel

Paravel

เมื่อเป็นการแข่งขันก็ต้องมีรางวัล โดยที่ 1 ก็จะได้รางวัลดังนี้

รางวัล

แต่เป้าหมายที่ตั้งไว้ ตอนนี้ต้องการแค่ติด Top 25 ก็พอใจแล้ว เพราะว่าถ้าคะแนนติด Top 25 เค้าจะนำผลงานเราไปแปะไว้ที่หน้าเว็บเค้าด้วย

อ่านมาถึงตรงนี้แล้ว ถ้าอยากสมัครแข่งเหมือนกัน ก็เข้าไปที่เว็บ CSS Off เลย โดยเมื่อสมัครแล้วก็รอ PSD ในวันพุธที่ 20 ตุลาคม และส่งผลงานได้วันสุดท้าย วันพุธที่ 3 พฤศจิกายน [หรือเข้าไปอ่านกฎนะครับ]

inherit คืออะไร

หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ

มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ แต่ก่อนจะรู้จัก inherit เรามาดูก่อนว่าเวลาเราเขียน CSS เนี่ยแต่ละส่วนมันเรียกว่าอะไรกันบ้าง

CSS ประกอบด้วยอะไรบ้าง

[css]
#my-div {
font-size : 16px;
color : #F00;
}
[/css]

สำหรับ #my-div เราเรียกมันว่า Selectors ก็คือเหมือนชี้เป้าหมายว่า ตัวนี้นะจะต้องมีคุณสมบัติตามใน { } ของชั้นนะ

ต่อมาคือ font-size, color เราเรียกมันว่า Properties ซึ่งจริง ๆ แล้ว CSS มี Properties อีกมากมาย แต่นี่เป็นการยกตัวอย่างมาเท่านั้น โดย Properties ก็ทำหน้าที่บอกหัวข้อคุณสมบัติ อย่างเช่น font-size ก็คือบอกหัวข้อคุณสมบัติว่า Selector ตัวนี้ต้องมีขนาดของตัวอักษร … เป็นต้น

สุดท้ายก็คือ 16px, #F00 เราเรียกมันว่า Value ซึ่งทำหน้าที่บอกว่าค่าให้คุณสมบัตินั้น ๆ อย่างเช่น font-size:16px; ก็แสดงว่าต้องการให้มีขนาดตัวอักษรที่ 16px เป็นต้น

แล้ว inherit คืออะไร

inherit นั้นเป็น Value ซึ่งถ้าตามหลัง Properties ตัวไหน มันก็จะสืบทอดค่ามาจาก parent โดย Properties ที่มีค่า Default ของตัวเองเป็น inherit นั้นได้แก่

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • font
  • letter-spacing
  • list-style-type
  • list-style-position
  • list-style-image
  • list-style
  • line-height
  • orphans
  • page-break-inside
  • quotes
  • text-align
  • text-indent
  • text-transform
  • visibility
  • white-space
  • widows
  • word-spacing

ถ้าเริ่มงง ๆ แล้วไม่เป็นไรครับ เดี๋ยวทำตัวอย่างให้ดู

[css]
#my-div {font-size:16px;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

เราจะได้ผลลัพธ์ออกมาเป็น

จะเห็นว่าตัวอักษรใน p มีขนาด 16px เพราะว่าตัว font-size นั้นมันมีค่า default value เป็น inherit ดังนั้นจึงดึงค่า font-size มาจาก parent ของมัน ซึ่งก็คือ #my-div

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;}
[/css]

[html]
<div id="my-div">
<p>Aenean, vel mus ac, vel est, duis tincidunt risus ultrices in, natoque, natoque porttitor ut turpis turpis eros, etiam quis velit magna, egestas integer. Vel! Risus rhoncus augue tristique ac vel tristique? <a href="#">Test Link ?</a></p>
</div><!– my-div –>
[/html]

คราวนี้เรามีเพิ่มกรอบให้ #my-div จะได้ผลลัพธ์ออกมาเป็นแบบนี้นะครับ

ถ้าเกิดเราใส่ค่าให้ #my-div p มี border:inherit; ละผลจะเป็นยังไง

[css]
#my-div {font-size:16px;border:2px solid #000;}
#my-div p {color:#F00;border:inherit;}
[/css]

จะเห็นได้ว่า p ก็ไปดึงค่า border มาจาก parent ซึ่งก็คือ #my-div มาใช้งานด้วย

สิ่งที่ควรรู้เพิ่มเติมสำหรับ inherit

  • Browser ที่ไม่ Support ค่า inherit นั้นก็มี IE6 กับ IE7
  • ใช้ inherit กับ shorthand properties ไม่ได้

แถม : shorthand properties คืออะไร

มันก็คือการเขียนให้สั้นลงของ CSS อย่างเช่น

[css]
#my-border {
border-width : 2px;
border-style : solid;
border-color : #F00;
}
[/css]

เราสามารถเขียนให้สั้นลงได้ให้กลายเป็น

[css]
#my-border {
border : 2px solid #F00;
}
[/css]

ซึ่งค่า inherit ไม่สามารถใส่ค่าลงไปแบบนี้ได้

[css]
#my-border {
border : 2px inherit #F00;
}
[/css]

CSS : มารู้จัก Float กัน

float จะมี property 4 ตัว คือ

float

  • left ก็คือ สั่งให้ลอยชิดซ้าย
  • right คือ สั่งให้ลอยชิดขวา
  • inherit คือ ค่าที่สืบทอดมา
  • none คือ ไม่ต้องลอย [ซึ่งปรกติ element ทั่วไปจะเป็น none]

ลองมาดูตัวอย่างของคำสั่ง float แล้วกัน ว่ามันใช้งานแล้วได้ผลลัพธ์เป็นแบบไหน

ตัวอย่าง

จะเห็นว่า รูปของยูริ จะลอยอยู่ทางด้านขวาของหน้าเว็บตามที่เราสั่งไว้

ลองมาดูตัวอย่างต่อไปนะครับ ถ้าเรามี div สามตัว เหมือนใน ตัวอย่าง

ถ้าเราต้องการให้มันมาลอยชิดกัน เราก็ไปสั่งมันแบบนี้ [div ทั้งสามตัวมี class ชื่อ block นะครับ]

ซึ่งผลลัพธ์ที่ได้จะเป็นแบบนี้ ตัวอย่าง

div ทั้งสามตัวก็มาลอยเรียงติดกันอย่างสวยงาม

แล้วถ้า float มันใช้งานง่ายแบบนี้ มันจะมีปัญหาอะไรละ เราลองไปดูบ้าง ว่าปัญหาที่เจอมันจะเป็นแบบไหน

จาก code แล้ว เราจะต้องมีสี่เหลี่ยมให้เห็นทั้งหมดสี่อัน แต่ถ้าดูจาก ตัวอย่าง แล้ว

เราจะพบว่า มีสี่เหลี่ยมให้เราเห็นเพียงสามอันเท่านั้น เนื่องจาก item-1 และ item-2 ลอยชิดซ้ายกันอยู่ ส่วน item-3 นั้นอยู่ใต้ item-1 ที่ลอยอยู่ ทำให้เราไม่เห็น item-3

ดังนั้นจึงมีอีกคำสั่ง clear มาเพื่อแก้ปัญหานี้ โดย clear นั้นจะมี property 5 ตัว คือ

clear

  • left คือ ไม่ให้มีอะไรลอยอยู่ด้านซ้าย
  • right คือ ไม่ให้มีอะไรลอยอยู่ด้านขวา
  • both คือ ไม่ให้มีอะไรลอยอยู่ทั้งสองด้าน
  • none คือ อยากจะลอยก็ลอย ตูไม่ยุ่ง
  • inherit คือ ค่าที่สืบทอดมา

ดังนั้นเราลองมาเพิ่มคำสั่ง clear ไปให้ item-3 กันดีกว่า โดยเราจะใส่ดังนี้

เราจะได้ผลลัพธ์ดังนี้ ตัวอย่าง

ที่เราสั่ง clear:left; เพราะว่า เรามองว่ามี item-1 และ item-2 ลอยอยู่ด้านซ้ายของ item-3 เราจึงสั่งไม่ให้มีอะไรมาลอยอยู่ด้านซ้ายของ item-3

คราวนี้เรามาลองประยุกต์ใช้งานจริง โดยเราแบ่งเว็บออกเป็น 4 ส่วนดังนี้

  • header อยู่ด้านบน
  • content อยู่ตรงกลางด้านซ้าย
  • sidebar อยู่ตรงกลางด้านขวา
  • footer อยู่ด้านล่าง

เราก็จะได้เว็บตามที่เราวางโครงไว้ ตัวอย่าง

แต่ถ้าเกิดเราลืมใส่ clear:both; ให้ footer ละ จะเกิดอะไรขึ้น ตามไปดู ตัวอย่าง กันเลยครับ

จะเห็นว่าตัว footer จะไปอยู่ทางด้านขวาแทนที่จะอยู่ด้านล่างอย่างที่เราต้องการ โดยตัว content และ sidebar จะลอยบังส่วนของ footer ไว้ และเหลือให้เราเห็นในส่วนที่ content และ sidebar ไม่ได้บัง

เรามาลองดูอีกปัญหานึงที่น่าจะได้เคยพบเจอกัน ลองดูจาก ตัวอย่าง นะครับ

ถ้าเราดูจาก code แล้ว ต้องจะมีพื้นหลังสีดำให้เราเห็น แต่จากที่เราดูในตัวอย่าง จะไม่เห็นพื้นหลังสีดำเลย วิธีแก้ไขก็มีอยู่หลายวิธี แต่จะขอนำเสนออยู่สองแบบ คือ

  • ใช้ overflow:hidden
  • ใช้ clearfix

overflow:hidden

ให้เราใส่ overflow:hidden ใน #wrapper ตัวอย่าง

clearfix

ให้เราใส่ class=”clearfix” ใน div id=”wrapper” และเพิ่ม CSS ของ class=”clearfix” เข้าไป ตัวอย่าง