การตั้งค่าและคำนวณ Box Model และการใช้ box-sizing กับขนาดของ Element ใน CSS

ใน CSS จะมีเรื่อง Box Model ซึ่งจะเกี่ยวข้องกับเรื่องการกำหนดขนาดของ Element ลองมาดูตัวอย่างโค้ดนี้กัน ลองมาดูกันที่ .box-extend ผลที่ได้จะออกมาเป็นดังภาพนี้ครับ จากขนาดความกว้างที่ตั้งไว้, width: 500px และ padding: 50px ซึ่งค่า padding นี่จะถูกบวกเพิ่มไปทั้ง บน-ขวา-ล่าง-ซ้าย ด้านละ 50px ทำให้ผลรวมความกว้างของ element หรือ class นี้เท่ากับ 600px และจาก border-width: 10px ก็คิดแปปเดียวกันกับ padding คือบวกเพิ่มเข้าไปในชั้นนอกสุดของ element บน-ขวา-ล่าง-ซ้าย อีกด้านละ 10px รวมแล้วมีความกว้างทั้งหมด 620px เช่นเดียวกันกับ .box ซึ่งก็จะมี border มาเพิ่มให้ขวาซ้ายฝั่งละ 1px ลองใช้ Inspector และดู Box Model ของ .box-extend กันครับ…

nth-child ใช้ยังไง

:nth-child นี้จะสามารถใช้ใน element อะไรที่นับได้ เช่น unordered lists (ul) หรือ ordered lists (ol) โดยใช้เป็น selector ที่ชี้ไปยัง (list) li (หมายเหตุ: จะใช้กับ element อื่นๆก็ได้นะครับ แต่ส่วนตัวผมไม่ค่อยได้ใช้เท่าไหร่) ตัวอย่างเช่น ซึ่งโค้ดนี้จะ select ตัวที่อยู่ใน unordered lists ตัวที่ 3, 6, 9, 12 ให้มีตัวอักษรเป็นสีเขียว ว่าแต่โค้ดนั้นมีการทำงานอย่างไร?

Responsive Images with picturefill.js

ในปัจจุบัน เรื่อง Responsive Design เป็นเรื่องที่สำคัญมาก เนื่องจากการเข้าถึงโลกอินเทอร์เน็ตในปัจจุบันไม่ได้มาจาก Desktop อย่างเดียวแล้ว แต่มาจากอุปกรณ์ต่างๆ เช่น Mobile และ Tablet รวมถึงอุปกรณ์อื่นๆด้วย ซึ่งสิ่งที่นักพัฒนาและนักออกแบบควรจะทำก็คือ ปรับขนาดให้เหมาะสมกับขนาดหน้าจอที่หลากหลาย ซึ่งรวมไปถึงกระบวนการทำงานให้เหมาะสมด้วย เพราะอุปกรณ์ขนาดเล็ก โดยส่วนมากแล้วก็จะมีข้อจำกัดในเรื่องหน่วยประมวลผลซึ่งเล็กตามไปด้วย เราจึงต้องปรับอะไรกันเพิ่มเติมอีกหน่อยนอกเหนือจากการออกแบบเพียงอย่างเดียว โดยในบทความนี้จะกล่าวถึงเรื่องไฟล์รูปภาพที่จะเอามาทำให้เป็นแบบ Responsive กันครับ Picturefill.js Responsive Images เราสามารถทำได้โดยใช้ div ครับ แต่อย่างไรก็ตาม Picturefill (ผู้พัฒนาคือ Scott Jehl) จะสามารถทำงานได้ดีกับเบราว์เซอร์ที่รองรับ CSS3 media queries ครับ ซึ่งเบราว์เซอร์หลักที่เราจะใช้งานด้วยก็เป็นเบราว์เซอร์บน Mobile, Tablet อยู่แล้ว สำหรับ IE ยังคงต้องใช้วิธีอื่นอยู่ครับ และ Picturefill นี้จะทำงานได้เป๊ะขึ้นเมื่องานร่วมกับ matchMedia polyfill ครับ เพื่อให้รองรับ media-query สำหรับเบราว์เซอร์ที่ไม่มี…

Textualizer Experiment

วันนี้อยากแนะนำ jQuery plugin ที่มีความน่าสนใจตัวหนึ่งในการเล่นกับ Text นั่นคือ Textualizer พัฒนาโดย Kirollos Risk และนี่เป็น Official Website ของ Textualizer ครับ ลองเข้าไปดู มีลิ้งต่อให้ download และไปยังหน้า GitHub ด้วยครับ : ) และสำหรับที่ผมลองเอง สามารถดูได้ที่ Hassadee Pimsuwan’s Labs – Textualizer

เหตุผล 4 ข้อ ที่ควรใช้ HTML5

จากที่เราทราบกันว่าโลกนี้มันมี HTML5 เกิดขึ้นแล้ว และองค์กรใหญ่ๆในโลกไอทีก็ต่างสนับสนุน HTML5 ไม่ว่าจะเป็น Apple, Google หรือแม้กระทั่ง Microsoft และ Adobe โดยเฉพาะสำหรับ Microsoft ที่กำลังพัฒนา Windows 8 ซึงเป็นแบบ Metro ใช้ HTML5 ในการพัฒนาแอพ ยิ่งทำให้ HTML5 นั้นมีความสำคัญขึ้นอีกมากเลยทีเดียว นอกจากนี้ HTML5 ยังมีส่วนช่วยในเรื่องของ SEO (Search Engine Optimization) ช่วยเรื่องของ Search ranking ให้ดีขึ้น และในเรื่องของการรองรับกับอุปกรณ์เช่น Mobile หรือ Tablet ได้ดีขึ้น ช่วยเพิ่มความเร็วในการประมวลผลในการโหลดเว็บไซท์ได้ ซึ่งสิ่งต่างๆเหล่านี้สำคัญมากในปัจจุบัน ซึ่งตัว HTML5 เองนั้นก็ไม่ได้เป็น HTML Standard ที่มาตัวคนเดียวโดดๆซะเมื่อไหร่ เพราะ HTML5 นั้นได้มีการทำงานร่วมกันกับ CSS3 (Cascading Style…