CSS CSS3 HTML5 XHTML and Web Accessibility Design : ThaiCSS http://thaicss.com เรียนรู้, CSS3 CSS เขียนเว็บไซท์แบบ High Accessibility ด้วย XHTML, HTML5 ปรับแต่งหน้าเว็บด้วย CSS ให้ได้ตามมาตรฐาน Web Standards ของ W3C พร้อม Semantics Web Wed, 02 May 2012 09:37:00 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 เริ่มจริงจังกับการเรียนรู้พื้นฐาน CSS กันเถิด http://thaicss.com/%e0%b9%80%e0%b8%a3%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87%e0%b8%88%e0%b8%b1%e0%b8%87%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2/ http://thaicss.com/%e0%b9%80%e0%b8%a3%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87%e0%b8%88%e0%b8%b1%e0%b8%87%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2/#comments Mon, 30 Apr 2012 07:59:34 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1842 หลังจากที่ผมเขียนเรื่อง "แนวทางการเรียนรู้ CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด" เอาไว้เมื่อ 2 ปีที่ผ่านมา (2010) ถึงตอนนี้ผมยังคิดว่าแม้กระทั่งผู้เขียนอย่างผมเองยังต้องตั้งคำถามกับตัวเอง ว่าเรานั้นไปตามเส้นทางแบบนั้นอย่างจริงจังหรือไม่ บทความที่ว่าก่อนหน้านั่นอาจจะดูคร่าวๆ ไปหน่อยสำหรับผู้ที่เริ่มจากพื้นฐานจริงๆ วันนี้ผมมีเรื่องราวที่แยกย่อยลงไปเพื่อนำมาบอกเล่าแลกเปลี่ยนกันเพิ่มเติมครับ ซึ่งเรื่องราวนี้จะมุ่งเน้นไปยัง "หลักการการเรียนรู้ แยกแยะ จดจำ วีธีการทำงานของ CSS3 หรือ CSS4" ตามที่เรารู้กันเป็นอย่างดี ในความแตกต่างของ CSS2 กับ CSS3 แต่เอ๊ะ ใครยังไม่รู้ความแตกต่างบางข้อที่ทำให้ภาษานี้แตกต่างกันอย่างมากขอรับ ยกมือหน่อย "ผมรู้ว่าคุณยกมือในใจ"

Permalink

]]> http://thaicss.com/%e0%b9%80%e0%b8%a3%e0%b8%b4%e0%b9%88%e0%b8%a1%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%87%e0%b8%88%e0%b8%b1%e0%b8%87%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2/feed/ 2 การเรียงลำดับ Headings และ ทำ Sectioning ใน HTML5 http://thaicss.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2%e0%b8%87%e0%b8%a5%e0%b8%b3%e0%b8%94%e0%b8%b1%e0%b8%9a-headings-%e0%b9%81%e0%b8%a5%e0%b8%b0-sections-%e0%b9%83%e0%b8%99-html5/ http://thaicss.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2%e0%b8%87%e0%b8%a5%e0%b8%b3%e0%b8%94%e0%b8%b1%e0%b8%9a-headings-%e0%b9%81%e0%b8%a5%e0%b8%b0-sections-%e0%b9%83%e0%b8%99-html5/#comments Mon, 23 Jan 2012 06:58:33 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1741

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

Permalink

]]> http://thaicss.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%80%e0%b8%a3%e0%b8%b5%e0%b8%a2%e0%b8%87%e0%b8%a5%e0%b8%b3%e0%b8%94%e0%b8%b1%e0%b8%9a-headings-%e0%b9%81%e0%b8%a5%e0%b8%b0-sections-%e0%b9%83%e0%b8%99-html5/feed/ 3 CSS Calculations การใช้ Functional Notations – CSS calc() http://thaicss.com/css3-calculations-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89-functions-%e0%b8%84%e0%b8%b3%e0%b8%99%e0%b8%a7%e0%b8%93%e0%b8%82%e0%b8%ad%e0%b8%87-css-calc/ http://thaicss.com/css3-calculations-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89-functions-%e0%b8%84%e0%b8%b3%e0%b8%99%e0%b8%a7%e0%b8%93%e0%b8%82%e0%b8%ad%e0%b8%87-css-calc/#comments Fri, 16 Dec 2011 08:40:27 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1712 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 = ? ก็ช่างมัน

Permalink

]]> http://thaicss.com/css3-calculations-%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89-functions-%e0%b8%84%e0%b8%b3%e0%b8%99%e0%b8%a7%e0%b8%93%e0%b8%82%e0%b8%ad%e0%b8%87-css-calc/feed/ 0 CSS4 มาแล้ว เปิดหัวกับ CSS Selectors Level 4 http://thaicss.com/css4-%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7-%e0%b9%80%e0%b8%9b%e0%b8%b4%e0%b8%94%e0%b8%ab%e0%b8%b1%e0%b8%a7%e0%b8%81%e0%b8%b1%e0%b8%9a-css-selectors-level-4/ http://thaicss.com/css4-%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7-%e0%b9%80%e0%b8%9b%e0%b8%b4%e0%b8%94%e0%b8%ab%e0%b8%b1%e0%b8%a7%e0%b8%81%e0%b8%b1%e0%b8%9a-css-selectors-level-4/#comments Mon, 14 Nov 2011 06:46:29 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1696

เมื่อวันที่ ทาง W3C ได้ประกาศ Working Draft สำหรับ CSS4 ออกมาอีก 1 หมวด ซึ่งนั่นก็คือ CSS4 ที่เป็น Selectors นั่นเอง

อะไรนะ CSS4 อีกแล้วเหรอเนี่ย!!! หลายคนคงอยากอุทานออกมาเป็นภาษามนุษย์ต่างดาว เพราะทุกวันนี้ CSS3 เรายังไม่ได้ใช้กันจนหมดทุกหมวดหมู่เลย ทำไมมันก้าวไปถึงขั้น CSS4 กันแล้ว

ผมขอย้อนกลับไปยัง CSS2, CSS2.1 จนมาถึง CSS3 กันก่อนนะครับ

Permalink

]]> http://thaicss.com/css4-%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7-%e0%b9%80%e0%b8%9b%e0%b8%b4%e0%b8%94%e0%b8%ab%e0%b8%b1%e0%b8%a7%e0%b8%81%e0%b8%b1%e0%b8%9a-css-selectors-level-4/feed/ 8 ทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions http://thaicss.com/%e0%b8%97%e0%b8%b3%e0%b9%81%e0%b8%9c%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css3-transitions/ http://thaicss.com/%e0%b8%97%e0%b8%b3%e0%b9%81%e0%b8%9c%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css3-transitions/#comments Fri, 19 Aug 2011 09:19:11 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1675 วันนี้ผมเปิดคอมพิวเตอร์ขึ้นมา แล้วตามด้วยบราวเซอร์อย่าง Firefox หลังจากนั้น  Firefox ได้ทำการแจ้งเตือนอัพเดทเป็นเวอร์ชั่น 7 (Beta) ผมเลยนึกขึ้นได้ว่า ผมมีตัวอย่างการทดลองเขียน CSS3 สไตล์ง่อยๆ อยู่อันหนึ่งซึ่งเขียนไว้เมื่อวันที่ 16 พฤศจิกายน 2553 ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chrome และ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ

Permalink

]]> http://thaicss.com/%e0%b8%97%e0%b8%b3%e0%b9%81%e0%b8%9c%e0%b8%99%e0%b8%97%e0%b8%b5%e0%b9%88%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b8%87%e0%b9%88%e0%b8%b2%e0%b8%a2%e0%b9%86-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css3-transitions/feed/ 1 CSS แบบไม่ไปไหน มาไหน http://thaicss.com/css-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b9%84%e0%b8%9b%e0%b9%84%e0%b8%ab%e0%b8%99-%e0%b8%a1%e0%b8%b2%e0%b9%84%e0%b8%ab%e0%b8%99/ http://thaicss.com/css-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b9%84%e0%b8%9b%e0%b9%84%e0%b8%ab%e0%b8%99-%e0%b8%a1%e0%b8%b2%e0%b9%84%e0%b8%ab%e0%b8%99/#comments Mon, 15 Aug 2011 06:06:40 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1667 Permalink

]]> http://thaicss.com/css-%e0%b9%81%e0%b8%9a%e0%b8%9a%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b9%84%e0%b8%9b%e0%b9%84%e0%b8%ab%e0%b8%99-%e0%b8%a1%e0%b8%b2%e0%b9%84%e0%b8%ab%e0%b8%99/feed/ 1 HTML5 <section> element – การใช้ section ใน HTML5 http://thaicss.com/html5-section-element/ http://thaicss.com/html5-section-element/#comments Fri, 17 Jun 2011 06:01:33 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1648 section อาจจะเป็น Element ที่คนทำเว็บนำมาใช้แบบผิดๆ ได้อย่างง่าย ถ้าหากทำความเข้าใจแค่ผิวเผินหรือ ดูจากชื่อของ Element เท่านั้น หลายคนนำ section มาใช้แบ่ง แยก ส่วนหน้าของเว็บออกจากกัน ซึ่งเป็นสิ่งที่ไม่ถูกต้อง แล้วการใช้งานที่ถูกต้องหละ คืออะไร <section></section> มีไว้เพื่อ แยก ส่วนที่แตกต่างกันของเนื้อหาที่อยู่ใน บทความ ออกจากกัน ไม่ได้มีไว้เพื่อแบ่งหน้า เช่น

Permalink

]]> http://thaicss.com/html5-section-element/feed/ 3 HTML5 Text-level semantics http://thaicss.com/html5-text-level-semantics/ http://thaicss.com/html5-text-level-semantics/#comments Thu, 09 Jun 2011 08:41:12 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1607 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 ออกไป

Permalink

]]> http://thaicss.com/html5-text-level-semantics/feed/ 3 การใช้ font-face ในหน้าเว็บ http://thaicss.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89-font-face-%e0%b9%83%e0%b8%99%e0%b8%ab%e0%b8%99%e0%b9%89%e0%b8%b2%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a/ http://thaicss.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89-font-face-%e0%b9%83%e0%b8%99%e0%b8%ab%e0%b8%99%e0%b9%89%e0%b8%b2%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a/#comments Mon, 06 Jun 2011 03:42:57 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=1598 สวัสดีครับ พ่อยก แม่ยกทั้งหลาย วันนี้มาแบบ สั้นๆ ง่ายๆ ห้วน ๆ ด้วนๆ เพราะสันดานมันฟ้อง "อะไรก็ได้ ง่ายๆ"

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

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

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

Permalink

]]> http://thaicss.com/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%83%e0%b8%8a%e0%b9%89-font-face-%e0%b9%83%e0%b8%99%e0%b8%ab%e0%b8%99%e0%b9%89%e0%b8%b2%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a/feed/ 3 CSS3 basic box model ตอนที่ 1 http://thaicss.com/css3-basic-box-model-1/ http://thaicss.com/css3-basic-box-model-1/#comments Thu, 19 May 2011 05:31:27 +0000 Sitthiphorn Anthawonksa http://thaicss.com/?p=924 รูปแบบของอะไรก็ตามที่เกิดขึ้นแบบ "กล่อง" คงเป็นการง่ายสำหรับการอธิบายคำว่า 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 ก่อนนะครับ

Permalink

]]> http://thaicss.com/css3-basic-box-model-1/feed/ 7