HTML5-Structure-Selectors

  • id / class
    test speed id / class
  • validation
    W3C validation
  • design
    รูปดีไซน์ก่อนทำเป็น Html
  • Block-Level Elements with a
    Block-Level Elements with a
  • HTML5

โครงสร้าง Html5

ทริคเล็กๆน้อยๆครับ จากประสบการณ์ทำงานในช่วง 2 ปีที่ผ่านมา ลงลึกเจาะลายละเอียด เก็บเล็กผสมน้อย ลืมบ้าง จำได้บ้าง (ขอบพระคุณ Google) กว่าจะรู้ว่่า ไอ้ที่ทำแบบนี้เขาเรียกว่าอะไร ก็อ๋ออ ในทันที

web standard เป็นการทำเว็บตามมาตรฐานกลางตามเงือนไขของ W3C จริงๆเราจะทำพิสดารแบบไหนก็ได้นะ แค่ให้แสดงผลออกมาไม่แหกแค่นั้นเอง (ย้อนไปก่อนหน้านั้นคือทำแบบพิสดารมาตลอด ฮ่าๆ) ขอแค่ได้เริ่ม หลังจากนั้นก็ไปต่อได้หมดแหละ อยู่ที่ไปได้เร็ว หรือช้า แค่นั้นเอง (ประยุกต์)

เมื่อเข้าสู่ Html5 แรกๆก็ตกใจเป็นอีกระดับของภาษา html หรอ? ยากแน่ๆ พอได้ทำแค่นั้นแหละ… เริ่มจาก div class=”header” , div id=”main” ,div กันไปบลาๆ ซึ่งปัจจุบันเว็บทุกเว็บ div เหมือนกันหมด มี header,menu,main,container,content,footer ฯลฯ ต่อไปไม่ต้อง div แล้ว ใช้ header ตรงตัวไปเลย มันแค่นั้นจริงๆนะ แล้วก็ใช้ css ควบคุมเหมือนเดิม ง่ายดี แต่จริงๆแล้วที่บอกว่า ตัว standard html5 ยังมี bug อยู่ เวลาใช้ก็เลือกเอามาใช้แค่ feature ที่ไม่เป็นอะไร bug ที่ว่าคือ browser หรือเปล่า ความสามารถในการแสดงผล ซึ่งก็รู้ๆกันดีว่า browser ตัวไหน? ฮ่าๆ

1.W3C content-type
เป็นการวิเคราะห์ตัวโครงสร้างของ Structure Html5 ผมชอบตัวนี้มาก รู้สึกท้าทายดี ว่าที่เรา div กันมา มันจะจัดหมวดหมุ่ content ของเราได้ถูกต้องตามชนิดของกลุ่มหรือเปล่า เป็นประโยชน์ต่อการออกแบบมาก

รูปดีไซน์ก่อนทำเป็น Html

รูปดีไซน์ก่อนทำเป็น Html



W3C validation

รูปหลังจาก validate ออกมา


จากรูปจะเป็นการ validate code html ออกมาเป็น tree ในแต่ละ section จะมีแบ่งหัวข้อออกเป็นหมวดหมู่และเนื้อหาที่อยู่ด้านใน มีเนื้อหาอะไรบ้าง(ชอบ html5 ตรงนี้แหละ แอบ viewcode เว็บอื่นๆที่ติดอันดับดูแล้ว ก็จะได้ผล validate ออกมาสวยๆและดูดีทุกเว็บเลย)

2.ids/class
เคยสงสัยว่าการเลือกใช้ selection ของ id/class ต่างกันยังไง เพราะเวลาตัวผมทำ ผมก็มักจะใช้ class ตลอด แล้วก็มีท่านกูรู ได้วิเคราะห์ออกมาตามรูป

test speed id / class

test speed id / class


จากรูปก็จะเห็นว่า ความเร็วในการอ่านชื่อ selection มาแสดงผลบน browser ก็ได้ค่าความเร็วออกมา ซึ่ง
id จะมีความเร็วที่แตกต่างจาก class เล็กน้อย สาเหตุอาจจะมาจาก browser จะตรวจหา id ก่อน
ตามหลัก w3c
id จะใช้ซ้ำไม่ได้
class จะใช้ซ้ำได้ และใช้ได้ดีในเว็บไซต์ที่มีโครงสร้างขนาดใหญ่
เวลาเราเขียนโค๊ต ก็จะเลือกใช้ id เฉพาะส่วนที่เป็นเมเจอร์ ของ section นั้น ส่วน element ด้านในก็เลือกใช้ class มาวนใช้ซ้ำ
การอ่านชื่อ id/class
.test>nav>ul>a.active อ่านจากขวามาซ้าย

3.Block-Level Elements with a
การเอาลิ้งครอบ div ย้อนไปเมื่อก่อน ถือว่าผิด เพราะ property ของมันเป็น display:inline; ไม่เหมาะที่จะเอามาทำเป็น display:block; ที่ไม่เหมาะผมคิดว่าการแสดงผลบน browser อื่นน่าจะแหก ฮ่าๆ แต่พอมาถึงยุคของ Html5 นี่ใช้ได้ จากคอมเม้นของกูรูบอกว่า “Google has been doing this for a while I think (in their ads), so why not start as well…” กูเกิลเริ่มใช้แล้วใน ads ของพวกเขา ทำไมเราไม่ใช้กัน … ก็สรุปคือใช้ๆไปครับ แต่เลือกใช้ให้เหมาะสมตามดีไซน์

Block-Level Elements with a

Block-Level Elements with a

พรุ่งนี้มาต่อ
4.div class="col_news300 dd-shadow3 bd-radius3 clear" การ Optimize CSS
5.Advanced CSS selectors | .col-nist>li:first-child +*+*+*+* ,[ class*=p] ,[ class^=p] ,last-child
6.ที่เคยทำและนึกได้ ฯลฯ

Comments

comments

You may also like...

Leave a Reply

Your email address will not be published.