CSS’de hata ayıklama

Bazen CSS yazarken CSS’nizin beklediğiniz şeyi yapmadığını görürsünüz. Belki de belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsunuzdur, ancak hiçbir şey olmuyor veya kutu beklediğinizden farklı bir boyutta görünüyordur. Bu makale, CSS’de nasıl hata ayıklanacağı konusunda size rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools aracılığıyla neler olup bittiğini anlamanıza nasıl yardımcı olabileceğini gösterecek.

Tarayıcı geliştirici araçlarına nasıl erişilir

Tarayıcı geliştirici araçları nelerdir makalesinde çeşitli tarayıcılarda ve platformlarda bu araçlara nasıl erişileceğini açıklamıştık. Çoğunlukla, belirli bir tarayıcıda geliştirmeyi tercih ediyorsanız, en çok o tarayıcıda bulunan araçlara aşina olacaksınız. Ancak tarayıcı geliştirici araçlarına diğer tarayıcılarda nasıl erişileceğini bilmek de önemlidir. Bu, birden çok tarayıcı arasında farklı görünüm görüyorsanız yardımcı olur.

Ayrıca, tarayıcıların DevTools’larını oluştururken farklı alanlara odaklanmayı seçtiklerini de göreceksiniz. Örneğin, Firefox’ta CSS Düzeni ile görsel olarak çalışmak için bazı mükemmel araçlar vardır: Izgara Düzenleri , flexbox ve Şekiller gibi. Ancak, farklı tarayıcıların tümü benzer temel araçlara sahiptir, örneğin sayfanızdaki öğelere uygulanan özellikleri ve değerleri incelemek ve düzenleyici ile bunlarda değişiklik yapmak.

Bu yazıda CSS ile çalışmak için Firefox DevTools’un bazı kullanışlı özelliklerine bakacağız. Bunu yapmak için örnek bir dosya kullanacağız. Devam etmek için bu dosyayı yeni bir sekmede görüntüleyin ve yukarıda bağlantılı makalede açıklandığı gibi DevTools’unuzu açın.

DOM veya kaynak kodu

Yeni gelenleri DevTools’a yönlendirebilecek bir şey, bir web sayfasının kaynağını görüntülediğinizde veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördükleriniz ile DevTools’un HTML Bölmesi’nde görebilecekleriniz arasındaki farktır. İkisi birbirine kabaca benzese de bazı farklılıklar bulunur.

İşlenen DOM’da tarayıcı, kötü yazılmış bazı HTML’leri sizin için düzelterek HTML’yi normalleştirmiş olabilir. Örneğin, bir öğeyi <h2> ile açıp </h3> ile kapattıysanız tarayıcı ne yapmak istediğinizi anlayacaktır. DOM, aynı zamanda, JavaScript tarafından yapılan değişiklikleri de gösterecektir.

Diğer taraftan, kaynak kodu, sunucuda depolanan HTML kodudur. 

Uygulanan CSS’yi inceleme

Sayfanızdaki bir öğeyi sağ/ctrl tuşuna basarak ve öğeyi denetleyi tıklayarak veya DevTools ekranının solundaki HTML ağacından işaretleyerek seçin. box1 sınıfına sahip bir öğeyi seçmeyi deneyin; bu öğe, çevresinde çerçeveli bir kutu bulunan sayfadaki ilk öğedir.

HTML’nizin sağındaki kurallar görünümüne bakarsanız, o öğeye uygulanan CSS özelliklerini ve değerlerini görebilmeniz gerekir. Doğrudan box1 sınıfına uygulanan kuralları ve ayrıca kutuya atalarından miras kalan CSS’yi göreceksiniz – bu durumda <body> öğesinden. Bu, beklemediğiniz bazı CSS’lerin uygulandığını görüyorsanız kullanışlıdır. Belki bir üst öğeden miras alınıyor ve bu öğe bağlamında üzerine yazmak için bir kural eklemeniz gerekiyordur.

Ayrıca, kısayol özelliklerini genişletme yeteneği de yararlıdır. Örneğimizde margin kısayolu kullanılmıştır.

Farklı uzun yol özelliklerini ve değerlerini göstererek görünümü genişletmek için küçük oka tıklayın.

Bu panel etkinken kurallar görünümündeki değerleri açıp kapatabilirsiniz; farenizi üzerinde tutarsanız onay kutuları görünür. Örneğin border-radius kuralının onay kutusunun işaretini kaldırın. CSS border-radius kuralını uygulamayı durduracaktır.

Bunu bir A/B karşılaştırması yapmak, uygulanan bir kuralla bir şeyin daha iyi görünüp görünmediğine karar vermek ve ayrıca hata ayıklamaya yardımcı olmak için – örneğin, bir düzen yanlış gidiyorsa ve hangi özelliğin olduğunu bulmaya çalışıyorsanız – kullanabilirsiniz.

Değerleri düzenleme

Özellikleri açıp kapatmanın yanı sıra değerlerini de düzenleyebilirsiniz. Belki başka bir rengin daha iyi görünüp görünmediğini görmek veya bir şeyin boyutunu değiştirmek istiyorsunuzdur. DevTools, bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemek konusunda size zaman kazandırabilir.

box1 seçili iken renk paletine (küçük renkli daire) tıklayın. Bir renk seçici açılacak. Buradan farklı renkleri deneyebilirsiniz; bunlar sayfada gerçek zamanlı olarak güncellenecektir. Benzer şekilde, kenarlığın genişliğini veya stilini de değiştirebilirsiniz.

Yeni bir özellik ekleme

DevTools’u kullanarak yeni özellikler de ekleyebilirsiniz. Belki de kutunuzun <body> yazı tipi boyutunu devralmasını istemediğinizi ve kendi özel boyutunu ayarlamak istediğinizi fark ettiniz. Bunu CSS dosyanıza eklemeden önce DevTools’da deneyebilirsiniz.

Yeni bir bildirim girmeye başlamak için kuraldaki kapanış küme parantezini tıklatabilirsiniz. Böylece bu noktada yeni bir özellik yazmaya başlayabilirsiniz. DevTools size eşleşen özelliklerin otomatik tamamlama listesini gösterecektir. font-size‘ı seçtikten sonra denemek istediğiniz değeri giriniz. Ayrıca ek bir kural eklemek için + düğmesini de tıklayabilir ve yeni kurallarınızı buraya yazabilirsiniz.

Not: Kurallar görünümünde başka yararlı özellikler de bulunur, örneğin geçersiz değerlere sahip bildirimlerin üzeri çizilir. 

Kutu modelini anlama

Önceki derslerde Kutu Modelini tartışmıştık. Ayrıca dolgu ve kenarlıklara göre hesaplanma şeklini değiştiren alternatif bir kutu modelimiz olduğu gerçeğini de öğrenmiştik. DevTools, bir öğenin boyutunun nasıl hesaplandığını anlamanıza gerçekten yardımcı olabilir.

Düzen görünümü seçilen öğe için kutu modelini gösteren bir diyagramıdır. Bu, öğede açıkça kullanmamış olabileceğiniz, ancak başlangıç ​​değerleri ayarlanmış olan özelliklerin açıklamasını içerir.

Bu panelde, ayrıntılı özelliklerden biri box-sizing özelliğidir. Öğenin hangi kutu modelini kullandığını kontrol eden bir özelliktir.

box1 ve box2 sınıflarına sahip iki kutuyu karşılaştırın. Her ikisi de aynı genişliğe sahiptir (400 piksel), ancak box1 görsel olarak daha geniştir. content-box değerini kullandığını düzen panelinde görebilirsiniz. Bu, öğeye verdiğiniz boyutu alan ve ardından dolgu ve kenarlık genişliğine ekleyen bir değerdir.

box2 sınıfına sahip öğe border-box kullanır, yani burada dolgu ve kenarlık, öğeye verdiğiniz boyuttan çıkarılır. Bu, kutunun sayfada kapladığı alanın tam olarak belirttiğiniz boyutta olduğu anlamına gelir – bizim durumumuzda width: 400px.

Özgüllük sorunlarını çözme

Bazen, örneğin mevcut bir CSS’yi düzenlemeniz gerektiğinde, bazı CSS’leri uygulamakta zorlanacaksınız. Ne yaparsanız yapın, öğe CSS’yi almıyor gibi görünecek. Burada genellikle olan şey, daha spesifik bir seçicinin değişikliklerinizi geçersiz kılmasıdır ve burada DevTools size yardımcı olacaktır.

Örnek dosyamızda bir <em> elementine sarılmış iki kelime var. Biri turuncu, diğeri sıcak pembe olarak görüntüleniyor. CSS’de aşağıdakini uyguladık:

em {
  color: hotpink;
  font-weight: bold;
}

Bununla birlikte, stil sayfasında .special sınıfına sahip bir kural bulunur:

.special {
  color: orange;
}

Spesifikliği tartıştığımız kademeli ve kalıtım yazısından hatırlayacağınız gibi, sınıf seçiciler eleman seçicilerden daha spesifiktir ve bu nedenle geçerli olan değer budur. DevTools, özellikle büyük bir stil sayfası ile çalışıyorsanız, bu tür sorunları bulmanıza yardımcı olabilir.

.special sınıfına sahip <em> öğesini DevTools ile inceleyin. Turuncu rengin aktif olduğunu görürsünüz. Bunun yanında <em>‘e uygulanan color özelliğinin de üstü çizilmiştir. Sınıf seçicinin öğe seçiciyi geçersiz kıldığını görebilirsiniz.

CSS’de hata ayıklamada yaygın sorunlar

DevTools, CSS sorunlarını çözerken çok yardımcı olabilir demiştik. Peki kendinizi CSS’nin beklediğiniz gibi davranmadığı bir durumda bulduğunuzda, bunu çözmek için nasıl bir yol izlemelisiniz? Aşağıdaki adımlar yardımcı olmalıdır.

Sorundan bir adım geri atın

Herhangi bir kodlama sorunu, özellikle de CSS sorunları, sinir bozucu olabilir, çünkü genellikle bir çözüm bulmaya yardımcı olacak hata mesajı almazsınız. Sinirleniyorsanız, bir süre için sorundan bir adım uzaklaşın – yürüyüşe çıkın, su için, bir iş arkadaşınızla sohbet edin veya bir süre başka bir şey üzerinde çalışın. Bazen çözüm, sorun hakkında düşünmeyi bıraktığınızda sihirli bir şekilde ortaya çıkar ve öyle olmasa bile, yenilenmiş hissederek üzerinde çalışmak çok daha kolay olur.

Geçerli HTML ve CSS’niz var mı?

Tarayıcılar CSS ve HTML’nizin doğru yazılmasını bekler. Bununla birlikte tarayıcılar çok bağışlayıcıdırlar ve biçimlendirme veya stil sayfasında hatalar olsa bile web sayfalarınızı görüntülemek için ellerinden geleni yaparlar. Kodunuzda hatalar varsa, tarayıcının ne demek istediğinizi tahmin etmesi gerekir ve bu durumda aklınızdakilerden farklı bir karar verebilir. Ayrıca, iki farklı tarayıcı, sorunla iki farklı şekilde başa çıkabilir. Bu nedenle, iyi bir ilk adım, herhangi bir hata almak ve düzeltmek için HTML ve CSS’nizi bir doğrulayıcı aracılığıyla çalıştırmaktır. Aşağıdaki doğrulayıcılar kullanışlı olabilir:

Özellik ve değer, test ettiğiniz tarayıcı tarafından destekleniyor mu?

Tarayıcılar anlamadıkları CSS’yi görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, sayfada hiçbir şey bozulmaz, ancak bu CSS kuralı da uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde tarayıcı alt ızgara değerini desteklemiyor, grid-template-columns:

CSS’nizi geçersiz kılan başka bir şey mi var?

Spesifiklik hakkında öğrendiğiniz bilgilerin çok fazla kullanılacağı yer burasıdır. Yapmaya çalıştığınız şeyi geçersiz kılan daha spesifik bir şeyiniz varsa, ne olduğunu bulmaya çalışmak gibi çok sinir bozucu bir oyuna girebilirsiniz. Bununla birlikte, yukarıda açıklandığı gibi, DevTools size hangi CSS’nin uygulandığını gösterecektir. Böylece seçiciyi geçersiz kılmak için başka bir seçiciyi yeterince spesifik hale nasıl getirebileceğinizi öğrenebilirsiniz.

Sorunun azaltılmış bir test durumunu yapın

Sorun yukarıdaki adımlarla çözülmezse, biraz daha araştırma yapmanız gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test durumu olarak bilinen bir şey yaratmaktır. “Bir sorunu azaltabilmek” gerçekten yararlı bir beceridir. Bu, sorunları bulmanıza yardımcı olacak ve ayrıca hataları bildirmenize veya daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.

Azaltılmış bir test durumu, sorunu mümkün olan en basit şekilde, ilgisiz çevreleyen içerik ve stil kaldırılmış olarak gösteren bir kod örneğidir. Bu genellikle, yalnızca o kodu veya özelliği gösteren küçük bir örnek oluşturmak için sorunlu kodu düzeninizden çıkarmak anlamına gelir.

Küçültülmüş bir test senaryosu oluşturmak için:

  1. İşaretlemeniz dinamik olarak oluşturulduysa – örneğin bir CMS aracılığıyla – sorunu gösteren çıktının statik bir sürümünü oluşturun. CodePen gibi bir kod paylaşım sitesi azaltılmış test senaryolarını barındırmak için kullanışlı olacaktır. Bu sayfayı daha sonra iş arkadaşlarınızla kolayca paylaşabilirsiniz. Sayfada Kaynağı Görüntüle yaparak ve HTML’yi CodePen’e kopyalayarak başlayabilirsiniz. Ardından ilgili CSS ve JavaScript’i de dahil edebilirsiniz. Bundan sonra, sorunun hala belirgin olup olmadığını kontrol edebilirsiniz.
  2. JavaScript’i kaldırmak sorunu ortadan kaldırmıyorsa JavaScript’i dahil etmeyin. Eğer JavaScript çıkartmak sorunun gitmesine yardımcı oluyorsa o zaman soruna neden olan JavaScript kalana kadar JS kodu çıkarın.
  3. Soruna katkıda bulunmayan tüm HTML’leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın. Yine, sorunu gösteren en küçük kod miktarına inmeye çalışın.
  4. Sorunu etkilemeyen tüm CSS’leri kaldırın.

Bunu yapma sürecinde, soruna neyin neden olduğunu keşfedebilir veya en azından belirli bir şeyi kaldırarak sorunu açıp kapatabilirsiniz. Bir şeyler keşfederken kodunuza bazı yorumlar eklemeyi de deneyebilirsiniz. Yardım istemeniz gerekirse, size yardım eden kişiye zaten ne denediğinizi böylece gösterirsiniz. Bu, olası sorunları ve geçici çözümleri arayabilmeniz için size yeterli bilgiyi de verebilir.

CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak, en deneyimlilerimiz bile bazen kendimizi dünyada neler olup bittiğini merak ederken bulabilir. Metodik bir yaklaşım benimsemek, azaltılmış bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle bir çözümün bulunmasıyla sonuçlanacaktır.

Bir yorum yapın

E-posta hesabınız yayımlanmayacak.

To top