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

Temmuze 2019’da güncellendi.

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(şu an %98 Temmuz 2019) 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;
    }
}

Tarayıcı Desteği

Chrome explorer Firefox
+ (-webkit) - 68+

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ (-webkit) + (-webkit) + (-webkit)

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