tarihinde Fatih Hayrioğlu

Tarayıcıların bazı özellikleri bazı projelerimizde sorunlara neden olabiliyor. Bunlardan birisi de tarayıcıların dil hatalarını algılayıp sorunlu gördüklerinin altını çizmesi.

Bu özelliği kapatma kodunun olduğunu bilmiyordum. Dün araştırınca kapatmak için bir HTML özniteliği olduğunu öğrendim.

Bir örnek yapalım. İlgili paragrafa fare imleci ile tıkladığımızda ilk paragrafta hataları gösterirken ikinci pragrafta göstermiyor.

Çok basit bir öznitelik eklemesi ile yapabiliyoruz bu işi spellcheck="true" kontrolü aktifleştiriyor. spellcheck="flase" pasifleştiriyor.

ìnput ve textareagibi giriş yapılan alanlarda uygulandığı gibi. contenteditable özniteliği uygulanmış alanlarda da çalışıyor.

Tarayıcı desteği de iyi. Tüm tarayıcılar destekliyor. Benim testlerimde Firefox tüm alanlarda false gibi davranıyor.

Kaynaklar

tarihinde Fatih Hayrioğlu

Çalıştığım projede(vault.live) animated.css kütüphanesi kullanılıyor. Bir sorun ile kaşılaştık. animasyon uygulanan kutularda açılan menüler diğer kutuların altında kalıyordu.

Bir arama sonucu stackoverflow.com’da cevabını buldum.

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

animation-fill-mode‘un forwards değeri ve bu değeri kapsayan both değerlerinin tanımlandığı durumlarda sorun oluyor. initial olarak tanımlamak sorunu giderdi.

.animated {
	animation-duration: 1s;
	animation-fill-mode: initial;
}

Benzer bir sorunla karşılaşırsanız aklınızda oldun.

Sağlıcakla kalın.

Kaynak

tarihinde Fatih Hayrioğlu

closest() metodu seçtiğimiz elemanın belirttiğimiz seçici kuralına göre en yakın olan ebeveynini (kendisi de bu kontrole dahildir) bulur ve bize döner. Eğer bulamazsa null değeri döner.

<ul>
    <li>Üst Menü
        <ul>
	        <li class="urunler">
		        <a href='#' class='selected'>Ürün 1</a>
		    </li>
	        <li class="urunler">
		        <a href='#'>Ürün 2</a>
		    </li>
        </ul>
    </li>
</ul>

selected sınıfı tanımlı bir bağlatının DOM sıralamasına göre yukarıya doğru ilk ul elemanını yakalamak gibi bir amacımız olsun.

Bunun için closest öncesi şöyle bir iş yapıyorduk.

const seciliEleman = document.querySelector('.selected');

seciliEleman.parentNode.parentNode.classList.add('hayde');

closest sonrası ise çok basit:

const seciliEleman = document.querySelector('.selected');

seciliEleman.closest('ul').classList.add('hayde');

Eski yöntemde daha yukarılarda bir eleman yakalamak istediğimizde iş çığırından çıkıyordu. Bazı durumlarda dinamik oluşan yerlerde yakalayacağımız elemanın hangi seviyede olduğuda belli değilse çık işin içinden. closest bu konuda çok büyük rahatlık getirdi.

Ebeveyn bulmanın dışında closest’ı tıklanan elemanın belirlediğimiz seçiciyle uyumlu bir eleman veya içindeki herhangi bir eleman olup olmadığını kontrol etmek için de kullanabiliriz.

if (!event.target.closest('.adamim')) return;

Tıkladığımız eleman adamim sınıflı elemansa işine devam edecektir.

jQuery’den kurtulmayı kolaylaştıran metotlardan birini daha öğrenmiş olduk.

Tarayıcı desteği konusunda gayet iyi noktada.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + 6+

Eğer hala IE11 desteğini dert ediyorsanız aşağıdaki linklerde Polyfill kodu var.

Kalın sağlıcakla.

Kaynaklar