ตามมาตรฐาน W3C ซึ่งเป็น 1 ใน web standard ใหญ่ๆที่รู้จักกัน

วันนี้จะมาแนะนำ tag ใหม่ คือ abbr กับ acronym ครับ

โดยลักษณะการใช้งาน จะดูคล้ายๆกัน ซึ่งพบได้บ่อยครั้งใน Wikipedia

ความคล้าย : acronym และ abbr เพิ่มความหมายใ้ห้ตัวอักษรย่อต่างๆ ซึ่งทำงานเหมือนกัน
เช่น [CSS = Cascading Style Sheets] เป็นต้น

ความต่าง คือ
acronyme อ่านออกเสียงเป็นคำๆ เช่น RADAR (เร-ดาร์) หรือ NATO(นาโต้)
abbr : อ่านออกเสียงทุกตัวอักษร เช่น CSS(ซี-เอส-เอส) หรือ URI(ยู-อาร์-ไอ)

ตัวอย่าง

1
2

<acronym title="Radio Detecting And Ranging">radar</acronym>
<abbr title="Cascading Style Sheets">CSS</abbr>

ผลลัพท์ได้เป็นดังนี้

1
2
3

<abbr title="Really Simple Syndication">RSS</abbr>
<abbr title="Uniform Resource Identifier">URI</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>

โดยส่วนใหญ่แล้ว มักจะใช้ abbr ซะมากกว่า และแน่นอน IE6 ไม่สามารถแสดงผลได้อีกเช่นเคย แต่ FF ทำงานได้ปกติ (==’)

จึงมีวิธีแก้ไขดังนี้

1.) ใช้ span เข้ามาช่วย

1

<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>

2.) ใช้ javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
     function styleAbbr() {
          var oldBodyText, newBodyText, reg
          if (isIE) {
               oldBodyText = document.body.innerHTML;
               reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
               newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
               document.body.innerHTML = newBodyText;
          }
     }
     window.onload = function(){
          styleAbbr()
     };
     isIE = (document.all) ? true:false;
</script>

script นี้จะใช้หลักการของ regular expression มาแก้ปัญหา

วิธีใช้ แค่ copy แปะไว้ที่ header แค่นั้นครับ แล้ว javascript นี้จะเรียกทั้งเพจมาแก้เอง

เพียงเท่าที่ ก็สามารถแสดงผลลัพท์ได้ทั้ง IE และ Firefox แล้วครับ

ถามว่า ทำไมต้องใช้ tag อะไรแบบนี้ด้วยหละ ไม่ได้ใช้ก็ไม่มีใครว่าครับ แต่ถ้ามี ก็เหมือนยกระดับเว็บของคุณเพิ่มมากขึ้น(search engine friendly) ครับ