Tag: css

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

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

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ 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 นั้นจะมีปัญหา

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

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

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

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

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

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

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

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

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

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

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

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

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

คำเตือน บทความนี้เป็นบทความเฉพาะกลุ่มเป้าหมาย เนื้อหาส่วนใหญ่ไม่ได้อยู่ในโลกปัจจุบัน ไม่ค่อยเหมาะสำหรับคนที่มองอนาคตระยะ 15 เมตร

คำเตือนที่สอง เนื้อหานี้ ไม่เหมาะสำหรับผู้ใช้ทั่วไป และ ตัวอย่างทั้งหมด ไม่สามารถใช้ User Agent ที่เป็น Browsers อย่าง IE ทั้ง 6-7-8 เรียกดูได้ เพราะฉะนั้น กรุณาใช้ Firefox, Opera, Safari, หรือ Chrome เข้าชม

คำเตือนที่สาม ผมเกรียน...

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

-1-

คำถามชุดที่หนึ่ง ราคา สี่ร้อยเก้าสิบเก้าบาท

ถามว่า HTML5 จะใช้ได้ในเร็ววันนี้หรือไม่

คำตอบคือ ทั้งใช่ และไม่ใช่ อย่างไรบ้างหละ

สำหรับคำตอบที่บอกว่า ยังไม่ได้ใช้ในเร็ววันนี้ ก็คงจะเอนเอียงไปทางผู้ที่ทำเว็บเพื่อรองรับเนื้อหาข่าวสารที่พึ่งพิงผู้ที่ใช้ IE เข้าท่องเว็บไซท์เป็นหลัก เพราะ HTML5 บางElement (ส่วนใหญ่) ยังคงเป็นบรุษนิรนาม ใน IE8 เราอาจจะต้องรอจนถึง IE9 นั่นอาจจะเป็น ปลายปี 2012 หรือ ช้ากว่า

สำหรับคนที่บอกว่า จะได้ใช้แล้วแน่ๆ ก็คงเป็นนักพัฒนา นักแสวงหาความรู้ใหม่ๆ ทั้งหลาย เจ้าของ Web Log ที่อยากจะลองเล่นเพื่อศึกษาหาประสบการณ์ เพื่อเตรียมความพร้อมสำหรับอนาคตที่ไม่รู้ว่ามันจะมาถึงเมื่อไหร่ เช่น ป๋า Bruce Lawson ที่ลองเล่นไปก่อนใครแล้ว (ใช่สิ เพราะลุงแกพัฒนาเอง เล่นเองนี่)

ใครจะเลือกแบบไหน ก็ตามสบายครับ ไม่ว่ากัน บ้านเราสิทธิและเสรีภาพ เข้าถึงแล้ว เหลือเพียงแค่ความเท่าเทียม ที่มันยังไม่มี

คำถามชุดที่ 2 ราคา สองพันสามบาท

ถามว่า CSS3 ใกล้จะได้ใช้หรือยัง

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

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

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

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

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

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

เรื่องมันมีอยู่ว่า ทำไม มันใช้ได้ กับการเขียน 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

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ .... หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ

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

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

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

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

ไม่เป็นที่น่าแปลกใจ ที่อยู่ดีดี ข่าว IE9 ก็โผล่มาให้เราได้งงงวย และมันก็น่าจะเป็นเช่นนั้น เพราะว่า ทั้ง IE6, IE7 และ IE8 ตามใครเขาไม่ทันสักอัน ใครอยากอ่านเพิ่มเติม ก็ตามลิงค์ไปครับ (An Early Look At IE9 for Developers)

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

หน้าเว็บมันอาจจะยังเละๆ เพราะยังไม่ได้เขียน CSS ไปใส่ ลำพังแค่เขียน PHP กับ HTML ก็ ลืมหน้าลืมหลัง เขียนไปเขียนมา เล่นทำให้ผมเกลียด HTML5 ไปในบัดดล อันความง่ายของภาษาทำให้มันยากไปเสียฉิบ

ใช่ครับ ผมเปลี่ยนชุดภาษาโครงสร้างหน้าเว็บ เป็น HTML5 และเขียน CSS2.1 ซึ่ง ที่ยังเขียน CSS2.1 นั้นเพราะว่า ยังห่วง IE7 อยู่นั่นเอง ขนาดห่วง มันยังเละ เอาไว้แก้กันทีหลัง อยากเห็นว่ามันเป็นยังไง ก็ View Source ดูครับ (จริงๆ แล้ว ผมว่า คนที่นั่ง View Source เว็บ ThaiCSS บ่อยๆ น่าจะได้อะไรเยอะว่ามานั่งตามอ่านบทความที่ผมเขียนนะเนี่ย)

คิดเอาไว้เยอะ ทำได้นิดเดียว อย่างน้อยก็ดีกว่าไม่ได้ทำอะไรเลย

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

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

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

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

สร้าง 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 ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^)

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

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

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

หลักการคือ การใช้ Background Position เพื่อกำหนดจุดแสดงแบบว่า จุดยืนของใคร จุดยืนของมัน จะได้แสดงผลเฉพาะที่ของพื้นหลังได้อย่างถูกต้อง

หลายท่านคงยังงเรื่อง SEO หรือ Search Engine Optimize เผอิญมีหนุ่มนิรนาม ผู้ซึ่งมีความสามารถและให้ความสนใจ แถมอยากถ่ายทอดพลังให้คนตาดำๆ ทั่วๆ ไปอย่างเราให้ทราบด้วย

มาโพสต์ข้อความแสดงความคิดเห็นไว้ตาม บทความต่างๆ ที่ผมเขียน ก็เลยถือโอกาสเอามาแปะให้อ่านเพิ่มรอยหยักกัน ซะหน่อยครับ กับ XHTML, CSS, WCAG มันเกี่ยวกับ SEO ยังไง เซิญแซ่บ

เห็นด้วยกับทุกท่านครับ ดีใจที่เห็นคนไทยมีคนสนใจ XHTML กับ CSS และพยายามใช้ให้ถูกต้อง เพราะประเทศอื่น ๆ เขาไปกันไกลแล้ว จริง ๆ ผมเคยคิดที่จะทำเว็บเช่นนี้เหมือนกัน แต่ไม่มีเวลา ก็เลยล้มเลิกไป แต่ตัวผมเองนั้นก็ศึกษา XHTML, CSS และ WCAG 1.0 + WCAG 2.0 มามากกว่า 5 ปีแล้ว (พอดีว่าทำงานในองค์กรคนพิการ แล้วเขามีข้อบังคับว่า ต้องรู้จัก 3 ตัวนี้ซึ่งมีส่วนช่วยให้คนพิการเข้าถึงข้อมูลข่าวสารจากเว็บได้สะดวกขึ้น)

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

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

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

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

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

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

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

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

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

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

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

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

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

และก้าวข้ามขีดจำกัดของ 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

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

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

ปัญหา

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

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

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ 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 มันลึกซึ้งเกินกว่าคำบรรยาย อาจจะบอกได้ว่าลึกซึ้งเกินคำว่ารัก ของผู้ชายบางคนด้วยซ้ำไป อย่างไรนั่นหรือ มาดูกันทีละอย่าง

บริษัท มอนซูน คอมมูนิเคชั่นส์ จำกัด

โทรศัพท์: 02-618-7910 แฟกซ์: 02-618-7911

Job Description: WordPress Web Developer / Programmer

รายละเอียดเกี่ยวกับบริษัท

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

บริษัทฯ ตั้งใกล้สถานีรถไฟฟ้าสะพานควาย เดินทางสะดวกทาง รถโดยสาร รถไฟฟ้า และรถส่วนบุคคล บนถนนประดิพัทธ์

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

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

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

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

[accesskey]

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