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

Uzun seneler web siteleri kodlarken nimetlerinden yararlandığımız jQuery, mobilin yükselişi ile gündemin ana maddesi olan performans sonrası yerini sorgulatıyor. Acaba normal javascript ile ben jquery’nin yaptıklarını yapamaz mıyım. Aslında Javascript’in hızlı yenilenmesi ile birlikte bir çok özelliği, metodu, fonksiyonu normal javascript ile yapabiliyoruz.

Bu yazı dizisini de şu an üzerinde çalıştığım zingat.com‘da üzerine uzun süredir kafa yorduğumuz performans işlerinin bir sonucu olarak “acaba jQuery kaldırsak daha mı hızlanırız?” sorunundan sonra başladım.

Jquery’nin sağladığı avantajları bilip bunlara karşı çözümler aramalıyız.

  • Kolay yazım
  • Tarayıcı desteği
  • Geniş topluluk desteği
  • jQuery kütüphanelerinin yaygınlığı
  • Dokümantasyon ve makale bolluğu

Kolay yazım

jQuery bir çok işimizi kolaylaştıran seçiciler, manipülasyon işleri ve kullanışlı metotlar sayesinde kod yazanlara kolaylıklar sağlar.

Gelişen javascript sürümleri ile jQuery ile yaptığımız kolaylıkta bu işleri artık javascripte yapabiliyoruz.

Tarayıcı desteği

Farklı tarayıcılar için çözüm oluşturmak için jQuery birebir.

Tarayıcıların otomatik güncellenmesi ile bu sorun büyük oranda azaldı.

Geniş topluluk desteği, jQuery kütüphanelerinin yaygınlığı ve Dokümantasyon ve makale bolluğu

jQuery geliştiren ve çözüm üreten bir çok insan var.

Performans sorunları sonrası bu ibre normal javascript tarafına yöneliyor.

Şimdi jquery ile yaptığımız işleri native javascript ile nasıl yapacağımıza tek tek bakalım.

İlk konu basit olsun. Javascript DOM işleri ile uğraştığımız için javascript’in çalışması için genelde DOM’un yüklenmesini bekleriz.

Meşhur jquery girişi:

	$(document).ready(function() { 
	  // DOM hazır
	});
	

veya kısa şekli

	$(function() {
	  // DOM hazır
	});
	

Peki bu kodu javascript ile nasıl yaparız. İki yöntem var tercih sizin.

DOMContentLoaded

	document.addEventListener('DOMContentLoaded', function() {
	  // DOM hazır
	});
	

onreadystatechange

	document.onreadystatechange = function () {
	  if (document.readyState == "complete") {
	    // DOM hazır
	  }
	}
	

Nasıl güzel değil mi?

Kalın sağlıcakla.

Kaynaklar

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.

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

Kalın sağlıcakla

Kaynaklar