Uyumlu (Responsive) web’i dillendiren ilk adam Ethan Marcotte’un ikinci kitabı. İlk kitabı işin giriş kitabı idi. İkinci kitap biraz daha ileri seviye diyebiliriz. Genişleyen araç yelpazesi ve ihtiyaçları da dikkate alarak yazılan kitap güzel bilgiler sunuyor.

Tasarım kalıpları yeni bir mecraya girenler için bilgilendirici oluyor. Kitapta uyumlu menü sistemleri, esnek ve uyumlu resim kullanımı, uyumlu reklam yönetimi ve daha esnek ve cihazdan bağımsız düzenler oluşturmak için güzel bilgiler var. Uyumlu web’in belli bir standardının olmasına da değiniyor.

Real-Life Responsive Web Design - Smashing Magazine‘in verdiği doluluk hissini vermese de ikinci tekrar okumamda kritik noktalardaki önerilerinin güzelliğini gördüm.

Kalın sağlıcakla.

https://abookapart.com/products/responsive-design-patterns-principles

Kod yazarken bazı alışkanlıklarımız oluyor. Kütüphanelerin ve standartların yeniliklerini takip etmeyince kullandığınız kodun daha basit ve sade olan yeniliklerinden haberimiz olmuyor. jQuery’nin yeniliklerini çok önemsemiyorum, ancak mevcut çalıştığım sitede (zingat.com) ve birçok projede jquery kullanmaya devam ediyoruz. Bu öğrendiğim özellik ile yeniliklerin takibinin önemini bir kez daha gördüm.

Yapmak istediğim iş dinamik olarak değişen bir bağlantının sonuna bir parametre ekleme isteğim ile ortaya çıktı. Normalde kodumu aşağıdaki gibi yazarım.

var _href = $("a.yasamskor-link").attr("href");
$("a.yasamskor-link").attr("href", _href + '&listType=table');

veya href değerleri farklı ise.

$("a.yasamskor-link").each(function() {
   var $this = $(this);       
   var _href = $this.attr("href"); 
   $this.attr("href", _href + '&listType=table');
});

gibi bir yol izliyordum. Sonra jQuery 1.4 (yuh be arkadaş 1.4) ile birlikte DOM manipülasyon metotlarında callback desteğinin geldiğini okuyunca.

$("a.yasamskor-link").attr("href", function(i, href) {
  return href + '?listType=table';
});

şeklinde bir kullanımın daha basit ve anlaşılır olduğunu öğrendim.

callback uygulanabilen metot listesi: after, before, append, prepend, addClass, toggleClass, removeClass, wrap, wrapAll, wrapInner, val, text, replaceWith, css, attr, html

Kalın sağlıcakla.

Kaynaklar

Görünür alanı (viewport) kullanıcının kullandığı tarayıcının görünür alanı olarak tanımlayabiliriz. Bir web sayfasını görüntülemek için kullanılabilir alan olara düşünebiliriz.

Görüş alanı ekran boyutuyla(screen size) aynı değildir. Bir cihazın görünür alanı değişebilir ancak ekran boyutu sabittir.

Görünür alan masaüstünde büyük, tablette orta ve mobilde küçüktür. Bununla birikte masaüstünde kullanıcı tarayıcı boyutunu daralttığında masaüstünde de küçük kalır. Anlatmak istediğimiz görüş alanı ekran genişliğinden bağımsız tarayıcının görünür alanını ifade eder. Eğer duyarlı web siteleri kodlayacaksanız sizin için ekran boyutu değil tarayıcının görünür alanı önemlidir.

Son zamanlara kadar tasarımlar masaüstüne göre tasarlanırdı, yani görünür alanı büyük olan yerde. Görünür alan kabulü genelde 980px idi. Mobil cihazlar popülerleştikçe daha küçük ekranlar dikkate alınmaya başlandı. Bazı mobil ekranların 320px kadar küçük ekran boyutları vardır.

Daha küçük ekranların öne çıkması ile tarayıcılar iki eylemde bulundu:

  • Tarayıcılar web sitlerini ekran sığacak şekilde daralttılar.
  • Okunurluğu arttırmak için yazı boyutunu değiştirdiler.

Tabi bu durumda büyük ekran için tasarlanmış ve kodlanmış web sitesi küçük ekrana sığdırılmaya çalışılınca metinler görünmeyecek kadar küçüldü. Kullanıcı görmek için yakınlaştırmak zorunda kaldı. Tabi bu durum çok kullanıcı dostu olmayan web sitleri ortaya çıkardı.

Viewport meta etiketi

Uyumlu web siteleri kodlayanlar farklı görünür alanlar için site kodladığı için tarayıcıların sığdırma işlevine gerek duymamaktadır. İşte uyumlu olarak kodlanmış web sitelerinde sığdırma özelliğini devre dışı bırakmak için viewport meta etiketi kullanılır.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bu kodu <head> içine koymamız yeterli. Bu kod kullanıcının cihazında görünür alanı sabitleyecektir.

meta'sız meta'lı
mea’sız meta’lı

Ayrıca minimum-scale, maximum-scale ve user-scalable parametreleri de var. minimum-scale, maximum-scale parametreleri kullanıcını yakınlaştırma ve uzaklaştırma değerine belirlemek için kullanılır. user-scalable parametresi kullanıcının yakınlaştırma ve uzaklaştırma yapıp yapmayacağı belirler. İki değer alır yes ve no.

Erişebilirlik açısından minimum-scale, maximum-scale ve user-scalable kullanımı pek önerilmemektedir. Kullanıcı bazı durumlarda sitenin bazı alanlarını(örneğin resimleri) yakınlaştırmak istediğinde bunu engellediğimiz için bu imkandan mahrum kalacaktır.

Birçok sitede örnek olarak verilen

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

kod satırı kopyala-yapıştır ile kullanılmaktadır. Ancak erişebilirlik açısından çok önerilmemektedir.

CSS @viewport kuralı

viewport etiketi yerine CSS ile @viewport kuralı ile de bu işi yapabiliyoruz.

@viewport {
  /* kurallar buraya yazılır */
}

Bu kullanım tarayıcı desteğinin düşük olması nedeni ile önerilmemektedir.

Sonuç

Bir çok kod yazarı bu etiketi kopyala-yapıştır ile kullanmaktadır. Bu kod ile tüm sıkıntılarının biteceğini düşünmek mantıksız. Bu kod bazı sitelerde kullanıcı deneyimini daha da kötü hale getirebilir. Site yeteneklerini bilip ona göre eklemekte yarar var.

Sitemiz uyumlu bir şekilde kodlandı ise kodumuz aşağıdaki gibi olmalıdır.

<meta name="viewport" content="width=device-width, initial-scale=1">

Kalın sağlıcakla.

Kaynaklar

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