17 Ağustos 2025Türkçe

XML belgelerine stil vermek için CSS @namespace'in gücünden yararlanın. Bu kapsamlı kılavuz, sözdiziminden gelişmiş tekniklere kadar her şeyi kapsar ve tarayıcılar arası uyumluluğu ve küresel erişilebilirliği sağlar.

CSS @namespace: İsim Alanlarıyla XML'e Stil Verme - Kapsamlı Bir Kılavuz

Basamaklı Stil Sayfaları (CSS) öncelikle HTML belgelerine stil vermek için bilinir. Ancak, yetenekleri çok ötesine uzanır ve geliştiricilerin Genişletilebilir Biçimlendirme Dili (XML) tabanlı olanlar da dahil olmak üzere çeşitli belge türlerine stil vermesine olanak tanır. CSS ile XML'e stil vermenin önemli bir yönü, @namespace at-kuralının kullanılmasıdır. Bu kapsamlı kılavuz, CSS isim alanlarının inceliklerine iner ve size XML belgelerine etkili bir şekilde stil vermek için bilgi ve araçlar sağlar.

XML İsim Alanlarını Anlamak

CSS @namespace'e dalmadan önce, XML isim alanları kavramını kavramak önemlidir. XML isim alanları, tek bir belge içinde farklı XML kelime dağarcıklarından öğeleri karıştırırken öğe adı çakışmalarından kaçınmanın bir yolunu sağlar. Bu, her kelime dağarcığına benzersiz Birleşik Kaynak Tanımlayıcılar (URI'ler) atayarak elde edilir.

Örneğin, hem XHTML hem de Ölçeklenebilir Vektör Grafikleri'nden (SVG) öğeleri birleştiren bir belge düşünün. İsim alanları olmadan, XHTML'den gelen title öğesi, SVG'den gelen title öğesiyle karıştırılabilir. İsim alanları bu belirsizliği çözer.

XML İsim Alanlarını Bildirmek

XML isim alanları, kök öğe içinde veya isim alanının ilk kullanıldığı herhangi bir öğede xmlns özniteliği kullanılarak bildirilir. Öznitelik, aşağıdaki biçimi alır xmlns:prefix="URI", burada:

xmlns, bir isim alanı bildirimini gösteren anahtar kelimedir.
prefix, isim alanına başvurmak için kullanılan isteğe bağlı kısa bir addır.
URI, isim alanı için benzersiz tanımlayıcıdır (örneğin, bir URL).

İşte XHTML ve SVG isim alanları olan bir XML belgesine bir örnek:

<root xmlns:html="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
  <html:h1>Belgem</html:h1>
  <svg:svg width="100" height="100">
    <svg:circle cx="50" cy="50" r="40" fill="red"/>
  </svg:svg>
</root>

Bu örnekte, html, XHTML isim alanı (http://www.w3.org/1999/xhtml) için önektir ve svg, SVG isim alanı (http://www.w3.org/2000/svg) için önektir.

CSS @namespace'e Giriş

CSS @namespace at-kuralı, CSS stil sayfanız içinde bir isim alanı URI'sini bir isim alanı önekiyle ilişkilendirmenize olanak tanır. Bu ön ek, daha sonra o isim alanına ait öğeleri hedeflemek için kullanılır. Temel sözdizimi şudur:

@namespace prefix "URI";

Burada:

@namespace at-kuralı anahtar kelimesidir.
prefix isim alanı önekidir (varsayılan isim alanı için boş olabilir).
URI isim alanı URI'sidir.

CSS'de İsim Alanlarını Bildirmek

Önceki XML örneğini ele alalım. CSS ile stil vermek için, önce stil sayfanızdaki isim alanlarını bildireceksiniz:

@namespace html "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";

İsim alanlarını bildirdikten sonra, belirli öğeleri hedeflemek için CSS seçicilerinizde önekleri kullanabilirsiniz:

html|h1 {
  color: blue;
  font-size: 2em;
}

svg|svg {
  border: 1px solid black;
}

svg|circle {
  fill: green;
}

Önemli: Boru sembolü (|), CSS seçicinde isim alanı önekini öğe adından ayırmak için kullanılır.

Varsayılan İsim Alanı

Ayrıca, açık bir önek olmadan öğelere uygulanan varsayılan bir isim alanı da bildirebilirsiniz. Bu, @namespace kuralında öneki atlayarak yapılır:

@namespace "http://www.w3.org/1999/xhtml";

Varsayılan bir isim alanıyla, bir önek kullanmadan o isim alanındaki öğeleri hedefleyebilirsiniz:

h1 {
  color: blue;
  font-size: 2em;
}

Bu, genellikle XHTML isim alanını varsayılan olarak kullanan XHTML belgelerine stil verirken özellikle kullanışlıdır.

CSS @namespace'in Pratik Örnekleri

Farklı XML tabanlı belge türlerine stil vermek için CSS @namespace'in nasıl kullanılacağına dair bazı pratik örnekleri inceleyelim.

XHTML'e Stil Verme

HTML'nin XML olarak yeniden formüle edilmesi olan XHTML, isim alanı tabanlı stil verme için önde gelen bir adaydır. Aşağıdaki XHTML belgesini düşünün:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML Sayfam</title>
  </head>
  <body>
    <h1>Sayfama Hoş Geldiniz</h1>
    <p>Bu bir metin paragrafıdır.</p>
  </body>
</html>

Bu belgeye stil vermek için, aşağıdaki CSS'i kullanabilirsiniz:

@namespace "http://www.w3.org/1999/xhtml";

body {
  font-family: sans-serif;
  margin: 20px;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  line-height: 1.5;
}

Bu durumda, XHTML isim alanı varsayılan olarak bildirilir ve öğelere doğrudan önekler olmadan stil vermenize olanak tanır.

SVG'ye Stil Verme

SVG, vektör grafikleri oluşturmak için kullanılan başka bir yaygın XML tabanlı biçimdir. İşte basit bir SVG örneği:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

Bu SVG'ye stil vermek için, aşağıdaki CSS'i kullanabilirsiniz:

@namespace svg "http://www.w3.org/2000/svg";

svg|svg {
  border: 1px solid black;
}

svg|circle {
  fill: blue;
  stroke: black;
  stroke-width: 2;
}

Burada, SVG isim alanını svg önekiyle bildiriyoruz ve svg ve circle öğelerini hedeflemek için kullanıyoruz.

MathML'ye Stil Verme

MathML, matematiksel gösterimi tanımlamak için kullanılan XML tabanlı bir dildir. Doğrudan CSS ile daha az sıklıkta stil verilir, ancak mümkündür. İşte temel bir örnek:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <mi>x</mi>
    <mo>+</mo>
    <mn>1</mn>
  </mrow>
</math>

Ve ilgili CSS:

@namespace math "http://www.w3.org/1998/Math/MathML";

math|math {
  font-size: 1.2em;
}

math|mi {
  font-style: italic;
}

math|mo {
  font-weight: bold;
}

Gelişmiş Teknikler ve Hususlar

CSS Özgüllüğü ve İsim Alanları

CSS isim alanlarıyla çalışırken, bunların CSS özgüllüğünü nasıl etkilediğini anlamak önemlidir. İsim alanı önekleri olan seçiciler, öneksiz seçicilerle aynı özgüllüğe sahiptir. Ancak, aynı öğeye uygulanan birden fazla kuralınız varsa, standart CSS özgüllük kuralları yine de geçerli olacaktır. Örneğin, bir ID seçici, isim alanlarından bağımsız olarak her zaman bir sınıf seçiciden daha özgül olacaktır.

Tarayıcılar Arası Uyumluluk

CSS @namespace için destek, modern tarayıcılarda genellikle iyidir. Ancak, özellikle 9'dan önceki Internet Explorer sürümleri gibi eski tarayıcılar, sınırlı veya hiç destek sunmayabilir. Stil sayfalarınızı çeşitli tarayıcılarda uyumluluğu sağlamak için test etmek çok önemlidir. Eski tarayıcılar için alternatif stil verme sağlamak için koşullu yorumlar veya JavaScript geçici çözümleri kullanmanız gerekebilir.

Test etmek çok önemlidir! Uygulanan stilleri incelemek ve isim alanı tabanlı kurallarınızın doğru şekilde uygulanıp uygulanmadığını doğrulamak için tarayıcı geliştirici araçlarını kullanın.

Çoklu İsim Alanlarıyla Çalışmak

Karmaşık XML belgeleri birden fazla isim alanı içerebilir. Farklı kelime dağarcıklarından öğeleri hedeflemek için CSS'nizde birden fazla isim alanı bildirebilir ve kullanabilirsiniz. Karışıklığı önlemek için her isim alanı için farklı önekler kullandığınızdan emin olun.

XHTML ve ürün verileri için özel bir XML kelime dağarcığı kullanan bir belge düşünün:

<root xmlns:html="http://www.w3.org/1999/xhtml" xmlns:prod="http://example.com/products">
  <html:h1>Ürün Kataloğu</html:h1>
  <prod:product>
    <prod:name>Widget</prod:name>
    <prod:price>19.99</prod:price>
  </prod:product>
</root>

Bu belgeye CSS ile şu şekilde stil verebilirsiniz:

@namespace html "http://www.w3.org/1999/xhtml";
@namespace prod "http://example.com/products";

html|h1 {
  color: darkgreen;
}

prod|product {
  border: 1px solid gray;
  padding: 10px;
  margin-bottom: 10px;
}

prod|name {
  font-weight: bold;
}

prod|price {
  color: red;
}

İsim Alanlarıyla CSS Değişkenlerini Kullanmak

CSS değişkenleri (özel özellikler), daha bakımı yapılabilir ve esnek stil sayfaları oluşturmak için isim alanlarıyla birlikte kullanılabilir. Belirli bir isim alanı içinde değişkenler tanımlayabilir ve bunları stil sayfanızda yeniden kullanabilirsiniz.

@namespace svg "http://www.w3.org/2000/svg";

:root {
  --svg-primary-color: blue;
}

svg|circle {
  fill: var(--svg-primary-color);
}

svg|rect {
  fill: var(--svg-primary-color);
}

Bu örnekte, --svg-primary-color değişkeni tanımlanır ve SVG isim alanı içindeki hem daire hem de dikdörtgen öğelerinin dolgu rengini ayarlamak için kullanılır.

Erişilebilirlik Hususları

CSS ile XML belgelerine stil verirken, erişilebilirliği dikkate almak çok önemlidir. Stil seçimlerinizin, engelli kullanıcılar için belgenin erişilebilirliğini olumsuz yönde etkilemediğinden emin olun. Anlamsal işaretlemeyi kullanın, yeterli renk kontrastı sağlayın ve bilgiyi iletmek için yalnızca renge güvenmekten kaçının.

Örneğin, SVG grafiklere stil verirken, <desc> ve <title> öğelerini kullanarak önemli görsel öğeler için alternatif metin açıklamaları sağlayın. Bu öğelere ekran okuyucular ve diğer yardımcı teknolojiler tarafından erişilebilir.

Uluslararasılaştırma (i18n) ve Yerelleştirme (l10n)

XML belgeleriniz birden fazla dil içeriyorsa, dilye özgü stil uygulamak için CSS kullanmayı düşünün. :lang() sözde sınıfını kullanarak, öğeleri dil özniteliklerine göre hedefleyebilirsiniz. Bu, farklı dillere uyacak şekilde yazı tiplerini, aralıkları ve diğer görsel özellikleri ayarlamanıza olanak tanır.

<p lang="en">This is an English paragraph.</p>
<p lang="fr">Ceci est un paragraphe en français.</p>

p:lang(en) {
  font-family: Arial, sans-serif;
}

p:lang(fr) {
  font-family: 'Times New Roman', serif;
}

Bu, içeriğinizin farklı dilsel geçmişlerden gelen kullanıcılar için doğru ve okunaklı bir şekilde görüntülendiğinden emin olur.

CSS @namespace Kullanımına Yönelik En İyi Uygulamalar

İsim alanlarını CSS stil sayfanızın en üstünde bildirin: Bu, okunabilirliği ve bakımı iyileştirir.
Anlamlı önekler kullanın: İlgili isim alanını (örneğin, XHTML için html, SVG için svg) açıkça belirten önekler seçin.
İsim alanı kullanımınızda tutarlı olun: Stil sayfanız boyunca aynı isim alanı için her zaman aynı öneki kullanın.
Stil sayfalarınızı iyice test edin: Tarayıcılar arası uyumluluğu ve erişilebilirliği sağlayın.
İsim alanlarınızı belgeleyin: Her isim alanının amacını ve herhangi bir özel hususu açıklamak için CSS'inize yorumlar ekleyin.

Yaygın Sorunları Giderme

Stiller uygulanmıyor: CSS'nizdeki isim alanı URI'sinin, XML belgenizde bildirilen URI ile tam olarak eşleştiğini iki kez kontrol edin. Küçük bir yazım hatası bile stillerin uygulanmasını engelleyebilir. Ayrıca, CSS seçicilerinizde doğru öneki kullandığınızı doğrulayın.
Tarayıcı uyumluluk sorunları: Daha eski tarayıcılar için destek sağlamak için CSS satıcı öneklerini veya JavaScript geçici çözümlerini kullanın. Farklı tarayıcılarda CSS @namespace için destek düzeyini belirlemek için tarayıcı uyumluluk tablolarına bakın.
Özgüllük çakışmaları: Uygulanan stilleri incelemek ve herhangi bir özgüllük çakışmasını belirlemek için tarayıcının geliştirici araçlarını kullanın. Doğru stillerin uygulandığından emin olmak için CSS seçicilerinizi buna göre ayarlayın.

CSS ve XML Stilinin Geleceği

XML belgelerine stil vermek için CSS'in kullanımı, web teknolojileri geliştikçe evrimleşmeye devam edecek gibi görünüyor. Yeni CSS özellikleri ve seçiciler, XML içeriğini hedeflemek ve stil vermek için daha da güçlü ve esnek yollar sağlayabilir. XML ve CSS ile çalışan geliştiriciler için en son CSS spesifikasyonları ve en iyi uygulamalar hakkında güncel kalmak çok önemlidir.

Olası bir gelişim alanı, karmaşık XML yapılarının ve veri bağlamanın gelişmiş desteğidir. Bu, geliştiricilerin CSS kullanarak daha dinamik ve etkileşimli XML tabanlı uygulamalar oluşturmasına olanak sağlayacaktır.

Sonuç

CSS @namespace, XML belgelerine stil vermek için güçlü bir araçtır. XML isim alanları kavramlarını ve bunları CSS'de nasıl bildireceğinizi ve kullanacağınızı anlayarak, XHTML, SVG ve MathML dahil olmak üzere çeşitli XML tabanlı biçimlere etkili bir şekilde stil verebilirsiniz. Stil sayfalarınızı geliştirirken tarayıcılar arası uyumluluğu, erişilebilirliği ve uluslararasılaştırmayı göz önünde bulundurmayı unutmayın. Dikkatli planlama ve ayrıntılara dikkat ederek, farklı platformlarda ve cihazlarda sorunsuz bir şekilde çalışan, görsel olarak çekici ve erişilebilir XML tabanlı uygulamalar oluşturabilirsiniz.

Bu kılavuz, CSS isim alanlarında ustalaşmak için sağlam bir temel sağlar. Örnekleri deneyin, farklı stil tekniklerini keşfedin ve CSS ve XML teknolojilerindeki en son gelişmeler hakkında bilgi sahibi olun. XML'e etkili bir şekilde stil verebilme yeteneği, modern web standartlarıyla çalışan herhangi bir web geliştiricisi için değerli bir beceridir.