zingat.com‘un satılık ve kiralık arama sonuç sayfalarını kodlarken her bir kutunun belirli yüksekliği olduğu için gelen başlığın harita açıldığında altında kalan metinlerin üzerine binmesi sorununu haletmek için Murat‘la bu metni 2 satır ile sınırlandırmalıyız dedik. En güzel çözüm CSS ile webkit-line-clamp yardımı ile bunu yapmaktı. Acaba bu özelliğin desteği ne kadar diye biraz bakınca %92’ye yakın destek bizi bu kodu kullanmaya itti.

Daha önce uzun metinleri tek satırda sabitlemek için aşağıdaki yöntemi kullanıyordum.

Bu iş için bir mixin yazmak güzel oluyor.

.ucnokta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

yazıp, sonra kullanmak istediğimiz yere

.baslik {
  .ucnokta;
}

yazarak işi basitleştirmiş oluyoruz.

Peki bu işi iki veya daha fazla satır için yapan bir CSS kodu yok mu? Var aşağıda :)

Kod çok basit.

-webkit-line-clamp: 3 tanımı ile kaç satırın görünmesi bu satır ile tanımlıyoruz. Yukarıdaki gibi bu tanımı bir mixin yapıp istediğimiz yerde kullanabiliriz.

Mobilde ve dar alanlarda güzel iş görüyor.

// Clamps a block of text to a certain number of lines,
// followed by an ellipsis in Webkit and Blink based browsers
// Reference: http://dropshado.ws/post/1015351370/webkit-line-clamp
@mixin text-clamp($lines: 2, $line-height: false) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;

    // Fallback for non-Webkit browsers
    // (won't show `…` at the end of the block)
    @if $line-height {
        max-height: $line-height * $lines * 1px;
    }
}

Can I Use css-line-clamp? Data on support for the css-line-clamp feature across the major browsers from caniuse.com.

Kaynaklar

Şimdiye kadar okuduğum en iyi uyumlu(responsive) web kaynağı. İlk önce pdf’ini okudum, sonra baktım güzel kitap basılısını sipariş ettim. 1 hafta sonra geldi. Okumam uzun sürdü :) Her bölümü 2 kere okuyup ilerlediğim için okuma sürem uzadı. Tabi İngilizce okuma becerimin kısıtlı olmasının da bunda etkisi var.

Kitapta her bölümü işinde uzman kişilerin yazması ayrı bir güzel. Gerçek hayatta uygulanıp sonuç alınan konular hakkında tatmin edici bilgi veriyor. Hele optimizasyon bölümü harika.

1. Bölüm Tasarım İş akışı - DAN MALL

Bu bölümü ilk okumaya başladığımda “tasarımcıları ilgilendiren bir bölüm okumasam mı” demiştim. Okuduktan sonra iyi ki okumuş dedirtti. Dan MALL gibi tasarımcıları bulmak lazım. Bir tasarımcı sitenin hızını ve optimizasyonunu düşünüyorsa o adama saygı duymalı.

Süreçlerin anlatıldığı bu bölümde beni daha çok etkileyen kısım, uyumlu web için farklı yöntemlerin denenmesi ve bu denemelerin sonuçlarının sunulduğu kısım oldu. Atomik tasarım, tarayıcı üzerinde tasarım yapma vd.

2. Bölüm Uyumlu tasarım modelleri ve bileşenleri - VITALY FRIEDMAN

Uyumlu web’de en çok tercih edilen yöntemlerden birisi de sayfa bazlı değil sayfayı oluşturan bileşenleri tasarlamak. Bu yöntemde genel olarak kullanılan model ve bileşenlerin listesi sunulmuş. Daha sonra bu bileşenlerin önemlileri örnek verilerek gösterilmiş. Aslında çokta genel olmayan örnekler de var. Örneğin müzik notalarının mobilde gösterimi gibi.

3. Uyumlu web’de içerik koreografisi - EILEEN WEBB

İçerik yönetimini anlatıldığı bu bölüm beni çok sarmadı :(

4. Uyumul web için SVG - SARA SOUEIDAN

SVG hakkında tüm bilgileri bulabileceğiniz güzel bir makale. Tabi bir bölümde bunu sunmak zor. Genel itibari ile bilgi sahibi oluyorsunuz. Sara Soueidan bu konuda en bilgili kişilerden birisi. Makale içinde SVG hakkında detay olacak bilgilerin olmasıda güzel.

5. Flexbox ile uyumlu web için gelişmiş modüller yapmak - ZOE. M GILLENWATER

Flexbox teorisini ve uygulamasını sunan güzel bir makale. Ben blogda teorisin anlattım. Burada görünce uygulamalardaki örnekleri anlatsam daha güzel anlaşılır hissi doğdu. Zamanım olursa flexbox ile alakalı örnek uygulamaları yazacağım.

Örnek uygulamalar güzel;

  • Esnek genişlikte ve eşit yükseklikte sayfa planları
  • Uyumlu web menü örneği
  • Galeri örneği
  • Blog kart örneği
  • Sıralam örneği

6. Web yazı tipleri performansı - BRAM STEIN

Özel yazı tiplerinin performansa olan etkileri ve çözüm önerilerini anlatıldığı güzel bir bölüm. Farklı yazı tipi uzantıları, font-rendering özelliği, CSS Font Load API ve temel optimizasyon yöntemlerinin anlatıldığı güzel bir makale.

7. Uyumlu web’de resimler - YOAV WEISS

Uyumlu web’in önemli konularından birisi resimler. Mevcut durumda kullanılan yöntemler ve optimizasyon metotları ele alınmış.

8. Uyumlu web test ve hata ayıklama - TOM MASLEN

Uyumlu web sayfaların testi hakkında güzel öneriler var. Ayrıca otomatik testlerde işin dibine vurmuş adamlar. Bu kadarınada pes dedirten test araçları var. Görsel otomatik test araçları ilginç.

Bu konu içinde kod düzeni hakkında önerilerde mevcut.

9. Uyumlu mailing tasarımları - FABIO CARNEIRO

Burada anlatılan metotlar gmail desteği öncesi yöntemler. Tam bu bölümü okurken içimden ah be gmail’de desteklese süper olurmuş dediğimde gmail’in media query desteğini vermeye başlayacağını açıklaması süper oldu.

Mailing sancılı bir alan ama hazır şablonlar can kurtarıyor.

10. Çevirimdışı web sayfaları - JOHN ALLSOPP ve MATT GAUNT

Benim için en fazla bilgilendirici konu bu oldu. Bu konuda hiç geliştirmem olmadı ve konuyu okuyunca bayağı aydınlandım.

HTML5’in yeni API’leri hakkında geniş bilgi de bulunan güzel bir konu.

mobil uygulamalara bir adım daha yaklaştıran bir alan.

Sonuç

Onbirinci bölümde var ama beni pek sarmadı, asıl benim pdf okurken beğendiğim Performans optimizasyon yol haritası kısmının basılı kitapta olmaması kitabın tek eksiği bence.

Sonuç olarak her arayüz geliştiricinin muhakkak okuması gereken bir kitap. Başucu kitabı.

Kalın sağlıcakla.

Kaynak

Artık her projemizde @font-face kullanıyoruz. Kullanırken bazı sorunlar yaşıyoruz ve bu sorunlara çözümler üretiyoruz. Bu makalenin konusu da bu sorunlardan birini çözüyor.

Hemen meseleye girelim. Bir @font-face tanımı yapalım. Ben burada daha kısa olsun diye woff2 yapıyorum ama siz Woff2 ve font-face tanımını iki satıra indirmek yazımdaki ilk kodu kullanın.

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
}

Sonra bunu kullanalım.

body {
  font-family: Lato;
}

HTML kodu

<ul>
  <li><strong>İnebahtı Deniz Savaşı ve Donanmamızın Yakılması</strong> (<em>1571</em>)</li>
  <li>Rusya'da Komünist İhtilali (<em>1917</em>)</li>
  <li>Amerikan ve İngiliz Kuvvetlerinin Afganistan'a Girmesi (2001)</li>
</ul>

Metin ve stil olarak koda bakarsak, normal metin, kalın hali ve eğik hali kullanılmış. Fakat bir sorun var. Yazı tipinin kalın ve eğik halleri pek bizim istediğimiz gibi değil. Çünkü biz yazı tipinin normal halini yükledik, kalın ve eğik kullanımı tarayıcı uydurmaya çalıştı. Tarayıcının yapacağıda bu kadar.

Bu sorunu görünce ilk olarak aklımıza “her bir yazı tipi hali için bir font-face tanımı yapalım ve onları tanımlayalım” düşüncesi gelir.

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LatoBold';
  src: url('lato-bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LatoItalic';
  src: url('lato-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Sonra bu yazı tiplerini kullanırken, CSS’de

body { 
  font-family: Lato, Georgia, serif; 
}

h1 {
  font-family: LatoBold, Georgia, serif;
  font-weight:normal;
}
em {
  font-family: LatoItalic, Georgia, serif;
  font-weight:normal;
  font-style:normal;
}

Her bir tanım için font-family tanımı yapıyoruz. Peki bunun daha kolay çözümü var mı?

Çözüm: Çözüm için @font-face tanımındaki font-weight ve font-style özelliklerinden yaralanarak tek yazı tipine bu farklı stilleri bağlayabiliriz.

@font-face {
  font-family: 'Lato';
  src: url('lato.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('lato-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('lato-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

yukarıdaki koda dikkat edersek, font-family tanımları aynı, font-weight ve font-style alanları farklıdır. CSS’de kullanırken;

body { 
  font-family: Lato, Georgia, serif; 
}

h1 {
  font-weight: bold;
}
em {
  font-style: italic;
}

Sonuç olarak güzel bir çözüm ve daha basit bir yazım sağlıyor bize.

Ben bu makaleyi yaklaşık 2 sene önce yazacaktım, ancak Himmet Samet Çaktı abi ben blog açacam bunu ben yazayım dedi. Bizde gençtir gönlü kırılmasın diye tamam dedik. 2 sene geçti, Samet hala blog açacak :)

Kalın sağlıcakla.

Kaynaklar

  • http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles
  • http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
  • https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

Uzun süredir İnternet Explorer için düzeltme yazmamıştım. Ne güzel dünya. Gerçi bu bir düzeltme midir bilemedim.

Uzatmadan hemen sorunu ve çözümü yazayım.

Sorun: İnternet Explorer 10 ve üzeri sürümlerinde metin girdi alanlarında (input text) alanlarına kullanıcı bir şeyler yazınca otomatik olarak input’un sağında silmek için bir X butonu çıkarıyor. Tabi tasarımcı arkada bu alana bir ikon koyunca üst üste biniyor.

enter image description here

Çözüm: Google’da bir arama yap ve stackoverflow’da gelen sonuç senin çözümündür :)

input::-ms-clear {
  display: none;
}

Birde şifre girdi alanlarında (input - password) şifreyi göster ikonu çıkıyor onu engellemek içinde

input::-ms-reveal {
  display: none;
}

kodu yeterliymiş.

Kalın sağlıcakla.

Kaynak

Yaklaşık 6 sene önce bu başlığa yakın bir başlık ile bir makale yazmışım. Yatay ve Dikeyde Ortalı Alanlar Oluşturmak yeni gelen özellikler ile bu kodu daha basit nasıl yapabilirim diye bakınırken flexbox özelliği aklıma geldi.

Peki flexbox ile bu işi nasıl yaparım.

HTML kodu aynı olsun;

<div class="orta-alan">
  <p>Fatih Hayrioğlu'nun not defteri</p>
</div>

Bazı ufak değişiklikler var. Eskiden id ve camelCase iken şimdi class ve kebap-case‘e geçtim.

CSS kodunun başında değişen bir şey yok.

html, body {
  height: 100%;
}

body{
  margin:0;
  padding:0;
  background-color:#D2D2D2;
  font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#333333;
}

Değişen kısım.

.orta-alan {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

align-items: center; dikeyde ortalamak için, justify-content: center; yatayda ortalamak için yeterli. Tabi bu elemanın flex olduğunu göstermek için display: flex; tanımını başta yapmalıyız.

Genişlik ve yükseklik burada tam sayfa kullandığımız için 100% verildi. Tabi siz istediğiniz genişlik ve yükseklik tanımını yaparak çalışabilirsiniz.

Kalın sağlıcakla.