XML'i CSS ile Biçimlendirmek

Merhaba Webkolog ailesi!

Bugün sizlerle genellikle veriyi depolama ve taşıma amacıyla kullanılan XML'i, web sayfalarına görsel bir kimlik kazandıran CSS (Cascading Style Sheets) ile nasıl biçimlendirebileceğimizi konuşacağız. Çoğumuz XML'i sadece veri olarak düşünsek de, aslında tarayıcılar XML dosyalarını da biçimlendirme yeteneğine sahiptir. Gelin, bu ilginç konunun detaylarına birlikte dalalım!

---

XML ve CSS İlişkisi: Neden Biçimlendirme Gerekiyor?

XML'in temel amacı veriyi yapılandırmak ve ne olduğunu tanımlamaktır; HTML gibi verinin nasıl görüneceğini belirlemek değildir. Ancak, bazen XML verisini doğrudan bir web tarayıcısında görüntülemek isteyebiliriz. Bu durumda, tarayıcı varsayılan olarak XML'i ham bir ağaç yapısı şeklinde gösterir, ki bu da pek kullanıcı dostu değildir. İşte tam bu noktada CSS devreye girer. XML'i CSS ile biçimlendirerek, verilerimizi okunabilir ve estetik bir görünüme kavuşturabiliriz.

---

XML Dosyasını CSS ile Bağlama

Bir XML dosyasını bir CSS stil sayfasıyla ilişkilendirmek oldukça basittir. XML dosyasının en başında, <?xml-stylesheet?> işleme talimatını kullanarak stil dosyamızın yolunu ve tipini belirtiriz:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="still.css"?> <!-- Burası önemli! -->
<insanlar>
	<insan tc="12345678901">
		<ad>Ali</ad>
		<soyad>Mantar</soyad> <!-- Dikkat: Burada soyad "Veli" yerine "Mantar" olarak düzeltilmiştir. -->
		<yas>30</yas>    <!-- Dikkat: Burada yas "Veli" yerine "30" olarak düzeltilmiştir. -->
	</insan>
    <insan tc="12345678902">
		<ad>Veli</ad>
		<soyad>Kantar</soyad>
		<yas>31</yas>
	</insan>
</insanlar>

Yukarıdaki örnekte, <?xml-stylesheet type="text/css" href="still.css"?> satırı, tarayıcıya bu XML dosyasını still.css adlı CSS dosyasıyla biçimlendirmesi gerektiğini bildiriyor. type="text/css" stil dosyasının MIME tipini, href="still.css" ise dosyanın konumunu belirtir.

---

CSS Dosyası İçinde XML Elementlerini Hedefleme

HTML'de olduğu gibi, CSS dosyanızda XML elementlerinin adlarını doğrudan seçici (selector) olarak kullanabilirsiniz. Böylece, her bir XML elementine özel stil kuralları tanımlayabilirsiniz.

İşte still.css dosyasının içeriği:

/* Genel stil tanımlamaları */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}

/* <insanlar> elementi için stil */
insanlar {
    display: block; /* XML elementleri varsayılan olarak inline'dır, block yapıyoruz */
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* <insan> elementi için stil */
insan {
    display: block; /* Her insanı ayrı bir blok olarak göster */
    background-color: #ffff00; /* Arka plan rengi sarı */
    width: 100%; /* Tam genişlik */
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #e0e000;
}

/* <insan> elementinin ilk çocuğu hariç diğerlerine üst boşluk */
insan + insan {
    margin-top: 20px;
}

/* <ad> elementi için stil */
ad {
    display: block; /* Her adı ayrı bir satırda göster */
    color: #f00; /* Yazı rengi kırmızı */
    font-size: 20pt; /* Yazı boyutu 20 punto */
    margin-left: 20pt; /* Sol kenardan 20 punto boşluk */
    font-weight: bold;
    margin-bottom: 5px;
}

/* <soyad> elementi için stil */
soyad {
    display: block;
    font-size: 14pt;
    color: #333;
    margin-left: 20pt;
    margin-bottom: 5px;
}

/* <yas> elementi için stil */
yas {
    display: block;
    font-size: 12pt;
    color: #666;
    margin-left: 20pt;
    font-style: italic;
}

/* Nitelik (attribute) değerlerini gösterme */
insan[tc]:before {
    content: "TC Kimlik: " attr(tc); /* 'tc' niteliğinin değerini göster */
    display: block;
    font-size: 10pt;
    color: #999;
    margin-left: 20pt;
    margin-bottom: 5px;
}

Bu CSS kuralları, XML dosyanızdaki <insan>, <ad>, <soyad> ve <yas> gibi elementlere doğrudan uygulanacaktır. Ayrıca, insan[tc]:before seçicisini kullanarak tc niteliğinin değerini bile ekranda gösterebiliyorum. Bu sayede, ham XML verisi yerine, kullanıcıların daha rahat okuyabileceği ve anlayabileceği biçimlendirilmiş bir çıktı elde edersiniz.

Unutmayın, XML elementleri varsayılan olarak "inline" (satır içi) elementler gibi davranır. Bu yüzden, onları bir blok element gibi göstermek veya kendi başlarına birer satır kaplamalarını sağlamak isterseniz, CSS'te display: block; gibi özellikler kullanmanız gerekir.

---

XML'i CSS ile Biçimlendirmenin Sınırlılıkları ve Modern Yaklaşımlar

XML'i doğrudan CSS ile biçimlendirme yeteneği, basit XML dosyalarını hızlıca görselleştirmek için kullanışlıdır. Ancak, bu yaklaşımın bazı sınırlılıkları vardır:

• Tarayıcı Desteği: Tüm tarayıcılar XML dosyalarını CSS ile beklenen şekilde görüntülemeyebilir. Özellikle eski tarayıcılarda farklılıklar görülebilir.
• Etkileşim: Sadece CSS ile XML'i biçimlendirirken, HTML'de olduğu gibi dinamik JavaScript etkileşimleri sağlamak zordur.
• Dönüşüm Eksikliği: CSS sadece görsel sunumu etkiler. XML verisini farklı bir HTML yapısına dönüştürmek için yeterli değildir.

Bu sınırlılıklar nedeniyle, günümüzde XML verilerini web sayfalarında göstermenin daha yaygın ve esnek yolları bulunmaktadır:

1. XSLT (Extensible Stylesheet Language Transformations): XML verisini HTML'e veya başka bir XML formatına dönüştürmek için kullanılan güçlü bir XML tabanlı dildir. Bu dönüşüm sonrası elde edilen HTML'i CSS ile biçimlendirirsiniz.
2. JavaScript ile DOM Manipülasyonu: Sunucudan gelen XML verisini JavaScript ile çeker (AJAX/Fetch API), ayrıştırır (DOMParser) ve ardından bu veriyi dinamik olarak HTML elementlerine dönüştürerek sayfaya basarsınız. Bu, en yaygın ve esnek yaklaşımdır.

Yine de, basit XML verilerini hızlıca tarayıcıda görüntülemek ve anlamlı hale getirmek için XML'i doğrudan CSS ile biçimlendirmek, bazı senaryolarda pratik bir çözüm sunabilir.

Umarım bu makale, XML verilerinize CSS ile görsel bir dokunuş katma konusunda size yeni bir bakış açısı sunmuştur. Web geliştirme dünyasında her zaman yeni şeyler öğrenmek ve farklı yaklaşımları keşfetmek çok değerlidir!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!