Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.
| Ön koşullar: | Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesi, dosyalarla çalışma konusunda yeterli seviyede bilgiler ve HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım) |
|---|---|
| Amaç: | Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek |
Tarayıcı geliştirici araçları nelerdir dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.
Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için, Izgara Düzeni, Flexbox'ı ve Biçimleri incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.
Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için örnek bir dosya kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.
Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının kaynağını görüntülediğinde veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un HTML Panelinde görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.
Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <h2> etiketini </h3> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan </h3>'ü </h2> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.
Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) HTML ağacı'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.
Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden öğeyi incele'yi seçerek veya Araçlar menüsündeki Web geliştirici sekmesinde bulunan seçeneklerden birini seçerek DevTools'a geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki box1 sınıfına atanmış öğeyi seçip DevTools'u aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.
Açılan DevTools ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde Denetçi sekmesinde bulunan HTML alanının sağındaki Kurallar görünümüne bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan box1 sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <body>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.
Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım margin kısa tanımı üzerinden ilerleyelim.
Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.
Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, border-radius niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve DevTools bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.
Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve box1 sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.
Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:
{{EmbedYouTube("O3DAm82vIvU")}}
Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.
Seçtimiz box1 sınıfına ait öğemizin Kurallar görünümündeki color niteliğinin yanıda ki küçük renkli daireye tıklayalım. Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.
DevTools'u kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <body> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.
Yeni bir bildirim girebilmek için kuralın sonunda bulunan } süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle font-size niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.
Not: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için CSS'i inceleme ve düzenleme dersine bakın.
Önceki derslerde Kutu Modeline verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.
Düzen görünümde(Layout) seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.
Bu panelde, kutu modeli özelliklerinden biri olan box-sizing öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.
box1 ve box2 sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak box1 sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin context-box değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.
box2 sınıfına dahil olan öğemizin kutu modeli border-box olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.
Not: Kutu Modelini İnceleme ve Düzenleme bölümünden daha fazla bilgi edinebilirsin.
Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.
Örnek dosyamızda bir <em> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:
em {
color: hotpink;
font-weight: bold;
}
Bunla birlikte stil sayfamda .special sınıf seçicisine sahip bir kuralım daha var:
.special {
color: orange;
}
Art arda denetim ve miras dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.
Kontrol görünümünde <em> öğe ve .special sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan color niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.
MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için DevTools bölümüne ve Nasıl Yapılır Rehberi'ne bakın.
DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.
Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.
Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.
Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.
MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.
{{Compat("css.properties.shape-outside")}}
Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.
Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.
İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.
İndirgenmiş bir test senaryosu oluşturmak:
Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.
Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.
Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın bugzilla sitesi).
CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}