Konu kısa hemen anlatıp bitireyim. zingat.com’da CSS önişlemcisi LESS. Boostrap’den dolayı LESS tercih edilmiş. Neyse soruna gelelim. Bir css fonksiyonunu (mixin) yazmaya karar verdim. Bir hareketli yükleniyor ikonu yapayım dedim. Herşey güzel gidiyordu ta ki değerini 24px değilde 24 olarak göndereyim dediğimde sorun ortaya çıktı.

.loading(24, @color-secondary, @color-primary)

Sonra bu değeri alıp css fonksiyonununda kullandığımda,

&:before,
&:after {
  font-size: @size + 'px';
  box-sizing: border-box;
  content: '';
  position: fixed;
  border-radius: 50%;
  border: solid .6em;
  animation: rotation 1s linear infinite;
}

ilk aklıma gelen yazım font-size: @size + 'px' şekli oldu. Yok olmadı. sonra font-size: @size+px oda olmadı. Bide font-size: @size+0px denedim olmadı.

Sonra dedim niye bunu ağaya sormuyorum. stackoverflow’da aradığım ikinci sonuç beni çözüme ulaştırdı.

Çözüm:

&:before,
&:after {
  font-size: (@size*1px);
  box-sizing: border-box;
  content: '';
  position: fixed;
  border-radius: 50%;
  border: solid .6em;
  animation: rotation 1s linear infinite;
}

çözüm bu font-size: (@size*1px); değişkeni 1px ile çarpmak. Aynı şeyi çıkarma (-1px) içinde yapabiliyoruz.

Bu arada loading css fonksiyonunu görmek isteyenler için kod burada https://gist.github.com/fatihhayri/baf7e0234df785d49d4b20fb3558d302 daha geliştirilmesi gerekiyor ama neyse şimdilik bu kadar.

Kalın sağlıcakla.

Kaynaklar

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