HTML5 กับ CSS3 อนาคตที่จะมาบรรจบกัน ตอนที่ 1

คำเตือน บทความนี้เป็นบทความเฉพาะกลุ่มเป้าหมาย เนื้อหาส่วนใหญ่ไม่ได้อยู่ในโลกปัจจุบัน ไม่ค่อยเหมาะสำหรับคนที่มองอนาคตระยะ 15 เมตร

คำเตือนที่สอง เนื้อหานี้ ไม่เหมาะสำหรับผู้ใช้ทั่วไป และ ตัวอย่างทั้งหมด ไม่สามารถใช้ User Agent ที่เป็น Browsers อย่าง IE ทั้ง 6-7-8 เรียกดูได้ เพราะฉะนั้น กรุณาใช้ Firefox, Opera, Safari, หรือ Chrome เข้าชม

คำเตือนที่สาม ผมเกรียน…

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

-1-

คำถามชุดที่หนึ่ง ราคา สี่ร้อยเก้าสิบเก้าบาท

ถามว่า HTML5 จะใช้ได้ในเร็ววันนี้หรือไม่

คำตอบคือ ทั้งใช่ และไม่ใช่ อย่างไรบ้างหละ

สำหรับคำตอบที่บอกว่า ยังไม่ได้ใช้ในเร็ววันนี้ ก็คงจะเอนเอียงไปทางผู้ที่ทำเว็บเพื่อรองรับเนื้อหาข่าวสารที่พึ่งพิงผู้ที่ใช้ IE เข้าท่องเว็บไซท์เป็นหลัก เพราะ HTML5 บางElement (ส่วนใหญ่) ยังคงเป็นบรุษนิรนาม ใน IE8 เราอาจจะต้องรอจนถึง IE9 นั่นอาจจะเป็น ปลายปี 2012 หรือ ช้ากว่า

สำหรับคนที่บอกว่า จะได้ใช้แล้วแน่ๆ ก็คงเป็นนักพัฒนา นักแสวงหาความรู้ใหม่ๆ ทั้งหลาย เจ้าของ Web Log ที่อยากจะลองเล่นเพื่อศึกษาหาประสบการณ์ เพื่อเตรียมความพร้อมสำหรับอนาคตที่ไม่รู้ว่ามันจะมาถึงเมื่อไหร่ เช่น ป๋า Bruce Lawson ที่ลองเล่นไปก่อนใครแล้ว (ใช่สิ เพราะลุงแกพัฒนาเอง เล่นเองนี่)

ใครจะเลือกแบบไหน ก็ตามสบายครับ ไม่ว่ากัน บ้านเราสิทธิและเสรีภาพ เข้าถึงแล้ว เหลือเพียงแค่ความเท่าเทียม ที่มันยังไม่มี

คำถามชุดที่ 2 ราคา สองพันสามบาท

ถามว่า CSS3 ใกล้จะได้ใช้หรือยัง

คำตอบ เอาเป็นว่า เราอาจจะได้ใช้พร้อมๆ กับวันที่บ้านเรามีรถไฟความเร็วสูงจากกรุงเทพ ไปเชียงใหม่ นั่นแหละ แต่สำหรับคนที่ใฝ่หาและอยากลอง ?คุณได้สิทธิ์นั้น เดี๋ยวนี้? แค่เปลี่ยนจากการถามสาวยาคูลล์เป็นถามพี่กูเกิลแทน คำตอบจะหลั่งไหลเลยทีเดียว

-2-

HTML5

วันก่อน ผมเข้าไปอ่านเนื้อหาที่ Bruce Lawson ได้นั่งคุยกับ Ian Hickson (Editor of the HTML 5 specification) ถึงเรื่องราวของ HTML5 มีท่อนที่ผมนั่งขำอยู่คนเดียว เมื่อทั้งสองคนพูดถึงการ ปล่อย HTML5 ออกมา และเมื่อ Lawson ถามถึง HTML6

ประมาณ ตุลาคมนี้ HTML5 อาจจะถูกประกาศใช้ (สอดรับกับการปล่อย Windows 7 ของ ไมโครซอฟท์) Ian Hickson บอกว่าอนาคตของ HTML6 อาจจะเริ่มขึ้นในตอนนั้นเลยในทันที เพราะมีหลายอย่างที่ไม่สามารถใส่เข้ามา HTML5 ได้ ซึ่งถ้าใส่เข้าไปแล้ว อาจจะเป็นการทำให้ ผู้ให้บริการด้าน บราวเซอร์ทั้งหลายแบกภาระในการสร้างบราวเซอร์เพื่อให้รองรับคุณสมบัติของภาษามากจนเกินไป จึงรอเอาไว้อัดในเวอร์ชั่นต่อไปแทน

ผมไม่ขอกล่าวถึง HTML6 ในตอนนี้นะครับ มันจะมั่วมากไป

ผมขำเพราะ HTML4 บางคนยังมั่วอยู่เลย

CSS3

สำหรับ CSS3 Selector ที่ประกาศออกมานั้น สามารถใช้งานได้ในบราวเซอร์ทั่วไปแล้ว รวมถึง IE8 แต่ก็แค่เพียงบางตัวเท่านั้น ส่วน pseudo-class Selector เมาๆ อย่าง ตระกูล :nth-child และผองเพื่อนนั้น IE8 ยังมึนอยู่

สำหรับตัวอย่างวันนี้ ผมพาข้ามไปไกลกว่านั้น เพราะเราจะเข้าสู่ CSS3 Advance Layout Module กันไปโน่นเลย เราจะได้เห็นบทบาทใหม่ของการเขียน CSS แบบ OOP การใช้ Position แบบ CSS จริงๆ ทำความเข้าใจ ที่มาและที่ไปของ Float เพราะ Float ไม่ได้ถูกใช้ให้เป็นตัวจัดการ Layout แต่ใช้เป็นตัวกำหนดจัดการกับ Object ที่อยู่ใน Layout นั่นต่างหาก ดังจะเห็นได้จาก ใน CSS2ที่เราต้องใช้ Property clear: เพื่อจัดการกับ Layout กันจ้าละหวั่น เรื่องเหล่านั้นจะหายไปใน CSS3

-3-

HTML5 และ XHTML2

ทั้งสองภาษามีจุดใหญ่ที่เหมือนกันก็คือ การมีมีพฤติกรรมภาษาแบบ XML แต่แตกต่างกันที่พฤติกรรมการใช้งาน หรือ การนำไปใช้งานตามวัตถุประสงค์นั่นเอง

สาเหตุและความล่าช้าของ การพัฒนาXHTML2 ที่ผมมองเห็นอีกอย่างคือ ความยากของมัน เพราะมันมีกฎเกณฑ์มากมาย ถูกพัฒนาไปในสาย Ontology, Semantic Web ไปโน่น อนาคตที่เราจะไปถึงตรงนั้นมันยังอีกไกลมาก HTML5 จึงมาสอยไปก่อน

ความที่เข้าใจง่าย ไม่ต้องตีความตามท้องเรื่องมาก คือข้อดีของ HTML5 ซึ่งมีความใกล้เคียงกับมนุษย์มากกว่า XHTML2 เราจะได้เห็น Elements อย่าง <header>, <footer>, <article>, <aside>, <nav>, <dialog>, <audio>, <video>, <figure> เป็นต้น ซึ่ง Tags เหล่านี้ มองเห็นแล้วรู้เลยทันที ว่ามันคืออะไร ใช้เพื่ออะไร

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

ผมอาจจมองต่างในตรงนี้ อาจจะยังอยากเถียง ในส่วนที่บางคนมองว่ามันไม่สำคัญ ไม่เห็นต้องไปเสียเวลากับมัน แต่ผมกลับมองว่ามันสำคัญมากกับการเขียน Code ที่เข้าใจง่าย อ่านสะดวก ง่ายต่อการนำไปพัฒนาต่อ ไม่ใช่ พัฒนากันที รื้อเขียนใหม่

ผมคิดว่า เรายังขาดการปลูกฝังด้านการให้ความสำคัญในส่วนงานตรงนี้มากกว่า ไม่ใช่ว่ามันไม่สำคัญ มันสำคัญมาก แต่เรายังขาดการศึกษาและพัฒนาต่างหาก

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

-4-

พล่ามมาเยอะแล้ว ทีนี้ เรามาดูตัวอย่างแบบ อ่อนๆ ง่ายๆ กันครับ

สมมุติว่า เราจะเขียนหน้าเว็บสำหรับแสดงเนื้อหา ในหน้าอ่าน หรือหน้าในของเว็บ ด้วย ภาษา HTML5 โครงสร้าง ง่ายๆ เขียนได้ ดังนี้

สามารถ ดูตัวอย่างได้ ตามนี้

	
<header>
	<h1>Header  Zone</h1>
</header>
<nav>
 	<ul>
        <li>Home</li>
 	<li>About  Us</li>
	 <li>Contact  Us</li>
        </ul>
</nav>
<article>
 	<h2>ส่วนของเนื้อหาหลัก</h2>
</article>
<aside>
 	<h3>ด้านข้าง</h3>
</aside>
<footer>
 	<address>Footer</address>
</footer>

สำหรับ CSS ก็ตามด้านล่างนี้ครับ

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
body {
	display:  ".hhh."
				".nnn."
				".ccs."
				".fff."
				* 330px 330px 300px *;
	font-size: 0.8em;
	background: #f2f2f2;
}
p {
	padding: 10px 0;
}
header {
	position: h;
}
article {
	position: c;
}
nav {
	position: n;
	background: #AAD;
	margin: 0;
	padding: .5em;
}
nav li {
	display: inline;
	margin: 0 20px;
}
body::slot(c) {
 background: #ffffff;
}

 body::slot(s) {
	 background: #f8f8f8;
}
aside {
	position: s;
}
footer {
	position: f;
	font-weight: bold;
}
header, footer {
	background: rgb(107,111,42);
	color: rgb(255, 255,255);

}
figure {
	width: 100px;
	height: 100px;
	margin: .5em;
	padding: .5em;
	background: #000;
	color: white;
}
figure:nth-of-type(2n+1) {
		float: right;
}
figure:nth-of-type(2n) {
		float: left;
}

สามารถ ดูตัวอย่างได้ ตามนี้

ในบทความต่อไป ผมจะมาอธิบาย การใช้ CSS3 ในตัวอย่างนี้ครับ