Ardalan resimler için uyguladığımız background-size ve background-position özelliklerine benzer bir kullanımı <img> ve <video> etiketleri içine uygulamamızı sağlayan özellikler.

Bu özelliğe ihtiyacımız çok eksilere dayanır. Görsel içeriğin kullanıcı tarafından girildiği sitelerde gelen resim boyutlarını istenen tasarımdaki içerik kutusuna sığdırma isteklerini karşılamak için bu özellikleri kullanırız. Bu özellik yaygınlaşmadan önce bu gibi ihtiyaçları karşılamak için resimleri ardalan resmine çevirip, background-size ve background-position ile halletmeye çalışırdım. Şimdi tarayıcı desktek oranları bayağı arttı ve artık kullanabiliriz.

object-fit

Yapısı : object-fit: [ deger ]
Aldığı Değerler : fill | contain | cover | none | scale-down
Başlangıç değeri: fill
Uygulanabilen elementler: yerine konabilir elementler
Kalıtsallık: Yok

object-fit özelliği, bir öğenin içerik kutusunun yüksekliğine ve genişliğine nasıl tepki verdiğini tanımlar. object-position özelliği ile birlikte resimler, videolar vd. medya formatları için tasarlanmıştır. object-fit içerik kutusuna nesneyi en/boy oranını koruyarak, mümkün olduğunca uzatarak veya mümkün olduğunca fazla yer kaplayacak şekilde yerleştirmeyi sağlar.

Aldığı değerler

  • fill: En/boy oranına bakılmaksızın görüntüyü içerik kutusuna uyacak şekilde uzatan varsayılan değerdir.
  • contain: En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.
  • cover: Resim, en/boy oranını koruyarak ancak işlem sırasında resmi kırparak kutunun yüksekliğini ve genişliğini dolduracaktır.
  • scale-down: Resim, en küçük somut nesne boyutunu bulmak için none ve contains arasındaki farkı karşılaştıracaktır ve uygun olanı uygulayacaktır.
  • none: Resim orijinal halindeki boyutlarını korur ve içerik kutusu içine sığmaya çalışmaz. İçerik kutusundan taşan kısımlar kırpılır.

Örnek ile daha iyi anlayacağız.

object-position

object-position özelliği bir objenin içerik kutusundaki yerini ayarlamamızı sağlar.

Yapısı : object-position: [ deger ]
Aldığı Değerler : left | center | right | top | bottom | uzunluk değerleri | yüzde değerleri
Başlangıç değeri: 50% 50%
Uygulanabilen elementler: yerine konabilir elementler
Kalıtsallık: Var

Örneğin üye resmi, adı ve soyadının olduğu bir alanımız var.

Görüldüğü gibi normal şartlarda resimler büzülmüş görünecektir. object-fit: cover; tanımı yaptığımızda en/boy oranı korunduğu için büzülme düzelcektir, ancak şimdide resimlerin üste çok yakın olması sorunu vardır. Bunu da halletmek için object-position: 50% 15%; tanımı yaparsak isteidiğimize yakın bir sonuç elde etmiş oluruz.

Bu gibi bir çok durum için kullanışlı özellikler.

Tarayıcı desteği

Can I Use object-fit? Data on support for the object-fit feature across the major browsers from caniuse.com.

Kalın sağlıcakla.

## Kaynaklar

DOM ilişkili seçiciler

İlk yazımda genel seçicilerden bahsetmiştim bu yazımda ise DOM üzerinden ilişkilendirilen seçicilerden bahsedeceğim. DOM’daki elementler bir ağaç yapısı ile aile bağlarına benzer bir şekilde bir birlerine bağlıdır. Bu ilişkiden yararlanılarak oluşturulan seçicilere DOM ilişkili seçiciler denir.

Örnek bir HTML kodu verelim;

<div>
  <h1>HTML <em>Hiyerarşisi </em></h1>
  <div><strong>Sitemize</strong> hoş geldiniz <strong class="es-gec">Merhaba</strong> biz <em>sizler için</em> <a href=""> 	bazı önemli konular!</a> hazırladık.</div>
</div>

Yukarıdaki koddaki HTML elemanlarının arasında bir aile yapısına benzer bir yapı vardır. Örneğin h1, em elementinin ebeveyni, diğer bir tanım ile em; h1‘in çocuk elementidir.

Ebevey (parent) seçicisi

Örneğin em elementinin ebeveynini

jQuery ile

$('em').parent();

Javascript ile

document.querySelector('em').parentNode;

h1 sonucu bize verecektir.

Çocuk (children) seçicisi

Alt eleman olarak da tanımladığımız çocuk seçicileri yaklamak için;

jQuery ile

$('h1').children();

Javascript ile

document.getElementsByTagName('h1').childNodes;

text ve em‘i yakalarız.

document.getElementsByTagName('h1').children;

ile sadece em‘i yakalarız.

Torun (Descendants) seçicisi

Bir elemanın alt eleman kümesindeki belirlenen tanıma uygun elemanları yakalamak için kullanılır. Yine CSS’den aşina olduğumuz bir kullanım.

jQuery ile

$('div em');

Javascript ile

document.querySelectorAll('div em');

Bu seçici bize her iki em elemanını verecektir.

En yakın ebeveyn (closest) seçicisi

jQuery kullanırken en yakın ebeveyni yakalamak için closest metodunu kullandığımız oluyor. jQuery’de bunun için bir metot var. Örnek verelim.

jQuery ile

$('a').closest('div');

ile kodumuz içindeki bağlantının en yakın div ebeveyni yakalanmış olur. Javascript’e de yeni gelen bu özellik ile aynı kolaylıkta elemanı yakalayabiliriz.

document.getElementsByTagName('a').closest('div');

Bu yeni bir özellik olmasına rağmen şu an Türkiye’deki desteği %83 seviyesinde. Desteklmeyen tarayıcılar için https://github.com/cferdinandi/getClosest kullanılabilir.

Can I Use element-closest? Data on support for the element-closest feature across the major browsers from caniuse.com.

Kardeş (siblings) seçicisi

Aynı ebeveyne sahip elemanlara kardeş seçiciler denir. Kardeş seçicileri ikiye ayırırız. Bitişik kardeş seçicileri birbiri ardına gelen seçiciler ve genel kardeş seçicileri. jQuery API’sindeki siblings metodu ise bunlardan biraz daha farklıdır. Tanımlanan elemanın seviyesindeki tüm elemanları (kendisi hariç) yakalar. Javascript’te bu durumu direk karşılayan bir metot yoktur. Basit bir fonksiyon ile bu isteği karşılabiliriz.

CSS’deki kardeş seçici mantığı ile ilk kardeşi yakalayıp sonrakileri seçerek jQuery siblings metodunu karşılayabiliriz.

Bu tip javascript’te olmayan metotları kodumuza kazandırdığımız kodları genel erişilebilir bir yerde tutabiliriz.

Genel bir fonksiyon tanımlayıp siblings dizisini oluşturalım. Belirlediğimiz elemanın ebeveyni ve oradanda bu ebeveynin ilk elemanını yakalarız. Sonra bir döngü içinde nextSibling yardımı ile sonraki elemanları yakalayıp bir diziye atarak çözümü oluşturabiliriz.

var getSiblings = function (elem) {
    var siblings = [];
    var sibling = elem.parentNode.firstChild;
    
    for (; sibling; sibling = sibling.nextSibling) {
      // kod gelecek
    }
};

Siblings içinde belirlediğmiz elamanın olmaması lazım. Bunun için bir if kontrolü koymalıyız.

var getSiblings = function (elem) {
    var siblings = [];
    var sibling = elem.parentNode.firstChild;
    
    for (; sibling; sibling = sibling.nextSibling) {
      if (sibling.nodeType !== 1 || sibling === elem) continue;
      siblings.push(sibling);
    }
    return siblings;
};

Son olarakta döngü bittiğinde sonuçları geri göndereceğiz.

jQuery ile

$('div.icerik .es-gec').siblings();

Javascript ile

let elem = document.querySelector('div.icerik .es-gec');
let siblings = getSiblings(elem);

jQuery basitliğinde değil ancak çokta zor olmayan bir yardımcı fonksiyon ile işimizi halletik.

Elemanları hariç tutmak (not)

Bazı elemanları seçimden hariç tutmak için

jQuery ile

$('p strong').not('.es-gec');

Javascript ile

document.querySelectorAll('p strong:not(.es-gec)');

Bu seçim sonrası sadece ilk strong elemnaı seçilmiş olur.

Çoklu eleman seçimi

Birden fazla eleman seçmek istediğimizde

jQuery ile

$('h1, .es-gec, a');

Javascript ile

document.querySelectorAll('h1, .es-gec, a');

yukarıdaki kodlar h1, .es-gec ve link elemanını verecektir.

Sonuç

Bu iki yazılık javascript seçicileri yazımızda gördük ki jQuery’nin en büyük avanatajlarından birisi olan seçiciler konusunda javascript’te yeterli seviyede.

jQuery’nin DOM üzerindeki hakimiyetinin çok fazla olması ve bu hakimiyeti oluşturmak için ürettiği metotlar(nextUntil, nextAll, offsetParent, parentsUntil, prevUntil, prevAll) çoğu zaman kırılgan ve anlışlmaz yapıların çıkmasına neden oluyor. Kırılganlığı önlemek ve daha esnek kodlar yazmak için DOM ilişkili seçicilerin kullanımına dikkat etmeliyiz.

Bazı durumlar için siblings ve closest örneklerinde gördüğümüz gibi yardımcı fonksiyonlar ile kolay çözümlerde oluşturabiliriz.

Kalın sağlıcakla.

Kaynaklar

Daha önce bu özelliği kullanacaktım ancak Chrome desteğini kaldırdığı için kullanım oranı çok düşüktü. Chrome 56’dan itibaren tekrar desteklemeye başladığı için artık kullanabiliriz.

position:sticky tanımlanan eleman kaydırma çubuğu gelene kadar position:relative gibi davranır, kaydırma çubuğu geldikten sonra position:fixed gibi davranır.

Örnek ile daha iyi anlayacağız.

Daha önce bu tip ihtiyaçları position:fixed ile yapıp kaydırma çubuğu gelene kadarki kısmı javascript yardımı ile çözüyorduk. Çünkü postion:fixed olan eleman position:absolute gibi davranıp her halükarda kendini aynı yerde sabitliyor.

Sticky kullanımlarında kaydırma çubuğu, elemana gelene kadar sabit kalsın ama kaydırma çubuğu gelince fixed olsun gibi istekler ile karşılaşıyorduk. Bu istekleri karşılamak için javascript çözümlerine başvuruyorduk. position:sticky güzel ve tek satrılık çözümü süper oldu.

Elemanın sticky olması için dikeydeki kaydırmalarda top / bottom değeri, yataydaki kaydırmalarda left / right değeri tanımlamak gerekiyor.

Desteklemeyen tarayıcılar için çözüm

Bu yazıyı yazdığımda Türkiye için destek %82 idi. Desteği olmayan tarayıcılar için iki seçenek var. Javascript ile destek sağlamak veya desteklemeyenlerde position:relative olarak tanımlamak.

Javascript ile çözüm

Javascript ile çözüm oluşturmak için aşağıdaki çözümlerden biri tercih edilebilir.

CSS ile çözüm

İkinci çözüm desteği olmayanlar için position:relative olarak bırakmak.

.sticky-element{
  position: relative; 
}

@supports(position:sticky){
  .sticky-element{
    position: sticky;
    top: 0px;
  }
}

Sonuç

Kullanıcı ihtiyacı olan bir özellik. Standartlaşması süper. W3C kullanıcı ihtiyaçlarını karşılamada çok yavaş kalıyor. Bu nedenle birçok şeyi olması gerektiği gibi değil çakma çözümler ile yapıyoruz. Umarım zamanla bu değişir.

Tarayıcı desteği

Can I Use css-sticky? Data on support for the css-sticky feature across the major browsers from caniuse.com.

Kaynaklar

jQuery’nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript’e kazandıran bu kullanım kolaylığı sizzle kütüphanesinden gelir. Javascript bu konuda daha sığ ve beceriksiz kaldı. Tabi sonra işler değişti ve artık aynı yeteneklere sahip.

Seçicilerdeki bu büyük atılımı sağlayan iki özellik var querySelector ve querySelectorAll.

Element.querySelector()

Belirtilen öğenin ilk alt elemanını döndürür.

element = anaElement.querySelector(secici);

Buradaki secici kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor. İşte süperlik buradan kaynaklanıyor. a:before, p[title], p > span, ul li ~ li, vs.

Eğer element bulunamazsa null değeri döner.

Element.querySelectorAll()

Belirtilen öğe grubunun tüm alt elemanlarını döndürür.

elementList = baseElement.querySelectorAll(seciciler);

Buradaki seciciler kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor.

Yukarıdaki özelliğin çoklusu. Bu seçici sonucunda bir dizi element döner.

var el = document.querySelector('#test'); 
var aktifElemanlar = el.querySelectorAll('div.aktif > p');

aktif eleman altındaki tüm paragrafları yakalamamızı sağlar.

Tarayıcı desteği konusunda da çok iyi bir durumdalar. IE8+ destekleri var.

Javascript seçicilerini iki gruba ayıracağız.

  • Ana eleman seçicileri
  • DOM ilişkilerine dayanan seçiciler

Ana eleman seçicileri

CSS derslerinden alışık olduğumuz gibi seçiciler javascript dünyasında da önemli bir yere sahiptir. Kod yazarlarının en çok kullandığı araçlardan biridir seçiciler. Seçiciler ne kadar gelişmiş olursa, bizlere kod yazarken o kadar rahatlık sağlıyor.

Tekil (ID) seçiciler

CSS’den alışık olduğumuz ID seçiciler sayfada bir tane bulunan bir elemanı yakalamak için kullanılır. En büyük avanatjı hızdır.

<div id="trabzon"></div>

Sayfamızda tek bir trabzon id’li elemanı yakalamak için

jQuery ile

var trabzon = $('#trabzon');

Javascript ile

var trabzon = document.getELementById('trabzon');

Tarayıcı desteğinin IE5.5+ olması ne kadar eski olduğunu gösteriyor.

veya

var tarabzon = document.querySelector('#trabzon');

her ne kadar daha yavaş olasa da bir tercih olarak kenarda dursun.

Sınıf (class) seçicileri

Sayfada birden fazla elemanı yakalamk için kullandığımız HTML özniteliğidir.

jQuery ile

var sehir = $('.sehir');

Javascript ile

var sehir = document.getElementsByClassName('sehir');

Bu seçici tüm class=”sehir” tanımlı elemanları bulur ve bize bir dizi olarak döner.

Tüm yeni nesil tarayıcılar ve IE8+ desteği vardır.

veya

var sehir = document.querySelectorAll('.sehir');

her ne kadar daha yavaş olasa da bu da bir tercih.

Etiket (tag) seçicisi

HTML etiketlerini kullanarak seçim yapmamızı sağlar.

jQuery

var katman = $('div');

Javascript ile

var katman = document.getElementsByTagName('div');

Bu seçici tüm <div> etiketli elemanları bulur ve bize bir dizi olarak döner.

IE5.5+ desteği var.

veya

var katman = document.querySelectorAll('div');

her ne kadar daha yavaş olasa da bu da bir tercih.

Öznitelik (attribute) seçicileri

Özellik Seçicileri HTML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre seçim yapmamızı sağlar.

<img src="logo.gif" alt="Logo" width="32" height="41" />

jQuery ile

$('[alt="logo"]');

Javascript ile

document.querySelectorAll('[alt="logo"]');

jQuery benzer bir kullanım var.

Sözde sınıf (Pseudo-class) seçicileri

Aslında bir HTML sınıfı olmamasına rağmen sözde olarak oluşturulan sınıfları yakalamak için kullanılır. CSS’ten alışık olduğumuz bir seçici.

jQuery ile

var metinAlani = $('input:focus');

Javascript ile

var metinAlani = document.querySelectorAll('input:focus');

Süper değil mi?

Sonuç

jQuery’nin elindeki en büyük kozlardan birisi olan kolay seçici kullanımını aynı kolaylık ile javascript ile yapabiliyor olmak sevindirici.

Bir sonraki yazımda DOM ilişkilerine dayanan seçicilerden bahsedeceğim.

Kalın sağlıcakla.

Kaynaklar

jQuery’de en çok kullandığımız özelliklerinden birisi de sınıf tanımlama, silme, varlığını kontrol etme ve toggleClass.

Peki bunların normal javascript’te karşılığı var mı ve bu kadar kolay kullanabiliyor muyuz? Elbette. Sırası ile inceleyelim.

Sınıf (class) ekleme

Seçtiğimiz elemana bir sınıf tanımlamak istediğimizde

jQuery ile

  $el.addClass('aktif');

Normal Js ile

  el.classList.add('aktif');

çok benzer tanımlar.

Sınıf (class) silme

Seçtiğimiz elemana ait sınıfı silmek istediğimizde

jQuery ile

  $el.removeClass('aktif');

Normal Js ile

 el.classList.remove('aktif');

yine çok benzer tanımlar.

Sınıfın varlığını kontrol edelim

Bir çok yerde seçilen eleman atanmış bir sınıfın olup olmadığını kontrol ederiz ve buna göre işlem yaparız.

jQuery ile

 $el.hasClass('aktif');

Normal Js ile

 el.classList.contains('aktif');

benzer kullanım.

Sınıf geçişi (toggle)

Çok tercih edilen bir diğer sınıf işlemedir.

jQuery ile

 $el.toggleClass('aktif');

Normal Js ile

 el.classList.toggle('aktif');

çok kullanışlı bu özelliğin normal js olması süper.

Sonuç

jQuery’den esinlenerek classList API’yi geliştirdiler. Artık aynı yetenekler normal javascript’te de var.

jQuery ile aynı kolaylıkta bir kullanım sağlayan normal js çözümlerini tercih etmek bize hız kazandıracaktır.

IE10 ve sonrası için desteği olan bu özellikleri rahatlıkla kullanabiliriz.

Can I Use classlist? Data on support for the css-line-clamp feature across the major browsers from caniuse.com.

Kaynaklar