CSS3 ile gelen yeni özellikleri tararken ilginç ve güzel bir özellik ile
karşılaştım. pointer-events özelliği. SVG ile birlikte uzun süredir
kullanılan bu özellik CSS3 ile birlikte HTML elemanlarında uygulanıyor.
Farenin işlevini yerine getirip getirmeyeceğini belirlemek için
kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının
tıklanma olayını kaldırabiliriz.
pointer-event özelliği belirlenen elemanın farenin işlevine vereceği
tepkiyi belirler. Bu tepki aşağıdaki çerçevededir.
Kullanıcı arayüzü olayları (örneğin fare tıklaması)
Dinamik Sahte Sınıflar (örneğin :hover, :focus)
Hiperlinkler
pointer event özelliği aslında SVG içerikleri için uygulanan bir
özelliktir.
Yapısı :pointer-events: (değer)
Aldığı Değerler: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit Başlangıç değeri: auto Uygulanabilen elementler: Tüm Elemanlara Kalıtsallık: Var
Aldığı değerler bakalım;
auto: pointer-events özelliğine herhangi bir tanım yapılmadı ise fare
tıklamasına müdahale etmez. SVG içeriklerde, bu değer visiblePainted ile
aynı etkiyi yapar.
none: Element fare olaylarını uygulamayacaktır.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill,
stroke ve all: Sadece SVG içindir.
Bir örnek ile durumu daha iyi görelim.
Hakkımızda sayfasında olduğumuzda kullanıcının hakkımızda linkine
tıklaması mantıklı değildir, hakkımızda bağlantısının fare tıklama
olayını kaldırmak için
Tanımı istediğimiz sonucu verecektir.
CSS3 ile dinamik bileşenlerin CSS ile halledilmesi işine alıştık. Bu tip
CSS ile halledebilmemiz güzel.
CSS3 word-wrap özelliği diğer CSS3 özelliklerinden farklı olarak tüm
tarayıcılar(IE dahil) tarafından desteklenmektedir.
Yapısı :word-wrap: (değer)
Aldığı Değerler: normal | break-word Başlangıç değeri: normal Uygulanabilen elementler: Tüm Elemanlara Kalıtsallık:Var
word-wrap özelliği belirtilen alandaki metnin kapsayıcı eleman
sınırlarını zorlayan uzunlukta arada boşluk olmadan uzadığında kelimeyi
satır başına atmak için kullanılır.
Bir örnek verecek olursak 150px genişliğindeki bir alan içinde bir
metnimiz olsun.
CSS kodu
word-wrap ile bu uzun kelimeyi aşağı atarak sayfadaki patlaklığı düzeltebiliriz.
Önceki yazımda bu işi white-space ile halletmiştim, ama mantıklı olan
word-wrap ile çözmek.
Tarayıcı Desteği
1.0+ (-webkit)
5.5+
3.5+ (-moz)
Mobil Tarayıcılar
2.1+ (-webkit)
3.2+ (-webkit)
36+
text-wrap
text-wrap özelliği word-wrap’e benzer bir özelliktir.
word-wrap’in kelimeye yaptığı etkiyi text-wrap metinlere yapar.
Yapısı : text-wrap: (değer)
Aldığı Değerler: normal | none | unrestricted | suppress Başlangıç değeri: normal Uygulanabilen elementler:Tüm Elemanlara Kalıtsallık: Var
text-wrap 4 adet değer alır.
normal: Satır sadece belirlenen yerlerden sonra satır başı
yapar.
none: Satır herhangi bir yerden satırbaşı yapmaz. Metin
kapsayıcı üzerinden aşar.
unrestricted: Satır herhangi iki karakter arasından satırbaşı
yapılabilir.
suppress: Satır içinde eğer satırbaşı yapacak bir nokta yoksa
elemanı satırbaşı yaptırır
Bu özelliği henüz hiç bir tarayıcı desteklemiyor.
text-stroke
CSS3 ile birlikte text-outline olarak standartlara giren bu özellik daha
sonra standartlardan çıkarıldı, ancak webkit tabanlı tarayıcıların
-webkit-text-stroke olarak desteklemektedir.
CSS3 ile birlikte metinlerin etrafına dış çizgisi çizmemize olanak
sağlıyor. Şu an sadece webkit tabanlı tarayıcıların(Safari, Chrome)
desteği mevcut.
Yapısı :text-stroke: (değer)
Aldığı Değerler : thickness | blur | color Başlangıç değeri: none Kalıtsallık:Var
Tanım yaparken ilk olarak yazı tipinin rengini yaparız, sonrada dış hat
çizgisini tanımlarız.
text-stroke tanımının ilk değeri dış çizgisinin kalınlığını ikinci
tanım rengini belirler.
Dış Çizgili ve Saydam zeminli Yazı Tipleri Oluşturmak
Saydam zeminli yazı tipleri tanımlamak için text-fill-color özelliği kullanılır.
Tarayıcı Desteği
4.0+ (-webkit)
desteklemiyor
desteklemiyor
Mobil Tarayıcılar
2.1+ (-webkit)
4.1+ (-webkit)
36+
text-align (yeni değerler)
text-align özelliği CSS3’den öncede vardı ancak CSS3 ile bu özelliğe
iki tane daha yeni değer atandı. Burada bunları inceleyeceğiz. start
ve end değerleri. Türkçe ve İngilizce metinler solda-sağa doğru
akar., ancak bazı dillerde akış sağdan-sola doğrudur, örneğin Arapça.
Böyle sağdan-sola doğru akan dillerde için bu iki değer işe yarıyor.
start: Eğer akış soldan sağa ise left etkisi yapacaktır.
Akış sağdan-sola ise right etkisi yapacaktır.
end: Eğer akış soldan sağa ise right etkisi yapacaktır. Akış
sağdan-sola ise left etkisi yapacaktır.
text-align-last
CSS3 ile birlikte gelen bu özellik son satırın veya justify tanımlanmış
elemanların satırlarının hizalanmasını sağlar. Bu özellik text-align
ile aynı etkiyi yapar.
Yapısı :text-align-last: (değer)
Aldığı Değerler : center | end | justify | left | right | start Başlangıç değeri: start Kalıtsallık: Var
justify uygulanmış bir metnin son satırının sağa yaslı olmasını
istiyorsak
text-overflow
Blok kapsayıcı elemanı içindeki satır içi elemanın içeriğini
overflow uygulamak için kullanılır. Blok kapsayıcı elemana
overflow:visible tanımı yapılmamış olmalıdır.
Yapısı : text-overflow: <değer> Aldığı Değerler : clip | ellipsis Başlangıç değeri:clip Uygulanabilen elementler: Blok-level Elemanlara Kalıtsallık: yok
Başlangış değeri clip’dir. clip değeri alan satır içi eleman
kapsayıcı eleman sınırlarından kırpılacaktır. Diğer aldığı değer
ellipsis’dir. ellipsis değeri alan eleman clip gibi
davranacaktır ancak farklı olarak sonuna üç nokta(…) koyacaktır.
CSS3 ile birlikte üç nokta yerine kendi istediğimiz özel karkateri cümle
satır sonuna ekleyebiliyoruz.
Tarayıcı Desteği
1.0+ (-webkit)
6.0+
7.0+
Mobil Tarayıcılar
2.1+
3.2+
36+
text-rendering
text-rendering özelliği okunabilirliği ayarlamamızı sağlana bir
özelliktir. Bu özellik sayesinden tarayıcının metinlerimizi nasıl
tarayacağını belirleyebiliyoruz. Tarayıcılar metinleri hız,
okunabilirlik ve geometrik hassasiyet bakımından farklı şekilde
yorumlarlar; text-rendering özelliği bu farklılıkları bizim kontrolümüze
sunana bir özelliktir.
Yapısı :text-rendering: (değer)
Aldığı Değerler : auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit Başlangıç değeri: auto Uygulanabilen elementler: Tüm Elemanlara Kalıtsallık:Var
auto değeri metin tarama işini tarayıcıya bıraktığımız anlamına
geliyor.
optimizeSpeed değeri hızlı yüklemeyi okunabilirlik ve geometrik
hassasiyetin önünde tutar. Karkater aralığı ve bitişik farf
özelliklerinin pasifize eder.
optimizeLegibility değeri okunabilirliği hız ve geometrik
hassasiyetin önünde tutar. Karakter aralığı ve bitişik harf
özelliklerinin aktiftir.
geometricPrecision değeri geometrik hassasiyeti hız ve
okunabilirliğin önünde tutar. Geometrik hassasiyet ile yazı tipi
oranlı olarak yorumlanmasını sağlar ve buda yazı tiplerinin daha
güzel görünmesini sağlar.
Tanımlarda dikkatimiz çeken karakter aralığı olarak Y ve o arasındaki
mesafe ve ffl görünümündeki farklar kendini gösteriyor.
Tarayıcı Desteği
4.0+
desteklemiyor
3.0+
Mobil Tarayıcılar
4.0+
4.3+
36+
Chrome auto değerini optimizeSpeed olarak yorumluyor, geometricPrecision
değerini tam olarak 13. sürümden itibaren yorumluyor.
Firefox auto değerini yazı boyutu 20px ve üzerinde optimizeLegibility
gibi, diğerlerini ise optimizeSpeed gibi yorumluyor. geometricPrecision
ise optimizeLegibility gibi yorumluyor.
Safari auto değerini optimizeSpeed gibi yorumluyor.
hanging-punctuation
CSS3 metinleri yönetmek açısından bizim elimizi kuvvetlendirdiği kesin.
hanging-punctuation özelliği bize ayrıntı bir özellik kazandırıyor.
hanging-punctuation özelliği metin bloğunun dışına çıkarmamızı
sağlıyor. Liste ikonları ve çift tırnakları metin bloğu dışına çıkararak
daha güzel sonuçlar almamızı sağlıyor.
Yapısı : hanging-punctuation: <değer> Aldığı Değerler : none | start | end | end-edge Başlangıç değeri:none Kalıtsallık: Var
Yukarıdaki resimde görüldüğü gibi ilk resimde hanging-punctuation
uygulanmamış halini görürken ikinci resimde uygulanmış halini görüyoruz.
Çift tırnak ve keme işaretleri metin bloğu dışına çıkarak daha blok bir
metini ortaya koyuyor.
Bu özelliği henüz herhangi bir tarayıcı desteklememektedir.
Sonuç
CSS3 birçok yönden elimiz güçlendirmektedir. CSS3 metinler üzerinde
düzenleme yapmamıza olanak sağlıyor. Henüz tam olarak tamamlanmaya
birçok yönü var CSS3 metin özellikleri zamanla daha iyi oturacaktır.
Önceden tarayıcılar ve işletim sistemlerinin inisiyatifinde olan
özellikleri CSS3 ile birlikte kod yazarlarının eline vermeye çalışıyor.
Yazı tipi özellikleri her ne kadar CSS2.1 standartlarında olsada
tipografik birçok ihtiyacı karşılamadığı zamanla görüldü. En büyük sorun
kullanıcının bilgisayarında olmayan yazı tiplerini kullandığımızda bu
yazı tiplerini resim olarak kullanmak zorunda olmamızdı veyahut sIFR
veya cufon gibi çözümler üretilse dahi bunlar yan yol ile çözüm
üretmektir. Bu sorunu @font-face özelliği ile büyük ölçüde halleden CSS
standartları bunu dışında diğer sorunlarıda görüp CSS3 ile birlikte
çözüme kavuşturmaya çalışıyor.
Burada sizlere bu özellikleri anlatmaya çalışacağım.
@font-face
Bu konuyda daha önce derinlemesine değinmiştim. @font-face kullanımı
bağlantısından detaylı bilgi alabilirsiniz. Bu özelliği diğerlerine göre
avantajı mevcut tüm tarayıcılar tarafından desteklenmesidir.
font-size-adjust
font-size-adjusting özelliği yazı tipinin x-yüksekliği değerini orantılı
olarak ayarlamamızı sağlar. x-yüksekliği değeri; aşağıdaki görselde de
görüldüğü gibi küçük x harfinin yüksekliğini gösterir.
Bu özellik farklı platformlar için kod yazarken çok önem kazanacaktır.
Tasarımınız eğer belli sınırları var ise ve farklı işletim sistemlerinde
aynı görüntüyü elde etmek istiyorsanız yükseklik için aynı oranı
yakalamamıza yaracak güzel bir özellik.
Bir örnek verecek olursak; Verdana, Arial ve Trebuchet MS uyguladığımız
3 aynı metinin sonucu aşağıdaki gibi olacaktır.
Arial uyguladığımız 2. kolon ve Trebuchet Ms uyguladığımız 3. kolon aynı
yüksekliğe sahipken ilk kolondaki verdana uyguladığımız metin yüksekliği
daha yüksektir. Aynı yüksekiği yakalamak için
aynı yüksekliği yakalamamızı sağlayacaktır.
Bu özelliği daha iyi anlamak için http://brunildo.org sitesindeki
örnek çok güzel.
Örneği görmek için tıklayınız.
font-stretch
font-stretch özelliği CSS2 ile birlikte gelip CSS2.1 ile birlikte kalkan
özelliklerden biridir. CSS3 ile birlikte tekrar standartlara girmeye
çalışıyor. Henüz hiç bir tarayıcı desteklemiyor.
font-stretch özelliği metinlerin geniş veya dar olmasını ayarlar.
Aldığı değerler;
normal
Yazı tipinin normal boyutlara getirir
semi-condensed, condensed, extra-condensed, ultra-condensed
Metni belirlene ölçülerde daraltır. Yarı, ekstra, normal ve ultra
semi-expanded, expanded, extra-expanded, ultra-expanded
Metni belirlene ölçülerde genişletir. Yarı, ekstra, normal ve ultra
wider, narrower CSS3’de bu değerler önerilmiyor
Göreceli değerlerdir. Kapsayıcı elemana göre göreceli olarak değer
alır. wider değeri alan eleman kapsayıcısından daha geniş olurken,
narrower değeri alan eleman kapsayıcısından daha dar olur.
font-effect
Metinlere oymacılık efektlerini vermek için kullanabileceğimiz bir
özellik. CSS3 standartların eklenen bu özellik sayesinde biz kabartma,
oyma ve dış hat çizgisi uygulayabiliriz. Kullanma için pek mantıklı
gelmedi bana ama zaman vermek gerekiyor biraz.
font-smooth
Yazı tipi uygulamalarında yumuşatma işlemi çok önemlidir. Ancak bu
sistemi işletim sistemleri ele aldığı için biz kod yazarları için işin
bu tarafı için ancak bir iki çakma yöntem uygulamak kalıyordu. Bu
özellik şimdilik pek etkili olmasada ilerisi için bir ümit benim için.
Her bilgisayar Mac olsa yada PC’ler daha iyi yazı tipi tarasa
font-face’in en büyük eksikliği ortadan kalkacaktır.
Gelecekle ümitle bakmak için bu özelliği daha etkin olması lazım.
font-emphasize
Asya kökenli yazı tipleri için kullanılabilecek bir özellik. Zamanla
daha detaylı inceleriz. Lazım oldukça incelemek gereken bir özellik.
Sonuç
Tipografi çok detaylı bir mecra zamanla daha güzel sonuçlar alacağımızı
düşünsemde şimdilik çok başarılı olduğunu söyleyemem. CSS3 ile Yazı tipi
özellikleri arasında en önemlisi font-face özelliği bence, hala belli
sorunları olsada tüm tarayıcıların destekliyor olması çok büyük bir
katkıdır.