Sitthiphorn Anthawonksa

หลักการอื่นๆ ในการเขียน tags ของ HTML5

บทความที่บอกเล่าเพิ่มเติมในบางเรื่องเล็กๆ น้อยๆ ที่หลายคนอาจจะอยากรู้ คือเรื่อง Html5 Omitted Tags หรือ Tags ของ HTML5 ที่เราสามารถเขียนลงไปก็ได้ ไม่เขียนก็ได้ ปิดก็ได้ ไม่ปิดก็ได้ จะมีอะไรนั้นลองกวดสายตาดูครับ

HTML Figure และ Figcaption

เชื่อว่าหลายคนคงเคยเห็น <figure> ของ HTML ผ่านตามาบ้างแล้ว เช่นเดียวกันหลายคนก็อาจจะยัง งง กับการใช้งานของ tag <figure> และ <figcaption> อยู่ บางคนอาจจะคิดว่ามันสามารถใช้คู่กับ <img> เท่านั้น ซึ่งเป็นไอเดียที่ถูกไม่หมดสักทีเดียว

วันนี้ผมจะขอแลกเปลี่ยนสั้นๆ เล็กน้อยๆ ตามประสาอีกเช่นเคย ซึ่งจริงๆ แล้วที่ผมมาเขียทิ้งไว้ก็เพราะว่าผมกลัวตัวเองลืมมากกว่า (รวมไปถึงบทความที่เคยเขียนที่ผ่านๆ มาด้วย)

<figure> ตามหลักการของภาษา HTML แล้ว หมายถึง การแสดงให้เห็นเป็นภาพ ส่วน <figcaption> นั้น คือ การอธิภายสิ่งที่เป็นภาพนั้นเพิ่มเติม

CSS3 Transition Timing Functions

ราวบันได

วันนี้ผมอยากจะมาบอกเล่า แลกเปลี่ยนอะไรสั้นๆ ครับ ในเรื่องของ Timing Functions ของ CSS3 นั่นก็คือ Function ที่เอาไว้คอยกำหนดรูปแบบการ “เปลี่ยนผ่าน” จากจุดหนึ่งไปยังจุดหนึ่ง นั่นเอง ซึ่งมีทั้งหมด 9 แบบ ที่ผมนำเรื่องนี้กลับมาพูดอีกครั้งเพราะว่าได้ใช้เรื่อง Transitions ของ CSS3 อย่างจริงจังแล้วในตอนนี้ เพราะหลายบริษัทเน้นทำ Web เพื่อ iPad หรือ ดรอยด์ Tablet รุ่นใหม่ๆ ในเมื่อบราวเซอร์สามารถรองรับ CSS3 ได้ก็ใช้ให้เกิดประโยชน์ซะเลย ไม่จำเป็นต้องไปพึ่งพา jQuery ให้หนักเกินไป

เริ่มจริงจังกับการเรียนรู้พื้นฐาน CSS กันเถิด

หลังจากที่ผมเขียนเรื่อง “แนวทางการเรียนรู้ CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด” เอาไว้เมื่อ 2 ปีที่ผ่านมา (2010) ถึงตอนนี้ผมยังคิดว่าแม้กระทั่งผู้เขียนอย่างผมเองยังต้องตั้งคำถามกับตัวเอง ว่าเรานั้นไปตามเส้นทางแบบนั้นอย่างจริงจังหรือไม่

บทความที่ว่าก่อนหน้านั่นอาจจะดูคร่าวๆ ไปหน่อยสำหรับผู้ที่เริ่มจากพื้นฐานจริงๆ

วันนี้ผมมีเรื่องราวที่แยกย่อยลงไปเพื่อนำมาบอกเล่าแลกเปลี่ยนกันเพิ่มเติมครับ ซึ่งเรื่องราวนี้จะมุ่งเน้นไปยัง “หลักการการเรียนรู้ แยกแยะ จดจำ วีธีการทำงานของ CSS3 หรือ CSS4”

ตามที่เรารู้กันเป็นอย่างดี ในความแตกต่างของ CSS2 กับ CSS3 แต่เอ๊ะ ใครยังไม่รู้ความแตกต่างบางข้อที่ทำให้ภาษานี้แตกต่างกันอย่างมากขอรับ ยกมือหน่อย “ผมรู้ว่าคุณยกมือในใจ”

การเรียงลำดับ Headings และ ทำ Sectioning ใน HTML5

flying fire

ปัญหาน่าปวดหัวอีกอย่างของการเขียน HTML หรือ XHTML นั่นก็คือ “การจัดการ เลือกใช้ header ของ HTML” เพราะว่าทั้งสองภาษานั้นมี Header มาให้ถึง 6 ตัว (h1-h6) ก่อนหน้านี้ผมก็เคยเขียนออกมาให้ตาเห็นบ้างแล้วว่าการใช้ h1-h6 นั้น ชื่อมันก็บอกว่าหนึ่งถึงหก แต่ลืมเขียนเรื่องง่ายๆ อีกเรื่องนั่นคือการตีความการทำ sectioning ของ heading

CSS Calculations การใช้ Functional Notations – CSS calc()

ป้ายโรงม้า

CSS3 มี Values and Units Module แยกย่อยออกมาเพื่อกำหนด “หน่วย” ของค่าต่างๆ มากมาย “หน่วย” ในที่นี้ก็เช่น px, em, %, cm, gr, fr, deg, rem, vh และอื่นๆ อีกมากมาย โดยที่ความเก๋าและเฉพาะทางของ CSS3 ที่ Module นี้แถมมาด้วยก็คือ การนำเอา “หน่วย” ที่ต่างๆ กันนั้นมา “ทำการคำนวณ” (calc();) เพื่อหาค่าที่ลงตัวใหม่ได้

พูดง่ายๆ ก็เช่น สมมุติว่าเรามีกล่องในอุปกรณ์เครื่องเขียน ซึ่งมีความยาว 100% ของที่มีอยู่ข้างในเราต้องการกำหนดความยาวให้เป็นดังนี้ ดินสอยาว 3cm ยางลบยาว 40px ปากกายาว 100% – 3cm – 40px จากโค้ดตัวอย่าง อันบ้าบิ่นและไม่สมเหตุสมผลนี้ ความยาวของปากกา ก็จะมีค่าเท่ากับ 100% – 3cm – 40px = ? ก็ช่างมัน

Back to Top