Bir kuralın hangi öğelere uygulanacağını denetlemek için bileşen kapsamlı CSS, kuralları sayfalar arasında yeniden kullanmak için paylaşılan bir stil sayfası kullanın. Mac’inizdeki küçük bir HTML projesinde ikisini bir arada kullanabilirsiniz; taşımak ve bakımını yapmak istediklerinize göre dosya düzenini seçin.

Bu kılavuz, köşeleri yuvarlatılmış kare biçiminde bir kart ve ayrı bir not içeren yerel bir sayfayı biçimlendirmeyi adım adım anlatır. Amaç, kartın görünümünü öngörülebilir tutmak ve ardından CSS’inin sayfanın içinde mi yoksa yeniden kullanılabilir bir dosyada mı bulunacağına karar vermektir. Etiketler ve şekil örnek amaçlıdır; örnek için herhangi bir çerçeve veya indirilmiş varlık gerekmez.

Aslında neye karar veriyorsunuz?

İki karar söz konusu: CSS’in nerede bulunduğu ve hangi öğeleri seçtiği. Gömülü bir stil sayfası, HTML belgesinin style öğesinde bulunur. Harici bir stil sayfası ayrı bir kaynaktır; link kullanılarak rel="stylesheet" ve bir href yolu üzerinden eklenir. Bunlar, CSS sağlamak için HTML’in sunduğu mekanizmalardır; bu düzenlemelerin hiçbiri sıradan seçicilere kendiliğinden bir bileşen sınırı kazandırmaz. HTML Standardı: style öğesi, MDN: Harici kaynak bağlantı öğesi.

Yerel CSS @scope seçime bir sınır ekler. Bir kök öğe belirlersiniz, ardından bu alt ağaç içinde uygulanacak kurallar yazarsınız. Çevreleyen belgede benzer öğeler olduğunda kısa seçicilerin kullanışlı kalmasını sağlayabilir. Chrome’un belgeleri, yerel kapsamlamayı seçicileri oluşturulmuş sınıf veya özniteliklerle yeniden yazan araçlardan da ayırır. Bir bileşen örneği bu tür araçlara dayanıyorsa bunların ayrıca ön koşul olarak eklenmesi gerekir. CSS @scope kuralıyla seçicilerinizin erişimini sınırlayın.

Bu görev için aşağıdaki karar yardımını kullanın. Bu, belgelenmiş mekanizmalara dayalı bir editoryal öneridir; tarayıcı gereksinimi değildir.

Acil göreviniz Önerilen düzenleme Birlikte taşınması gerekenler
Küçük bir sayfayı tek dosya olarak tutmak CSS’i bir style öğesine gömün HTML ve ayrıca başvurulan varlıklar
Aynı kartın bakımını birkaç sayfada yapmak Özel bileşen sınıfları içeren harici bir stil sayfası kullanın Her HTML sayfası ve paylaşılan CSS
Tanımlı bir alt ağaçta daha kısa seçiciler kullanmak Gömülü veya harici, açık köklü @scope kuralları ekleyin CSS ve eşleşen kökü içeren biçimlendirme
Kapsam desteği belirsiz tarayıcıları desteklemek Temel biçimlendirmeyi sıradan sınıf kurallarında tutun HTML ve bu kuralları içeren stil sayfası

“Taşınabilir” sözcüğünün somut bir anlamı olmalı. Tek bir HTML dosyasını tek başına taşımak kolaydır. HTML ve CSS içeren bir klasör de yolları çalışmaya devam ettiği sürece taşınabilir. Yeniden kullanılabilir bir bileşenin üçüncü bir taşınabilirlik türüne daha ihtiyacı vardır: hedef konum, seçicilerin beklediği biçimlendirme bağlantılarını korumalıdır.

Mac’inizde çalışan iki dosyalı bir örnek oluşturun

form-study adlı bir klasör oluşturun. İçine index.html ve shared.css adlı iki düz metin dosyası kaydedin. TextEdit kullanıyorsanız File > New seçeneğini, ardından kodu yapıştırmadan önce Format > Make Plain Text seçeneğini belirleyin. Apple, HTML dosyası için .html uzantısıyla kaydetmeyi ve sorulduğunda Use .html seçeneğini belirlemeyi belgeliyor. Stil sayfasının gerçek dosya adının shared.css olduğundan ve sonuna .txt eklenmediğinden emin olun. Mac’te TextEdit’te HTML belgeleriyle çalışma.

Bu eksiksiz HTML belgesini index.html olarak kaydedin:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Bu eksiksiz stil sayfasını shared.css olarak kaydedin:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

index.html dosyasını Safari’de veya başka bir masaüstü tarayıcıda açın. Beklenen sonuç, mavi ve köşeleri yuvarlatılmış kareli, kenarlıklı beyaz bir kartın ardından kenarlıksız bir nottur. Stil sayfası bağlantısı MDN’nin belgelediği örüntüyü izler: HTML, bir stil sayfası bağlantısındaki href aracılığıyla CSS kaynağını belirtir. MDN: Stil sayfası ekleme.

Örnekte kart başlığına bilerek ayrı bir sınıf veriliyor. Böylece yerel kapsamlamaya gerek kalmadan amaçlanan biçimlendirme ilişkisi görünür hâle geliyor. Sayfa arka planı ve yazı tipi, belge varsayılanlarıdır; kartın kenarlığı, başlık rengi ve şekli ise karta özgüdür. Yeniden kullanılabilir kuralları ayıklarken bu ayrımı koruyun: hedef sayfa, bu sayfanın arka planını veya genişliğini benimsemeden kartı kullanmak isteyebilir.

Tasarımı paylaşmak için aynı klasörde ikinci bir HTML sayfası oluşturun ve aynı stil sayfası bağlantısını kullanın. Böylece iki sayfa da tek bir CSS dosyasına başvurur. Bu dosyada yaptığınız düzenlemeleri, ona bağlanan tüm sayfaları etkileyen değişiklikler olarak değerlendirin; paylaşılan bir kuralı değiştirdikten sonra her sayfayı inceleyin.

Yerel kapsamlı CSS ne zaman işe yarar?

Bir bileşen, özellikle iç içe geçmiş içeriklerin çevresine açık bir alt sınır gerektiğinde, basit yerel seçicilerden yararlanan birkaç öğe içeriyorsa @scope kullanın. CSS Basamaklandırma ve Kalıtım belirtimi, kapsamı bir kök ve isteğe bağlı sınır öğeleriyle tanımlar. Kök kapsam içindedir; sınır öğeleri ve bunların alt öğeleri kapsamlı kurallarla eşleştirilmez. Bu belirtim bir Çalışma Taslağıdır. CSS Basamaklandırma ve Kalıtım Düzey 6: Stilleri kapsam içine alma.

Küçük bir deneme için aşağıdaki isteğe bağlı bölümü shared.css dosyasının sonuna ekleyin. Mevcut örnek biçimlendirmesini kullanır ve kart paragrafının görünümünü değiştirir:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Destekleyen bir tarayıcıda kartın içindeki paragraf soluk bir arka plan ve dolgu alır. Not paragrafı bu kuralın kapsamı dışında kalır. CSS hâlâ paylaşılan dosyadadır: kapsam ve paylaşım birlikte çalışır.

Daha sonra nested-sample sınıfına sahip iç içe bir bölge eklerseniz, bu isteğe bağlı bölümü aşağıdakiyle değiştirebilirsiniz. Bu, bir sınır örneğidir; özgün sayfada henüz böyle bir iç içe bölge yoktur.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Sınır, iç içe bölgenin bu seçici eşleşmelerine girmesini önler. Ancak tam bir stil yalıtımı sağlamaz: color ve font-family gibi kalıtılan özellikler kapsam sınırının ötesine geçebilir. İç içe bir öğenin neden hâlâ üst öğesine benzediğini incelerken bu ayrımı göz önünde bulundurun. MDN: @scope açıklaması.

.shape-card gibi açık bir kök, CSS dosyalar arasında taşınırken bağımlılığı da belirginleştirir. Hedef belgede bu sınıfa sahip bir öğe bulunmalıdır. Stil sayfasını tek başına taşımak gerekli biçimlendirmeyi sağlayamaz.

Tarayıcı desteğinin sınırları nelerdir?

MDN şu anda @scope özelliğini Baseline 2026 olarak işaretliyor; Mart 2026’dan bu yana en yeni tarayıcı sürümlerinde kullanılabiliyor. Eski tarayıcılar desteklemeyebilir. Masanızdaki Mac’te hangi CSS özelliklerinin desteklendiğini, yüklü tarayıcının sürümünü bilmeden belirleyemezsiniz; kullanmayı planladığınız sürümlerin uyumluluk bilgilerini kontrol edin. MDN: @scope tarayıcı uyumluluğu.

Eski tarayıcılar önemliyse temel kart biçimlendirmesini yukarıdaki sıradan sınıf kurallarında tutun. Böylece isteğe bağlı paragraf biçimlendirmesi ek özellik olarak kalabilir. CSS hata işleme, tarayıcıların desteklenmeyen içeriği atlayıp geçerli CSS’i işlemeye devam etmesine olanak tanır; dolayısıyla bir stil sayfasının varlığı, içindeki her kuralın uygulandığını göstermez. MDN: CSS hata işleme.

@scope olmadan aynı paragraf biçimlendirmesini elde etmek için kart paragrafına shape-card__caption gibi özel bir sınıf verin, ardından sıradan bir kuralda bu sınıfı hedefleyin. Bu, biçimlendirmeye bir bağlantı noktası ekler ancak sonucu yerel kapsamlamaya dayandırmaz.

Aynı davranışı elde etmek amacıyla style öğesine scoped özniteliği eklemeyin. Güncel HTML Standardı’nın bu öğe için öznitelik listesinde böyle bir öznitelik yoktur. Yerel CSS kapsamlaması @scope kuralını kullanır. HTML Standardı: style öğesi, MDN: @scope sözdizimi.

Sayfayı nasıl taşınabilir tutarsınız?

Bu örnekte form-study klasörünün tamamını taşımak, index.html ile shared.css arasındaki ilişkiyi korur. Yalnızca HTML’i taşımak, stil sayfasını geride bırakır. Yazdığınız bir sayfayı başkasına teslim etmeden veya yeniden düzenlemeden önce şu basit bağımlılık sözleşmesini kullanın:

  1. Biçimlendirme: Bileşen sınıflarını ve seçicilerin ihtiyaç duyduğu yapıyı koruyun.
  2. Stil sayfası: CSS dosyasını ekleyin ve HTML bağlantısının dosya konumunu göstermeye devam ettiğinden emin olun.
  3. Kaynaklar: CSS’in başvurduğu dosyaları, yollarını koruyarak veya güncelleyerek ekleyin.
  4. Tarayıcı: Sayfayı açacak tarayıcı sürümleri için desteklenen bir biçimlendirme yöntemi bulundurun.

Bir bileşene yazı tipleri veya dekoratif dosyalar eklendiğinde üçüncü kontrol önem kazanır. MDN, göreli CSS URL’lerinin stil sayfası URL’sine göre çözümlendiğini belgeliyor. Bu nedenle bildirimleri başka bir klasördeki stil sayfasına taşımak, belirttikleri kaynak konumunu değiştirebilir. MDN: url() CSS işlevi.

Örneğin harici bir stil sayfası proje klasöründen styles alt klasörüne taşınırsa, url("assets/tile.png") başvurusu içeren doğrudan bir bildirim artık styles/assets içini gösterir. Yolu güncelleyin veya ilgili dizin yapısını koruyun. Çalışan örnek, şekli tamamen CSS ile çizerek bu bağımlılıktan kaçınır.

Tek dosyalı teslimat öncelikliyse verilen CSS’i belgenin head bölümü içindeki bir style öğesine gömün ve stil sayfası bağlantısını kaldırın. Bu örnek için artık yalnızca HTML dosyası yeterlidir. İsteğe bağlı açık köklü @scope bloğu da dâhil olmak üzere aynı seçicileri koruyun. HTML, style öğesi üzerinden bir stil sayfasının gömülmesini destekler. HTML Standardı: style öğesi.

Taşıma ve yeniden yükleme testiyle kararınızı kontrol edin

Proje klasörünün tamamını başka bir konuma kopyalayın ve tarayıcınızda kopyalanan HTML’i açın. Kopyada, shared.css dosyasındaki şeklin arka plan rengini değiştirip kaydedin ve sayfayı yeniden yükleyin. Görünür değişiklik, kopyalanan sayfanın kullandığı stil sayfasını düzenlediğinizi doğrular.

Ardından hem kartı hem notu inceleyin. Başarılı sonuçta kartın biçimlendirmesi korunurken not, isteğe bağlı kapsamlı paragraf kuralının dışında kalır. Sayfanın tamamı stilini kaybederse önce CSS dosya adını ve bağlantı yolunu kontrol edin. Yalnızca isteğe bağlı biçimlendirme yoksa tarayıcı desteğini ve kapsam kökünü kontrol edin. İlgisiz bir öğe değişirse amaçlanan bileşenin dışına erişen seçicileri inceleyin.

HTML’i TextEdit’te yeniden açarken, kaynak kodunu görmeniz gerekiyorsa File > Open seçeneğini, ardından Show Options ve Ignore rich text commands seçeneklerini kullanın. Apple ayrıca sonraki açılışlar için Display HTML files as HTML code instead of formatted text ayarını belgeliyor. Mac’te TextEdit’te HTML belgeleriyle çalışma.

Bu küçük sayfayı bir arada tutmak ana görevinizse gömülü CSS’i seçin. Birkaç sayfanın bakımını yapılan aynı kuralları kullanması gerekiyorsa paylaşılan stil sayfasını seçin. Sınırları kuralları basitleştiriyorsa ve tarayıcı desteği elveriyorsa yerel kapsamlamayı ekleyin. Son olarak gerçek dosyaları taşıyıp yeniden açın: bu, seçtiğiniz düzenlemenin dayandığı biçimlendirme, stil sayfası ve kaynak ilişkilerini denetler.

Kaynaklar