หลังจากที่ผมเขียนเรื่อง “แนวทางการเรียนรู้ CSS3 และ HTML5 ให้เกิดประโยชน์สูงสุด ” เอาไว้เมื่อ 2 ปีที่ผ่านมา (2010) ถึงตอนนี้ผมยังคิดว่าแม้กระทั่งผู้เขียนอย่างผมเองยังต้องตั้งคำถามกับตัวเอง ว่าเรานั้นไปตามเส้นทางแบบนั้นอย่างจริงจังหรือไม่
บทความที่ว่าก่อนหน้านั่นอาจจะดูคร่าวๆ ไปหน่อยสำหรับผู้ที่เริ่มจากพื้นฐานจริงๆ
วันนี้ผมมีเรื่องราวที่แยกย่อยลงไปเพื่อนำมาบอกเล่าแลกเปลี่ยนกันเพิ่มเติมครับ ซึ่งเรื่องราวนี้จะมุ่งเน้นไปยัง “หลักการการเรียนรู้ แยกแยะ จดจำ วีธีการทำงานของ CSS3 หรือ CSS4″
ตามที่เรารู้กันเป็นอย่างดี ในความแตกต่างของ CSS2 กับ CSS3 แต่เอ๊ะ ใครยังไม่รู้ความแตกต่างบางข้อที่ทำให้ภาษานี้แตกต่างกันอย่างมากขอรับ ยกมือหน่อย “ผมรู้ว่าคุณยกมือในใจ”
Permalink
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
เมื่อวันที่ 29 กันยายน 2554 ทาง W3C Working Draft CSS4 CSS4 ที่เป็น Selectors นั่นเอง
อะไรนะ CSS4 อีกแล้วเหรอเนี่ย!!! หลายคนคงอยากอุทานออกมาเป็นภาษามนุษย์ต่างดาว เพราะทุกวันนี้ CSS3 เรายังไม่ได้ใช้กันจนหมดทุกหมวดหมู่เลย ทำไมมันก้าวไปถึงขั้น CSS4 กันแล้ว
ผมขอย้อนกลับไปยัง CSS2 CSS2.1 CSS3 กันก่อนนะครับ
Permalink
วันนี้ผมเปิดคอมพิวเตอร์ขึ้นมา แล้วตามด้วยบราวเซอร์อย่าง Firefox หลังจากนั้น Firefox ได้ทำการแจ้งเตือนอัพเดทเป็นเวอร์ชั่น 7 (Beta) ผมเลยนึกขึ้นได้ว่า ผมมีตัวอย่างการทดลองเขียน CSS3 สไตล์ง่อยๆ อยู่อันหนึ่งซึ่งเขียนไว้เมื่อวันที่ 16 พฤศจิกายน 2553
ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chrome และ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ
Permalink
สวัสดีครับ พ่อยก แม่ยกทั้งหลาย วันนี้มาแบบ สั้นๆ ง่ายๆ ห้วน ๆ ด้วนๆ เพราะสันดานมันฟ้อง “อะไรก็ได้ ง่ายๆ”
เราจะมา เอา “ตัวหนังสือ” เข้าไปใส่ในหน้าเว็บกัน
IE7 และ IE8 ก็ใช้ได้ด้วย แต่จริงๆ แล้วบราวเซอร์ทั้งสองตัวนี้ รองรับการ @font-face {} มานานแล้วนะครับ ที่ไม่ค่อยใช้กันเพราะว่า มันไม่รับ font แบบ .TTF (TrueType) แม่เจ้ารู้จักแต่ .EOT (OpenType) นี่มาตรฐาน M$ เค้าหละ
วิธีการใช้งานก็ปกติ ธรรมดา แค่เราต้องเอา Font ที่เป็น .ttf ที่มี ไปแปลงเป็น .eot เสียก่อน
Permalink
รูปแบบของอะไรก็ตามที่เกิดขึ้นแบบ “กล่อง” คงเป็นการง่ายสำหรับการอธิบายคำว่า 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 อันเดียวกันแต่อย่าสับสน)
อยากให้ กล่อง เป็นแบบไหน ให้สั่ง Display เอา และ display เป็น Property แรกที่จะขอพูดถึง แต่คงจะไม่ได้อธิบาย “ค่า” ที่เกิดขึ้นทั้งหมดในตอนนี้ โดยเฉพาะในหมวดหมู่การสั้งงานที่แสดงผลในกลุ่ม table และ ruby ผมขอพูดถึงเรื่องของ inline | block | inline-block | run-in และ none ก่อนนะครับ
Permalink
หายหัวไปนาน เหล่านักเขียนที่ไม่ค่อยมีเวลาเขียนทั้งหลาย ไม่ใช่ขี้เกียจนะครับ แต่เวลามันไม่ค่อยสะดวก บางคนอาจจะสงสัยว่ามันต้องใช้เวลาเขียนนานขนาดนั้นเลยหรือในแต่ละบทความ คำตอบก็คือใช่ครับ
เพราะบางบทความเราเขียนกันข้ามเดือนก็ยังมี ที่สำคัญการงานก็ยุ่งๆ ยากๆ ไหนจะเวลาเล่นเฟสบุ๊คของเราอีก
โดยทั่วไป บทความจะเริ่มจากความสงสัยว่า ถ้าอย่างนั้น แล้วมันจะเป็นยังไง หลังจากสงสัยก็ ค้นหาคำตอบโดยการ “ลองเขียนตัวอย่าง” ซึ่งแหล่งข้อมูลหลักของพวกเราก็คือ W3C ตรงนี้แหละครับที่มันกินเวลานาน บางบทความเขียนเมื่อ 6 เดือนที่ผ่านมาตอนนี้ ผม (พร อันทะ) ก็ยังปล่อยให้มันเป็น Draft อยู่ รอ IE10 ก่อนค่อยว่ากัน
เมื่อได้ตัวอย่างเป็นอันพึงพอใจ ก็มาถึงภาระอันหนักอึ้งซึ่งก็คือ เขียนยังไงให้คนอ่านรู้เรื่อง!! ซึ่งตอนนี้ก็ยังเป็นงานยากของเราอยู่ แม้ว่า ThaiCSS จะเกิดตั้งแต่ปี 2006 ก็ตาม (อายุมากใช่ว่าจะเก่งเสมอไป เห็นได้ตามออฟฟิศที่พวกแก่ๆ แต่แม่มชอบเกรียน ชิมิ๊ฮาาาาว์ฟ)
ไม่มีอะไรใหม่ หลังสงกรานต์ นอกจากเสียดายที่ผม กับ แบงค์ไม่ได้ไปดูโชวเขย่าเต้าที่สีลมแล้ว เราก็ตกลงกันว่า จากนี้ไปอีก 10 บทความพวกเราจะเขียนเรื่อง Media (Queries) หรือ CSS สำหรับอุปกรณ์ประเภทต่างๆ กันไปก่อน
อาทิ เขียน CSS ให้ TV, Mobile, Printer, iPad, iPhone โดยเฉพาะเรื่องการเขียน CSS ให้กับโทรทัศน์นี่ หลังจากที่ผมเล่นมานานจะได้เอามาบอกต่อกันเสียที
ตอนนี้ก็เปิดด้วยเรื่อง Media Queries กันไปก่อนนะขอรับ โดยเป็นบทความจาก เชี่ยแบงค์ก่อน เพราะผมยังบ้าแต่งเพลงอยู่ เชิญแซ่บ…
Permalink
เมื่อก่อนหรือแม้แต่ตอนนี้หลายคนที่เข้ามาอ่านบทความคงแปลกใจว่า ทำไมผมเขียนบทความที่เกี่ยวกับเรื่อง Selectors ของ CSS ทั้งนั้น สาเหตุหลักๆ ก็เพราะว่า Property และ Value ของ CSS นั้นมันตายตัวครับ จำง่าย ทำบ่อยๆ ก็จำได้ มันไม่เปลี่ยนไปไหนนอกจาก W3C ได้เปลี่ยนเวอร์ชั่นของ CSS ใหม่ เพิ่มหรือลดลง แต่ถ้าเป็น Selectors แล้วนั้น เราไม่ค่อยได้เขียนซ้ำกันสักเท่าไหร่ในแต่ละงาน เพราะงานแต่ละชิ้นที่ทำนั้นมันมีความต่างในตัวของมันเอง เราจึงไม่สามารถใช้ Selector เดิมๆ ในการจัดการได้ แต่ ทั้ง properties และ values นั้น มันเหมือนเดิม
นั่นคือสาเหตุหลักๆ ที่ผมพยายามเน้นให้ท่านทั้งหลายทำความเข้าใจและลองปรับเปลี่ยนรูปแบบการสั่งงานของ CSS ด้วย Selectors ไปเรื่อย เพื่อจะได้หาความเหมาะสมกับงานได้
ในบทความนี้ก็เช่นกัน ทุกท่านจะเห็นว่าผมเขียน Selectors ของ CSS แปลกๆ มีแค่ Heading Level (X) เท่านั้นที่ถูกร้องขอให้มี Class
ยังเหมือนเดิม Class ของ HTML ไม่ได้มีไว้เพื่อให้เขียนคำสั่งของ CSS เข้าไป แต่เป็นการอนุโลมให้ใช้ได้ เพราะ Class เป็น Global Attribute เหมือนการเป็นของสาธารณะ ภาษาอื่นใดอยากมาใช้ก็เอาไปใช้ ไม่ว่ากัน
เพราะฉะนั้น การลด ขยะ Classes จึงถือเป็นความจำเป็นและเป็นหนึ่งในนโยบาย ประชาวิวัฒน์ ในยุค พ.ศ. 2554 ของเรา
ภาษา CSS มีความสามารถมากมายมาให้ใช้แล้ว ก็จงใช้ อย่าไปขยันน้อย ดันทุรังใช้แต่ Class และ ID Selectors ในการทำงาน
Permalink
Pseudo-elements ถูกสร้างขึ้นมาเพื่อเข้าถึงภาษาโครงสร้าง (xhtml, html, xml ฯลฯ) ที่ CSS Selectors อื่นๆ เข้าไม่ถึง ซึ่งใช้ในรูปแบบ การหลอกว่ามี element นั้นๆ อยู่ ซึ่งก่อนหน้านี้ “แบงค์ ” ได้เขียนอธิบายเรื่อง “เรียนรู้การใช้งาน CSS Generated Content” เอาไว้ โดยรูปแบบของ Selectors นั้นใช้ CSS2 และเน้นไปที่ :before และ :after ซึ่งทำงานได้เหมือนกัน
Pseudo-elements
::first-line คือ แถวแรก
::first-letter คือ ตัวแรก
::before คือ ก่อน (x)
::after คือ หลัง (x)
ประโยชน์หลักและโดดเด่นของ Selectors ชุดนี้คือการจัดการหน้าเอกสารในรูปแบบ นิตยสารออนไลน์ หรือ จัดหน้าให้คล้ายหรือเหมือนกับสื่อสิ่งพิมพ์ หรือจัดหน้าให้กับ Printer
Permalink
เร่เข้ามาครับ พ่อ แม่ พี่น้อง ลุง ป้า น้า อา มาก่อนได้นั่งหน้า มาช้าได้นั่งหลัง มาทีหลังอาจได้ยืน มาดึก ดึก ดื่น ดื่น อาจได้ขี่คอกันดู วันนี้ ThaiCSS เมียงูและผม (เชี่ยแบงค์) จะแนะนำโมดูลตัวหนึ่ง ที่จะช่วยให้เราสามารถจัดการกับเนื้อหาให้อยู่ในรูปแบบของคอลัมน์ โดยใช้ CSS ซึ่งเราสามารถกำหนดจำนวน หรือความกว้างของคอลัมน์ได้ เดิมทีเราจะเห็นการจัดหน้าแบบคอลัมน์ ได้จากสื่อสิ่งพิมพ์กันซะส่วนมาก และในปัจจุบันเราก็อาจจะเห็นกันมากขึ้นกับสื่อที่เป็นดิจิตอลในรูปแบบของ หนังสือ นิตยสารและหนังสือพิมพ์ออนไลน์ ที่แสดงผ่านเว็บไซต์ หรืออุปกรณ์ยอดนิยมในปัจจุบันอย่าง แท็บเล็ต
หากถามว่าการจัดหน้าแบบคอลัมน์ นั้นมีประโยชน์อย่างไร ประโยชน์ของมันคือ เพื่อความสวยงาม สะดวกในการอ่าน และมีความยืดหยุ่นของเนื้อหา จากอดีตจนถึงตอนนี้ที่ผมนั่งบทความนี้อยู่ การจัดหน้าแบบคอลัมน์ บนเว็บไซต์ยังไม่เป็นที่นิยมซึ่งอาจจะเป็นเพราะมันยังยุ่งยากในการจัดหน้าอยู่ (เป็นความเห็นส่วนตัวนะครับ) เราจะทำทีนึงก็ต้องมานั่งเขียน HTML+CSS กันวุ่นวายเพื่อจะให้เนื้อหาแสดงเป็นแบบคอลัมน์
Permalink
