CSS Positioning Layout กับอนาคตที่ยังไม่แน่นอน

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

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

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

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

"CSS Advanced Layout Module" (ชื่อเก่า) ซึ่งตอนนี้ อยู่ในขั้น WD คือ Working Draft และเปลี่ยนชื่อมาเป็น "CSS Template Layout Module" เมื่อ เมษายน 2009

มีอยู่อีก 2 อย่าง ที่ต้องจำให้ขึ้นใจ ว่า CSS มีไว้เพื่ออะไร นั่นก็คือ

  1. จัดหน้า
  2. เทสี

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

Tablet ในอนาคต จะบางลง จนม้วนได้ ขนาดใหญ่ขึ้นเพื่อการใช้งานที่ง่าย จะมี Tablet บางยี่ห้อ ที่ทำออกมาเพื่อ "เล่น" และ "อ่าน" คือ ติดตามข่าวสาร และอ่านหนังสือ จนทำให้ สื่อสิ่งพิมพ์ ประเภท "หนังสือพิมพ์" เข้ามาคลุกฝุ่นด้วย

อีกไม่เกิน 15 ปี หนังสือพิมพ์ (บางสำนักพิมพ์) จะเลิกใช้กระดาษ แต่หันมาใช้ วัสดุที่ทำขึ้นมาเพื่อให้ความรู้สึกคล้ายกระดาษ แถมออนไลน์ด้วย 5G แทน นั่นแสดงว่า เราซื้อหนังสือพิมพ์ ครั้งเดียว ส่งซ่อมบ้าง บางเวลา ส่วนเนื้อหา จะมาทางอากาศ

แล้ว Positioning Layout มันจำเป็นที่จะมาแทนที่ Floating ขนาดนั้นหรือ คำตอบคือ จำเป็นครับ เพราะโครงสร้างการจัดหน้าต่อไป มันจะเป็นหน้าเอกสารที่ ใหญ่และซับซ้อน นึกล่วงไปถึงการทำงานร่วมกันของหลายๆ คนกับข้อมูลเอกสารหน้าเดียว การแบ่ง Slot หรือ ช่อง หรือ สัดส่วนสำหรับให้หลายๆ คนร่วมกันทำ จึงต้องเกิดขึ้นตามมา อาทิเช่น ถ้าเราต้องจัดหน้าเอกสารร่วมกับคนอื่น อีกสัก 2-3 คน และหน้าเอกสารนั้น มันสามารถโยกย้าย ไปมาทั้งชุด ได้อย่างง่ายดาย นาย ก. รับผิดชอบ โซนข่าวกีฬา นาย ข. รับผิดชอบ ข่าวการเมือง สังคม นาย ค. รับผิดชอบข่าวอาชญากรรม ซึ่ง ทั้งสามคนนี้ ไม่ได้จัดหน้าเฉพาะ เว็บอย่างเดียว เพราะเนื้อหา 1 ชิ้น ที่เกิดขึ้นนั้น อาจจะพ่วงไปทั้ง หนังสือพิมพ์ ป้ายโฆษณา ตู้เย็น โทรทัศน์ ซึ่งแต่ละอย่าง หน้าจอมันมีขนาดและรูปแบบไม่เหมือนกันเลย

ถ้าเอกสาร 1 หน้า แสดง Layout ออกมาในลักษณะ นี้

positioning

การเขียน CSS จะขึ้นต้นด้วยการสั่งรูปแบบการแสดง Layout ออกมาก่อน นั่นก็คือ การสั่ง <body> ให้แสดงผลอย่าง รูปภาพด้านบน

นั่นก็คือ ให้ <body> แสดงผลตามรูปแบบที่ได้วางเอาไว้แล้ว ตัวหนังสือ aa หรือ bc หรือ dd นั้น สร้างขึ้นมาหรือ มีไว้เพื่อ จำลอง รูปแบบการจองพื้นที่ของ Column ของหน้าเอกสาร แล้วเราจึงสั่ง HTML Element แสดงผลตามที่เราได้กำหนดไว้ โดย

เมื่อ Element ถูกสั่งให้ไปอยู่ที่ ตำแหน่ง หรือ Position ใดแล้ว Element นั้น ก็จะจับจองพื้นที่ส่วนนั้นไว้

จากหน้าเอกสารดานบนนั้น มันมีทั้งหมด 2 คอลัมน์ header และ footer จึงมี aa และ dd เพื่อให้จองพื้นที่ทั้งสองคอลัมน์ เอาไว้

เมื่อ ประกาศให้ Element ใด จับจองตำแหน่งแล้ว Element นั้น จะแปลงร่างเป็น ::slot ทันที ทำให้ต่อไป เวลาเราจะสั่งงาน เราต้องเริ่มสั่งที่ ::slot นั้นๆ เช่น

เมื่อกลายเป็น ::slot หรือ parent แล้ว การเขียน CSS Selector เพื่อกำหนดข้าวของ ใน slot ใดๆ จึงต้องเปลี่ยนแปลงมาใช้ Child Selector ซึ่งต้อง ร่วมกับ Combinators Selector กันระนาว

ต่อไป เวลาที่ ย้าย ตำแหน่งของ แต่ละ ::slot() เราก็สามารถ ย้ายไปได้ทั้งยวง โดยที่ไม่กระทบ เนื้อหาส่วนอื่นๆ

โลกแห่ง Multitouch

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

พร้อมๆ กันนั้น เพื่อนทาง Facebook ก็ โผล่หน้าขึ้นมาทักทายที่กรอบบนด้านขวามือ ชวนไปเที่ยว

แต่ ทว่า เรายังใช้หนังสือพิมพ์ ค้นหาข่าว ด้วย Google (ถึงตอนนั้น กูเกิลคง กว้านเอาสื่อหลายสำนักเข้าท้องไปเรียบร้อย)

แต่เมื่อเวลานั้นมาถึง ผมคง เลี้ยงไก่ เลี้ยงปลา อยู่บ้านแล้วแหละ

อยากไปใช้ Multitouch กับทุ่งไม้ ใบหญ้า หมูหมา กาไก่ ที่บ้าน

หวังว่า อย่างน้อย ตอนผมตาย เพื่อใน Facebook ใน Twitter คงไปงานเผา สัก คน สอง คน

มีความสุขกับการใช้ชีวิตครับ

Back to Top

5 Responses to CSS Positioning Layout กับอนาคตที่ยังไม่แน่นอน

  1. StingerK

    ขอบคุณที่เขียนเรื่องดีๆให้อ่านครับ

    Reply

  2. tumlor

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

    แล้วจะมีสักกี่คนที่จะทำอย่างนั้นได้จริงเมื่อเทียบวงการทำเว็บในไทยทั้งหมด ทุกวันนี้ก็เห็นๆ กันอยู่ไม่ต้องไปใช้เวลาให้มากหรอก นี่เลย open source CMS ที่แจกฟรีมีเป็นกะตั้กอยากได้ตัวไหนเลือกเอา ไม่เสียเวลาด้วย รู้แค่ว่าจะเอาอะไรใส่ครอบได้บ้าง ไม่ต้องรู้แกนก็ได้ theme สวยๆ มีแจกฟรีเยอะ เผลอๆ เอามาขายได้อีกต่อ

    แล้วอย่างนี้เมื่อไหร่เรา (เว็บไทยและนักพัฒนา) จะสร้างอะไรที่เป็นเทคโนโลยีเองบ้าง คือสามารถเป็นได้ทั้งผู้สร้าง ผู้ใช้(รวมคนทั้งโลกด้วย) และผู้ขาย ทุกวันนี้อะไรที่ออกมาใหม่ๆ ทำไมต้องเป็นฝรั่งก่อนทุกทีโดยเฉพาะอเมริกา เช่น facebook , twitter, youtube ,blackberry หรืออะไรก็ตามที่มันเป็นระดับโลก .etc. คิดว่าเป็นเพราะไรหรือ ?

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

    เข้าใจว่าเมื่อก่อนเราคิดทำให้เหมือนเขาอยู่ แต่ก็แค่เริ่มต้นเท่านั้นและหายไป
    -cpu เราก็ทำได้ แต่พอ intel ออกรุ่นใหม่เลยหยุด ยากไป ใช้คนเยอะ ทุนเยอะ ซับซ้อน
    -เวิร์ดจุฬา พอ ms office ออกมาใหม่ เลยหยุดไป
    -สร้าง OS เราก็ทำ แต่พอฝรั่งมี OS ตัวใหม่สู้ไม่ได้ เลยหยุดไป
    -เขียนเกม ตอนแรกคึกคัก แต่สู้ play1 2 3 xbox เลยหยุดไป
    -ยิ่งวงการเว็บไม่ต้องพูดถึงไปถึงไหนแล้วไม่รู้ มาตรฐานใหม่ๆ ออกกันมาเยอะเหลือเกิน

    ที่จริงหลายๆ อย่างเราก็ทำได้ ตอนแรกๆ มันอาจจะยังไม่ดี แต่ถ้าพัฒนาไม่หยุดผมเชื่อว่าเราทำได้แน่นอน และอาจจะทำได้ดีกว่าฝรั่งด้วยซ้ำ

    เดี๋ยวนี้ไม่ใช้แค่ฝรั่งแล้ว ยังมีอินเดีย จีน ญีปุ่น เกาหลี เวียดนาม สิงคโปร์

    แต่ ณ วันนี้เรากำลังยืนอยู่จุดไหน และกำลังจะเดินไปทางไหน
    หรือว่าเรากำลังติดกับดัก(เทคโนโลยี)เสียแล้ว….

    Reply

  3. อาชีพ

    เอาเป็นว่า "ทำมา หากินน่ะ"
    ;)

    Reply

  4. Apichai

    ขอบคุณ เป็นเว็ปที่มีประโยชน์กับมือมใหม่อย่างผมมากและอีกหลายๆคนที่เก่งอยู่แล้ว ชอบสไตพี่เค้ามากครับ 555

    Reply

  5. toon

    ความรู้ใหม่ ปกติจะใช้ margin-ตำแหน่ง desofgvkg]p

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top