12 Aralık 2016 tarihinde Fatih Hayrioğlu

meta viewport etiketi

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.


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

10 Kasım 2016 tarihinde Fatih Hayrioğlu

LESS ile değişkenlere değer ekleme çıkarma

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

8 Kasım 2016 tarihinde Fatih Hayrioğlu

CSS ile uzun metinleri üç nokta ile kesme

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;
    }
}