CSS

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

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

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

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

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

เช่น ถ้าเราเขียน

body { 
background-color: #000000;
} 
img {
border: 0;
}

เมื่อเรานำ ไฟล์ css ไปใช้กับหน้าเว็บใดๆ แล้ว จะได้ค่า พื้นหลังของทุกหน้าเป็นสี #000000 และภาพทุกภาพที่มีอยู่ในแต่ละหน้า จะไม่มี เส้นขอบ และเมื่อเราไปใช้ tag <img src="" alt=""> เราไม่ต้องกำหนด border="0" ในแทกอีกที เพราะ css จัดการให้เรียบร้อยแล้ว และวิธีการกำหนด IMG ให้ border: 0; ใน css ไฟล์ลักษณะนี้ นอกจากจะช่วยไม่ให้ต้องเขียน border="0" ใน html แล้ว เวลาที่เราทำลิงค์จากภาพ ใน IE ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ

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

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

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

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

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

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

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

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

เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า

ลองเขียน selector ขึ้นมาสักตัว เช่น:

.floatbox {	
float: left;	
width: 100px; 	
margin: 5px 0 5px 60px; 	
border: 1px solid black;}

จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร