HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery

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

อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่

เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก

จริง จริงแล้ว ผมมีความกังวลใจอยู่เรื่องเดียว เรื่องเดิม ไม่ว่าจะใช้ HTML4, XHTML1 หรือ HTML5 นั่นก็คือ
ปัญหาเรื่องการทำเว็บเพื่อให้เกิดการเข้าถึงอย่างเท่าเทียม เพราะว่าคนส่วนใหญ่ไม่ค่อยได้สนใจเรื่องนี้มากมายนัก
ไม่ใช่ว่่าคนบ้านเรา พวกฝรั่งปัญญาอ่อนส่วนใหญ่มันก็เป็นกันเยอะ

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

ซึ่ง ใคร ใคร ก็ทำได้ครับ (มันต้องมีบางคน คิดไปแล้วว่า เขี่ยๆ ไป ยังไงก็ได้เงิน… ใครจะไปรู้)

บทความนี้ ผมลองทำ Photo Gallery แบบใช้ HTML5 กับ CSS3 ลองดู ซึ่งเป็น Gallery ง่าย ง่าย ตามความสามารถของ CSS จะทำได้โดยไม่ต้องพึ่ง JavaScript

คลิ๊กไปดู ตัวอย่าง Photo Gallery แบบใช้ HTML5 กับ CSS3 กันก่อนครับ

เป็นอันรู้กันนะครับว่า ใช้บราวเซอร์ ตระกูล Webkit ได้เท่านั้น อันอื่นใจเย็นๆ ไปก่อน ที่ทำอย่างนี้ เพราะ ไทซีเอสเอส ออกจะหลายมาตรฐาน แค่ 2 มาตรฐานคงไม่พอ

HTML5 ที่ใช้

<article> ใช้เพื่อบอกว่าเนื้อหานี้เป็น บทความ เนื้อหา หรือส่วนของข้อมูลอะไรสักอย่าง

<hgroup> คือ กลุ่มของ หัวข้อ ซึ่งใน hgroup นั้น จะมี

<header> อีกที และใน header ถึงจะมี heading level ต่างๆ

	
<header>

     <hgroup>
	
		<h1>ทดสอบการใช้ CSS3 และ HTML5 เพื่อลองทำ Photo Slide</h1>
		<h2>การทดสอบนี้ ยังไม่ใช่ที่สิ้นสุดกระบวนความของความสามารถ CSS3</h2>
</hgroup>	
	<h3>Ptotos By: pornAntha</h3>

	<p><time>2010, June 24</time></p>

</header>
    

HTML5 ต่างจาก XHTML ตรงนี้คือ ไม่ใช่ Heading Level เท่านั้นที่สามารถเป็น header เราสามารถใช้ Elements อื่นๆ มาทำเป็น กลุ่มหัวข้อ ได้ด้วย ในโค้ดตัวอย่าง จึงเห็นผมเอา <p> มาใส่ไว้ด้วย

<figure> เอาไว้สำหรับบ่งบอกความเป็นภาพ ซึ่งไม่ใช่ รูปภาพ แต่เป็นการแสดงให้เห็นว่าทั้งหมดนั้นเป็นภาพ ซึ่งจะมี <figcaption> เอาไว้อธิบายภาพอีกที

ดูภาษาโครงสร้างแล้ว มาดูภาษาแต่งหน้าศพอย่าง CSS กันมั่งครับ

ไม่มีอะไรแปลกใหม่กับการเขียน CSS ในตัวอย่างนี้ ผมขอแนะนำ Selectors ที่นำมาใช้ก่อนนะครับ

:target คือ การสั่งเจาะจง Element ของ HTML ซึ่ง จะทำงานคู่กันกับ id และ <a href=#> เมื่อเราคลิ๊ก และเกิดการเรียกหา Uri นั่นเปรียบเสมือน HTML ที่มี ID ตรงกับที่ถูกเรียกหานั้น กำลังถูก :target อยู่ หรือ กำลังถูกซุ่มยิงด้วยกลุ่มผู้ก่อการร้ายอยู่นั่นเอง

:not() คือ การ ไม่ ซึ่งต้องถามต่อว่า ไม่อะไร ตามโค้ด CSS ผมเขียน Selector นี้ด้วย figure:not(:target) { } คือ <figure> ที่ไม่ได้ โดนยิง ให้มอบตัว

:nth-child(2n) {} แปลว่า notation represent of an element that has-child ทีละ 2 ไปเรื่อยๆ (อยากให้จำคำนี้ไว้กันนะครับ nth-child ย่อมาจาก notation represent of an element that has-child) หรือแปลเป็นภาษาไทซีเอสเอส ได้ว่า ให้กระทำการใด ใด กับลูกๆ ของเธอ ขยับไปทีละ 2 ซึ่งตามโค้ดที่ผมเขียนนั้น ลำดับของภาพขนาดย่อ ตัวที่ 2, 4 และ 6 จะถูกสั่งให้มี ระยะห่างด้านนอก ฝั่งซ้าย ที่ 5px (ถ้าใครนำไปเรียงที่ละ 3 คอลัมน์ ให้สั่งเป็น (3n) นะครับ)

	
#photo-thumb>li:nth-child(2n) {
	margin-left: 5px;
}
div[id$="slide"]>figure {
	float: left;
	width: 604px;
	height: 354px;
	position: absolute;
	transition-duration: 4s, 1s;
	-webkit-transition-duration: 4s, 1s;
	-o-transition-duration: 4s, 1s;
	-moz-transition-duration: 4s, 1s;
	top: 0;
	opacity: 0;
}
div[id$="slide"]>figure:not(target) {
	left: -605px;	
}
div[id$="slide"]>figure:target {
	left: 0;
	opacity: 1;
}

    

อันสุดท้าย CSS3 Module ที่นำมาใช้ คือ

transition-duration หรือ ระยะเวลาในการ Transition ในที่นี้ ผมสั่งให้แค่ <figure> เท่านั้นที่ต้อง Transition เช่น figure ที่ยังไม่ได้ถูก :target ให้อยู่ในตำแหน่งที่ left: 605px; เมื่อใดก็ตามที่ถูก :target ก็ให้มาอยู่ที่ตำแหน่ง left: 0;

จังหวะการเคลื่อนที่ระหว่างตำแหน่งที่ left: 605px; กับ left: 0; นี่แหละครับ มันเกิดการ Transition ขึ้น เราจึงเห็นเป็นภาพเคลื่อนไหว

กดไปดูตัวอย่าง Photo Gallery แบบใช้ HTML5 กับ CSS3 อีกทีก็ได้

แค่นั้นเองครับ

ไม่มีอะไรต้องตื่นเต้นกับ HTML5 และCSS3

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

มีความสุขกับการใช้ชีวิตครับ