Bütünleşik Biçembentler, 2. Aşama | ||
---|---|---|
Önceki | Yukarı | Sonraki |
Bu öğreticide, basit bir biçembendi kolayca nasıl tasarlayabileceğinizi göstereceğiz. Bu öğretici için, azcık İngilizce, biraz HTML [HTML40] az buçuk da yayıncılık terminolojisi bilmeniz yetecek.
Küçük bir HTML belge ile başlayalım:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Dede Efendi'nin Sayfası</title> </head> <body> <h1>Dede Efendi'nin Sayfası</h1> <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle oldukça üretken bir besteciydi.</p> </body> </html>
<h1>
elemanının içerdiği metnin rengini mavi yapmak için şu BB kuralını yazabilirsiniz:
h1 { color: blue }
Bir BB kuralı iki ana parçadan oluşur: seçici ('h1') ve bildirim ('color: blue'). Bildirim de kendi içinde iki parçadan oluşur: nitelik (color) ve değeri (blue
). Yukarıdaki örnekte bir HTML belgeyi oluşturmak için niteliklerden biri yeterliymiş gibi görünüyorsa da, gerçekte o, bir biçembent olarak sadece kendini nitelemektedir; ancak, diğer biçembentlerle birlikte sonuç için belirleyici olacaktır (BB'nin temel özelliklerinden biri biçembentlerin birleştirilerek uygulanmasıdır).
HTML 4.0 belirtimi biçembent kurallarının HTML belgelerde nasıl belirtilebileceğini tanımlamıştır: ya HTML belgenin içinde ya da harici bir biçembent üzerinden. Bir biçembendi belgeye yerleştirmek için <style>
elemanı kullanılır:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Dede Efendi'nin Sayfası</title> <STYLE type="text/css"> h1 { color: blue } </STYLE> </head> <body> <h1>Dede Efendi'nin Sayfası</h1> <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle oldukça üretken bir besteciydi.</p> </body> </html>
Olası en fazla esneklik için belge yazarlarına harici biçembentler kullanmalarını öneriyoruz; HTML belgenin kaynak koduyla oynamaksızın üzerlerinde değişiklik yapılabilir ve birden fazla HTML belge için aynı biçembent kullanılabilir. Bir harici biçembendi HTML belge ile ilintilemek için <link>
elemanı kullanılabilir:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Dede Efendi'nin Sayfası</title> <LINK rel="stylesheet" href="bach.css" type="text/css"> </head> <body> <h1>Dede Efendi'nin Sayfası</h1> <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle oldukça üretken bir besteciydi.</p> </body> </html>
<link>
elemanı şunları belirtir:
ilintileme türü: "stylesheet" (bir biçembent)
'href' özniteliği üzerinden biçembendin bulunacağı yer.
biçembendin ilintilediği tür: "text/css".
Bir biçembentle imlenim arasındaki yakın ilişkiyi gösterebilmek amacıyla, bu öğreticide <style>
etiketini kullanmaya devam edeceğiz. Biraz daha renk ilave edelim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Dede Efendi'nin Sayfası</title> <style type="text/css"> body { color: red } h1 { color: blue } </style> </head> <body> <h1>Dede Efendi'nin Sayfası</h1> <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle oldukça üretken bir besteciydi.</p> </body> </html>
Biçembent şimdi iki kural içeriyor: ilkinde <body>
elemanının metin rengi kırmızı yapılırken ikincisinde <h1>
elemanının içerdiği metnin rengi mavi yapılmaktadır. <p>
elemanı için bir renk değeri belirtilmediğinden rengi ebeveyninden yani <body>
elemanından miras almaktadır. <h1>
elemanı da <body>
elemanının çocuğu olduğu halde, ikinci kuralla miras aldığı değer geçersiz kılınmaktadır. BB'de farklı değerlerin birbiriyle çeliştiği durumlara rastlandığı olur ve bu belirtim bu gibi durumların nasıl çözümleneceğini de açıklar.
BB2, color
niteliği dahil, 100'den fazla nitelik içerir. Biraz da başka niteliklere de bakalım:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Dede Efendi'nin Sayfası</title> <style type="text/css"> body { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </style> </head> <body> <h1>Dede Efendi'nin Sayfası</h1> <p>Hamamizade İsmail Dede Efendi 500'den fazla bestesiyle oldukça üretken bir besteciydi.</p> </body> </html>
Burada dikkat çeken ilk şey çok sayıda bildirimin kaşlı ayraçlar içine alınarak ({...}
) gruplanmış oluşudur; ayrıca her kural diğerinden sonuna bir noktalı virgül eklenerek ayrılmıştır. Grubun son kuralının sonunda noktalı virgül bulunması zorunlu değildir.
<body>
elemanının ilk bildiriminde yazıtipi ailesi "Gill Sans" olarak ayarlanmaktadır. Eğer bu yazıtipi mevcut değilse, tarayıcı, bütün tarayıcıların bildiği beş soysal yazıtipi ailesinden biri olan sans-serif
yazıtipi ailesini kullanacaktır. <body>
elemanının çocukları font-family
niteliğinin değerini miras alacaklardır.
İkinci bildirimde <body>
elemanının yazıtipi yüksekliği 12 punto yapılmaktadır. "Punto" birimi genellikle matbaacılıkta uzunluk birimi olarak değil de yazıtipi yüksekliği belirtmek için kullanılır. Bu örnek, ortama göre ölçeklenmiş bir değer değil, mutlak ölçü belirtilen bir örnektir.
Üçüncü bildirimde çevredeki şeylerle ölçeklenen bir göreli birim kullanılmıştır. "em" birimi elemanın yazıtipi genişliğine atıf yapan bir birim olup, küçük "m" harfinin genişliğine eşit bir uzunluk belirtir. Bu durumda <body>
elemanını kuşatan kenar girintileri bu elemanda geçerli yazıtipinin küçük "m" harfinin genişliğinin üç katı uzunlukta olacaktır.
BB2 herhangi bir imlenim diliyle kullanılabilir, genişletilebilir imlenim dili [XML10] bunlardan biridir. Aslında XML, biçembentlere HTML'den çok daha fazla bağımlıdır. Çünkü tarayıcılar, XML yazarlarının kullandıkları elemanları nasıl yorumlayacaklarını bilemezler.
Basit bir XML belge:
<article> <headline>Kestirme nitelikler</headline> <translator>N. B. Bugüner</translator> <para> Belge yazarlarının çeşitli niteliklerin değerlerini bir tek nitelikte belirtebilmelerine imkan veren niteliklere <term>kestirme nitelikler</term> adı verilir. </para> </article>
Bu belgeciği bir belgeye yaraşır şekilde göstermek için önce hangi elemanların satıriçi (satır sonlandırmayan), hangilerinin bloklama (satır sonlandıran) elemanları olduklarını belirtmeliyiz.
term { display: inline } article, headline, translator, para { display: block } article { background: #eee }
İlk kural <term>
elemanının satıriçi eleman olduğunu, ikincisi ise virgüllerle ayrılmış olarak diğer elemanların bloklama elemanı olduğunu belirtmektedir.
Bir XML belgeyi bir biçembentle ilintilendirmenin tek yolu bir işlem yönergesi kullanmaktır:
<?xml-stylesheet type="text/css" href="bach.css"?> <article> <headline>Kestirme nitelikler</headline> <translator>N. B. Bugüner</translator> <para> Belge yazarlarının çeşitli niteliklerin değerlerini bir tek nitelikte belirtebilmelerine imkan veren niteliklere <term>kestirme nitelikler</term> adı verilir. </para> </article>
Bir görsel tarayıcı bu örneği şöyle biçimleyecektir:
"kestirme nitelikler", satıriçi bir eleman olan <term>
'in içeriği olduğundan paragrafın içinde kalacaktır.
Hala metin istediğimiz gibi biçimlenmiş değil. Örneğin, <headline>
yazıtipini metnin kalanından daha büyük yapmamız ve çevirmenin ismini eğik yazıyla göstermemiz lazım:
term { display: inline } article, headline, translator, para { display: block } article { background: #eee } headline { font-size: 130% } translator:before { content: "\c7 eviren: " } translator { font-style: italic } article, headline, translator, para { margin: 0.5em }
Bir görsel tarayıcı bu örneği şöyle biçimleyecektir:
Biçembente başka kurallar da ekleyerek belgenin görünümünü iyileştirebilirsiniz.
Bu bölümde bir tarayıcının BB'yi nasıl desteklediği ile ilgili olası bir model sunulacaktır. Tamamen kavramsal bir model olup, asıl gerçeklenim biraz farklı olabilir.
Bu modelde, bir tarayıcı bir belge kaynağını işlerken şu aşamaları izler:
Kaynak belgeyi çözümler ve bir belge ağacı oluşturur.
Hedef ortam türünü belirler..
Hedef ortam türü için belirtilmiş bütün biçembentleri toplar.
Hedef ortam türünde uygulanabilen her nitelik için tek bir değer atayarak belge ağacının her elemanını imler. Nitelikler Nitelik Değerlerinin Atanması, Bütünleşme ve Kalıtım bölümünde açıklanan mekanizmalarla ilgili olarak atanmış değerlerdir.
Değerin hesaplanan parçası hedef ortam türüne uygun biçimleme algoritmasına bağımlıdır. Örneğin, hedef ortam ekran ise, tarayıcılar görsel biçimleme modelini uygulayacaklardır. Eğer hedef ortam türü bir yazıcı sayfası ise, tarayıcı sayfalama modelini uygulayacaktır. Eğer hedef ortam örneğin bir konuşma bireştirici ise tarayıcı işitsel biçimleme modelini uygulayacaktır.
İmlenmiş bir belgeden bir biçimleme yapısı üretilir. Biçimleme yapısı belge ağacına çok benzemekle birlikte oldukça da farklıdır; bilhassa yazarlar sözde elemanları ve üretilen içeriği kullanmaya kalktıklarında bu ortaya çıkar. Öncelikle, biçimleme yapısının genelinde belge ağacı "şeklinde" olması gerekmektedir; ancak, eninde sonunda yapının doğası gerçeklenime bağlıdır. İkinci olarak, biçimleme yapısı belge ağacındaki bilgiden daha azını veya daha çoğunu taşıyabilir. Örneğin, belge ağacındaki bir elemanın display
niteliği none değerine sahip olsun; bu eleman biçimleme yapısında hiçbir şey üretmeyecektir. Diğer taraftan bir liste elemanı biçimleme yapısında belge ağacındakinden daha fazla bilgi üretebilir: liste elemanlarının içerikleri ve liste biçem bilgisi (madde imlerinin resimleri gibi).
BB destekli tarayıcıların bu aşamada belge ağacını değiştirmediğine dikkat ediniz. Özellikle, içerik üretimi biçembentlerden dolayı belge dili işlemcisine bir geri besleme sağlamaz (yeniden çözümleme gibi).
Biçimleme yapısı hedef ortama aktarılır (yani, yazıcı sayfayı basar, ekranda belge görüntülenir, konuşma bireştirici belgeyi seslendirir).
1. adım bu belirtimin kapsamı dışında kalır (örn, [DOM]'a bakabilirsiniz).
2.den 5.ye kadar olan adımlar bu belirtimin kapsamındadır.
6. adım da bu belirtimin kapsamı dışında kalır.
Bütün ortamlar için, tuval denilince, biçimleme yapısının gerçeklendiği uzayı anlayacağız. Tuval uzayda her boyutta sonsuz genişliktedir, fakat gerçekleme genelde hedef ortamla ilişkili tarayıcı tarafından kurgulanan tuvalin belli bir bölümünde yer alır. Örneğin, ekranı tuval olarak kullanan tarayıcılar için bir en küçük genişlik sözkonusudur ve duyusal bölgenin boyutlarına dayalı bir başlangıç genişliği seçilir. Bir sayfayı tuval olarak kullanan tarayıcılar için genelde yükseklik ve genişlik kısıtlanır. İşitsel tarayıcılar ise ses uzayı ile sınırlıdırlar, fakat zaman boyutunda sınırlı değillerdir.
BB2 seçicileri ve nitelikleri biçembentlerin bir belgenin veya tarayıcının şu parçalarına başvurulmasını mümkün kılar:
Belge ağacındaki elemanlar ve bunlar arasındaki belli ilişkiler (Seçiciler bölümüne bakınız).
Belge ağacındaki elemanların öznitelikleri ve bu özniteliklerin değerleri (Öznitelik seçiciler bölümüne bakınız).
Eleman içeriğini bazı parçaları (:first-line
ve :first-letter
sözde elemanlarının açıklamalarına bakınız).
Belli bir durumda olduklarında belge ağacındaki elemanlar (Sözde elemanlar ve sözde sınıflar bölümüne bakınız).
Belge gerçekleneceği zaman tuvalin bazı özellikleri.
Bazı sistem bilgiler (Kullanıcı Arayüzü bölümüne bakınız).
BB2, ondan da önce BB1, belli tasarım ilkelerine dayandırılmışlardır:
İleriye ve geriye yönelik uyumluluk. BB2 kullanıcı uygulamaları BB1 biçembentlerini anlayabilecektir. BB1 kullanıcı uygulamaları BB2 biçembentlerini okuyabilecek ve anlamadığı parçaları yoksayacaktır. Ayrıca, BB desteği olmayan tarayıcılar da biçemce zengin elemanları gösterebilecektir. Şüphesiz BB ile gerçeklenmeyecek biçemsel zenginleştirmeler yapmak mümkündür, fakat tüm içerik sunulacaktır.
Yapısal belgeler için bütünleyicilik. Biçembentler imlenimin içerdiği metne biçemsel bilgi katarak yapısal belgeleri (HTML, XML gibi), tamamlayan öğelerdir. İmlenime dokunmadan veya çok küçük bir değişiklikle biçembentte değişiklik yapmak kolay olmalıdır.
Üretici, platform ve aygıtlara bağımlı olmamak. Biçembentler, belgelerin üretici, platform ve aygıtlara bağımlılığını ortadan kaldırır. Biçembentlerin kendileri zaten üretici ve platform bağımlısı değillerdir, fakat BB2 bir aygıtı (yazıcı gibi) hedef alan biçembenti seçmenize imkan verecektir.
Sürdürülebilirlik. Belgelerden biçembentlere erişimi mümkün kılarak, site yöneticileri sitenin sürdürlebilirliğini kolaylaştırdıkları gibi sitenin tamamı için görsel ve anlamsal bütünlüğü sağlayabilirler. Örneğin, zemin renginde bir değişiklik olacaksa, sadece tek bir dosyanın değiştirilmesi yetecektir.
Basitlik. BB2, BB1'den daha karmaşık olmasına rağmen, insanlar tarafından kolayca okunup yazılabilmesi nedeniyle daha basit kalır. BB nitelikleri, olası en iyi genişlemeyi sağlamak adına birbirlerinden bağımsızdırlar ve genellikle belli bir etkiyi sağlamanın tek bir yolu vardır.
Ağ başarımı. BB içerik sunumu için yoğun bir kodlama sağlar. Belli etkileri oluşturmak için yazarlar tarafından sıklakla kullanılan resim ve ses dosyalarına karşın biçembentler çoğunlukla içeriğin boyutlarını azaltırlar. Ayrıca daha az ağ bağlantısı açılmasını ve ağın başarımının artmasını sağlarlar.
Esneklik. BB içeriğe çeşitli yöntemlerle uygulanabilir. Anahtar özellik, belge gövdesini oluşturan elemanların özniteliklerinde, belge başlığında, ilintili biçembentlerde, kullanıcı biçembentlerinde ve öntanımlı (tarayıcınının kendi biçembendi) biçembentlerde bulunan biçem bilgilerinin bileşkesini oluşturma yeteneğidir.
Zenginlik. Belge yazarlarının sağladığı zengin görsel ve duyumsal etkileşim bir ifade ortamı olarak Genel Ağ'a bir zenginlik katar. Tasarımcılar genellikle masaüstü yayıncılıkta ve diya gösterilerinde rastlanan işlevselliği arzular. Bazı etkilerin oluşturulma isteği aygıt bağımlılığı ile engellenir, fakat BB2'nin tasarımcıların isteklerini karşılamak için gidecek daha çok yolu vardır.
Başka dillerle bağlantı kurabilme. Bu belirtimde açıklanan BB nitelikleri görsel ve işitsel sunumlar için kararlı bir biçimleme modeli oluşturur. Bu biçimleme modeline BB dili üzerinden ulaşılabilir, fakat diğer dillere de bağlantılar mümkündür. Örneğin, bir JavaScript kodu belli bir elemanın rengini (color
niteliğini) özdevimli olarak değiştirebilir.
Erişilebilirlik. Çeşitli BB özellikleri Genel Ağ'ı engelli kullanıcılara daha erişilebilir kılacaktır:
Yazıtipi görünümünü denetleyen nitelikler bit eşlemli metin resimlerinin sebep olduğu erişimsizliği ortadan kaldırmayı mümkün kılacaktır.
Konumlama nitelikleri imlenimde kurnazlıkla sağlanan (görünmeyen resimler gibi) yerleşim sorunlarını ortadan kaldıracaktır.
Belli sunum gereksinimleri olan kullanıcılar !important
kuralları sayesinde yazarın biçembentlerini geçersiz kılabilecektir.
Yeni inherit
değeri, bütün öznitelikler için bileşik genellemeyi arttıracak ve biçem ayarlamalarının daha kolay ve tutarlı olmasını sağlayacaktır.
Arttırılmış ortam desteği, ortam gruplarının ve üçnokta, kabartma ve tty ortam türlerinin dahil edilmesi kullanıcılara ve yazarlara belgeleri bu aygıtlara uyarlama imkanı sağlayacaktır.
İşitsel nitelikler sesli çıktı üzerinde daha fazla denetim verecektir.
Öznitelik seçiciler, attr() işlevi ve content
niteliği başka içeriklere de erişmeyi mümkün kılacaktır.
Sayaçlar, bölüm ve paragraf numaralama belgede gezinebilirliği arttırabilir ve girintileme boşluklarından (körcül aygıtlar için önemlidir) kurtulmayı sağlayabilir. word-spacing
ve text-indent
nitelikleri de belgede fazladan boşluk ihtiyacını ortadan kaldırabilir.
Önceki | Yukarı | Sonraki |
BB2 Belirtimi Hakkında | Bir Linux Kitaplığı Sayfası | Uyumluluk: gereksinimler ve öneriler |