Cascading Style Sheets

วันนี้ มาพูดอะไรกันสั้น สั้น ง่าย ง่าย อีกสักรอบ เกี่ยวกับประโยชน์ของ CSS ที่ใคร ใคร ก็รู้กัน นั่นคือสามารถจัดการแสดงผล HTML ที่เขียนไว้ในโครงสร้างเดียว ให้แสดงผลได้หลายแบบ โดยมีหลักการในเรื่องของ Web Accessibility เข้ามาเกี่ยวข้องด้วย นั่นคือ การเรียงลำดับ HTML อย่างถูกวิธี

จากรูปที่เห็นอยู่ด้านบนนั้น คนส่วนใหญ่ที่เขียน HTML มานักต่อนักมักจะมองในรูปแบบการแสดงผลเพียงด้านเดียว คือ ให้แสดงผลสำหรับผู้บริโภคผ่านทาง Screen เท่านั้น โดยการวาง HTML จะนำ Element ที่เป็น <img/> ขึ้นก่อนเสมอ แต่ตามหลักการการเข้าถึงแล้ว เนื้อหาใดๆ ที่โผล่ขึ้นมานั้น ควร หรือ จะต้องมี heading level ลำดับ ใด ใด นำหน้าก่อนเสมอ เพื่อบ่งบอกว่า เนื้อหานั้น เป็นเนื้อหาที่เกี่ยวข้องกับอะไร

จะมีสักกี่เว็บไซท์ในเมืองไทย ที่เราสามารถใช้ Keyboard กับ Attribute accessky ของ HTML ในหน้าเว็บนั้นได้ หรือว่าเราต้องการใช้ปุ่ม [TAB] ของ คีย์บอร์ด กดเดินหน้า ถอยหลังเพื่อที่จะไปยังเนื้อหาส่วนต่างๆ ในหน้าเว็บอย่างสบายอารมณ์

เพราส่วนใหญ่เวลาเรากด [TAB] ไปแล้วก็ยังไม่รู้ว่า จุดที่เรากำลัง :FOCUS นั้นมันอยู่หน้าไหน เพราะว่า ค่า outline มันไม่แสดงผลออกมา

วันนี้ผมขอพูดถึงเรื่อง Access Key ของ HTML และ Outline ของ CSS

[accesskey]

คือ attribute ตัวหนึ่งของ ภาษา HTML มีไว้เพื่อใช้เป็น ทางลัด สำหรับ Keyboard เพื่อเข้าถึงหน้าเว็บหน้านั้นๆ ซึ่ง บางครั้งในกรณีที่เราขี้เกียจเอามือไปลากเม้าส์ เราสามารถ กด เลขที่เว็บไซท์ ระบุเอาไว้เพื่อไปยังส่วนต่างๆ ที่สำคัญในหน้าเว็บได้เลย ทว่าบราวแซอร์แต่ละตัวนั้น มีลักษณะการกดไม่เหมือนกัน

เรื่องมันมีอยู่ว่า ทำไม มันใช้ได้ กับการเขียน CSS Dropdown Navigation แบบนี้ เพราะก่อนหน้านี้ ผมก็เคยลองเขียนตาม ทฤษฎีและ Module ของ CSS ที่ W3C มีมาให้ทุกอย่าง มันก็แสดงผลไม่ถูกต้อง กับบราวเซอร์ อย่าง IE7 หรือ IE8

แต่ เมื่อสองสามวันที่ผ่านมา ผมลองเขียนดูอีกที "มันดันใช้ได้ ไม่มีปัญหา"

สำหรับคนที่เคยลองเขียน CSS Dropdown Menu มาแล้วคงจะเจอปัญหาที่มันเกิดขึ้นกับ IE7 หรือ IE8 เพราะ เมื่อเวลาที่เรา เอาเมาส์ ไป :hover ที่ <li> ซึ่งเป็น Nest Element ของ <ul> แล้ว มันโผล่ออกมา แต่พอเอาเมาส์เลื่อนไปจะไปคลิ๊กที่ลิงค์ มันดันหายไปก่อนที่เราจะได้คลิ๊กที่ ลิงค์ ตามที่เราต้องการ

ซึ่ง บราวเซอร์ อื่นๆ ที่ไม่ใช่ตระกูล IE ไม่เป็น เป็นอยู่เจ้าเดียวนี่แหละ ก็เลย เป็นอันว่า มันคือ บั๊กของ IE แต่ตอนนี้ มันใช้ได้แล้ว

ลองไปดูตัวอย่างกันก่อน

ตัวอย่าง CSS Navigation หรือ การทำ CSS menu แบบ Dropdown

ผมขออนุญาต ว่ากันสั้นๆ สำหรับเรื่องนี้นะครับ จากโค้ด CSS

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

มันยังไงกันแน่ กับเรื่องการใช้ Position สำหรับหน้าเว็บ อาจจะงง งง กัน แน่หละครับ อะไรที่เรายังไม่รู้ ไม่ทราบ ไม่เห็น ไม่เข้าใจมันย่อม งง เป็นธรรมดา ค่อยๆ เรียนรู้ ค่อยๆ ทำความเข้าใจ เดี๋ยวมันก็หายงง ไปเอง

ไม่ใช่แค่ Position เท่านั้น ที่จะมาเป็น พระเอก สำหรับการเขียน Layout ของเว็บในอนาคต Display คืออีกหนึ่ง Property ที่มาร่วมด้วยช่วยกัน ทำตัวเป็นพระรองให้เราได้ใช้งาน

หลักการพื้นฐานง่ายๆ ก่อนที่จะเข้าสู่วังวนแห่งความมึนงง คือ "ให้เลิกคิดไปตั้งแต่ตอนนี้ว่า CSS เอาไว้จัดหน้าเว็บ อย่างเดียว" CSS มีไว้เพื่อจัดการหน้าเอกสารให้กับทุก Devices ที่ถูกวางโครงสร้างการนำเสนอด้วยภาษา HTML ในโลกของ http เพราะเมื่อขึ้นด้วย Hypertext Transfer แล้วหละก็ มันก็คือ HTML วันยังค่ำ

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

จริงๆ แล้วมันไม่มีอะไรมากเลย ในเรื่องที่ผมเขียนในตอนนี้

ปัญหา

เรามาเริ่มนับจากปัญหากันก่อน ซึ่งก่อนหน้านี้ ผมเคยเจอว่า "ผมจะทำ Thumbnail รูปภาพยังไงให้มันดูเรียงเท่าๆ กันอย่างเป็นระเบียบ โดยที่ภาพแต่ละภาพมีขนาดไม่เท่ากันเลย ทั้งแนวตั้งและแนวนอน" ถ้าผมสามารถที่จะเขียนโปรแกรม หรือบอกโปรแกรมเมอร์ให้เขียนระบบ Crop รูปภาพแล้วอัพโหลดขึ้นไปมันก็คงไม่เกิดปัญหา เราสามารถที่จะกำหนดขนาดรูปภาพได้ดั่งใจคงไร้ปัญหา

แต่โลกมันไม่ได้สวยงามอย่างนั้น เมื่อเราไม่มี Function การย่อ ขยาย หรือ Crop รูปภาพก่อนนำขึ้นไปบน Server เพื่อเอาไปแสดงผลทางหน้าเว็บ เรา เหล่า CSS Designer ต้องหาทางแก้ไขเอาเอง

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

เรื่อง ยุคสมัยของการเขียน CSS Layout นี้ จริงๆ มันก็ไม่ใช่เรื่องใหญ่ขนาดกู้วิกฤติการเมืองได้ แต่มันพอที่จะให้เรามองเห็นอนาคตข้างหน้าว่า ต่อไปแล้ว ชีวิตของเราในอาชีพนี้จะเดือนไปทางไหน

ผมขอแบ่งออกเป็น 3 ยุคใหญ่ๆ ดังนี้

1. Table Layout
2. Floating Layout (Tableless layout)
3. Positioning Layout

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

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

คิดไปคิดมา ก็ถึงบางอ้อ ว่า "ThaiCSS ไม่ได้มีสำหรับคนทั่วไป" นี่หว่า แสดงว่าหลุดกลุ่มเป้าหมาย เพราะฉะนั้น กลุ่มเป้าหมายมี ห้าคน ที่นั่งฟัง เราก็ไม่จำเป็นที่จะต้องพูดเสียงดังๆ เพื่อให้คนที่เดินผ่านมาผ่านไปได้ยินหรือพยายามให้เขาเข้าใจด้วย รบกวนเขาเปล่าเปล่า ถ้ามีคนอื่นสนใจ เดี๋ยวเขาจะมานั่งฟังเอง แต่บางที ถ้าห้าคนที่นั่งอยู่หนีหมด ก็แสดงว่าหมดอนาคต ผมพับเสื่อกลับบ้านได้เลย

ไม่ฉะนั้น มันจะหลุดกลุ่มเป้าหมาย

ส่วนใหญ่แล้ว คนที่คิดเขียน CSS ในตอนแรก คงคิดว่ามันง่ายๆ อะไรก็ได้ เช่น ผัดไทประตูผี หรือ ข้าวต้มราชวงศ์ อะไรประมาณนั้น แต่หารู้ไม่ว่า CSS มัน ซุปหน่อไม้ใส่ใบขิง ชัดๆ จัดเป็นอาหารเฉพาะกลุ่ม คิดจะกิน ต้องกินเป็นอาชีพ กินแบบพาร์ทไทม์ไม่ได้ แต่ก็อย่างว่า ตลาดมันไม่ค่อยกว้าง เสี่ยงต่อการอดตายสูง หากกินผิดหลัก ถ้าปฏิบัติตามมาตรฐาน อย. แล้ว รับรอง ได้ใบประกาศ แน่นอน ส่วนประกาศว่าเป็นอะไรนั่น ก็อีกอย่างหนึ่ง

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

อีกทั้ง ยังไม่มีงานวิจัยที่ระบุชัดเจนแน่นอน ว่าพืชชนิดนี้ ผ่าเหล่ามาจากสายพันธุ์ไหน แต่มีการยืนยันแล้วว่า "ไม่น่าจะสูญพันธุ์" ง่ายๆ แน่นอน

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

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

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

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

คำถามมีอยู่ว่า ทำไม เมื่อใช้ float แล้ว มันต้องเป็นอย่างนั้นด้วย เคยสงสัยถามกันบ้างใหม หรือว่า เห็นเขาพากันทำมาอย่างนั้น มันจึงต้องเคลียร์ ไม่รู้เลยว่าเคลียร์ มันมายังไง แค่เคลียร์แล้วมันหายก็จบ เสร็จแล้วก็คิดไม่พบ พอเจอปัญหาก็ clear:both; (บางคนออกเสียง เคลียโบ้ท แปลเป็นไทยถึกๆ ว่า "สละเรือ" หึหึ)

หรือว่าเคลียร์เพราะ"ฝรั่งพาทำ" ว้าว มันเป็นคำตอบที่ยอดมาก โอเค เดี๋ยวบักเสี่ยว"พร อันทะ" จะอธิบายให้ฟังแบบคร่าวๆ ว่าทำไมมันต้องเคลียร์

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

บทที่ 1: เกริ่น

ถ้าหากจะบอกว่าการทำความเข้าใจความหมายและรูปแบบการเขียน Selector ของ CSS นั้นมันไม่สำคัญ ก็คงจะไม่ใช่ เพราะว่าแท้จริงแล้วมันก็สำคัญในระดับพื้นฐาน บางคนอาจจะหลงลืมไป หลายๆ คนอาจจะไม่อยากใส่ใจมัน เพราะว่า "คิดว่า" มันไม่สำคัญ เพราะว่ามันก็แค่ชื่อเรียกใช่หรือไม่ เพราะในความเป็นจริงแล้ว ลูกค้าหน้าไหนจะเข้าใจถ้าเราไปนั่งอธิบายว่า อันนั้นคืออะไร อันนี้คืออะไร

เมื่อไม่นานมานี้ ผมเพิ่งเข้าใจว่า ผมไม่ได้เขียนเรื่องราวการทำเว็บ แต่เป็นเพียงแค่ส่วนหนึ่ง ผมกำลังพูดถึงการเขียนภาษาที่เกี่ยวข้องกับการทำเว็บอยู่ 2 ภาษา นั่นคือ HTML กับ CSS จึงสรุปได้ว่า นั่นคือสิ่งที่ผมกำลังทำ และจะทำต่อไป ผมไม่ได้เขียนบทความ หรือสร้างเนื้อหา พาคนมาทำเว็บ แต่กำลังแลกเปลี่ยนความรู้ ประสบการณ์ ของการเขียน CSS และ HTML ผมจึงไม่ค่อยสนใจเรื่องการทำเว็บ แต่ใส่ใจในหน้าที่ที่ต้องทำ เพราะอาชีพของผมคือ "เขียน HTML และ CSS" เพราะฉะนั้น ผมจึงขอพูดแค่นั้น เพราะอย่างอื่นไม่สันทัด

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

วันนี้ มาดูกันแค่สั้นๆ กันลืม

จำเป็นแค่ไหน ที่เราต้อง Hack บราวเซอร์ เมื่อมาเขียน CSS

1. - จำเป็นมาก จนถึงมากที่สุด เพราะเราต้องทำมาหาเลี้ยงชีพ ลูกค้ายังจุดธูปเทียนบูชา IE6 กับ IE7 ทุกวันอย่างนี้ ไม่ Hack ได้ไง
2. - ไม่จำเป็น Hack ทำไม เพราะเว็บที่กำลังทำอยู่ไม่ได้ต้องการทำมาค้าขาย ไม่เน้นการแสดงผลทางสายตา แต่เน้นด้านการสื่อสารข้อมูลเป็นสำคัญ
3. - ไม่รู้ว่าจะเลือกอธิบาย หรือเอาคำตอบไหน พี่ๆ เขาพาทำอย่างนี้ พี่ๆ เขาบอกว่า ฝรั่งทำเอาไว้ ทำตามไป ส่งงานได้เหมือนกัน

สามข้อข้างบน เลือกคำตอบเอาตามสบาย ไม่เลือกก็ไม่ว่ากัน เพราะต่างคนต่างมีเหตุผลและความรู้ ความคิดเป็นของตัวเองอยู่ในขั้นพื้นฐานกันอยู่แล้ว แต่สิ่งที่ต้องการมากที่สุดในแต่ละคำตอบคือ การสร้างความเข้าใจ ในคำตอบนั่นต่างหาก หรือ ถ้าเลือกได้ ก็เลือกที่จะไม่ Hack หรือ ยังไงก็ Hack ไม่มีทางที่จะเป็น ฮอลล์ เด็ดขาด

ถ้าถามว่า ทำไมต้อง Hack ผมขอตอบไปข้อเดียวแบบเหมารวมเลยคือ IE6 และ IE7 ต่างด้อยมาตรฐาน ข้อนี้ทุกคนรู้กันดีอยู่แล้ว ส่วนที่ว่า จุดไหนบ้างในการประมวลผลเพื่อแสดงหน้าเว็บที่บราวเซอร์ทั้งสองตัวนั้นมีปัญหา ผมขออภัย หลายๆ ที่เขาพูดถึงกันแล้ว ขอบอกผ่านขอเชิญ Google it!! เอาเอง

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ grid system ร่วมกับการ design หน้า web page กันบ้างแล้วนะครับ ซึ่งการคำนวณ grid ใน design ของเรานั้นก็จะได้จาก สูตรนี้

• Canvas = ขนาดหน้าจอที่คุณต้องการออกแบบ อาทิ 1024 จะต้อง design ที่ 960px หรือ 940px
• Total Unit = ช่องที่เราจะสามารถวาง object ของงาน design ลงไปในบริเวณนั้น ๆ ได้
• Gutter = ช่องว่างระหว่าง Unit สามรถใช้เป็นระยะ ห่างระหว่าง object ต่าง ๆ ที่อยู่บน Unit เพราะฉะนั้นจะไม่มีการ วาง object ลงไปคาบเกี่ยวบนช่องของ Gutter
• Unit = ความกว้างต่ำสุด ของ unit

เนื่องจาก designer บางท่านอาจจะไม่สันทัษเท่าไรนักในเรื่องการ coding อาจจะทำให้เกิด case ที่ผิดพลาดขึ้นได้ เช่น วาง object ไม่พอดี กับ บริเวณที่ Unit อยู่ ไปเกยอยู่ใน บริเวณของ Gutter ซึ่งเมื่อนำไปเขียน CSS นั้นจะมีปัญหา

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

หลายคนคงจะงง เพราะมันยังไม่ใช้เลย ใช่ครับ มันยังไม่มีความจำเป็นในตอนนี้ แต่ผมจำเป็นต้องเขียน (ถ้าคนอื่นยังอยากจะรู้นะครับ) เพราะอย่างน้อย อีกห้าปี CSS3 ถึงจะเดินทางมาถึง และถึงตอนนั้นผมคงไม่มีอารมณ์มานั่งเขียน CSS อีกแล้ว คงไปทำมาหากินอย่างอื่นได้แล้ว ตอนนี้ยังมีแรงเขียนก็เลยจะเขียนเอาไว้ก่อน เพราะว่าจริงๆ แล้วรูปแบบการนำไปใช้มันไม่ได้แตกต่างกันมา แต่สิ่งที่แตกต่างกันในเวอร์ชั่นก็คือรูปแบบการสั่งงานของ Selectors ที่จะอำนวยความสะดวกในขั้นสูงมากยิ่งขึ้นและเข้ากันกับภาษาอื่นๆ มากยิ่งขึ้น

สถานะ Last Call ของ CSS3 ในหมวดของ Selector แน่นิ่งมานาน แต่ผมก็ไม่รู้ว่าจะรีบไปใย โดยเฉพาะกับพี่ไทยทั้งหลาย เพราะ เอาแค่ CSS2 นี่ก็ยังเมากันอยู่ หรือดีมาหน่อยก็ CSS2.1 ก็ยังใช้กันไม่หวาดไม่ไหว สำหรับบางคนแล้ว มีแค่ Class Selector ก็คงถือว่ามากพอ แต่สำหรับคนบางกลุ่มแล้วมันคงไม่พอ

ผมอยากจะถามว่า กี่เปอร์เซ็นต์ของคนที่กำลังบอกว่าตัวเองเป็น CSS Designer นั้น เรียก Selector และการเขียน CSS ถูกต้องตามทฤษฎี อย่าเถียงผมว่ามันไม่สำคัญ มันสำคัญ คนที่ยังไม่รู้ ก็ให้นึกถึงสิ่งที่ตัวเองยังคิดไม่พบ ทำงานไม่ถึงมันเอาไว้ แต่สำหรับคนที่ตั้งใจจะศึกษามันอย่างจริงจัง ก็ดีใจด้วยที่ท่านมาถูกทาง ไม่ใช่กล่าวอ้างกันอย่างผิวเผิน

Class และ ID คือ คนละอย่าง คนละทาง ถ้าไม่เข้าใจ อย่าเพิ่งมั่ว โดยเฉพาะการเลือกและเรียกใช้ ID มันลึกซึ้งเกินกว่าคำบรรยาย อาจจะบอกได้ว่าลึกซึ้งเกินคำว่ารัก ของผู้ชายบางคนด้วยซ้ำไป อย่างไรนั่นหรือ มาดูกันทีละอย่าง

สร้าง Graph กับ xhtml + css ผมลองนั่งคิด หาวิธีการ และจนกระทั่งทดลองทำ ใช้กลยุทต่าง ๆ ที่พอจะมีหาได้สะสมมาจากการทำงาน ประยุคเข้าไปให้มันใช้งานได้คงเคยเห็นมาบ้างแล้วการสร้าง Graph กับ css มีบทความให้เห็นกันอยู่มากพอสมควร อาจจะใช้ java script เข้าช่วยบ้างในบางแทคนิค แต่ก็ยังรู้สึกว่า มันค่อนข้างที่จะซับซ้อนมาก ทำความเข้าใจยากมากกับ Code ของหลาย ๆ ท่าน ผมก็เลยคิดหาทางสร้างขึ้นมาใหม่ตัวหนึ่ง ซึ่งคิดว่าน่าจะเป็น Code ง่าย ๆ ที่ผมเองพอจะทำได้ และ ลองเอามาแนะนำ เผื่อเอาไปต่อยอดความคิด ประยุคใช้เผื่อจะเกิดความคิดใหม่ ๆ ในงานของเรา เป็นการคิดนอกกรอบต่อยอดไปเรื่อย ๆ ครับ

ส่วนใหญ่ที่ผ่านมาเราจะเห็นเป็นการนำเอารูปภาพสำเร็จมาวางแล้วใช้ attribute alt หรือ title เป็นตัวขยายความบ่งบอกความหมายของรูปนั้น ๆ หรือ ใช้ flash หรือ Ajax, Javascript อย่างที่เกริ่นไว้ข้างต้น (อนาคตอันใกล้ Flash จะสามารถมองเห็นได้ด้วย Search Engine แล้ว ถ้าเป็นความจริง Flash Web Designer ก็คงจะได้เฮกันล่ะครับ) แต่ผมมุ่งประเด็นไปตรงที่ว่า หากทำให้ Graph สื่อช้อมูลได้ตรงประเด็นจริง ๆ รับรู้ข้อมูลได้จริง ๆ อ่านค่าได้จริง ว่าในแต่ละข้อมูลนั้นได้เปรียบเทียบกันแล้วเป็นอย่างไร และถ้าหากว่าวันใดวันหนึ่ง file css หายไป การเรียงของข้อมูล และการให้ข้อมูลจะยังคง ปะติดปะต่อ เหมือนเดิม หรือเปล่า ไม่ใช้เป็นแค่รูปภาพที่แสดงขึ้นมาเฉย ๆ ไม่ได้บอกข้อมูล หรือรายละเอียดแต่อย่างได (ก็คือความเป็น semantic นั่นแหละ) ทำให้ข้อมูลเป็นประโยชน์ที่สุด มีประสิทธิภาพที่สุด ในการให้ข้อมูลแก่บุคคลทั่วไปที่ค้นหาข้อมูล ทั้งนี้จะได้ในเรื่องความเป็น Accessibility ในการให้ข้อมูล รายละเอียดต่าง ๆ ที่สามารถเข้าดูข้อมูลได้หลาย User ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^)

ไม่ได้เขียนอะไรเกี่ยวกับการลงมือทำบ้างเลย เขียนแต่เรื่อง concept แนวคิดมานานพอสมควรแล้ววันนี้ท่านเจ้าสำนักของเรา แยบ ๆ ผมมาว่าปลาเอ้ย เขียนเกี่ยวกับวิธีการปฏิบัติสักหน่อยสิ นักเขียนท่านอื่น เขาไม่ส่งบทความมาเสียที เขียนไปก่อนละกัน โอเค ก็ไม่รู้จะเขียนอะไรน่ะนะ O_o นั่งคิดอยู่นาน เอา Rollover Navigation ละกันนะ แบบแรกเป็นรูปภาพ Rollover ง่าย ๆ เลยละกัน เผื่อท่านใดอยากได้แนวทางการนำไปใช้ ถ้าท่านใดรู้แล้วก็มาแลกเปลี่ยนกันเผื่อจะได้อะไรที่มันประหยัดกระทัดรัด เอามาอวดมาเฉิดฉายกันหน่อย ในส่วนของ xhtml

การเขียน CSS สำหรับ XHTML selector ใน css ไฟล์นั้นเหมาะกับการใช้ในกรณีที่เราต้องการ ควบคุมการแสดงผลร่วมกันในหลายๆ หน้าของเว็บเช่น การสั่ง body หรือ การสั่ง IMG การเขียน css แบบ External ที่สำคัญเราควรกำหนดค่า body, img, Pseudo-classes, table,td และอื่นๆ ที่เราต้องการไว้ก่อน

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

CSS3 เริ่มเขียนเริ่มใช้กันได้แล้ว หาซื้อได้ตามร้านโชวห่วยทั่วไป แต่ อะไรกันแค่เพียง CSS1 กับ CSS2-2.1 ยังเขียนไม่หวาดไม่ไหว จะจู่โจมสู่ไตรภาคกันแล้วหรือ ค่อยๆ เขียนค่อยๆ เพิ่มกันไป จะให้ผมมาเขียนเชียร์แบบบ้าพลัง

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ grid system ร่วมกับการ design หน้า web page กันบ้างแล้วนะครับ ซึ่งการคำนวณ grid ใน design ของเรานั้นก็จะได้จาก สูตรนี้

• Canvas = ขนาดหน้าจอที่คุณต้องการออกแบบ อาทิ 1024 จะต้อง design ที่ 960px หรือ 940px
• Total Unit = ช่องที่เราจะสามารถวาง object ของงาน design ลงไปในบริเวณนั้น ๆ ได้
• Gutter = ช่องว่างระหว่าง Unit สามรถใช้เป็นระยะ ห่างระหว่าง object ต่าง ๆ ที่อยู่บน Unit เพราะฉะนั้นจะไม่มีการ วาง object ลงไปคาบเกี่ยวบนช่องของ Gutter
• Unit = ความกว้างต่ำสุด ของ unit

เนื่องจาก designer บางท่านอาจจะไม่สันทัษเท่าไรนักในเรื่องการ coding อาจจะทำให้เกิด case ที่ผิดพลาดขึ้นได้ เช่น วาง object ไม่พอดี กับ บริเวณที่ Unit อยู่ ไปเกยอยู่ใน บริเวณของ Gutter ซึ่งเมื่อนำไปเขียน CSS นั้นจะมีปัญหา

สวัสดีครับ หายไปนาน ต้องขอโทษเพื่อน ๆ พี่ ๆ น้อง ๆ ที่แวะเวียนเข้ามาด้วยนะครับ เข้าเรื่องกันเลยดีกว่า มีน้อง ๆ เพื่อน ๆ ใกล้ ๆ ตัวถามผมกันบ่อย ๆ ว่า property "position" กับ value ของมันแต่ละแบบนั้นทำงานกันอย่างไร เลยคิดว่าเอามาเขียนแนะนำไว้ที่นี่ด้วยเลยดีกว่า

ทีนี้เรามาทำความรู้จักกันก่อนว่าเจ้า property position เนี่ย มันมี value เป็นอะไรได้บ้าง

ศิลปินถ่ายทอดประสบการณ์ ความคิด และ ความรู้สึกของพวกเขา ผ่านความสวยงาม พวกเขาได้รับแรงบันดาลใจ จากสิ่งต่าง ๆ บนโลกที่อยู่รอบ ๆ ตัวเขา และ พวกเขาก็เป็นแรงบันดาลใจ ให้กับสิ่งต่าง ๆ อื่น ๆ ด้วย การออกแบบ website นั้นก็คือ ข้อมูลที่ผ่านการกลั่นกรองมาเรียบร้อยแล้วว่าเป็นประโยชน์, เป็นความคิดที่สื่อออกมาถึงผู้รับได้ และ ข้อมูลนั้นสามารถถ่ายทอด และ ดึงดูดเย้ายวนไปถึงผู้รับได้อย่างสมบูรณ์แบบ

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

เพราะฉะนั้นเมื่อคุณจะต้องออกแบบ website คุณจะต้อง คิดและมองอย่าง นักเขียน เป็นอันดับแรก จากนั้นคุณต้องคิดและมองอย่าง วิศวกร และ ท้ายที่สุดถึงจะคิดและมองอย่าง ศิลปิน ทีนี้เราก็กลั่นกรองออกมาตาม sense ที่เราได้ลำดับความคิด และ เรียนรู้ใหม่ทั้งหมดของเราเลย เช่น สีสันหน้าตาเป็นอย่างไร การจัดวางตัวหนังสือ การกำหนดช่องว่างระหว่าง content จัดเรียงหน้าตาที่ user จะเข้ามาสัมผัสอย่างไรให้สวยงามเหมาะสมที่สุด ทำอย่างไรให้การแสดงผลของ website ของเรานั้นไม่ผิดเพี๊ยน ข้อมูลไม่มีการเสียหายเมื่อต้องการเปลี่ยนแปลงโครงสร้าง และ/หรือ รูปร่างหน้าตา จะเห็นได้ว่ามันจะทำงานร่วมกันอย่างเป็นระบบ

กับการนั่งทำงาน Job ที่รับมาตาเปียกตาแฉะไม่ก็นั่งหาอะไรอ่านไปเรื่อย ๆ ตามประสาคนชอบสอดชอบแส่หาเรื่องปวดกบาลใส่ตัว พอเห็นเจ้าขนมต่าง ๆ เนี่ยมันก็ทำให้ผมมาคิดได้ว่า เอ้อ! นะมันก็มีกรอบก็มีเหลี่ยม และ ก็รูปทรงอื่น ๆ หลากหลายเหมือนเวลาเรามานั่งแพลนทำ Layout ของ Website นี่ล่ะ

สี่เหลี่ยมของขนมรังผึ้ง กับ ขนมครกที่เป็นทรงกลม มันทำให้ผมนึกถึงการ Design Website ในสมัยก่อนเก่า ซึ่งเราจะต้องมานั่งคิดว่าเราจะตัดออกมาอย่างไรให้มันเป็นช่องสี่เหลี่ยม ที่เรียงรายออกมาได้อย่างเป็นระบบระเบียบ เพื่อที่จะจัดมันไว้ในตารางโดยไม่มีการผิดเพี๊ยนไปจากตอนที่เรานั่ง Design ใน Photoshop เนี่ย มันเป็นสิ่งที่ต้องทำจนเราจำจนขึ้นใจไปแล้วว่า เอ้อ ... จะทำอย่างไรหนาให้มันออกมาเป็นเช่นนั้น ไม่งั้นมันคงจะตัด slice ออกมากันยากน่าดู (นั่งคิดมาก ๆ จ้องจอมาก ๆ มันอาจจะแปลงร่างเป็นหุ่นให้เราตกใจเล่นก็ได้นะ) แต่ผมเคยคิดนะว่าเมื่อไหร่มันจะทำได้มากกว่านี้นะ เหมือนกับตอนที่เราทำ Flash หรือ ตอนที่กำลัง Design มันออกมานั้น ที่เราอยากจะวางอะไรลงไปก็ได้ แต่พอวางอะไรที่มันเหนือหรือล้ำจินตนาการมาก ๆ ก็ต้องมานั่งลำบากปวดกบาลตอนมานั่ง slice อีก จะทำอย่างไรน้าถึงจะก้าวข้ามขีดจำกัดเหล่านี้ (ซึ่งตอนนั้นผมยังอ่อนต่อประสบการณ์ยิ่งนัก เพราะยังไม่มีใครผลิตแก๊ซโซฮอล) จะทำอย่างไรให้มันวางตรงไหนก็ได้แต่ออกมาแล้วเป็นความสวยงามเหมือนกับขนมครก มันทำให้ผมครุ่นคิดเป็นพัก ๆ แล้วมันก็จางหายไป ตามวันเวลาผมก็ Design Webpage ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น

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

CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

เราสามารถกำหนดตำแหน่งให้ภาพอยู่ที่ไหนก็ได้ ตัวหนังสืออยู่ที่ไหนก็ได้ด้วย properties ที่ชื่อว่า position หรือ float ช่องว่างระหว่างตัวอักษร ระยะห่างระหว่างบรรทัด ขนาดตัวอักษรเล็กใหญ่แตกต่างกัน และคุณประโยชน์อีกมากมายซึ่ง ผม พร เพื่อนและ ThaiCSS คงทราบกันดี หรือผู้ที่เพิ่งเคยเข้ามาเยี่ยมชมก็ให้ลองไปอ่านดูในส่วนของ CSS,XHTML Online หรือ บทความ: สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS) ดูว่ามีการพูดถึงไว้อย่างไรบ้าง CSS จะช่วยให้เราทำงานกับการ Design Website ได้มากขึ้นเพราะมีความยืดหยุ่นมาก ขึ้นอยู่กับแล้วล่ะว่าทีนี้เราจะนำเสนอกล่องเหล่านั้นสู่สายตาคนภายนอกอย่างไร ตัวอย่างการ Design แบบนอกกรอบโดยใช้ CSS

หัวใจสำคัญของการวางเลเอาท์หน้าเว็บด้วย CSS อีกอย่างที่ถือว่าสำคัญ อันดับต้นๆ คือ การสั่ง positioning ของ วัตถุ ที่ลอยๆ อยู่บนหน้าเว็บ

ได้ทั้ง 4 ด้าน ด้วยความกว้างแตกต่างกัน padding คือระยะห่างจากขอบในของ box model กับเนื้อหาข้างใน หรือ box ที่อยู่ข้างใน

การกำหนด padding กับ class ต้องนับรวมกันทั้งหมด ถือเป็นความกว้างเดียวกัน

เช่น ถ้าเราจะสร้าง คลาส 1 คลาส ให้มีความกว้าง 500px ระยะห่างจากขอบซ้ายและขวา ฝั่งละ 5px หรือ padding ซ้าย-ขวา-บน-ล่าง 5px จะได้ดังนี้

หลังจากได้พูดถึงเรื่อง padding+boder กันไปแล้ว คราวนี้มาดูเรื่องรวม margin เข้าไปด้วยกันครับ

สมมุติว่าผมจะสร้าง box หนึ่งอันกว้าง 500 พิกเซล ชื่อคลาสเดิมนะครับ (pd)

ไม่ว่าจะจัดชิดซ้าย ชิดขวา หรือตรงกลาง
มาดูกันต่อเลยครับ

/*1.กำหนดภาพรวมของหน้าเว็บให้กับ body ของ html*/

หรือมาตรฐาน ที่ยังไม่ใช่เรื่องของการเรียนแบบขั้นสูง

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

อื่นใดสำหรับ box model แล้วก็คือ การทำความเข้าใจหลักการ ของชิ้นหนึ่งๆ ที่แสดงลักษณะออกมาเป็นกล่อง ที่โดนเราระบุ ความกว้าง ความสูงให้นั่นเอง เช่น tag div ถ้าเราจะกำหนดความกว้างความสูงให้กับ div หนึ่งๆ css จะรวมค่าความกว้างของทุกอย่างของ class นั้นๆ เข้าไปด้วยกันเลย ไม่ว่าจะเป็น พื้นที่สำหรับข้อมูล padding margin และ border

อ้าว เริ่มกันเลยดีกว่าครับ กับส่วนของเรื่องราวเล็กๆ น้อยๆ ทั้งทิป เทคนิค วันนี้มาเริ่มกันที่ การทำเมนู แบบแนวตั้งกันก่อนครับ>

ลักษณะหลายๆ อย่างในโค้ดตัวอย่างข้างล่างนี้ ถ้าหากท่านใดสงสัย ไม่เข้าใจ ก็ โพสต์ ถามเอาไว้ที่ เว็บบอร์ดได้นะครับ เดี๋ยวจะมาอธิบายและตอบคำถามให้อีกที ที่เลือกเว็บบอร์ด ก็เพราะ จะได้มีโอกาสแลกเปลี่ยนกันได้หลายๆ คน

ในเมนู ตอนนี้ จะเป็นเพียงการทำเมนูแบบธรรมดาเท่านั้น ยังไม่ได้เพิ่มเติมสีสัน ด้วยแบ็คกราวน์ที่เป็นรูปภาพ ใดๆ ตอนต่อไปคงมีโอกาสได้นำเสนอ และถือเป็นโอกาสที่จะให้ ทุกท่านนำไปประยุกต์ แก้ไขกันเองตามสะดวกครับ

ซึ่ง em ในที่นี้คือหน่วยของความกว้าง ความสูง นะครับ ไม่ใช่ em ที่มักใช้คู่ๆ ไปกับ span อย่าเพิ่งสับสน

ทำไมต้องมี em ??

เคยลองมั้ยครับ เวลาที่เราเข้าเว็บบางเว็บแล้วตัวหนังสือมันเล็ก แล้วเราอยากให้มันใหญ่ขึ้น แต่พอเราเข้าไปที่ Text Size ของ IE แล้วขยายยังไงมันก็ไม่ขึ้น แต่กลับบราวเซอร์ อื่นๆ มันก็ขยายตามความต้องการของเรา หรือจะย่อตัวหนังสือ มันก็ลดลงตามความต้องการ นั่นแหละครับ หน้าเพจนั้น ได้ถูกกำหนดขนาดตัวหนังสือด้วย px ไว้เรียบร้อยแล้ว