CSS

ไม่ว่าจะช้า หรือเร็ว สุดท้ายแล้ว CSS Designer ส่วนใหญ่ก็คงต้องเดินไปถึงจุดนั้นอยู่ดี จุดนั้นในที่นี้ ผมหมายถึงเรื่องของ CSS3 และการทำ Animation ตามท้องเรื่อง เว้นเสียแต่ว่า “ไม่มีความจำเป็นใดใด” ที่ต้องทำ เอาเป็นว่านำเสนอไว้เผื่อเกิดความจำเป็นก็แล้วกันนะครับ แม้ว่ามันจะ ขาดๆ เกินๆ บ้าๆ บวมๆ ก็ตาม

ในบทความนี้ ผมขอพูดถึงเรื่อง พื้นๆ เพื่อเริ่มสร้างความเข้าใจกันไปก่อนนะครับ

คำสั่งพื้นฐานของ Animation ใน CSS3 มีดังนี้

• animation-name คือ การตั้งชื่อให้กับรูปแบบการแสดงการเคลื่อนไหว
• animation-duration คือ ระยะเวลาของการเคลื่อนไหว จาก ต้นทาง ไป ปลายทาง
• animation-timing-function คือ รูปแบบการเล่นใน 1 รอบของการเคลื่อนไหวของ keyframe
• animation-iteration-count คือ การทำซ้ำ เช่น จะให้ทำกี่รอบ หรือ infinite คือ วนไม่หยุด
• animation-direction คือ การสั่งทิศทางการเล่น เช่น จาก 1 ถึง 10 หรือจะให้เล่นถอยหลัง จาก 10 มา 1
• animation-delay คือ จะให้เริ่มทำทันที หรือ ดีเลย์ ตามเวลาที่กำหนด เช่น ถ้าเรากดปุ่มแล้วต้องการให้ animation ที่เราสั่งงานเริ่มเล่นเมื่อเวลาผ่านไปหลังจากกดปุ่ม 2 วินาที เราสามารถกำหนดได้ใน animation-delay โดยค่าเริ่มต้นคือ 0 ซึ่งเป็นการสั่งให้เล่นทันที
• animation คือ shorthand property หรือการเขียนแบบย่อ โดยการใส่ค่าควรเรียงลำดับจาก <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>

การเริ่มต้นอย่างถูกวิธีและมีแนวทาง ถือเป็นก้าวสำคัญที่สามารถส่งผลให้การเรียนรู้ ศึกษาเรื่องราวใดๆ ก็ตามเป็นไปอย่างมีแบบแผนและพัฒนาก้าวหน้าได้อย่างรวดเร็ว ไม่ต้องไปเสียเวลาทดลองหรือซุ่มเสี่ยงในสิ่งที่ยังไม่รู้ว่าถูก หรือผิด เพียงแค่เอาเวลาที่เหลือนั้นไปพัฒนา ต่อยอดสิ่งที่มีอยู่นั้นให้ดียิ่งขึ้นไป

แต่ถ้าหากว่า สิ่งที่มันมีอยู่นั้น มันอยู่ตรงไหนกัน “คำถามนี้ ถือเป็นปัญหาหลัก” ในแวดวงการทำงานในส่วนของ CSS และ HTML ของเมืองไทยเรามาหลายปี หรือจะบอกได้ว่าตั้งแต่เริ่มมีคำว่า Tableless หรือ CSS ไหลเข้ามาในหัวของนักพัฒนาเว็บชาวไทยโน่นเลยก็ว่าได้

เพราะมันเพิ่งเริ่ม เพิ่งเกิด จึงไม่มี หรือมีน้อย ส่วนที่มีน้อยนั้นก็ใช่ว่าจะเปี่ยมไปด้วยคุณภาพ หรือที่มีอยู่ดันเปี่ยมไปด้วยความด้อยคุณภาพ จึงทำให้ส่วนงานที่กล่าวมานั้น ยังไม่มีแนวทางหรือต้นแบบในการเรียนรู้ ปฏิบัติอย่างชัดเจน

ก่อนหน้านี้ผมได้เขียนบทความ เรื่อง “แนวคิดการตั้งชื่อ Class และ ID ใน HTML เพื่อ Web 4.0” เอาไว้ ซึ่งเวลาก็นานพอสมควร ส่วนใหญ่บทความที่ผมเขียน มันมักจะไม่จบในตอน ซึ่งจะมีการแนะนำให้รออ่านในตอนต่อไป แล้วตอนต่อไป มันก็ไม่ยอมเขียนสักที บทความนี้ก็เช่นกันครับ เป็นบทความตอนต่อ ที่ต้องใช้เวลาร่วม 1 ปี จนสามารถเกิดขึ้นได้

ถึงแม้ว่า ผ่านมา 1 ปีแล้ว ผมก็ยังเชื่อว่า เนื้อหานั้นก็ยังไม่สายเกินไปอยู่ดี เพราะส่วนใหญ่ ไทซีเอสเอส มักจะเขียนบทความในฝัน กว่าที่พวกผมจะตื่นจากฝันมาเขียนบทความนอกฝันก็หลายปี แต่ตั้งแต่นี้ไป พวกผมคงเขียนบทความที่อ่านกันแล้วเข้าใจง่ายยิ่งขึ้นให้เหมาะสมกับประเทศที่กำลังพัฒนา และจะกำลังพัฒนาต่อไปไม่มีที่สิ้นสุดอย่างเมืองไทยของเรา

วันนี้ ผมคิดอะไรออกบางอย่าง เป็นกรณีเส้นขนบังภูเขาไฟ ชนิดที่เรียกได้ว่า ผมน่าจะคิดพบตั้งนานแล้ว ได้แต่นั่ง งงๆ ในความโง่ของตัวเอง เลยเอามาเขียนไว้ตรงนี้อีกที

เหตุการณ์ที่ว่านี้คือ การสั่ง element ใดใด ที่เป็น child element ยกเว้น child ตัวที่ 1

เช่นว่า เราแบ่งเนื้อหาออกเป็น คอลัมน์ แล้วเราต้องการขีดเส้นกั้นเอาไว้ แต่ ถ้าเราสั่ง border เช่น border-left เข้าไปตรงๆ นั้น มันจะทำให้ เกิด เส้นขอบขึ้นที่ ด้านซ้ายสุดของกล่องข้อมูลด้วย เราจำเป็นต้องหาทางลบเส้นขอบมันออกไป โดยที่ยังคงความเป็น semantic ของ html เอาไว้ให้ได้มากที่สุด

เมื่อครั้งเก่าก่อน เราอาจจะเขียน class ขึ้นมา 1 class ซื่อว่า .none-border {border: none;} แล้วเอาไปใส่ ใน element ตัวแรกที่เกิดเส้นขอบขึ้น เพื่อลบเส้นขอบออกไปแทน แต่เกิดคำถามขึ้นว่า ทำไม เราต้องไปเพิ่ม ค่าให้กับ Attribute class นั้น โดยที่ชื่อ class ไม่ได้แสดงออกถึงการสื่อสารด้าน เนื้อหา ข่าวสารในความเป็น Semantic web ของภาษาเลย

ซึ่งหน้าที่เหล่านี้ โดยความรับผิดชอบแล้ว มันอยู่ที่ภาษา CSS ไม่ใช่ HTML

มาดูกันว่า เราจะลบเส้นขอบด้านซ้ายของ คอลัมน์แรกออกไปได้ยังไง โดยที่ไม่ใส่ class เพื่อสั่งลบเส้นขอบออกไป

IE9 พี่ท่านมาแล้ว ถึงแม้ยังขาดตก บกพร่อง ก็ยังดีกว่าไม่มา ใครที่อยากจะลองของแปลก เชิญอัพเดทจาก IE8 ไปเป็น IE9 ได้ที่ www.beautyoftheweb.com เลยครับ ส่วนผม อัพเดทไปเรียบร้อยแล้ว เพื่อที่จะเอามาลองเล่นของ ซึ่งถือว่าไม่ได้เลวร้ายไปจากที่คาดการณ์กันเท่าไหร่นัก ส่วนที่เลวร้ายกว่านั้นในความรู้สึกของผมคือ ความเหินห่างจากบราวเซอร์โลโก้ ตัว อี สีฟ้าๆ น้ำเงินๆ ตัวนี้มานานหลายปีนั่นเองที่ทำให้เกิดความไม่อยากใช้งาน แม้กระทั่ง แทบไม่ได้ใช้เข้า ThaiCSS จนเกิดอาการคนใช้ IE เข้า ThaiCSS ไม่ได้มาเป็นเดือนๆ เพราะผมแยก Theme เอาไว้แล้วลืมอัพโหลดไฟล์ template เข้าไปยัง Theme ของ IE 1 ไฟล์ จึงเกิดอาการ หน้าขาวเกิดขึ้น ขออภัยมา ณ ที่นี้ด้วยขอรับ

กลับมาที่เรื่องราว CSS ของเรากันต่อ อย่างที่ผมได้เกริ่นไปในบทความก่อนหน้าว่าผมจะเริ่มเข้าสู่โหมด CSS3 Modules หลังจากที่เมาอยู่กับ CSS3 Selectors มานานสองนาน วันนี้ผมขอยกตัวอย่างเรื่องของ CSS Background Module Level 3 กันพอหอมปากหอมคอ แต่น่าจะได้นำไปใช้ประโยชน์ได้หลากหลายหนทาง

หลังจากที่ห่างหายไปกับการพูดถึงเรื่องของ Module ที่เกี่ยวข้องโดยตรงกับ Properties และ Values ของ CSS กันไปเป็นระยะเวลานานพอสมควร อาจเป็นเพราะผมยังมองว่าเรายังเข้าใจหลักการเขียน Selectors กันแบบถูกน้อย ถูกน้อยมากกันอยู่ จึงมัววุ่นอยู่แต่กับ Selector ซึ่งก็ยังพูดกันไม่หมดอยู่ดี แต่การกระโดดไกลแบบเขย่ง ก้าว กระโดดของ User Agents ทั้งหลาย ทำให้ผมไม่สามารถรีรอที่จะพูดถึงความสามารถต่าง ต่าง ที่เป็นส่วนประกอบ (Property) ของ CSS3 ได้อีกต่อไป

ขอเริ่มกันที่ CSS3 Color Module นะครับ เพราะผมเห็นว่า Module นี้ User Agents ที่เป็น Browser ทั้งหลายนั้นได้รองรับกันหลายเจ้าพอสมควร และอีกอย่าง เพื่อต้อนรับการมาถึงของ IE9 ที่กำลังเดินทางมาจากกาแล๊กซี่อันไกลโพ้น