browser ทุกวันนี้ ต่างก็ถูกพัฒนาขึ้นเรื่อย ๆ ทำให้เราสร้าง layout จาก css ได้ง่ายมากขึ้นด้วย float เป็นทางเลือกหนึ่งที่นิยมนำมาใช้ในการวาง layout ด้วย css แต่มันก็ไม่ใช่ทางออกทางเดียวนะครับ เพียงแต่ว่ามันง่ายในการใช้งาน ง่ายในการควบคุม เลยทำให้เป็นที่นิยมกันแพร่หลายมากกว่าวิธีอื่น ๆ
จากที่โอ๊ตเขียนไปเมื่อหลายเดือนก่อน ในบทความ “แนวทาง ในการแก้ไขปัญหา Float Model” ในส่วนของ css hack นั้น วันนี้ผมจะพูดถึง float จาก basic ไม่รู้ว่าจะง่ายพอเข้าใจ หรือ ทำให้งงกันไปใหญ่ ไม่รู้นะ เพราะหลายอาทิตย์ที่ผ่านมานั้น ใน webboard กับหลายคำถามที่ผมได้เข้าไปอ่าน ตอบบ้างไม่ตอบบ้างไม่ว่ากันนะ ยังเห็นว่าเป็นปัญหาเดียวกันอยู่ ซึ่งหลาย ๆ คนเห็นเป็นสิ่งที่งอกง่อยควรมองข้ามไป แต่ฐางคนเข้าใจว่าสิ่งเหล่านี้เป็นพื้นฐานที่ดีในการปูพื้นเพื่อพัฒนาตนเองนะครับ (พออ่านถึงตอนนี้มีใครเดือดดาล ก็กด “9” หรือ ชื่นชอบกด “4” กด กด กด) จุดประสงค์จริง ๆ แล้ว คืออยากจะปูพื้นฐานให้แน่น ๆ กันมากกว่า ไม่อยากฝึกให้ทำอะไรฉาบฉวยพอเอาตัวรอด พอทำได้ ภาษาบ้านผมเรียก “พอก่ำก่า” “พอกะเทิน” “โชว์กล้ามดาก” หรือ คนกรุงเรียก “เกรียน” นั่นเอง แล้วไปบอกว่าเอ้ย กูทำได้ กูเก่ง …. (ช่าง “ตื๊ดดด” พวกเขาเถอะครับ) เข้าเรื่องดีกว่า
ก่อนอื่นขอย้ำความรู้สึกพื้นฐานให้กับคุณ ๆ ก่อน จุดประสงค์ของการเขียน xhtml css คืออะไร? คือการเขียน code ให้ประหยัดที่สุดเท่าที่จะทำได้ เกิดการ accessibility สูงสุดเท่าที่จะทำได้ เป็นมาตรฐานสูงสุดเท่าที่จะทำได้ เพราะฉะนั้น คุณจะทำอย่างไรให้ได้แบบนั้น จะเขียนอย่างไรให้ code ของคุณนั้นมัน sementic จะวาง layout อย่างไรให้ประหยัดสวยงามเบาโหวง โหลดปรี๊ด ๆ ส่วนในเรื่องของธุรกิจ จะเอาแต่ได้ เรื่องอื่นช่างมันไว้ทีหลัง ขอเงินลงกระเป๋าอย่างเดียวก็แล้วแต่ หรือ จะให้เท่ากัน win win ทั้งคู่ เอาใจเขาใจเรา ทำเต็มที่ เพื่องานที่ดีสมเงินที่ลูกค้าจ่าย หรือ ให้คุ้มค่าน้ำเงินที่บริษัทจ้างก็เลือกเอาชีวิตใครก็ ชีวิตใคร … (นอกเรื่องอีกละ) โอเคครับ วันนี้ผมมาสอนการวาง Layout เบื้องต้น โดยใช้ float ก็แล้วกัน
float คืออะไร?
float ทำให้ element กลายสภาพจากสถานะปกติ (เป็นสภาพไร้น้ำหนัก อ๊ะ ! ล้อเล่น) ให้สามารถลอยไป ณ ตำแหน่งที่เรากำหนด และ อนุญาติ ให้ text หรือ element อื่น ๆ ล้อมรอบมันได้ พูดง่าย ๆ ว่า float มันก็คือ คำสั่ง css ที่สร้างมาเพื่อแทน attributes align=”left” กับ align=”right” ที่เราใช้กันสมัยยังเป็น html ธรรมดานั่นเอง เหมือนกับเวลาที่เหล่า Print Designer ออกแบบตัวหนังสือ ในบทความให้วิ่งรอบรูปภาพ Web Designer ก็ทำได้เช่นกันโดยใช้เจ้า float นี่ล่ะครับ
เมื่อเราใช้คุณสมบัติ float จะทำให้ element ที่รับคุณสมบัตินี้ไป สามารถ float ไปทางซ้าย และ ทางขวา ของ element ที่เป็น container ของมันเอง แต่ไม่สามารถ float ไปอยู่บนสุด และ ล่างสุดได้นะครับ เพราะฉะนั้นก็เหมือนกับการเขียน html แบบเก่า ก็คือ ทุก ๆ element นั้นสามารถดึงเอาคุณสมบัติ float ไปใช้
ตัวอย่าง สมมติว่าผมมีภาพ ๆ นึงที่อยากจะให้มันชิดซ้าย และ มีตัวหนังสือวิ่งล้อมรอบมันแบบเวลาเราออกแบบสิ่งพิมพ์จะทำอย่างไร โดยระหว่างภาพกับตัวอักษรที่ล้อมกรอบนั้นมีระยะห่างระหว่างกัน 0.625em ลองมาลำดับความคิดกัน ถ้าเราเขียน xhtml ปกติ มันก็จะเริ่มจากด้านซ้ายอยู่แล้ว เพราะฉะนั้นเราก็ควรจะเขียน img ใน div ที่เป็นตัวครอบขึ้นมาก่อน p ดังนี้:
<div class="contentStyle01"> <img src="http://www.slice2css.com/ext_photo/Autumn_Skyward.jpg" width="150" height="120" alt="" /> <p>ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ float ทดสอบการ</p> </div>
โดยธรรมชาติแล้วจะออกมาอย่างไร เราจะยังไม่เขียน css สั่งอะไรลงไปใน xhtml ข้างต้นนี้ ทีนี้ผมจะลองสั่งให้รูปภาพติด float: left; เข้าไปทีนี้ ให้คุณลองดูว่าจะเกิดอะไรกับมัน ให้คุณลองเพิ่มคำสั่ง css ที่ผมจะเขียนให้ดูต่อไปนี้ลงไปเพื่อควบคุม xhtml ข้างต้นดูครับ
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; } .contentStyle01 {width: 550px; font-size: 0.75em;} .contentStyle01 img {float: left; margin: 0.625em; border: 1px solid #666;}
ลองดูว่าผลลัพธ์ที่ได้ออกมาจะเป็นอย่างไร ได้ตามที่โจทย์ตั้งไหมครับ จากตัวอย่าง คำสั่ง float ทำให้ element ที่เราต้องการนั้นหลุดออกจาก Document Flow (Document Flow คือ ธรรมชาติของการลำดับการแสดงของ เอกสาร ซึ่งในที่นี่ หมายถึงสิ่งที่ engine ของ browsers ต่าง ๆ ถูกกับหนดค่า default ให้กับการแสดงผลของ element ต่าง ๆ ว่าให้แสดงมาในลักษณะใด ลำดับใด) คำสั่ง css สามารถปลด หรือ แก้ไขค่า default เหล่านั้นได้ให้เป็นไปตามที่เราต้องการ และ จากตัวอย่างของตอนที่ 1 นี้จะเห็นได้ว่า float จะบังคับให้ element ที่กำหนดนั้นไปติดอยู่กับข้างใดข้างหนึ่ง ตามที่สั่งเสียก่อน และ element ที่เหลือก็จะขยับขึ้นมาเติมเต็มส่วนที่เหลือเหล่านั้นจนครบ ความกว้าง 550px ของ div แล้วก็จะลดหลั่นลงไปเรื่อย ๆ อย่างที่เราเห็นว่า ตัวหนังสือมันล้อมรอบรูปภาพตามที่เรากำหนด
จากบทความนี้ ช่วยให้คุณเข้าใจอะไรบ้าง หรือ มีประสิทธิภาพ หรือ ไร้ประสิทธิภาพอย่างไร ให้ comment ได้ไม่ต้องเม้มครับ พบกันใหม่ในตอนที่ 2 ครับ
0 Responses to ลับสมองไปกับ float ตอนที่ 1