Ders 02 / 26

Biçem Dosyasının Bağlanması

Bir biçem kümesinin belgeye satır içi, iç ve dış olmak üzere üç yolla bağlanması; bu üç yolun istek sayısı, yeniden kullanım ve çakışma çözümü bakımından farkları.

İçindekiler

Önceki ders bir kuralın seçici ve bildirim bloğundan oluştuğunu kurdu ve istasyon sayfasının ilk üç kuralını yazdı. Kurallar bir yerde durmalıdır ve durdukları yer, hem bakım maliyetini hem de sayfanın ilk çiziminin ne zaman başlayacağını belirler.

Bu ders üç bağlama yolunu tanımlar, aralarındaki farkları ölçülebilir bir örnekle gösterir ve Web’in Temelleri ve HTML kursundaki kaynak yükleme sırası dersinde kurulan engelleme davranışını biçem tarafından yeniden ele alır.

Üç Yol

Satır içi biçem (inline style) ögenin style özniteliğine yazılır. Seçici yoktur: bildirimler doğrudan o tek ögeye bağlanır.

<h1 style="color: #8a1c1c; font-size: 2rem">Kuzey Yamaç Ölçüm İstasyonu</h1>

İç biçem (internal style sheet) belgenin baş bölümündeki bir style ögesinin içine yazılır. Kurallar tam biçimlidir; seçiciler yalnızca o belgeye bakar.

<head>
  <meta charset="utf-8">
  <title>Kuzey Yamaç Ölçüm İstasyonu</title>
  <style>
    h1 { font-size: 2rem; }
  </style>
</head>

Dış biçem (external style sheet) ayrı bir .css dosyasıdır ve belgeye link ögesiyle bağlanır. rel="stylesheet" bağlantının türünü bildirir; href kaynağın adresini verir.

<link rel="stylesheet" href="/istasyon.css">

Dördüncü bir yol daha vardır: bir biçem dosyasının içinden @import url("…") yazarak başka bir dosya çağırmak. Bu yazım işler ama bir sıralılık getirir: içeri alınan dosyanın adresi, onu çağıran dosya indirilip ayrıştırılmadan bilinemez. Bu yüzden @import zinciri, aynı sayıda link ögesinden daha geç tamamlanır.

Dış Biçem Ayrı Bir Kaynaktır

Dış biçem dosyasının belgeden ayrı bir kaynak olduğu ölçülebilir. Aşağıdaki sunucu iki adresi ayrı ayrı sunar ve aldığı her isteği kütüğe yazar.

// bicem-sunucu.mjs — iki kaynagi ayri ayri sunar ve istekleri kutuge yazar
import { createServer } from "node:http";

const belge = `<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Kuzey Yamac Olcum Istasyonu</title>
<link rel="stylesheet" href="/istasyon.css">
<style>h1 { font-size: 2rem }</style>
</head>
<body>
<h1 style="color: #8a1c1c">Kuzey Yamac Olcum Istasyonu</h1>
</body>
</html>
`;

const bicem = `body { font-family: system-ui; line-height: 1.5 }
h1 { color: #143a52 }
`;

const sunucu = createServer((istek, yanit) => {
  console.log(`istek: ${istek.method} ${istek.url}`);
  if (istek.url === "/istasyon.css") {
    yanit.writeHead(200, { "content-type": "text/css; charset=utf-8" });
    yanit.end(bicem);
  } else {
    yanit.writeHead(200, { "content-type": "text/html; charset=utf-8" });
    yanit.end(belge);
  }
});

sunucu.listen(8123, "127.0.0.1", () => {
  console.log("dinliyor: 127.0.0.1:8123");
});

Sunucu arka planda çalıştırılıp iki adres ayrı ayrı istenir:

node bicem-sunucu.mjs > sunucu.log 2>&1 &
sleep 1
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" http://127.0.0.1:8123/
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" http://127.0.0.1:8123/istasyon.css
cat sunucu.log

200 text/html; charset=utf-8
200 text/css; charset=utf-8
dinliyor: 127.0.0.1:8123
istek: GET /
istek: GET /istasyon.css

Kütükteki iki satır, dış biçem dosyasının belgeyle birlikte gelmediğini gösterir: ikinci bir istek yapılır. Bunun üç sonucu vardır.

Birincisi, dosya yeniden kullanılabilir. On sayfa aynı istasyon.css dosyasına bağlanırsa dosya bir kez indirilir; sonraki sayfalarda önbellekten okunur. İnternet Nasıl Çalışır kursunda tanımlanan koşullu istek ve yaşam süresi kavramları burada işler.

İkincisi, dosya belgeden bağımsız değişebilir. Belgenin baytları değişmeden biçem güncellenebilir; tersi de doğrudur.

Üçüncüsü, ikinci istek bir maliyettir. Belge ayrıştırılırken bulunan link ögesi yeni bir bağlantı gerektirebilir ve bu, ilk çizimin başlamasını geciktirir.

Çizim, Biçem Çözülmeden Başlamaz

Web’in Temelleri ve HTML kursundaki kaynak yükleme sırası dersinde betiklerin ayrıştırmayı engellemesi anlatılmıştı. Biçem dosyası ayrıştırmayı engellemez — belge ağacı kurulmaya devam eder — ama çizimi engeller.

Gerekçe, engellememenin sonucuna bakılınca görülür. Biçem çözülmeden çizim yapılsaydı, sayfa önce varsayılan biçemle çizilir, dosya geldiğinde yeniden çizilirdi. Kullanıcı iki farklı sayfa görürdü. Bu yüzden tanımlı davranış, biçem çözülene kadar beklemektir.

Bu kural üç pratik sonuç doğurur:

Biçem dosyası belgenin baş bölümünde bağlanır. Gövdenin sonuna konursa çizim yine bekler, ama bekleme daha geç başlar; toplam süre uzar.
Dosya küçük tutulur; bir sayfada kullanılmayan kurallar o sayfanın çizimini geciktirir.
Bir bağlantı yalnızca belirli bir ortamda gerekiyorsa media özniteliğiyle koşullanır. Koşulu sağlamayan bir bağlantının dosyası yine indirilir, ancak çizimi engellemez:

<link rel="stylesheet" href="/istasyon.css">
<link rel="stylesheet" href="/yazdirma.css" media="print">

İkinci dosya yazdırma çıktısı için yazılmış kuralları taşır; ekran çiziminin başlamasını beklemez.

Üç Yolun Karşılaştırması

Ölçüt	Satır içi	İç	Dış
Seçici yazılabilir mi	Hayır	Evet	Evet
Birden çok belgede kullanım	Hayır	Hayır	Evet
Ayrı istek	Hayır	Hayır	Evet
Önbelleğe alınabilir	Belgeyle birlikte	Belgeyle birlikte	Bağımsız
Çakışmada önceliği	En yüksek	Kaynak sırasına göre	Kaynak sırasına göre
Sözde sınıf yazılabilir mi	Hayır	Evet	Evet

Tablodaki iki satır ayrıca açıklama ister.

Satır içi biçemde seçici yoktur, dolayısıyla sözde sınıf da yazılamaz. Bir ögenin üzerine gelindiğinde ya da odaklandığında değişecek bir bildirim style özniteliğine yazılamaz; bunun için bir kural gerekir.

Satır içi biçemin önceliği en yüksektir. Bir sonraki bölümlerde göreceğimiz özgüllük hesabı satır içi bildirimleri kapsamaz; onlar hesabın dışında, daha üstte durur. Bu, satır içi bir bildirimi bir kuralla bastırmayı olağan yollarla imkânsız kılar. Sonuç şudur: satır içi biçem, bakımı en pahalı yoldur ve yalnızca değeri belge üretilirken hesaplanan durumlarda gerekçelendirilebilir.

Göreli Adresler Dosyanın Kendisine Göre Çözülür

Dış biçem dosyasının ayrı bir kaynak olmasının sık gözden kaçan bir sonucu vardır: o dosyanın içindeki göreli adresler, belgeye göre değil biçem dosyasının kendi adresine göre çözülür.

Belge /urunler/istasyon.html adresinde, biçem dosyası /bicem/istasyon.css adresinde olsun. Biçem dosyasında background-image: url("desen.png") yazılırsa istenecek adres /bicem/desen.png olur — /urunler/desen.png değil. Aynı yazım belgenin style özniteliğinde geçseydi belgeye göre çözülür ve /urunler/desen.png istenirdi.

Ayrım, bir biçem dosyasını yeniden kullanılabilir kılan şeyin ta kendisidir: dosya, kendi komşusundaki varlıklara sabit bir yoldan başvurur ve hangi belgeden çağrıldığından etkilenmez. Görsel dosyalarını biçem dosyasının yanında tutmak bu yüzden bir düzen tercihinden fazlasıdır.

İstasyon Sayfasının Bağlanması

Kursun ekseninde tek bir dış dosya kullanılır. Belgenin baş bölümü şu hâle gelir:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kuzey Yamaç Ölçüm İstasyonu</title>
  <link rel="stylesheet" href="/istasyon.css">
</head>

istasyon.css dosyası önceki dersteki üç kuralla başlar ve kurs boyunca büyür. Belgeye tek bir noktadan bağlanması, sonraki derslerde bir kuralı değiştirmenin belgeye dokunmadan yapılabilmesi anlamına gelir — yapı ve sunum ayrımının dosya düzeyindeki karşılığı budur.

Özet

Bir biçem kümesi belgeye üç yolla bağlanır: ögenin style özniteliği (satır içi), baş bölümündeki style ögesi (iç) ve link ögesiyle çağrılan ayrı dosya (dış).
Dış biçem dosyası ayrı bir HTTP isteğidir; bağımsız önbelleğe alınabilir ve birden çok belgede yeniden kullanılabilir, ama bir istek maliyeti getirir.
Biçem dosyası ayrıştırmayı engellemez, çizimi engeller; bu, sayfanın iki kez farklı görünmesini önlemek için tanımlanmış bir davranıştır.
media özniteliğiyle koşullanan bir bağlantının dosyası indirilir ama koşul sağlanmıyorsa çizimi engellemez.
Satır içi biçemde seçici yoktur, dolayısıyla durum biçemi yazılamaz; ayrıca önceliği özgüllük hesabının üstünde olduğu için bastırılması güçtür.

Sonraki Adım

Kurallar artık belgeye ulaşıyor, ama hangi ögelere ulaştıkları henüz tek bir örnekle sınırlı. h1 yazmak bütün birinci düzey başlıkları seçer; peki yalnızca ölçüm çizelgesindeki eksik değerleri seçmek gerekirse? Sonraki ders seçicinin dört temel türünü tanımlar — tür, sınıf, kimlik ve evrensel seçici — ve her birinin belge ağacında hangi kümeyi döndürdüğünü çalıştırılabilir bir eşleyiciyle ölçer.

İlerlemeni kaydetmek ve not almak için Giriş yap

Notlarım

Not almak için giriş yapmalısın.