Sitthiphorn Anthawonksa

ทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

ดวงอาทิตย์ตกดิน ข้างซ้ายมีตึก Cyber World กำลังก่อสร้าง

วันนี้ผมเปิดคอมพิวเตอร์ขึ้นมา แล้วตามด้วยบราวเซอร์อย่าง Firefox หลังจากนั้น  Firefox ได้ทำการแจ้งเตือนอัพเดทเป็นเวอร์ชั่น 7 (Beta) ผมเลยนึกขึ้นได้ว่า ผมมีตัวอย่างการทดลองเขียน CSS3 สไตล์ง่อยๆ อยู่อันหนึ่งซึ่งเขียนไว้เมื่อวันที่ 16 พฤศจิกายน 2553

ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chrome และ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ

CSS แบบไม่ไปไหน มาไหน

ความอึดอัดที่เกิดขึ้นหลังจากมองมายัง Drafts ของบทความที่รายเรียงอยู่ พลอยทำให้หมดอาลัยตายอยากกับความคึกคะนองครั้งก่อน ส่วนหนึ่งนั้นเป็นเหตุจากความเกียจคร้านที่มักจะเดินสวนทางกับอายุที่เพิ่มมากขึ้น พร้อมกับหงุดหงิดที่ บราวเซอร์ทั้งหลายนั้นมันไม่ยอมแสดงผล ไม่รองรับ CSS เวอร์ชั่นใหม่ๆ เท่าใดนัก พลอยทำให้บทความที่เริ่มเขียนไปได้ครึ่งทาง ก็ค้างไว้อย่างนั้น ต้องรอ รอจนกว่าบราวเซอร์เหล่านั้น จะเดินทางมาพร้อมกัน

อาจจะใช้เวลา สามปี ห้าปี หรือสิบปี ก็ค่อยๆ ว่ากัน

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

หลายท่านถามใถ่มา ว่าบทความใหม่เมื่อไหร่คลอด ตัวผมเองนั้นก็คงยังตอบไม่ได้ ไปเรื่อยๆ อย่างนี้ก่อน เมื่อไหร่ก็เมื่อนั้น หรืออาจจะไม่มีมาอีกเลย

ผมอาจจะต้องหนีหายไปหาแรงบันดาลใจใหม่ๆ วิธีการใหม่ๆ ในการนำเสนอเรื่องราวของ CSS นี้ มิใช่เพื่อผู้เสพ แต่เพื่อความคึกคะนองของผู้เขียนเอง

อยากจะทำอะไรหลายๆ อย่างกับเว็บนี้ แต่พอถึงเวลามันก็เป็นเพียงแค่ อยากจะ … เท่านั้น รอก่อน รอไปเรื่อยๆ

มีความสุขกับการใช้ชีวิตครับ

HTML5 <section> element – การใช้ section ใน HTML5

section อาจจะเป็น Element ที่คนทำเว็บนำมาใช้แบบผิดๆ ได้อย่างง่าย ถ้าหากทำความเข้าใจแค่ผิวเผินหรือ ดูจากชื่อของ Element เท่านั้น

หลายคนนำ section มาใช้แบ่ง แยก ส่วนหน้าของเว็บออกจากกัน ซึ่งเป็นสิ่งที่ไม่ถูกต้อง แล้วการใช้งานที่ถูกต้องหละ คืออะไร

<section></section> มีไว้เพื่อ แยก ส่วนที่แตกต่างกันของเนื้อหาที่อยู่ใน บทความ ออกจากกัน ไม่ได้มีไว้เพื่อแบ่งหน้า เช่น

HTML5 Text-level semantics

html5's wbr tag displayed in web broesers

HTML5 Text-level semantics คือการเอากลุ่มของภาษา html4 ผสมกับ xhtml2 แล้วเอาสิ่งที่มีมาตีความใหม่ ใส่ความหมายเข้าไปให้กับ Element ที่มีอยู่ก่อนแล้วเพื่อให้ Elements ต่างๆ มีความหมายในตัวของมัน

ก่อนหน้านี้ใน HTML4 Elements บางส่วนที่ถือกำเนิดขึ้นนั้น มีอยู่เพื่อการแสดงผลด้าน Screen โดยไม่ได้คำนึงถึงความหมายที่แฝงอยู่ เช่น b เอาไว้ทำตัวหนา i เอาไว้ทำตัวเอียง u เอาไว้ขีดเส้นใต้

ส่วน XHTML ที่สร้าง Element อย่างเช่น strong หรือ em เข้ามาใหม่ ได้ลบ b และ i ออกไป

การใช้ font-face ในหน้าเว็บ

สวัสดีครับ พ่อยก แม่ยกทั้งหลาย วันนี้มาแบบ สั้นๆ ง่ายๆ ห้วน ๆ ด้วนๆ เพราะสันดานมันฟ้อง “อะไรก็ได้ ง่ายๆ”

เราจะมา เอา “ตัวหนังสือ” เข้าไปใส่ในหน้าเว็บกัน

IE7 และ IE8 ก็ใช้ได้ด้วย แต่จริงๆ แล้วบราวเซอร์ทั้งสองตัวนี้ รองรับการ @font-face {} มานานแล้วนะครับ ที่ไม่ค่อยใช้กันเพราะว่า มันไม่รับ font แบบ .TTF (TrueType) แม่เจ้ารู้จักแต่ .EOT (OpenType) นี่มาตรฐาน M$ เค้าหละ

วิธีการใช้งานก็ปกติ ธรรมดา แค่เราต้องเอา Font ที่เป็น .ttf ที่มี ไปแปลงเป็น .eot เสียก่อน

CSS3 basic box model ตอนที่ 1

รูปแบบของอะไรก็ตามที่เกิดขึ้นแบบ “กล่อง” คงเป็นการง่ายสำหรับการอธิบายคำว่า Box Model จากการที่ 2 ภาษา เกิดมาแยกกัน HTML มีค่าพื้นฐานมาก่อน แต่ CSS สามารถเข้าไปแก้ไขปรับแต่ง HTML ได้ในภายหลัง

Element ของ HTML ที่มีค่าพื้นฐานนี้ก็เหมือนกันเกือบ หรือ ทุกๆ Elements ของ HTML สามารถสั่งงานด้วย Box model module ได้ อยู่ที่ว่าเราจะสั่งงานให้มันเป็นอะไรและมีความหมายในเชิง “Semantics” และการสื่อสารของข้อมูลในโลก WWW ยังไง ในเมื่อทุกอย่างต้องผ่านการตีความ เช่น

  • อยากจะสั่ง <span> ให้แสดงผลเป็น Block ก็ย่อมทำได้ แต่ต้องดูว่าในโครงสร้าง HTML นั้นมันเหมาะสมหรือไม่
  • อยากจะให้ <section> ให้แสดงเป็น inline ก็ย่อมทำได้ แต่ต้องดูว่า ทำไปเพื่ออะไร

ประเภทการแสดงผลของ กล่อง

CSS3 ทุกอย่างถือเป็น Box แต่การแสดงผลต่างกัน (CSS2 inline element ถือเป็น text level อันเดียวกันแต่อย่าสับสน)

ตัวอย่าง Box model

อยากให้ กล่อง เป็นแบบไหน ให้สั่ง Display เอา และ display เป็น Property แรกที่จะขอพูดถึง แต่คงจะไม่ได้อธิบาย “ค่า” ที่เกิดขึ้นทั้งหมดในตอนนี้ โดยเฉพาะในหมวดหมู่การสั้งงานที่แสดงผลในกลุ่ม table และ ruby ผมขอพูดถึงเรื่องของ inline | block | inline-block | run-in และ none ก่อนนะครับ

Back to Top