การเพิ่มสไตล์ให้ XML

ในCSS2 Recommendation มีบทเรียนสั้นๆเกี่ยวกับการใช้ CSS กับ XML(ดู 2.2) ในขณะที่ CSS2 ถูกเขียนขึ้นอย่างเป็นทางการ สเปกของสไตล์สำหรับ XML ยังไม่เสร็จสิ้น ในบทความนี้จะเพิ่มเติมในส่วนที่บทเรียนดังกล่าวไม่ได้ระบุไว ในตัวอย่างจะ้ใ้ช้สไตล์ผ่านCSS แต่ในหลายๆกรณีการใช้สไตล์สามารถเรียกใช้ได้เลยในรูปแบบ XSL

สไตล์ชีทภายนอก

ทดสอบ :ในเบราเซอร์ของท่าน

ใน HTML มี aอีเลเมนต์ link เพื่อใช้ลิ้งไปยังสไตล์ชีทภายนอก แต่ในฟอร์แมทที่ใช้ฐานเป็น XML-based ไม่มีอีเลเมนตนี้ทั้งหมด หากฟอร์แมทที่ท่านใ้ช้ไม่มีอีเลเมนต์ที่เหมาะสม ท่านสามารถใช้คำสั่งต่อไปนี้ในการแนบสไตล์ชีทภายนอกได้ โดยใช้คำสั่ง xml-stylesheet processing instruction ดังต่อไปนี้ xml-stylesheet processing instruction ดังต่อไปนี้:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... เอกสารที่เหลือ...

คำสั่งประมวลผลนี้ (PI) ต้องใช้ก่อนเรียกแท็กแรกของเอกสาร ชนิด type="text/css" ไม่จำเป็นต้องระบุ การระบุชนิดเอกสารแนบจะช่วยให้เบราเซอร์ที่ไม่รองรับ CSS รู้ว่าไฟล์ดังกล่าวเป็น ไฟล์ CSS และไม่จำเป็นต้องดาวโหล

เช่นเดียวกับอีเลเมนต์ link ใน HTML ท่านสามารถใxml-stylesheet PIs หลายคำสั่งในเอกสารได้ และสามารกำหนดแอททริบิวต์ในการบอกชนิด(type) สื่อ(medium) และชื่อเรื่อง(title)ได้

ท่านสามารถศึกษาจากตัวอย่างได้มากมาย สมมติว่าเรามีสไตล์ชีทสามชุด ชุดแรกกำหนดการแสดงพื้นฐานของแต่ละอีเลเมนตฺ์ (inline, block, list-item, และอื่นๆ) และอีกสองชุดที่เหลือกำหนดสีและค่าระยะห่างตั้งต้นที่แตกต่างกันไว้ โดยสองชุดหลังเป็นไฟล์ alternative ซึ่งผู้อ่านสามารถเลือกใช้ได้ว่าจะใช้สไตล์ชีทใด ยกเว้นกรณีต้องการพิมพ์เอกสาร ซึ่งเราต้องใช้สไตล์ชีทสุดท้ายเท่านั้น ตัวอย่างสไล์ชีทสไตล์ชีท common:

/* common.css */
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

และสไตล์ชีท alternative ในไฟล์ชื่อ"modern.css":

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

สไตล์ชีทอีกชุดชื่อ "classic.css":

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

เอกสาร XML ที่ใช้สไตล์ชีททั้งสามจะมีลักษณะดังนี้:

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

สำหรับรายละเอียดเพิ่มเติม ท่านสามารถอ่านได้ในส่วน W3C Recommendation "การเชื่อมโยงสไตล์ชีทกับเอกสาร XML"

สไตล์ชีทภายใน

ทดสอบ :ในเบราเซอร์ของท่าน

ใน HTML มีอีเลเมนต์ style เพื่อใช้กำหนดสไตล์ชีทในไฟล์ HTML โดยตรง โดยไม่ต้องใช้ไฟล์ภายนอก ในกรณีที่ต้องการกำหนดสไตล์ีที่จำเพาะในเอกสารนั้น แต่ในฟอร์แมทของ XML ไม่มีอีเลเมนต์เช่นนั้น แต่คำสั่ง PI เดิมที่ใช้ลิ้งสไตล์ชีทภายนอกสามารถใช้เพื่อเรียกสไตล์ชีทที่ฝังอยู่ภายใน เอกสารได้ ขณะที่เขียนบทความนี้ กุมภาพันธ์ 2006 ยังมีปัญหาเชิงเทคนิคกับวิธีการนี้และยังไม่มีการระบุสเปกที่เป็นทางการเป็นที่เรียบร้อย

ตัวอย่าง:

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

ในกรณีนี้แอทริบิวต์type="text/css" ต้องระบุไว้ เพื่อไม่ให้เบราเซอร์ (หรือโปรแกรมอื่น) สับสนหรือต้องคาดเดาว่าเป็นภาษาชนิดใดกรณีนี้ xml-stylesheet PI ชี้สไตล์์ไปยังอีเลเมนต์ภายในเอกสาร โดยอีเลเมนต์ดังกล่าวถูกระบุด้วยแอทริบิวทidd ซึ่งกำหนดไว้ในคำสั่งลิงค์ (ในแต่ละชนิดฟอร์แมท XML ที่ใช้ แอทริบิวท์ที่ใช้อาจเป็นอย่างอื่่นนอกจาก id และในบางฟอร์แมทที่ใช้อาจไม่มีแอทรบิวท์ที่เหมาะสมให้ใช้เลยก็ได้)

ปัญหาการใช้งานสไตล์ชีทภายใน

ใน W3C Recommendation การเชื่อมโยงสไตล์ชืทกับเอกสาร XML ไม่ได้ระบุกรณีของสไตล์ชีทภายในไว้ ถึงแม้การใช้ id อาจจะสมเหตุผลในการเรียกใช้ URL fragments (เริ่มต้นด้วย "#") ในขณะนี้ ต้นปี 2006 ยังพบปัญหาที่แก้ไม่ได้และไม่มีการเผยแพร่สเปกในที่ใด ปัญหาดังกล่าวคือ:

เนื่องจากการใช้สไตล์ชีทภายในไม่ได้ถูกโหลดแยกกันกับไฟล์ XML server จึงไม่อาจบอกเบราเซอร์ได้ว่าสไตล์ชีทดังกล่าวเป็นฟอร์แมทใด ดังนั้นแอททรบิวท์ typeจึงจำเป็นในกรณีนี้ เหตุการณ์ที่เกิดขึ้นหากไม่ระบุแอทริบิวท์ไม่อาจระบุได้: สไตล์ชีทอาจไม่ถูกใช้งาน? สไตล์อาจคาดเดาเป็น CSS? มีอัลกอริททึ่มที่ระบุชนิดภาษา?
ในฟอร์แมท XML-based ส่วนมาก ตัว fragment identifier จะระบุอีเลเมนต์ทั้งหมด ไม่ใช่เนื้อหาของอีเลเมนต์ แต่สไตล์ชีทที่เริ่มด้วย <ARTICLE> ไ่ม่ใช่ CSS ที่ถูกต้อง ดังนั้นจำเป็นต้องใช้วิธีพิเศษเพื่อระบุ fragment identifier ที่ใช้ในสไตล์ชีท PI ให้ชี้ไปยังเนื้อหาของอีเลเมนต์แทน ไม่ใช่ชี้ไปที่ตัวอีเลเมนต์
เช่นเดียวกัน ไม่อาจระบุได้ว่า หากมีอีเลเมนต์ย่อยในอีเลเมนต์ที่ชี้ไป สไตล์ชีทอาจถูกนำมารวมกัน? อีเลเมต์แรกเท่านั้นที่จะนำมาใช้? หรือเกิดข้อผิดพลาดและไม่มีการนำอีเลเมนต์มาใช้?
ในตัวอย่างข้างต้น มีการชี้ URL ไปยังเอกสารเดียวกัน ความจริงที่ว่าเบราเซอร์สามารถหา URL ตามการ parsing XML และอาจสามารถหาสไตล์ชืทดังกล่าวได้ หากพิจารณากรณี่เมื่อ URL ชี้ไปยัง fragment เอกสารภายนอก เพื่อจะใช้งานสไตล์ชีทได้ถูกต้อง เบราเซอร์ต้องทำการโหลดไฟล์และแปลเอกสารก่อนแล้วนำส่วนสไตล์ชีทไปใช้งาน แต่แอทริบิวท์ type เพียงแค่บอกชนิดของเอกสารเท่านั้น ดังน้นเบเราเซอร์ไม่อาจรู้ว่ามันสามารถใช้สไตล์ชีทได้หรือไม่ และแอทริบิวท์ type ยังไม่สามารถบอกได้อีกว่าสไล์ชีทเป็นแบบภายนอกหรือภายใน
สไตล์ชืท PI มีประโยชน์กับ “ XML ทั่วไป” เช่น XML ในฟอร์แมทที่เบราเซอร์ไม่รู้จัก ท่านสามารถใช้สไตล์ชีทเพื่อช่วยแสดงผลของ XML บนเบราเซอร์ได้ ฟอร์แมทที่นิยมอื่น เช่น SVG, SMIL หรือ XHTML มีกลไกการเรนเดอร์ซึ่งสไตล์ชีทไม่สามารถกำหนดได้ แต่ในบางกรณีเบราเซอร์ก็ไม่รู้จักเมื่อเอกสารถูกใช้เป็น XML ทั่วไป: เช่น แอทริบิวท์ ID ใน W3C Recommendation มีแอทริบิวท์ชื่อ xml:id และถ้าเอกสารมีแอทริบิวท์ดังกล่าว เป็นไปได้มากว่า URL fragmentจะถูกชี้ไปยังแอททริบิวท์ดังกล่าว แต่หากไม่มีแอททริบิวท์ดังกล่าว เบราเซอร์จะพยายามใช้วิธีอื่นเพื่อระบุว่าแอทริบิวท์ใดเป็น IDs ถ้าในเอกสารมีการประกาศ DOCTYPE ไว้บนสุด และเบราเซอร์สามารถเรียกใช้ข้อมูล DTD ได้ ใน DTD นั้น จะระบุแอททริบิวท์ไว้ อย่างไรก็ตามเบราเซอร์อาจไม่สาารถอ่าน DTDs ได้ หรืออาจไม่มีการกำหนด DOCTYPE ไว้
fragment ID เป็นวิธีเดียวที่ใช้ชี้อีเลเมนต์บนเอกสาร ใน W3C Recommendation ยังระบุ XPointers เพื่อใช้ระบุอีเลเมนต์ในเอกสารโดยไม่ต้องใช้แอททริบิวท์ แต่ XPointers ยังไม่จำเป็นในปัจจุบันสำหรับเบราเซอร์ที่ใช้สไตล์ชีท PI และยังไม่เป็นที่แน่นอนว่าเบราเซอร์สามารถเข้าใจ XPointers หรือไม่

สไตล์ชีทอินไลน์

ใน HTML สามารถใช้สไตล์ในแท็กอีเลเมนต์ตรงๆได้เลย โดยอาศัยแอททริบิวท์ style เอกสารในฟอร์แมท XML-based ส่วนมากจะไม่มีแอททริบิวท์ดังกล่าว แม้ว่าบางตัวอาจมี (โมดูล ) ที่สามารถเรียกใช้ HTML ภายในเอกสารได้

แอททริบิวท์คลาส

ทิป: ทดสอบ ในเบราเซอร์ของท่าน

แอททริบิวท์class ใช้กำหนดคลาสย่อยของอีเลเมนต์ใน HTML ไม่มีในเอกสารฟอร์แมท XML-based ซึ่งจะทำสามารถใช้ CSS ตามแอททริบิวท์ได้ ใน XML นั้นมี syntax ให้ใช้งานไม่สะดวกนัก

ตัวอย่าง หาก XML มีแอททริบิวท์ class เช่นใน HTML เราสามารถใช้จุดในการกำหนดคลาสได้ (ดังนั้น ในตัวอย่างจะไม่ทำงาน เพราะ <doc> ไม่เป็นฟอร์แมทที่เบราเซอร์รู้จักว่ามีแอททริบิวท์คลาส)

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p.note { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

หากเอกสารไม่ระบุ class และ subclass ท่านต้องใช้ซีเล็คเตอร์ "[ ]":

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[class~=note] { color: red }
  </s>
  <p>Some text... </p>
  <p class="note">A note... </p>
</doc>

หากไม่มีแอททริบิวท์ class แต่มีบางอย่างที่ใช้แทนกันได้ ก็ยังต้องใช้ซีเล็คเตอร์แอททริบิวท์ "[ ]":

ทดสอบ ในเบราเซอร์ของท่าน

<?xml-stylesheet href="#s1" type="text/css"?>
<doc>
  <s id="s1">
    s { display: none }
    p { display: block }
    p[warning="yes"] { color: red }
  </s>
  <p>Some text... </p>
  <p warning="yes">A note... </p>
</doc>