Radiz Sutthisoontorn

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

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

1. static
2. relative
3. absolute
4. fixed

ซึ่งแต่ละค่า value นั้น ก็จะให้ผลลัพธ์แตกต่างกันไป และ บาง value จะสามารถใช้ร่วมกับคำสั่ง top, bottom, left และ right ได้ เพื่อกำหนดจุดพิกัดในการแสดงผล ทีนี้ผมจะอธิบายคุณสมบัติของ value แต่ละตัวตามลำดับ ดังนี้ครับ

ข้อที่2: ทุกอย่างมันก็ไม่ได้เหมือนกันหมดไปเลยทีเดียว (ทั้ง ๆ ที่มันดูว่าเหมือนจะเหมือน) แล้วแต่ว่าคุณจะเผชิญกับปัญหาอะไร ที่เข้ามา

รู้กันใช่มั้ยครับว่าพอเราเริ่มทำเป็นแล้วมันมีเรื่องที่น่าเบื่อตามมาอีกอย่างหนึ่ง ก็คือ ปัญหาการ render การแสดงผลของในแต่ละ browser อีกซึ่งแต่ละ browser นั้นมีผู้พัฒนา และ มาตรฐานไม่เหมือนกันอีก เจอทีแรกผมก็สบถเลย แสดด … ทำไมมันไม่ทำมาให้มันเหมือน ๆ กันฟะ และ นั่นแหละที่ผมได้รู้จัก W3C และความฮิ … ของ browser บาง browser จุดเด่นความเก่งกาจของบาง browser ด้วย แม้นว่า W3C จะพยายามบัญญัติอะไรขึ้นมา มันก็พยายามทำอะไรที่เป็นตัวมันให้ได้สิน่า นั่นแหละ เหตุผลที่คุณต้องมานั่งเชค นั่ง hack นั่งปวดขมับปวดกบาล เพื่อให้มันแสดงผลได้เหมือนกันที่สุด (แต่ก็นะ ใช้ CSS Layout จะทำให้งานของเราแสดงผลได้แทบจะเหมือนกันเกือบ ๆ ทุก Modern Browser ฝรั่งเค้าบอกว่า 98% เชียวนะ ไม่รู้โม้ป่ะ) ทีนี้มันก็อยู่ที่เรา และ ลูกค้าของเราแล้วล่ะครับว่า requirement กันมาอย่างไร เพราะฉะนั้นคุณเองก็ต้องรอบคอบด้วยไม่ใช่ฆ่าตัวตาย เพราะงานตัวเอง

ย้อนกลับไปเมื่อ 1 ปีเกือบ ๆ สองปี ที่แล้วที่ผมยังใหม่สำหรับ CSS-XHTML อยู่ มีอะไรหลายอย่าง ๆ ที่ต้องปรับตัวปรับระบบความคิดต่าง ๆ หลาย ๆ อย่าง ด้วยความคุ้นชินกับการ design ในแบบ old school อยู่ ปัญหาของผมมันมีหลายอย่างมากมายมโหระทึกเลย จะเอาเจ้านี่ไว้ตรงนั้น แล้วจะเอาเจ้านั่นลอยไว้ตรงนี้ มันอะไรของมันนักหนาฟะ …

สารพัดจะสบถตามประสาคนปากจัดน่ะนะ เวลาคร่าว ๆ ในการปรับตัวให้คุ้นชินกับมันก็ประมาณเกือบ ๆ 5 เดือนเลยทีเดียว และ อีกประมาณ 2 – 3 เดือนสำหรับการปรับตัวให้หลุดพ้นจากการคิด การออกแบบในแบบเดิม ๆ (เป็นอิสรภาพจากตาราง) ถึงกระนั้นเวลา 1 ปี ผมก็ยังไม่ได้เข้าถึงขั้น advance coding เท่าไรนัก เพิ่งเริ่ม hand coding รวบรัดตัดตอนก็เมื่อ 4 เดือนที่ผ่านนี้เท่านั้นเอง
มองไปยังสิ่งแวดล้อมที่เป็นอยู่ ณ ปัจจุบัน คุณจะเห็นว่า มีนักเขียนเก่ง ๆ หลาย ๆ ท่านที่มีประสบการณ์เขียนหนังสือดีดีเกี่ยวกับเรื่องนี้ (แต่ยังไม่ใช่ในบ้านเรา) เขียนเกี่ยวกับ CSS เขียนเกี่ยวกับการออกแบบ การลำดับความคิด เกี่ยวกับการทำงานอย่างไรให้ถูกต้องเป็นไปตาม Standards จะมีใครบ้างที่เห็นว่าเรื่องนี้มันเป็นเรื่องท้าทาย และ น่าทดลองทำในบ้านเราบ้าง (แต่เป็นเรื่องน่ายินดี ที่ตอนนี้ website ใหญ่ ๆ ในไทยเริ่มเคลื่อนไหวกันแล้ว เช่น sanook.com (เฝ้ารอวัน debut ในเร็ววันนี้อย่างใจจดใจจ่อ), kapook.com, mThai.com, pantip.com และ อื่น ๆ ที่ผมยังไม่ได้ตรวจทานทั้งหมด

Part 3: คิด และ มองอย่าง ศิลปิน

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

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

Part 2: คิดและมองอย่าง วิศวกร

วิศวกรต่างรังสรรค์ผลงานต่าง ๆ ตามหลักวิธีการ และ บรรทัดฐานที่แน่นอน ปฏิบัติตามขั้นตอนอย่างเป็นระบบ และ มีจุดประสงค์จุดมุ่งหมายที่แน่วแน่ เช่น ไม้กระดานฝาบ้านต้องเรียงต่อกันอย่างเป็นระบบระเบียบ กำแพงต้องตั้งฉากกับพื้น เกียร์ต้องประกอบด้วยเฟืองที่ทำงานร่วมกันอย่างเป็นสัดเป็นส่วน

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

เพื่อน ๆ Designer หลายท่าน รวมถึงผมนั้น ต่างรังสรรค์ผลงานของตนเองมาจากความเข้าใจเกี่ยวกับศิลปะล้วน ๆ คงไม่มีใครปฏิเสธว่า เราจะมองงานของเราโดยรวมนั้นเป็นภาพ ๆ หนึ่งซึ่งเราจะปรุงเสริมเติมแต่งลงไปอย่างไร ส่วนการ code นั้นแทบจะไม่มีการได้คำนึงถึงเลย เราบางคนใช้ XHTML และ CSS ไปเรื่อยเปื่อยแบบตามมีตามเกิด จะมีใครบ้างที่เกิดความสงสัย ใคร่รู้ว่า ความหมายโดยแท้จริงนั้นมันมีอะไรอยู่บ้าง เราเพียงแต่คิดว่าเราจะเรียงกล่องเหล่านั้นออกมาให้สวยงามอย่างไร เคยคิดที่จะศึกษาธรรมชาติของมันโดยแท้จริงไหม CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 1) และ CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2) ส่วนใหญ่โดยธรรมชาติของพวกเราแล้วเราเพียงแต่คิดง่าย ๆ ว่า ขอแค่มันออกมาดูดีก็เป็นพอแล้ว คงเป็นส่วนน้อยที่อยากจะศึกษาให้เข้าใจถึงแก่นแท้ของ Web Standards นั้นเพื่อที่จะนำผลประโยชน์ที่จะได้มาใช้ให้เกิดผลกับงานของตนเอง และ ผู้ใช้ให้มากที่สุด

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

1. คิดและมองอย่าง นักเขียน
2. คิดและมองอย่าง วิศวกร
3. คิดและมองอย่าง ศิลปิน