วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้

โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง ว่าไปเยอะแล้ว มาดูโค้ทบ้าง

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

ในส่วนของ HTML ก็จะใช้ unordered list ตามปกติ สามารถใส่ซ้อนกันไปได้เรื่อยๆ เช่น

<ul>
  <li>Home
    <ul>
      <li>Product
          <ul>
            <li>Computer</li>
            <li>Printer</li>
            <li>Scanner</li>
          </ul>
      </li>
      <li>Client</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </li>
</ul>

จากนั้นในส่วนของ css ก็จะเขียนให้มาควบคุมการแสดงผล โดยนอกจาก css แล้วยังได้ใช้รูป gif อีกทั้งหมด 4 รูปเพื่อให้ลากเส้นของโครงสร้างต้นไม้ ดังนี้

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}

/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}

สุดท้ายก็ใช้ javascript hack สำหรับ ie โดยในที่นี้ใช้ ie-css3 ร่วมกับ jquery ประมาณนี้

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->

*ไม่ต้องใช้ hack ก็ยังสามารถดู sitemap ได้ใน ie แต่เส้นที่ลากอาจจะผิดเพี้ยนไปบ้าง

แค่นี้ก็ได้ sitemap ง่ายๆ โดยไม่ต้องเสียเวลาไปกับมันมากอีกต่อไป!

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

กรณีศึกษา “กล่องหล่น”
ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels

เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้

IE8 Boxes

แต่ถ้าดูใน ie6 หล่ะ?

โค้ทเดิม ใน IE6

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า

มาดูโค้ทกันก่อน อันแรกเป็น css

div#container{
	width: 400px;
	border:1px solid black;
}
div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
}
div#right{
	background: green;
	width:200px;
	float:left;
}

และ html

This is left content
This is right content

จะเห็นว่ามีกรอบ ขนาด 400 pixels และใส่กล่องเข้าไป 2 กล่อง คือ
- left ขนาด 195px รวมระยะห่างจากขอบ 5px เป็น 200px
- และ right ขนาด 200px

ถึงตอนนี้หลายๆคนอาจจะกลับมานั่งบวกลบคูณหารใหม่(แล้วก็แอบคิดว่าเราตกเลขหรือเปล่า) แต่คำนวนยังไงมันก็ไม่ผิดนี่หว่า แล้วมันเกิดอะไรขึ้น?

สิ่งที่เกิดก็คือ เมื่อมีการใช้คำสั่ง float แล้วให้มีช่องว่าง(margin) ในด้านที่ float ไป เจ้า ie6 จะทำการเบิ้ลช่องว่างนั้นไปอีกเท่าตัวโดยไม่มีสาเหตุ หรือที่รู้จักกันในนามว่า Double Margin Bug

ช่องว่างระหว่างเรา
ทดลองดูปัญหากันแบบชัดๆ ลองเขียน css ดังนี้

div#foo {
   float: left;
   border: 1px solid red;
   width: 50px;
   height: 50px;
   margin: 50px;
}

คือ สร้างกล่อง ขนาด 50×50 กรอบสีแดง และให้มีช่องว่างขนาด 50 pixel รอบๆกล่อง

จากนั้นก็เอาไปใส่ใน html แบบนี้

ดูๆโค้ทแล้วก็ไม่น่าจะมีอะไร แต่ลองเปิดดูใน ie6 เทียบกับ ie8

IE8

IE6

จะเห็นว่าใน ie6 มีช่องว่างเพิ่มขึ้นมาทางด้านซ้ายอีก 50 pixels หรืออีกเท่าตัวของที่ตั้งไว้

แก้ยังไงหล่ะ?
วิธีแก้ไขนี้ไม่ยาก แต่ขัดใจพอสมควร ก็คือการเพิ่ม display:inline เข้าไปยังกล่องที่มีปัญหา ดังนี้

div#foo {
   width: 50px;
   height: 50px;
   margin: 50px;
   float:left;
   border: 1px solid red;
   display:inline;
}

ผลลัพท์ใน ie6

IE6 after display:inline

div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
	display:inline;
}

ลองดูผลลัพท์

IE6 กล่องไม่หล่นแล้ว!

สรุป
จะเห็นว่าปัญหาที่เกิดมันดูไม่มีที่มาที่ไป และวิธีแก้ก็ไม่ค่อยถูกต้องตาม standard เท่าไหร่นัก(ตามหลักแล้ว element ที่ float จะไม่เป็น inline และจะไม่กำหนดความกว้างของ element ที่เป็น inline) แต่การรู้ปัญหาอย่างชัดเจนก็น่าจะช่วยให้แก้ปัญหาที่เจอได้อย่างมีหลักการมากขึ้นและเสียเวลาน้อยลง ซึ่งเจ้ากล่องหล่นนี้ไม่ใช่ปัญหาเดียวที่พบบ่อยใน ie6 ถ้าจะเอาทั้งหมดมาเขียนก็รวมกันได้เป็นมหากาพย์เลยทีเดียว ก็ได้แต่หวังว่าจำนวนผู้ใช้ ie6 ในบ้านเราจะลดลง(อย่างรวดเร็ว) เหมือนบ้างเมืองอื่นเขาซักที

ก่อนอื่นดูตารางก่อน

Table Layout

โค้ทของตาราง

This is Header



Main Menu
-Menu1

Content goes here!
This is content!

ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css

ออกมาจะหน้าตาเป็นแบบนี้

Css Div Layout

ก็คล้ายๆกัน ดูเผินๆก็ไม่มีอะไรต่าง แต่ทีนี้มาดูโค้ทกันบ้าง
ส่วนของ html จะเห็นว่าโค้ท html จะไม่ยุ่งยากเหมือนตอนทำตาราง ซึ่ง search engine จะชอบมากกว่า

This is Header
Main Menu
-Menu1
Content goes here!
This is content!

ส่วนของ css

div#container{
	width:350px;
	margin:0 auto;
	background:#cccccc;
}
div#header{
	text-align:center;
	background: #eeeeee;
}
div#menu{
	width:100px;
	float:left;
	background: #999999;
}
div#content{
	width:250px;
	float:left;
	background: #cccccc;
}

สองส่วนนี้เท่านั้น เป็นอันจบ ไม่เจ็บปวดอย่างที่คิด ตอนเอามาประกอบรวมกันก็สามารถทำได้ 2 แบบ คือ

1. ใส่โค้ท css ไว้ในส่วน head ของ html ใต้ tag

2. แยกโค้ท css ไว้ในไฟล์ .css แล้วทำลิงค์ไปหา โดยใช้ tag

ซึ่งการแยกโค้ทออกไปนั้นมีประโยชน์หลายอย่าง เช่น

1. ลดเวลาโหลดหน้าต่อๆไป ประหยัดแบนด์วิธ เนื่องจากบราวเซอร์จะเก็บ cache ของไฟล์ css ไว้ในเครื่อง
2. สามารถแก้ไขได้ง่ายถ้านำไปใช้หลายๆหน้า html เพราะจะแก้ที่ไฟล์ css ที่เดียว
3. อีกทั้งในส่วน media=”xxx” นั้นสามารถกำหนดได้หลายอย่าง เช่น print,screen เพื่อเปลี่ยน layout สำหรับการดูแบบต่างๆ

การทำตารางไปเป็น div นั้นเป็นแค่การเริ่มต้นให้เห็นภายเท่านั้นว่าถ้าไม่มีตารางจะทำ layout อย่างไร ซึ่งถ้าใช้จริงๆแล้วตัว css จะสามารถใช้ทำหน้าเว็บได้อย่างอิสระมากกว่าใช้ตาราง และ powerful กว่ามากในแง่ของการออกแบบ ซึ่งมันแจ่มมาก และหากใช้คล่องๆแล้วจะพบว่ามันง่ายกว่าใช้ table มากมายนัก

มันคืออะไรบ้างนะ?

“table based html” หรือที่เรียกกันว่า old school html table ก็คือการจัดหน้าเว็บโดยใช้ html table หรือ ตาราง เป็นหลัก ซึ่งเป็นการเขียนแบบที่ทำกันมานานแล้ว จะจัดหน้าหรือกำหนดอะไรก็มันจะใส่ลงไปในโค้ทส่วนของตารางเลย

“css based layout”คือการใช้ cascading style sheet เข้ามาช่วยในการกำหนด layout และใช้ตารางเฉพาะส่วนที่เนื้อหามันเป็นตารางจริงๆ เช่น ตารางเปรียบเทียบ แมทริกซ์ต่างๆ โดยมักจะแยกไฟล์ css ออกจากโค้ทส่วนของเนื้อหาเว็บไซต์

ดีกว่ายังไง?

1. โหลดเร็วกว่า จากเดิมที่ในไฟล์ html จะต้องมีการกำหนดรูปแบบการแสดงผลที่ตาราง แต่หากเขียนแบบ css จะกำหนดการแสดงผลไว้ในไฟล์ css แยก ทำให้สามารถใช้ร่วมกันได้ในหลายๆหน้า และไฟล์ดังกล่าวจะถูกเก็บไว้ใน catch ของบราวเซอร์ และไม่ถูกโหลดซ้ำๆหลายๆหน ทำให้ผู้ใช้งานเปิดเว็บได้เร็วขึ้นและประหยัดแบนวิธของเซิฟเวอร์ได้อีกด้วย
2. แก้ไขรูปแบบการแสดงผลง่าย หากต้องการแก้ก็ไม่ต้องไปนั่งแก้ทั้งเว็บ เพียงแค่แก้ในไฟล์ css ก็จะส่งผลไปถึงทุกๆหน้า
3. เกิดผลดีต่อ search engine และโปรแกรมช่วยเหลือคนพิการ(ประเภท screen reader) ทำให้อ่านเนื้อหาในเว็บเราได้ดีขึ้น การใช้ css จะลดโค้ทส่วนการแสดงผลออกไปจากหน้า html ทำให้โปรแกรมเข้าถึงเนื้อหาจริงได้ง่ายขึ้น อีกทั้งการใช้ html tag ที่มีความหมาย(sementic) เช่น h1, h2, p ทำให้โปรแกรมเข้าใจเนื้อหาในเว็บเรามากขึ้น และเว็บมาสเตอร์สามารถกำหนดได้ว่าอยากให้โปรแกรมมองว่าส่วนไหนสำคัญ
4. search engine friendly ยกตัวอย่างเช่น หากเราออกแบบเว็บให้มีเมนูย่อยด้านซ้ายและเนื้อหาอยู่ด้านขวาและเราต้องการเน้นเนื้อหาด้านขวามากกว่าซ้าย หากใช้ตาราง โค้ทของเราจะมีเนื้อหาส่วนเมนูย่อยด้านซ้ายขึ้นมาก่อน และด้านขวามาทีหลัง ทำให้ search engine ให้ความสำคัญกับเนื้อหาที่มาก่อนมากกว่า แต่หากใช้ css เราสามารถเขียนเนื้อหาด้านขวาให้มาก่อน และด้านซ้ายมาหลัง จากนั้นจึงค่อยจัดการแสดงผลให้อยู่ในตำแหน่งที่ต้องการได้ โดยรักษาลำดับความสำคัญของเนื้อหาที่มีต่อ search engine ไว้ได้ครบถ้วน
5. out of the box หากใช้ css  layout จนคล่องแล้วจะพบว่ามีวิธีการเขียนมากมายที่ทำให้สามารถเขียนเว็บไซต์ได้โดยไม่ถูกจำกัดโดยระบบของตาราง เช่น การซ้อนวัตถุต่างๆเป็นชั้นๆที่ตำแหน่งเดียวกันได้ การกำหนดให้วัตถุใดๆอยู่กับที่ก็ทำได้ และการจัดรูปแบบอื่นๆอีกมากมายตามแต่จะจินตนาการได้เลยทีเดียว
6. อื่นๆอีกมากมาย เช่น การที่โค้ท html ไม่รก ก็ทำให้ใช้งานคู่กับการเขียนภาษาโปรแกรมเช่น php แทรกลงไปได้ง่ายขึ้น ไม่ต้องสู้รบกับ tr th td เป็นต้น

มันยากกว่าใช้ table?

สำหรับคนที่เคยเขียนเว็บโดยใช้ table เป็นหลัก มันก็จะเกิดความยากขึ้นแน่ๆ เพราะต้องมานั่งเรียนรู้ เปลี่ยนวิธีคิด วิธีขึ้นโครงของเว็บซะใหม่ แต่หากตั้งใจจริงมันจะยากแค่ชั่วคราวเท่านั้น หลังจากฝึกใช้จนคุ้นเคยแล้วก็จะพบว่าบางอย่างยังจะทำได้ง่ายกว่าใช้ html table เสียอีก แต่ก็จริงอยู่ว่าบางส่วนจะพบว่าใช้ html table จะทำได้ง่ายกว่า และเสียเวลามากหากใช้ css เช่น การทำฟอร์มกรอกข้อมูล ซึ่งถ้าเจอปัญหาตรงนี้ จะกลับไปใช้ตารางบ้างก็คงไม่ว่าอะไรกัน

คุ้มหรือไม่?

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