ความรู้พื้นฐานของ CSS

การเขียน 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 ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ

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

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

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

ดูการ Float แบบอิสระแล้ว คราวนี้ลองมาดูการ Float แบบอ้างอิงตำแหน่งจาก Element ก่อนหน้ากันบ้างครับ เช่น การจับ div tags เข้าไปรวมกลุ่มกันใน a div tag (ถ้าผมอ้างถึงอะไรที่มากกว่า 1 ผมจะเติม s ตามท้ายเสมอนะครับ อิอิ) หรือการ จับ divs ยัดเข้าไปใน div ครับ คล้ายๆ กับการวางเลย์เอ๊าท์ แต่ตอนนี้ให้ดูแค่ลักษณะการ float อย่างเดียวกันก่อนครับ

ตามที่พรอยากให้เขียนนะครับ วันนี้ผมจะพูดถึงเจ้า Internet Explorer จากค่าย Microsucks ที่อาจจะป่วนศีรษะเราหลาย ๆ คนให้กลัดกลุ้มใจเวลาทำงาน

วันนี้ผมจะพูดเกี่ยวกับการเขียน Conditional Comment ใน Internet Explorer หรือที่เพื่อน ๆ เรียกกันว่า Rules ให้ Internet Explorer นั่นเอง

Conditional Comment นั้นจะทำงานได้ในเฉพาะ Internet Explorer เท่านั้น เป็นส่วนที่ออกแบบมาเพื่อการนี้เลยเพื่อ เป็นการสั่งให้เพิ่มคุณสมบัติพิเศษ หรืออะไรก็แล้วแต่ให้กับ Internet Explorer และ Conditional Comment นี้จะทำงานได้กับ Internet Explorer ตั้งแต่ Version 5 ขึ้นไปและอาจจะเป็นไปได้ว่าการทำงานของมันใน IE5, IE5.5 และ IE6 จะแตกต่างกันด้วย

Conditional Comment จะเขียนในลักษณะนี้ครับ

<!--[if IE 6]>

คุณสมบัติพิเศษสำหรับ Internet Explorer เขียนที่นี่

<![endif]-->

โครงสร้างหลัก ๆ ของมันก็คือ เหมือนการเขียน comment ธรรมดาใน (X)HTML TAGs ซึ่งนั่นก็คือ การเขียนแบบนี้ “<!– –>” นั่นเอง ซึ่ง browser ตัวอื่น ๆ นั้นจะมองเห็นมันเป็น comment ธรรมดา ๆ เท่านั้นเอง และ จะอ่านข้ามไป

Internet Explorer นั้นถูกกำหนดมาให้มองเห็นและทำงานตามคำสั่งก็ต่อเมื่อได้เห็น การเขียน comment นี้ “<!– [if IE] –>” เท่านั้น เมื่อ Internet Explorer เจอมันจะมองเป็นคำสั่ง ๆ หนึ่งเหมือนเขียนกับที่มันอ่าน (X)HTML TAGs หรือ Script โปรแกรมตัวอื่น ๆ

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

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

การเปลี่ยนใจจาก table มา div ก็เหมือนจะรู้จักแต่ div เท่านั้นที่ผมจำได้ในตอนแรกๆ ที่ผมเขียน css+xhtml ผม div กระจายวายป่วงมากๆ เช่น แค่การทำตัวหนังสือใหญ่ๆ เป็น header ผมก็จะใช้