tarihinde Fatih Hayrioğlu

HTML nesneleri üzerinde veri taşıma alışkanlığımız HTML5 öncesine dayanıyor. HTML5 bunu standart hale getirdi ve kullanımı yaygınlaştı. Bir ögeye ait verilerin ögenin üzerinde taşıması bize bazı durumlarda çok büyük katkı sağlıyor. İşi abartmamakta yara var :) Hemen örnek ile devam edelim.

<ol>
 <li data-length="2m11s">Deniz kenarı</li>
 ...
</ol>

bu veriyi javascript tarafında yakalamak için jQuery’nin güzel bir metodu var. data()

$(this).data('length') // 2m11s

veri atamak için

$(this).data('lat', '41.015137')

çok kullanışlı bir kod ve kolay bir kullanım.

İnsan normal javascript’te de aynı şeyi arıyor. Arayan buluyor :)

classList benzeri bir kolay erişim özelliği olarak HTML5 dataset özelliği var. Kullanımı jQuery gibi kolay.

<div id="user" data-id="33" data-user="kucka" data-date-of-birth>John Doe</div>

veri yakalamak için

let el = document.querySelector('#user');

el.dataset.id // '33' değerini verir
el.dataset.user // 'kucka' değerini verir

el.dataset.dateOfBirth = '26-02-1987'; // veriyi atayalım

jQuery ile ilişkimizi sonlandırmaya kararlıyım. Tarayıcı desteğini bizim site için güzel IE11 ve sonrası. Daha eski tarayıcılara destek verenler için getAttribute denenebilir.

Kalın sağlıcakla

Kaynaklar

tarihinde Fatih Hayrioğlu

Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML’deki elemanların birbiriyle olan ilişkilerini anlatmak için soyağacı benzetmesi yaparız ve birçok yerde kullanırız. Ebeveyn, çocuk, kardeş seçicileri gibi. Bu yazımın konusunda CSS’in seçicileri ile ilgili olacaktır.

CSS ile aynı seviyedeki elemanların ilişkilerini kullanarak bazı seçme işleri yaparız. Bu durumlar için iki adet seçicimiz vardır. Bitişik kardeş seçicisi (+) artı işareti ile kullandığımız ve genel kardeş seçicisi (~) tilda işareti ile kullandığımız. Gayet kullanışlı seçiciler olan bu kardeş kökenli seçicilerimizin bir sorunu var. Sorunu yine soyağacı benzetmemiz üzerinden tanımlarsak, büyük kardeşe erişememe sorunumuz vardır. Belirlediğimiz bir elemanın öncesindeki kardeşi seçecek bir CSS seçicisi yoktur. Sorunu anladığımıza göre benim bu sorunu tekrar hatırlamama neden olan durumu da açıklayayım size.

zingat.com kutular

zingat.com anasayfasındaki büyük resmin üzerindeki gri kutuların hepsi gri yani pasif görünüyordu. Üzerine gelince büyüyor, rengi değişiyor. Yeni istek ise, ilki aktif gözüksün, diğerlerinin üzerine gelince ilki pasif olsun. İş küçük bir iş gibi görünse de ilk olarak aklıma CSS ile bunu yapmanın imkanı yok javascript ile yapmak lazım dedim. Sonra işi flex ve order yardımı ile yapabileceğim fikri aklıma geldi ve bu yazı ortaya çıktı.

Mantık şöyle; CSS önceki elemana erişemiyorsa bende ilk elemanı sona atarım ve CSS ile işimi çözerim.

flex tanımlı bir kapsayıcı içindeki kutuları order ile sona atarsam artık CSS ile erişilebilir hale getirmiş oluyorum. Kod örneği aşağıdaki gibi.

Belki sizin de işinize yarar.

Kalın sağlıcakla.

tarihinde Fatih Hayrioğlu

CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}

Peki bu kontrolleri javascript tarafında nasıl yaparız diye araştırınca window.matchMedia ile karşılaştım. Bildiğimiz CSS medya kulanımının aynısını yapabiliyoruz.

var ms = window.matchMedia("SORGU");

SORGU yazan kısma CSS’de yazdığımız kısmı birebir yazıp kontrol edebiliyoruz.

var ms = window.matchMedia("screen and (min-width:720px)");

Sonra kontrolümüzü yapalım.

if (ms.matches) {
  // ekran genişliği en az 720px
} else {
  // ekran genişliği 720px den büyük olanlar.
}

Tarayıcı desteğinin %100’e yakın olması da ayrı bi güzellik.

Kaynaklar