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.

<ul class="menu">
	<li><a href="index.html">Ana Sayfa</a></li>
	<li><a href="hakkimizda.html" class=on>Hakkımızda</a></li>
	<li><a href="urunler.html">Ürünler</a></li>
</ul>

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

.menu a.on {
	pointer-events: none;
	cursor: default;
}

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.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ (-webkit) 11+ 3.6+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ (-webkit) 3.2+ (-webkit) 36+

Kaynaklar

  • word-wrap özelliği
  • text-wrap
  • text-stroke
  • text-align (yeni değerler)
  • text-align-last
  • text-overflow
  • text-rendering
  • hanging-punctuation

word-wrap özelliği

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.

<div id="link">
	Loremipsumdolorsitametconsecteturadipiscingelit.
	Nam semper venenatis lobortis.
	Donec odio nisl, vehicula vitae molestie ac,
	euismod ac nibh.
</div>

CSS kodu

#link{
	width:150px;
	border:1px solid #999;
}

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

Chrome explorer Firefox
1.0+ (-webkit) 5.5+ 3.5+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
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.

font:bold 24px Arial, Helvetica, sans-serif;
color: #c00;
-webkit-text-stroke: 1px #000;

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.

font:bold 24px Arial, Helvetica, sans-serif;
color: #c00;
-webkit-text-stroke: 1px #000;
-webkit-text-fill-color: transparent;

Tarayıcı Desteği

Chrome explorer Firefox
4.0+ (-webkit) desteklemiyor desteklemiyor

Mobil Tarayıcılar

Android Mobil Safari Chrome
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

p {
	text-align: justify;
	-ms-text-align-last: right;
}

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

resim kaynağı: https://developer.mozilla.org/en-us/docs/Web/CSS/text-overflow

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.

p {
	text-overflow: 'herhangibirsey';
}

Tarayıcı Desteği

Chrome explorer Firefox
1.0+ (-webkit) 6.0+ 7.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
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.

resim kaynağı: https://developer.mozilla.org/en-us/docs/Web/CSS/text-rendering

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

Chrome explorer Firefox
4.0+ desteklemiyor 3.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
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.

Kalın sağlıcakla.

Kaynaklar

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

.kolon1{
	font:12px/18px Verdana, Geneva, sans-serif;
	font-size-adjust:0.47;
}

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.

İleride her şey daha güzel olacak.

Kalın sağlıcakla

Kaynaklar