Tag: attribute

การเขียน CSS แบบ Attribute Selector มีประโยชน์มากมาย มหาศาล แต่เรายังไม่ค่อยเห็นว่ามันแพร่หลายหรือเกลื่อนกลาดมากนัก นั่นก็เพราะว่า Attribute Selector เป็น CSS Version 2.1-3.0 ซึ่ง IE6 ไม่รองรับนั่นเอง จึงยังไม่เป็นที่นิยม

แต่สำหรับ CSS3 แล้ว ความหลากหลายของ Attribute Selector ได้ถูกเพิ่มเข้ามา คนที่ยังไม่เคยเห็น ผมขอแนะนำเอาไว้ตรงนี้ครับ

1. E[foo] คือ Element ใดๆ ที่มี Attribute ชื่อ foo เช่น div id=”main-contents”> ถ้านำมาเขียน CSS ก็จะเป็น div[id]{} หมายถึง div ที่มี attribute id อยู่

   ตัวอย่างที่ 1

   CSS:

   
div[id] {
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}


บางคน หรือหลายคน หรือส่วนใหญ่ เอาเป็นว่าส่วนใหญ่แล้วกันครับ สำหรับคนที่รู้สึกด้วยตังเองแบบไม่อ้างตนว่าเขียน HTML เป็น คงรู้กันว่า class ของ HTML ไม่ได้เอาไว้ให้ CSS ใช้งานเป็นหลัก

class ของ HTML คือภาษา HTML ไม่เกี่ยวกับภาษา CSS ภาษา CSS นั้นมาขอใช้งานภาษา HTML ด้วยการสั่งงานผ่าน HTML Attribute ที่ชื่อ class เท่านั้น และหรือในกรณีเดียวกัน CSS ก็ขอเอี่ยวกับ Attribute id ของ HTML ไปด้วย

อย่างที่บทความก่อนหน้านี้เรื่อง class ที่ รดิส ได้เขียนเอาไว้ เรื่อง "attribute class และ การใช้งานอย่างถูกต้อง" class ของ HTML มีเอาไว้เพื่อจำแนก "ของที่มีอยู่ในหน้าเอกสาร ที่มีพฤติกรรมแบบเดียวกัน" ส่วน id มีเอาไว้เรียกชื่อเพื่อระบุการมีตัวตอนของ ของ แต่ละชิ้น เช่น ในห้องเรียนชั้น ม.5 ห้อง 5/3 มีเด็กแนวกลุ่มหนึ่ง ชื่อ "เกรียนเมพ" ในกลุ่มนั้น มีนักเรียนชาย5 คน นักเรียนหญิง 5 คน ถ้าเรามาเขียน HTML ก็จะจำแนกออกเป็นสอง classes คือ class="นักเรียนชาย" และ class="นักเรียนหญิง"

ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ mabonic ก่อนนะครับ ว่าใน IE6 ถ้าไม่สามารถกำหนด attribute selector ได้จะทำอย่างไร คำตอบมีสอง Case ครับ Case1: คือ เขียน class selector เพื่อกำหนดคุณสมบัติให้มันครับ ส่วน Case2: ก็คือ ใช้ JavaScript ที่ชื่อ ie7-js สำหรับ reset ค่า default ต่าง ๆ ในการ render และ ทำให้มันรู้จักคำสั่งของ CSS level ใหม่ ๆ ที่มันไม่รู้จัก (อย่าลืมนะครับว่า IE6 มันแก่แล้ว) JavaScript ตัวนี้ให้กำเนิดโดย Dean Edwards แต่ข้อจำกัดหลายอย่างก็ยังมีอยู่ ถ้าผู้ใดสนใจเป็นหนึ่งในทีมพัฒนาก็สามารถเข้าร่วมได้นะครับ

มาต่อกันที่เรื่องของฟอร์มกันครับ จากคราวที่แล้วผมนำเสนอตัวอย่างการเขียนฟอร์มเล็ก ๆ ง่าย ๆ ไปหนึ่งแบบทีนี้เราจะมาดูกันครับว่าถ้าเรามีฟอร์มสำหรับเก็บข้อมูลที่สัมพันธ์กันหลาย ๆ ส่วน เราจะเขียนออกมากันอย่างไร ในบทความนี้ tag ที่เพิ่มเข้ามาก็จะมีดังนี้ครับ <fieldset></fieldset> และ <legend></legend> จากครั้งที่แล้วได้เกริ่นไป แต่ยังไม่ได้มีบทบาท รอบนี้ล่ะ มันจะเป็นตัวชูโรง fieldset จะเป็น tag ที่ใช้สำหรับแยกฟอร์ม ออกเป็นส่วน ๆ ตามข้อมูลที่เรานั้นต้องการจะเก็บ และ legend จะเป็นการตั้งชื่อบ่งบอกชื่อให้กับ fieldset นั้น ๆ ว่าเป็น set ของอะไร

เคยได้ยินกันมาบ้างไหมครับ Common Attribute เป็นชื่อเรียกกลุ่ม Attribute ของ xhtml ที่เราจะพบเจอกับมันบ่อย ๆ ในการทำงาน หรือ ใน Website ของคนอื่น ๆattribute เหล่านี้จะถูกนำมาใช้กับ xhtml element ได้หลาย ๆ element เพื่อกำหนดบ่งชี้คุณสมบัติ หรือ คำอธิบายต่าง ๆ ให้กับ xhtml element นั้น ๆ ที่เรียกตัวมันไปใช้

ทั้งนี้ attribute ที่จัดอยู่ในหมวดนี้จะแบ่งเป็นอีก 3 ส่วนย่อย ๆ คือ Core Attribute, i18n attribute และ Event Attribute ซึ่งหน้าที่การทำงานของแต่ละส่วนนั้นเป็นอย่างไรเรามาดูไปพร้อม ๆ กันครับ

Core Attribute

ในกลุ่มนี้จะประกอบไปด้วย class, id และ title เรามาดูรายละเอียดของแต่ละตัวกันครับ

class และ id นั้นจะเป็นตัวกำหนดชื่อเรียก (label) ต่าง ๆ ให้กับ element เหล่านั้น ซึ่งชื่อเรียกเหล่านี้อาจจะเป็นตัวกำหนดการจำแนกลักษณะกลุ่มของข้อมูล กลุ่มลักษณะการทำงานของ xhtml element นั้น ๆ โดยจะร่วมทำงานกับ JavaScript หรือ css ก็ได้ และยังรวมไปถึงการเป็นจุดอ้างอิง (anchor) สำหรับการอ้างถึงภายในหน้า webpage เดียวกัน ดังตัวอย่างต่อไปนี้

<div id=”header-wrapper”>
<p class=”purple-line”>Lorem … Ipsum … blab bla bla</p>
<p>Lorem … Ipsum … blab bla bla</p>
</div>

id มักจะใช้กับอะไรที่เป็น unique คือ เป็นหนึ่งเดียว สำคัญไม่ซ้ำกับใครใน webpage หนึ่ง ๆ จะมี id ตัวนั้น เพียงแค่หนึ่งเดียว ไม่ว่าจะเป็นจุดอ้างอิง xhtml element ที่เรียก id นั้นไปใช้ จะถูกเรียกไปใช้ได้เพียงครั้งเดียว