Kısa çizginin(-) tanımına internette baktığımızda kullanım alanlarının başında ilk sırada

“Satır sonunda, yer kalmadığı için yarım kalan kelimelerin bölünmüş olduğunu, yani devamının altta olduğunu göstermek için satır sonunda kullanılır. Bu görevde kullanılınca birleştirme çizgisi denir.”

Bilgisi yer alır. Bu işi web mecrasında yapmak için CSS3 ile gelen hyphens(kısa çizgi) özelliği kullanılır. Şimdi bu makalede bu özelliği inceleyeceğiz.

CSS kısa çizgi özelliği bir satıra sığmayan kelimenin nasıl bölüneceğini belirler. Bu bölme işini HTML’de tanımlana lang özniteliğinde belirtilen dile göre yapar.

Yapısı: hyphens: <deger>
Aldığı Değerler: none | manual | auto
Başlangıç Değeri: manual
Uygulanabilen Elementler: Tüm elementler
Kalıtsallık: var

Değerlerini inceleyelim.

  • none: Satır sonuna sığmayan kelime tire ile ayrılmaz. Sadece boşluk olan bölümlerden satır başı yaptırılır.
  • manual: Kelimeler satıra sığmadığında sadece kelime içinde tire geçiyorsa ise tireli olan kısımdan kesilir. &shy; karakterini tire konacak yere koymamız gerekiyor. Normalde gözükmüyor ama kelime kesildiğinde tire gözüküyor.
  • auto: Kelimeler satıra sığmadığında tarayıcı tarafından otomatik olarak HTML’de belirtilen dile göre bölünür.

Bir örnek yapalım.

kesik çizgi

Firefox’da denedim çalışıyor. Gayetde güzel çalışıyor. Unutulmaması gereken şey dil tanımının yapılması. Chrome’da auto çalışmıyor.

Tarayıcı Desteği

Chrome explorer Firefox
29+ (-webkit; auto hariç) 10+ (-ms) 6+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor 4.2 (-webkit) desteklemiyor

Kaynaklar

Sublime Text'te dosya tipine göre hızlı erişim

Son haftalarda Visual Studio Code ile kod yazıyorum. Güzel yanları var ama Sublime Text'in hızını bulamadım. Henüz Sublime'a geri dönmüş ...… Devamını oku

Responsive design patterns principles

13 January 2017 tarihinde yayınlandı.

jQuery DOM manipülasyonu metotlarında callback kullanmak

12 January 2017 tarihinde yayınlandı.