พิมพ์หน้านี้ - ตะลึง! CSS ก็ตั้ง class, ID ภาษาไทยได้

:mygod: วันนี้กำลังนั่งทำงานให้ลูกค้าอยู่ ไม่รู้นึกวิปริตยังไง ดันลองตั้งชื่อ .class, #id ใน CSS ให้มันเป็นภาษาไทยดู ในใจก็คิดว่า มันคงไม่ได้หรอกมั้ง ไม่งั้นเขาคงใช้กันทั่วบ้านทั่วเมืองแล้ว จริงมะ เพราะบางคนไม่ถนัดภาษาอังกฤษ แล้วพอเขาตั้งมาตั้งชื่อ class, id ให้เป็นภาษาอังกฤษเขาก็ไม่รู้จะสรรหาคำไหนมาตั้งชื่อกัน ที่เห็น และผมเองก็ใช้บ่อยๆ ก็จะเป็น mybody, wrapper, container, box, section, left-box, right-box, content, main, etc. สารพัดชื่อที่เราจะตั้งได้

แต่ปัญหาอย่างที่ผมบอกข้างต้นนั้นก็คือ คนที่เขาไม่ถนัดภาษาอังกฤษ เขาก็ไม่รู้จะตั้งชื่ออะไร ก็เลยใส่ไปประมาณว่า ggg, sss, list, buttonn อะไรทำนองนี้ละครับ มันเป็นคำที่ไม่มีความหมาย และไม่รู้จะสรรหาคำอะไรมาอธิบายได้ วันนี้ผมก็เลยปิ๋งไอเดียนี้ขึ้นมา เมื่อได้ลอง ก็พบว่า แม่งใช้ได้วะเฮ้ย!!

โค๊ด:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ทดลองตั้ง CSS class และ id ด้วยภาษาไทย</title>
<style type="text/css">
.บอดี้ {
	background-color: #CCC;
	margin: auto;
	height: 400px;
	width: 800px;
}
.บอดี้ .กล่อง {
	width: 199px;
	background-color: #E5E5E5;
	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #FFF;
	float: left;
	height: 400px;
	display: inline-block;
}
.บอดี้ #สีแดง {
	background-color: #900;
}
</style>
</head>

<body>
<div class="บอดี้">
<div class="กล่อง">Content for  class "บอดี้" Goes Here</div>
<div class="กล่อง" id="สีแดง">Content for  class "บอดี้" Goes Here</div>
<div class="กล่อง">Content for  class "บอดี้" Goes Here</div>
<div class="กล่อง">Content for  class "บอดี้" Goes Here</div>
</div>
</body>
</html>

ผมลองทดสอบด้วย Chrome 9, Firefox 3, IE 9 แล้วผ่านครับ มันสามารถแสดงผลได้ :aiwebs_027:

ลองชมตัวอย่างดูครับ ว่า Browser ของคุณจะเห็นผลหรือป่าว? http://x-file.dekitclub.com/css-thai.html (http://x-file.dekitclub.com/css-thai.html)

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

อ้อ!! แต่ที่สำคัญ มันยังผ่าน W3C ด้วยนะฮ๊าฟฟฟฟ
http://validator.w3.org/check?uri=http://x-file.dekitclub.com/css-thai.html (http://validator.w3.org/check?uri=http://x-file.dekitclub.com/css-thai.html)

เด็กไอทีคลับ คลับซ่าฅนไอที

iTeach | ไอทีเพื่อการเรียนรู้ => Webmaster Recommend => ข้อความที่เริ่มโดย: เด็กไอทีคลับ ที่ 27, 01 2011, 09:26:42 PM