HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm3)

Katlı Stil Etkisi ve Kalıtım

Sayfa 1


 

Katlı Stil Etkisi (Cascade Effect)

 

CSS programlama dilinin çıkış nedenlerinden birisi, belge yazarlarına ve belgeyi okuyanlara (kulanıcı), belgenin görüntülenmesinde belirli bir kontrol olanağı sağlanmasıdır. Bu kontrolün sağlanabilmesi için, bir belge bulunun bir element veya özellik üzerinde gerek yazar, gerekse kullanıcı taarfından uygulanabilen çeşitli etki mekanizmaları kullanılabildiği gibi, bu element/özelliğin değerini kalıtım mekanizması da ekiler.

Bir yazar, bir sayfa içindeki belirli bir öğenin görüntülenmesini etkileyebilmek için, stil kuralları oluşturabilir. Stil kuralları, bir elementin stil niteliğinden yararlanılarak belirlenebildiği gibi ( satırıçı stil=inline style), bu kuralları, aynı sayfa içinde <style> elementinin içeriği olarak CSS kuralları içeren "gömülü" (embedded) stil sayfası programlarından yararlanabilir. Bundan başka birden çok sayfaya bağlanabilecek bağımsız dosya_adı.css uzantılı çeşitli dış CSS dosyalarının da sayfaya bağlanma (link) veya ithal (importing) yöntemleri ile bağlanmaları olanağı vardır. Kullanıcılar da özellikle belge çözümleyicilerinin ayarları yardımı ile indirdikleri belgelerin görüntülenmesi üzerinde etkili olabilirler. Bir elementi hedefleyen açık stil kuralları, o elementin görüntüsünü etkilediği gibi, aynı elementin kalıtım yeteneği dolayısı ile, kalıtım yolu ile kazanabileceği değerler, son görüntüsünde etkili olabilir.

Bu mekanizmanın daha iyi anlaşılması için elementin bir hedef durumunda olduğu ve bu hedefi çeşitli yüksekliklerde (düzeylerde) etki alanlarının etkilemeye çalıştığı düşünülebilir. Kalıtım mekanizması da bu etkilerden biridir. Sonuçta, bu etki kaynaklarından en güçlüsü yarışmayı kazanır ve elementin görüntüsü, kazanan etkinin belirttiği şekilde oluşturulur. Bu yarışmaya "Kat Etkisi" (Cascading Effect) adı verilir. Katlı Stil Sayfaları (Cascading Style Sheets) adı da bu etki dolayısı ile verilmiştir. Hangi etkinin kazanacağı ise, basit fakat sistematik ve yerine göre çok sayıda olabilen eliminasyon yöntemleri ile yapılır. Bu işlemler sonucunda, kazanmakta olan etki çoğunlukla zor takip edilir. Bu nedenle, alınacak sonucun (oluşacak görüntünün), her zaman önceden (a priori) anlaşılması kolay değildir.

Katlı stil etkisi sonunda bir özelliğin değeri belirlenmemişse, bu değer önce kalıtım yolu ile edinilmeye çalışılır, eğer kalıtım da yoksa, varsayılan başlangıç değerine eşitlenir.

Kazanan Etkinin Belirlenmesi

Katlı stil ekisinin amacı bir element/özelliğin görünümünü belirleyecek "kazanan bildirim" 'in belirlenmesidir. Genel olarak uygulanacak olan değer belirlenince, ortamın durumuna göre yeni bir hesaplama yapılarak, uygulanacak değer saptanır. Aşağıda önem sırasına göre uygulananacak olan, kazanacak değerin bulunma koşulları sıralanmıştır.

Değerlendirme, kazanan bildirim bulununcaya kadar devam edecektir.

 

Kalıtım

 

Kalıtım, özelliklerin atadan oğula geçmesidir. Birçok özelliğin kalıtım ile kazanılma yeteneği vardır. CSS3 de tüm özelliklere, açık olarak kalıtım ile edinilme özelliği verilebilir. Kalıtımla edinilen değerler, çoğunlukla hesaplanmış değerlerdir.

 

Başlangıç Değerleri

 

Bir değer, katlı stil etkisi veya kalıtım ile kazanılamadığı durumlarda, başlangıç değeri kullanılacaktır. CSS3 ile başlangıç değerlerinin açık olarak belirtilmesi olanağı sağlanmıştır. Başlangıç değerlerinin spesifikasyonlarda açık olarak belirtilmediği durumlarda, belge çözümleyiciler kendi özel değerlerini kullanırlar. Kullanıcılar için bir başka zorluk da, bu özel değerlerin açık olarak belirtilmemesi nedeni ile, belgelerin görüntülerinin bazı durumlarda önceden tahmin edilememesi olmaktadır.

 

Katlı Stil Etkisinin Ağırlığının Hesaplanması

 

CSS3 de katlı stil etkisinin hesaplanması, stil kuralının kökeni ile belirtilmiş önemlilik durumuna göre hesaplanır.

CSS3 de stil sayfalarının üç tür kökeni olabilir. Bunlar, yazar, kullanıcı ve belge çözümleyicisi stil sayfalarıdır. Yazar stil sayfaları, yazarın sayfaya uyguladığı stil sayfalarıdır. Kullanıcının normalde indirdiği sayfaya bir stil uygulaması olanağı yoktur. Belki çok karmaşık teknikler, kullanıcı stil sayfası olarak etki yapabilir. Belge çözümleyicilerin ise en azından stil sayfası olmayan belgelerin görüntülenmesi için bir başlangıç değerlerinden oluşan bir stil değerleri olabilir. Kullanıcılar, çeşitli menüler yardımı ile bu değerleri değiştirebilirler. Bu durumda, aşağıda verilen önem sırası bir çok yönden kuramsal sayılabilir. Stil sayfalarının önemi, yukarıdan aşağıya doğru artmak üzere,

  1. Belge çözümleyicileri stil sayfaları

  2. Kullanıcı normal stil sayfaları

  3. Yazar normal stil sayfaları

  4. Yazar önemli stil sayfaları

  5. Kullanıcı önemli stil sayfaları

olarak verilmiştir.

Sayfaya ithal edilen stil sayfalarında bulunan tanımlar, ithal eden sayfada bulunan tanımlardan daha az önceliklidir. İthal edilen edilen sayfa da başka sayfalar ithal edebilir, bunlardaki tanımlar da kendisinde bulunanlardan daha az öncelikli olacaktır.

Pratikte sadece yazar stil sayfaları kullanıldığını belirtelim. Belge çözümleyicisinin özel stil ayarları, kullanıcı tarafından değiştirilemez. Belge çözümleyicilerinin menü kontrolleri ile sadece yazı büyüklüğü ve karakter kodlaması belirtilebilir. Kullanıcı stil sayfaları da bugün için kullanımda değildir. Sadece Firefox yeni 1.0 sürümünde kullanıcı stil sayfaları (user style sheets) kullanımına olanak sağlamaktadır.

 

Katlı Stil ve Kalıtım Etkisinin Verileri ve Sonucun Belirlenmesi

 

Bu süreci etkileyen girdiler,

Bu sürecin sonucunun belirlenmesi için uygulanacak aşamalar,

  1. Eğer katlı stil etkisi bir kazanan değer sağlıyorsa ve bu değer "initial" veya "inherit" değilse, bu değer kullanılır.

  2. Yoksa, eğer değer "inherit" ise, kalıtımla edinilen değer kullanılır.

  3. Yoksa, değer "initial" ise varsayılan başlangıç değeri kullanılır.

  4. Yoksa, değer kalıtımla edinilebiliyorsa, kalıtımla edinilen değer kullanılır.

  5. Yoksa, varsayılan başlangıç değeri kullanılır.

Görüldüğü gibi bu son derece karmaşık, çok aşamalı ve sonucu ilk bakışta öngörülemeyecek bir süreçtir.

 

Pratik Öneriler

 

Çok Sayıda Dış Stil Dosyası Kullanılmamalı

 

Katlı etki sürecinin karmaşık ve öngörülmesi zor niteliği, ilk bir önlem olarak basit ve anlaşılır yöntemler kullanılarak azaltılabilir. Herşeyden önce, bir Web alanı, çoğunlukla birden çok sayfa içerir. Bu sayfalarda, tekdüzeliğin sağlanması için genellikle her sayfada ayrı bir stil sayfası belirlemekten kaçınmak ve genel bir stil syfasından tüm sayfaların yararlanmasını sağlamak uygun olur. Böylelikle bir yazar, kullandığı selektörlere alışkanlık kazanmış olur ve etkilerini daha kolaylıkla öngörebilir. Aynı düşünceyle, mutlaka gerekli olmadan, sayfa içindeki bir elemente stil niteliğini kullanarak bir stil atamamak gerekir. Uzun çalışmalarda bu araya serpiştirilmiş stil deyimleri iyi takip edilemez ve bir etkinin nedenini anlamak zaman alabilir. Sadece, Katlı etki sürecinin etkilerini gidermek için bu yola başvurulabilir.

Bir sayfaya sadece bir tek stil sayfası bağlanırsa, sonuçların öngörülmesi daha kolaylaşır. Sayfaya ithal etme veya bağlanma yolu ile birden fazla stil sayfası bağlanması yerine, tüm stil deyimlerinin tek bir sayfada toplanması, sonuçların öngörülmesinde kolaylık sağlayacaktır.

 

Kalıtımın Kontrollü Olarak Kullanılması

 

Kalıtım etkisi, yerine göre kolaylık, yerine göre de gerçek bir başağrısı olabilir. Kalıtım etkisinin azaltılması kolay değildir. Bazı durumlarda kalıtımdan yararlanılarak önemli ölçüde kod ekonomisi yapılabilir. Bu konuda benimsenebilecek en uygun tutum, kalıtımdan gerekli olduğu sürece yararlanmak, fakat kalıtım yayılmasının kontrolünü olanaklar ölçüsünde elde tutarak, kontrolsuz etkilere olanak vermemek olabilir.

 

Karmaşık Stil Kurallarından Kaçınma

 

CSS3 son derece geniş ve yıllardır üzerinde çalışılmasına rağmen henüz her modülü "önerilen yöntem" niteliğini elde etmemiş bir çalışmadır. Bu konuda Kasım 2004 de spesifikasyon olma şamasına gelmesi beklenmektedir. Şu anda ancak CSS1 spesifikasyonun uygulamada büyük ölçüde desteklenebildiğini ve bu desteğin de tam olmadığını vurgulayalım. CSS2.1 ise daha tam uygulanamadan yenilenme aşamasına girilmiş bir spesifikasyondur. Burada CSS3 öğrenmemizin tek nedeni en yeniye uyum sağlama kaygısıdır ve bilgi teknolojilerinde bu tercih, kuramsal açıdan çok geçerli olmasına karşın, uygulamada her zaman en iyi sonuç veren bir yol değildir. Uygulamacılar çoğunlukla teknolojiyi biraz geriden takip eden, sistemlerin bir müddet uygulanmasını, sorunların giderilmesini bekleyen tutum takınabilirler. Bu tutum, ilk başlangıçta işleri kolaylaştırabilir gibi görünebilirse de, sıkı sıkıya yapışılan sistemler kısa bir müddet sonunda tamamen demode olabilir ve yeni sistemlere adapte olmak daha da zor hale gelebilir. Bu nedenle yenilerin daima kontrollu olarak fakat gecikmeksizin benimsenmesi yararlı olur. Bunun için, çalışmalarımızda en yeni CSS3 spesifikasyonunu kullanmayı öngörüyoruz.

CSS3 'ün çok yeni ve geniş bir sistem olduğundan uygulamada desteği henüz yeterli değildir. Doğal olarak CSS3 hergün daha çok desteklenmekte, fakat açıklamalar yetersiz olduğundan, şu an için hangi belge çözümleyicisinin, hangi spesifikasyonu ne ölçüde desteklediği tam olarak önceden kestirilememektedir. Aslında CSS2.1 'in bile henüz tam olarak desteklenmediği bilinmektedir. Bu nedenle, karmaşık ve destekleneceği kuşkulu ifadelerden olabildiğince kaçınmak gerekmektedir. Olabildiğince basit kurallar oluşturup, bunları sıkı sıkıya deneyerek uygulamaya konulması gerekmektedir. Kullanıcılar, günümüzde adeta sadece MS Internet Explorer kullanmaktadır. Bu nedenle IE platformunda çalışmayan hiçbir programın uygulamaya alınmaması gerekmektedir.

Karmaşık terim gösterisinde bulunanlar değil, yazdıkları kodlar geniş ölçüde desteklenen, açık ifadeler kullanan ve kullanıcılar tarafından kolay takip edilebilen program kodları yazanlar başarılı bir Web yazarı sayılabilirler.

 

Uygulama Örnekleri

 

İlk olarak "al_yaz.css" adlı bir program yazıp saklayacağız.

İkinci olarak "kahverengi_yaz.css" adlı bir program yazıp saklayacağız.

.yaz {color:maroon}

Bundan sonra aşağıdaki programı dene_kat_etkisi_bildirim.htm adı ile saklayacağız.

Uygulama Sonucu : Yazının rengi kahverengi olarak görüntülendi. Burada iki stil sayfası "yaz" sınıfından bir paragrafın içeriğinin yazdırılacağı rengi belirlemek içi yarışıyorlar. Her ikisinin de spesifikliği aynı, çünkü her ikisi de genel bir yaz selektörünün rengini belirtiyorlar fakat, "kahverengi_yaz.css" stil sayfası elemente en yakın CSS bildirimini oluşturduğu için yarışmayı kazanıyor ve paragrafın içeriği kahverengi renkte görüntüleniyor.

Destekleyen Platformlar : Hepsi.

İkinci örneğimiz aynı rekabete bir de kalıtım unsurunun katılması ile kazanan etkinin belirlenmesi amacı ile hazırlanmıştır. Bu senaryo, aşağıda görülen dene_kat_kal.htm programı ile denenmiştir.

Bu katlı stil etkisi incelendiğinde, birinci kurala göre, üstün çıkan değer, "inherit" veya "initial" olmadığına göre, kazanan taraf olacak ve paragraf içeriğinin rengi, kalıtıma bakılmaksızın yine kahverengi kalacaktır. Uygulama sonucu da bu öngörünün doğru çıktığını belirtmektedir.

Uygulama Sonucu : Yazının rengi, beklendiği gibi kahverengi olarak görüntülendi. Kalıtım etkisi sonucu etkilemedi.

Destekleyen Platformlar : Hepsi.

Üçüncü örnek salt bir kalıtım etkisinin incelenmesi olacaktır. Buradaki senaryo, sayfaya hiçbir stil etkisinin olmadığı durumda kalıtım mekanizmasından yararlanarak bir içerik sağlayıcı elementin içeriğinde bulunan bir elementin bir niteliği kalıtımla kazanmasıdır. Bunun için aşağıda görülen dene_kal.htm programı yazılmıştır.

Son örnek, salt bir CSS3 yeniliği olan, bir özelliğin "inherit" değerini alabilmesi ile ilgilidir. bu özellik değeri, bilindiği gibi katlı stil etkisinin sonucunu değiştirmektedir. Buradaki amacımız, CSS3 ile getirilmiş olan bu olanağın, uygulamada desteğinin belirlenmesidir. Bunun için aşağıdaki gibi yeni bir stil programı yazılmış ve inherit.htm olarak kaydedilmiştir.

Bundan sonra aşağıdaki program k dene_kat_inherit.htm olarak kaydedilerek etkisi incelenmiştir.

Bu katlı stil etkisi incelendiğinde, birinci kurala göre, üstün çıkan değer, "inherit" olduğuna göre, kazanan taraf olacak ve paragraf içeriğinin rengi, kalıtımla edinilecek değeri alacak ve kırmızı olarak görüntülenecektir.

Uygulama Sonucu: Yazının rengi, kalıtım sonucuna göre belirlendi ve kırmızı olarak görüntülendi. Salt CSS3 özellik değeri olan inherit uygulamada da destekleniyor.

Destekleyen Platformlar : Hepsi.

!important Olarak belirtilmiş kuralların katlı etki sırasını değiştirdiği bilinmektedir. Bu kuralın denenmesi için, aşağıdaki kodlar oluşturulmuştur:

Bu dosya al_yaz_important.css olarak kaydedilmiştir. dene_kat_etkisi_bildirim.htm dosyasında aşağıda görülen değişikliği yapalım ve bu yeni dosyayı dene_kat_etkisi_important.htm adı ile kaydedelim:

Bu programın çalışması sonunda, iki yazar stil sayfası olarak aynı ağırlıkta, spesifiteleri aynı olduğunda yine aynı ağırlıkta iki stil sayfasından normalde son çağrılanın üstün çıkacağı beklenirken, birincideki kuralın !important olarak belirtilmesi sonucunda, katlı etki sırasının değiştiği ve birincinin üstün çıkması gerektiği öngörülür.

Uygulama Sonucu : Gerçekten yazının rengi kırmızı olmuş ve !important kuralının çalıştığı gözlenmiştir.

Destekleyen Platformlar : Hepsi.

Bu denemede, !important kuralının çalıştığı görülmesine rağmen, uygulamada, katlı etki sırasının öngörülmesini zorlaştıran bu kuralın kullanılması sağlık verilmez.

 

index prev next

validate in W3C !