Bagaimana menambahkan style pada XML

Dokumen ini adalah terjemahan dari How to add style to XML dan mungkin terdapat kesalahan penerjemahan.

CSS2 Recommendation mengandung sedikit pelajaran mengenai bagaimana menggunakan CSS dengan XML (lihat § 2.2). Ketika CSS2 ditulis, spesifikasi untuk style pada XML belum resmi. Ini adalah tutorial yang harus dimuat disitu. Patut dicatat bahwa contoh menggunakan CSS, tetapi dalam banyak kasus aturan style juga dapat di tulis dalam XSL.

Style Sheets Eksternal

cobalah di browser anda

HTML memiliki sebuah elemen link untuk menghubungkan ke dirinya pada style sheet eksternal, tetapi tidak setiap format yang berdasar pada XML akan memiliki elemen seperti itu. Jika tidak ada elemen yang cocok, anda masih memiliki style sheets eksternal dengan menggunakan instruksi pemrosesan xml-stylesheet seperti ini:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... sisa isi dokumen disini...

Instruksi pemrosesan ini (processing instruction /PI ) Harus berada sebelum tag pertama dari sebuah dokumen. Bagian type="text/css" tidak diperlukan, tetapi hal tersebut akan menolong browser tersebut: bila browser tidak mendukung CSS, ia akan tahu bahwa file ini tidak harus diunduh.

Sama seperti link yang merupakan elemen dari HTML, akan ada beberapa instruksi pemrosesan xml-stylesheet, serta mereka dapat mempunyai atribut untuk menentukan type, medium dan title.

Berikut sebuah contoh yang lebih besar. Mari kita asumsikan kita memiliki tiga style sheet, satu yang menentukan tampilan dari setiap elemen (inline, block, list-item, etc.) dan dua yang lain untuk warna dan margin. Dua yang terakhir adalah alternatif dari yang lainnya, dan pembaca dari dokumen dapat menentukan mana yang dapat digunakan. Kecuali bila dokumen dicetak, dimana kita hanya bisa menggunakan style yang terakhir. Berikut adalah yang bernama common style sheet:

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

Ini adalah sebuah style alternatif, yang dinamakan "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 }

Dan yang ini satu lagi yang lain yang dinamakan "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 }

Dokumen XML dengan tiga style sheet yang dihubungkan akan tampak sebagai berikut:

<?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>

Untuk detil lebih lanjut, lihat Rekomendasi W3C “Associating Style Sheets with XML documents”

Style sheet Embedded

cobalah di browser anda

HTML memiliki sebuah elemenstyle yang memungkinkan style sheet(s) untuk dimasukkan langsung pada file HTML, tanpa memerlukan file dari luar. Dalam beberapa kasus hal ini lebih mudah, terutama jika style sheet sangat spesifik pada dokumen tersebut.

Kebanyakan format yang berdasar pada XML tidak akan memiliki elemen seperti itu, tetapi Instruksi Pemrosesan yang sama yang menghubungkan style sheet external dapat juga digunakan untuk mengarahkan ke dokumen ke style sheet yang ada di dokumen itu sendiri (embedded). Mulai sejak February 2006, masih ada permasalahn teknis dengan hal ini dan tidak ada spesifikasi formal yang dikeluarkan. Sebagai contoh:

<?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>

Dalam hal ini atribut type="text/css" harus tetap ada, jika tidak browser (atau program lain) harus menebak bahasa style sheet yang digunakan. Instruksi Pemrosesan xml-stylesheet sekarang mengarah bukan ke style sheet eksternal, tetapi ke sebuah elemen dari dokumen itu sendiri. Elemen tersebut diidentifikasi sebagai sebuah atribut id yang berfungsi sebagai tujuan dari link tersebut. (Tergantung pada format XML yang khusus, atribut id dapat dinamakan sesuatu yang lain; dalam beberapa format mungkin malah tidak ada atribut yang cocok sama sekali.)

Masalah-masalah yang tidak terselesaikan

Rekomendasi W3C “Associating Style Sheets with XML documents” tidak mendefinisikan perihal embedded style sheets, meskipun tampaknya sebuah extrapolasi yang masuk akal memungkinkan fragmen-fragmen URL (diawali dengan sebuah “#”). Pada saat ini, awal 2006, masih ada masalah yang tak terselesaikan dan tidak ada spesifikasi yang di publikasikan. Permasalahannya adalah sebagai berikut:

Karena style sheet embedded tidak diunduh secara terpisah dari server, maka server tidak dapat mengetahui apa format dari style sheet tersebut. Oleh karena itu, atribut type diperlukan untuk hal ini. Tidak didefinisikan apa yang terjadi bila atribut tersebut dihilangkan: apakah style sheet akan diabaikan? Diasumsikan sebagai CSS? apakah ada algoritma untuk menentukan bahasa style sheet?
Dikebanyakan format yang berdasar pada XML, sebuah fragment identifier mengidentifikasi sebuah elemen yang lengkap, bukan isi dari elemen. Tetapi sebuah style sheet yang diawali dengan <ARTICLE> bukanlah sebuah CSS yang benar, jadi tampaknya ada kebutuhan untuk sebuah aturan tambahan bahwa sebuah fragment identifier yang digunakan dalam sebuah style menunjuk ke isi dari elemen, dan bukan elemen itu sendiri.
Sama seperti hal diatas, tidak didefinisikan apa yang terjadi bila yang ditunjuk adalah sebuah elemen turunan dalam sebuah sebuah elemen. Apakah style sheet terdiri dari seluruh isi dari elemen yang dihubungkan? isi dari elemen pertamanya saja? ataukah ini adalah sebuah kesalahan dan semua elemen dibiarkan?
Dalam contoh diatas, URL mengarah ke dokumen itu sendiri. Fakta bahwa browser dapat melihat ke URL itu sendiri mengindikasikan bahwa browser tersebut mengetahui bagaimana mengurai XML dan mungkin dapat mencari elemen style yang diindikasikan. Tetapi sekarang, pertimbangkan sebuah URL yang mengarah pada sebuah fragmen dari sebuah dokumen eksternal. Agar dapat berhasil mengambil style sheet secara sukses, browser masih harus pertama-tama mengunduh dan mengurai style sheet tersebut lalu kemudian menyaring serta mengambil lalu mengurai style sheetnya. Tapi atribut type hanya memberikan salah satu dari dua hal tersebut and oleh sebab itu browser tidak dapat tahu apakah style sheet tersebut dapat digunakan. Bahkan tidak didefinisikan apakah atribut type memberikan type dari dokumen eksternal atau dari style sheet yang di-embed dalamnya..
Instruksi pemrosesan style sheet paling efektf digunakan dengan “Generic XML,” dalam arti, dengan XML dengan bentuk format yang tidak diketahui browsernya. Dan karena style sheet, hal tersebut dapat menampilkan sesuatu. Format-format tertentu seperti SVG, SMIL atau XHTML, mempunyai aturannya masing-masing mengenai bagaimana melakukan render yang dapat melampaui apa yang dispesifikasikan oleh style sheet. Tetapi ada beberapa hal dimana browser juga tidak tahu kapan sebuah dokumen harus di perlakukan sebagai sebuah "Generic XML": persisnya, ia tidak tahu atribut mana yang merupakan atribut ID. Ada sebuah Rekomendasi W3C untuk sebuah atribut yang dinamakan xml:id dan bila dokumen tersebut mengandung atribut dengan nama tersebut, hampir dapat dipastikan bahwa bagian URL tersebut mengarah ke salah satu dari mereka. Tapi bila tidak ada atribut seperti itu, browser marus mencoba cara lain untuk menentukan atribut mana yang merupakan ID. Bila dokumen tersebut memiliki DOCTYPE di atas dan browser berhasil mengmbil DTD yang ditunjukkan oleh DOCTYPE tersebut, DTD tersebut akan memberikan data attribut tersebut. Tetapi kebanyakan browser tidak dapat melihat DTD atau mungkin tidak ada DOCTYPE pada dokumen tersebut.
Sebuah fragment ID adalah sebuah cara untuk menunjuk sebuah elemen pada dokumen. Sebuah Rokemendasi W3C menjelaskan XPointers untuk mengidentifikasi elemen dalam sebuah dokumen tanpa membutuhkan atribut ID. Tetapi mengerti XPointer bukanlah suatu kebutuhan dari browser yang menggunakan Insruksi Pemrosesan style sheet dan oleh sebab itu tidak jelas apakah browser dapat mengartikan XPointers bila mereka mempu atau apakah mereka harus biarkan.

Inline styles

HTML juga memperbolehkan style untuk direkatkan secara langsung pada masing-masing elemen dengan cara atribut style . Kebanyakan format dokumen yang berdasarkan XML tidak akan memiliki atribut seperti itu, walaupun beberapa mungkin memungkinkan fitur (modules) dari HTML untuk digunakan dalam documen.

Atribut Class

cobalah di browser anda

Atribut class yang memperbolehkan anda untuk membuat subclass dari elemen dalam HTML kemungkinan besar tidak akan tersedia dapat banyak format dokumen berbasis XML. Tentunya, CSS membiarkan anda memilih elemen berdasarkan atribut apapun, dan tidak hanyak class, tapi sintaks-nya akan menjadi lebih sulit.

Berikut adalah sebuah contoh. Bila ada sebuah atribut classdan format dokumen mendefinisikan bahwa hal tersebut berfungsi seperti HTML, kita dapat menggunakan notasi tersebut dengan titik. (Oleh sebab itu, contoh berikut tidak akan berhasil, karena <doc> bukanlah sebuah format yang diketahui browser sebagai sesuatu yang memiliki class)

<?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>

Bila format dokumen tidak menentukan bahwa class akan menghasilkan sebuah subclass, maka anda harus menggunakan selektor yang lebih panjang dengan "[ ]":

<?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>

Bila tidak ada atribut class attribute, tetapi ada sesuatu yang dapat kita gunakan, selektor atribut "[ ]" masih dapat dipergunakan:

cobalah di browser anda

<?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>