tarihinde Fatih Hayrioğlu

HTML elementlerinin farklı tarayıcı ve ortamlardaki davranışlarını ortak hale getirmek için genelde reset css kodları kullanırız. meyer, normalizer vs.

Aslında bu listelerde yapılan belirtilen elemanların değerlerini bilinen ortak değer ataması yapmaktır.

CSS all: unset tanımıyla birlikte bir seçicinin tüm değerlerinin tarayıcının belirlediği başlangıç değerine veya kalıtsal değerine döndürmek çok kolay. Bu özellik aslında reset css ile yaptığımızı yapıyor. unicode-bidi ve direction hariç tarayıcıların belirlediği değerlere döndüren bir özellik. Bu özellik inherit ve initial‘ın birlikte kullanılmış halidir. Eğer kalıtsal bir değer alıyorsa kalıtsal değerine döndüren, kalıtsal değeri yoksa başlangıç değerine döndüren bir kısayoldur. CSS Değişkenlerine de etki etmez.

unset değeri tanımlanmış değerleri ve etkinlikleri (Specificity) daha düşük olan değerleri başlangıç değerine döndürür.

.dunya { color: red; font-size: 44px; margin: 40px;}
.turkiye { font-size: 32px; color: blue; }
.button { border: 3px solid red; background: yellow; font-size: 40px; color: pink; padding: 40px; display: block; }
.deneme { all: unset; color: pink; }

HTML kodu

<div class="dunya">
  <p class="turkiye">
    <span class="istanbul">
      <strong class="pendik">
        <button class="deneme button">Deneme</button>
      </strong>
    </span>
  </p>
</div>

Sonuç aşağıdaki gibi olacaktır.

Farklı tanımlardan etkilenmiş button ögesi all:unset ile sıfırlanmıştır. Tek satır kod ile bunu yapabilmek çok güzel.

İyi planlanmamış projelerde bazen bir elemana uygulanan atamaları sıfırlamak gerekiyor, bu gibi durumlar için çok süper özellik. Gönül ister ki projeler başta daha iyi planlansın ve bu tip ihtiyaçlar olmasın ama gerçek böyle olmuyor maalesef.

Firefox geliştirme aracında çok güzel bir gösterme şekli var. all:unset ile değişen ve değiştiremediği (örnek color) değerleri gösteriyor.

all unset

all özelliği bunun dışında initial, inherit ve revert değerleri alır. Bu değerler ve farklarını da başka bir makale yazsak iyi olur.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Kullanıcıdan bilgi aldığımız girdi alanlarının (input) kullanımını kolaylaştırmak ux (kullanıcı deneyimi) açısından önemli. Bunun için ilk olarak placeholder (yer tutucu)’ları HTML’e ekledik. Sonra bunları stilize ettik. Konuyla alakalı “CSS ile HTML5 Yer Tutucu’ya(placeholder) Stil Vermek” yazıma bakabilirsiniz. Daha sonra kullanıcının içeriği girdiğinde yertutucunun kaybolması bir eksiklik olarak görüldü ve kullanıcı bir içerik girdiğinde yertutucunun üstüne doğru kaymasını sağlayan uygulamalar yapmaya başladık. Bu işleri javascript yardımıyla yaparken şimdi daha doğrusu 2-3 senedir bunu CSS ile yapıyoruz.

Bu yazımda sizelere CSS ile bunu nasıl yaptığımızı anlatacağım.

<form>
  <div class="input-satiri">
    <input name="ad" placeholder="İsminizi girin">
    <label>İsim</label>
  </div>
</form>

Bir girdi alanı ve sonrasına bir label ekliyoruz. İlk durumda yertutucu placeholder="İsminizi girin" ile bilgilendirici mesajı gösteriyoruz.

Kullanıcı girdi alanına bir şeyler girdiğinde yertutucu kayboluyor onun yerine label içindeki bilgilendirme metnini gösteriyoruz. :placeholder-shown placeholder görüntülendiğinde durumunu yaklamamızı sağlar. Bize placeholder’ın gizlendiği hali lazım. Onun için de :not(:placeholder-shown) sözde sınıfı işimizi görecek.

Tarayıcı desteği konusunda da çok iyi.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas

CSS grid yazılarımızın 6. sında sizlere explicit (belirlenmiş), implicit(belirlenmemiş) tanımlarını, grid-auto-columns, grid-template-rows ve grid-auto-flow özelliklerini anlatacağım.

display:grid tanımı yapılan kapsayıcı elemanın altındaki tüm birincil ögeler grid ögesi olur. Bu ögelerin grid-template-columns, grid-template-rows ve grid-template-areas tanımları yardımıyla konumu ve boyutu belirlenir. Bu konumu ve boyutu belirlenmiş grid ögelerine explicit (belirlenmiş) grid ögeleri, bunların dışındaki ögelere implicit (belirlenmemiş) grid ögeleri denir.

Belirlenmiş (explicit) ögelerin alanların tanımları bellidir. Peki geri kalan Belirlenmemiş (implicit) ögeler ne olacak. Bu ögeler için de grid-auto-columns ve grid-auto-rows tanımları devreye giriyor. Açıkta öge kalmasın :)

İçeriği dinamik olarak oluşan yapılarda genelde yeni gelen ögeler belirlenmemiş (implicit) öge olarak oluşur. grid-auto-columns ve grid-auto-rows tanımları bu sorunları gidermek bire bir özelliklerdir..

grid-auto-columns ve grid-auto-rows

Yapısı : grid-auto-column: <iz-listesi|> |minmax(<iz-listesi>,<iz-listesi>)
Aldığı Değerler : <iz-listesi> |minmax(<iz-listesi>,<iz-listesi>)
Başlangıç değeri: auto
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

<grid-listesi> seti boşluklarla ayrılarak tekrar edebilir değerlerden oluşur.

.grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

enter image description here

Yukarıdaki grid için 4 kolon ve 2 satır tanımlanmıştır. 3. satırdaki ögeler için ise grid-auto-rows: 200px; tanımı yapılmıştır.

Firefox geliştirici aracında explicit ve implicit ayrımını göstermektedir. Explicit grid öge alanı tam kenar çizgisiyle gösterilirken implicit alanlar kesik çizgi olarak gösterilir.

enter image description here

grid-template-x (grid-template-columns, grid-template-rows ve grid-template-areas) ve grid-auto-x (grid-auto-columns ve grid-auto-rows) tanımlarının şöyle bir farkı vardır. grid-template-x tanımları tanımladığı grid ögelerinin hem konumunu hemde boyutunu belirlerken grid-auto-x özellikleri sadece boyutunu belirler.

Bu özellikleri niçin kullandığımızı düşününce bu farklılık daha anlaşılır olur. grid-template-x özellikleri explicit grid ögeleri oluşturmak için tanımlanırken, grid-auto tanımı ise tanımlanmış implicit (belirlenmemiş) grid ögelerinin boyutunu belirler. Birisi sıfırdan tanımlarken birisi tanımlanmış ögenin boyutunu belirler.

grid-auto-flow

Yapısı : grid-auto-flow: [ row | column ] ‖ dense
Aldığı Değerler : [ row | column ] ‖ dense
Başlangıç değeri: row
Uygulanabilen elementler: Kapsayıcı ızgaralara
Kalıtsallık: Yok

Bu özellik tanımlanmış ögelerin dışındakilerin nasıl davranacağını belirlememizi sağlar.

Aldığı değerler ve anlamları:

row Bu değer başlangıç değeridir. Otomatik yerleştirme algoritması her grid ögesinin satırlara yerleştirecektir ve yeni eklenen grid ögeleri içinde yeni satırlar açacaktır.

column: Otomatik yerleştirme algoritması her grid ögesini kolonlara yerleştirecektir ve yeni eklenen grid ögeleri içinde yeni kolonlar açacaktır.

dense Bu tanım grid ögelerinin akışının içindeki davranışına karar verdiğimiz bir özelliktir.

Grid ögeleri normalde sırayla yerleştirilir. Boyutu sığmayan ögeler bir alt satıra itilir.

Örnekle bu konuyu daha iyi anlayacağız. Rachel Andrew’in örneği üzerinden gidersek.

enter image description here

Striped Balloon içeriği daha geniş olduğu için üst satırdan aşağı atılmıştır. Bundan dolayı üst satır boş kalmıştır. Kırmızıyla işaretlenen yer.

enter image description here

Fortnum & Mason içeriği daha küçük olduğu için yukarıdaki boşluğa sığdırılır. Galeri sayfaları için çok güzel bir özellik.

Galeriye örnek: https://codepen.io/FilipVitas/pen/pQBYQd

Kalın sağlıcakla.

Kaynaklar