Tarayıcı geliştirici aracını kullanarak CSS nasıl uygulanır?

Sitenizi biraz CSS ile stillendirmenin yollarını mı arıyorsunuz? Bunu yapmanın farklı yolları var. Bu kılavuzda, yapabileceğiniz birkaç örnekle birlikte tarayıcı geliştirici aracını kullanarak CSS'yi nasıl uygulayacağınızı göstereceğiz.

Bir uygulama veya web sitesi geliştirirken, geliştiriciler işlerini yapmalarına yardımcı olan çok çeşitli araçlar kullanır. En popüler olanlardan biri tarayıcı geliştirici aracıdır. Onsuz, bir web sitesinde çalışmak çok daha karmaşık olurdu.

Çoğu tarayıcı kendi yerleşik geliştirici aracını sağlar. Çoğu benzerdir ancak birkaç farklı seçeneğe sahiptir. Kullanıcıların yaklaşık %66'sının Chrome kullandığını göz önünde bulundurarak, bu kılavuzda şu konulara odaklanacağız: Chrome geliştirici aracı. En eksiksiz olanlardan biridir ve performansı ve çeşitli özellikleri nedeniyle tarayıcılardan sıyrılmaktadır.

Tarayıcı geliştirici aracını kullanarak CSS'nin nasıl uygulanacağına geçmeden önce, önce Chrome geliştirici aracını ve onunla neler yapabileceğinizi öğrenelim.

NOT : Burada bazı kavramları açıklayacağız, ancak bu kılavuzu takip etmek için CSS ve nasıl çalıştığı hakkında temel bir anlayışa sahip olmanızı öneririz.

Chrome geliştirici aracı

İlk olarak, aracı Chrome'da açmanız gerekir. Bunun için 3 seçenek var:

• Anahtar kelimenizde F12'ye basın
• Ekranda herhangi bir yere sağ tıklayın ve İncele'yi seçin.
• Kullanıcı avatarınızın sağ üst köşesindeki üç nokta simgesine basın ve Diğer Araçlar > Geliştirici Aracı'na gidin

Bu üç seçenekten herhangi biri, şöyle görünmesi gereken DevTools'u açacaktır. Geliştirici aracınız biraz farklı görünebilir ancak öğeler aynı olacaktır.

Gördüğünüz gibi, birkaç sekme var, size web sitesinin HTML çıktısını gösteren Öğeler sekmesinde olduğunuzdan emin olun. Aracın, DevTools'u açtığınızda tarayıcıdaki etkin sekme olan geçerli pencereyle ilgili tüm bilgileri alacağını unutmayın.

Her biri tarayıcıda farklı bir sekmenin bilgilerini görüntüleyen, aynı anda birden fazla geliştirici aracı penceresi açabilirsiniz.

Tarayıcı geliştirici aracında bir HTML öğesi nasıl bulunur?

Araçtaki öğelere daha yakından bakarsanız, öğelerin çoğunu üzerlerine tıklayarak açabileceğinizi göreceksiniz. Bunun da ötesinde, diğer öğelerin içine yerleştirilmiş öğeler, üzerlerine geldiğinizde ön uçta vurgulanır.

Farklı öğelere bakarak HTML üst öğelerini görebilirsiniz. Her bir öğeyi bir tıklama ile açarak HTML yapısına dalabilirsiniz. Çoğu sitede, HTML kodu oldukça uzundur, bu nedenle belirli bir öğeyi bulmanız gerektiğinde sıkıcı olabilir. Daha da fazlası, aradığınız öğe büyük bir HTML üst öğeleri listesi içinde derinlemesine yuvalanmışsa.

Ancak, belirli bir öğeyi bulmanın çok daha kolay bir yolu var.

Belirli öğeleri bulma

Analiz etmek istediğiniz öğeye sağ tıklayın ve İncele öğesini seçin.

Denetçi açıldığında, o öğe seçilecek ve DevTools'da vurgulanmış olarak görünecektir.

Yukarıdaki ekran görüntülerinde görebileceğiniz gibi, bir logoya tıkladık, bu nedenle geliştirici aracındaki öğeyi incelediğimizde, logonun görüntüsü zaten seçili ve vurgulanmış durumda. Bu, web sitesinin tam HTML kaynak kodundaki öğenin derinliğini anlamamıza yardımcı olur.

Artık geliştirici aracını kullanarak belirli öğeleri nasıl seçeceğinizi bildiğinize göre, bir adım daha ileri gidelim ve biraz özel CSS ekleyelim.

CSS komut dosyasını canlı olarak düzenleme

Geliştirme aracı penceresinin sağ tarafına bakarsanız, seçtiğiniz öğeye uygulanan tüm CSS kurallarını mirasa göre sıralanmış olarak görürsünüz.

Kalıtım , CSS işlevselliğini tanımlayan ana CSS kavramlarından biridir. Ne olduğunu tam olarak anlamadıysanız endişelenmeyin, bir sonraki bölümde açıklayacağız.

Geliştirme aracına kendi CSS kurallarınızı uygulamak için, öğe stili bildiriminden hemen sonra buraya yazmanız veya yapıştırmanız gerekir:

Bu durumda, örneğimizi takip ederek, daha önce seçtiğimiz logonun genişliğini, arka plan rengini ve kenarlığını değiştirdik.

Ayrıca, komut dosyalarınızı element.style sarmalayıcıda yapmak yerine kenar çubuğundaki herhangi bir CSS kuralına ekleyebilirsiniz.

Tarayıcı geliştirici aracında CSS devralma

CSS kodunuzu bunlardan herhangi birine uygulayabiliyorsanız ve bu hiçbir fark yaratmıyorsa, tüm bu CSS kurallarına sahip olmanın ne anlamı olduğunu merak ediyor olabilirsiniz.

Daha önce de belirtildiği gibi, bunlar seçili öğeye uygulanan ve mirasa göre sıralanmış tüm CSS kurallarıdır.

Kalıtım kavramı, CSS'nin bir HTML belgesine nasıl uygulandığını açıklar . Temel olarak, belirli bir öğenin bir özelliği için hiçbir değer belirtilmediğinde ne olacağını kontrol eder.

Aşağıdaki ekran görüntüsüne daha yakından bakarsanız, kenar çubuğundaki tüm CSS seçicilerinin aynı öğeyi hedeflediğini göreceksiniz: ana bölümde seçtiğiniz öğe.

Aynı öğeye iki veya daha fazla kural uygularsanız, uygulanacak olan daha spesifik olanıdır. Bu, tanımı olmayan özellikler için geçerli olan devralma davranışını devre dışı bırakır.

Yukarıdaki ekran görüntüsünde, <body> öğesinin arka plan rengi özelliği aşağıdaki kuralla verilmiştir:

 body.custom-background {
arka plan rengi: #d8d7e2;
}

Bu, .custom-background sınıfını içeren daha spesifik bir seçiciye sahip olduğundan, <body> için geçerli olan tüm diğer kuralların üzerine yazar.

CSS kalıtımı hakkında daha fazla bilgi edinmek istiyorsanız bu belgelere göz atabilirsiniz.

Artık öğelerini daha iyi anladığınıza göre, tarayıcı geliştirici aracını kullanarak CSS'yi nasıl uygulayabileceğinizi görelim.

Tarayıcı geliştirici aracını kullanarak bir CSS komut dosyası nasıl uygulanır

Geliştirme aracıyla çalıştıktan ve CSS komut dosyanızı yazdıktan sonra, geliştirici aracından CSS kodunu kopyalamanız ve web sitenizin CSS dosyalarına eklemeniz gerekir. Bu bölümde, bunu adım adım nasıl yapacağınızı göstereceğiz.

1) CSS seçiciyi alın

İlk önce seçiciyi almalısın. Geliştirici aracını açın ve vurgulamak için düzenlemek istediğiniz HTML öğesini tıklayın. Ardından, vurgulanan öğeye sağ tıklayın ve Kopyala > CSS seçiciye gidin.

2) Seçiciyi hassaslaştırın

Yukarıdaki ekran görüntüsünde panoya kopyaladığımız CSS seçici şudur:

 .site-branding > div:nth-child(1) > span:nth-child(1) > img

Bazı durumlarda bu seçici çalışmayabilir, bu nedenle daha belirgin hale getirmek için hassaslaştırmanız gerekir. Örneğin, çok daha spesifik olan ve bir öncekinin üzerine yazacak olan aşağıdaki seçiciyi kullanabilirsiniz:

 div.site-branding > div.site-logo > span.custom-logo-link > img.custom-logo

3) CSS kuralını kopyalayın

Seçiciyi özelleştirdikten ve çalıştığını onayladıktan sonra, geliştirme aracının sağ kenar çubuğundan ihtiyacınız olan bildirimleri kopyalayın.

Bunu yapmak için geliştirme aracına eklediğiniz CSS kuralına sağ tıklayın ve Kuralı kopyala öğesini seçin.

4) Web sitenize CSS kodunuzu ekleyin

Son adım, tarayıcı geliştirme aracını kullanarak az önce oluşturduğunuz özel CSS kodunu, seçiciyi ve bildirimi bir araya getirerek web sitesi stili dosyalarınıza eklemektir.

Kurulumunuza bağlı olarak özel CSS'nizi sitenize dahil etmenin birkaç yolu olabilir. Birçok eklenti ve tema kendi CSS düzenleyici kutusunu sağlar ve ayrıca komut dosyalarını doğrudan temanın CSS dosyalarına ekleyebilirsiniz. Birkaç farklı seçeneğe bakalım.

4.1) Tema özelleştiricinin ek CSS düzenleyicisi

Tema özelleştiricinin Ek CSS düzenleyicisini kullanarak CSS uygulamak için basit bir yöntem. Bu, WordPress'in size özel CSS eklemeniz için varsayılan olarak sağladığı bir seçenektir ve tüm web sitelerinde bulunur.

CSS kodunuzu sitenize eklemek için kontrol panelinizde Görünüm > Özelleştir > Ek CSS'ye gidin. CSS kurallarınızı düzenleyiciye yapıştırın ve Yayınla'ya basın .

Bu yöntemin avantajı, herhangi bir ekstra araca ihtiyacınız olmaması ve kodun yayınlanmadan önce canlı bir önizlemesini görebilmenizdir.

4.2) Alt temanın CSS dosyası

Bir alt tema kullanıyorsanız, özel komut dosyalarını style.css dosyasına ekleyebilirsiniz. Çok fazla CSS kodunuz varsa bu iyi bir seçenektir.

Bunu yapmak için alt temanın style.css dosyasını açın ve CSS kurallarınızı buraya yapıştırın. Alt temanıza bağlı olarak dosyanın adı farklı olabilir veya başka dosyalar olabilir. Her durumda, dosyanın .css uzantısına sahip olduğundan ve doğru dosyayı düzenlediğinizden emin olun.

Alt temanızın WordPress dosyalarını düzenlemenin başka bir alternatifi, WordPress panosunun Görünüm sekmesi altındaki tema düzenleyiciyi kullanmaktır.

Buraya eklediğiniz CSS komut dosyaları, onları tema özelleştiriciye eklemekle aynı şekilde çalışır, ancak biraz daha iyi performans gösterebilirler.

Tarayıcı geliştirici aracında CSS dosyalarını kontrol edin

Önceki bölümde, WordPress sitenize CSS komut dosyalarını nasıl ekleyeceğinizi açıkladık. Tahmin edebileceğiniz gibi, geliştirici aracında gördüğünüz tüm CSS kuralları bir CSS dosyasından gelir. Bu dosyalar web sitesi tarafından dinamik olarak oluşturulabilir, sunucudan yüklenebilir veya istemci tarayıcısının önbelleğe alınmış bir dosyasından olabilir.

Daha yakından bakarsanız, bir CSS kuralı içeren dosyanın adının, kuraldan hemen sonra, geliştirme aracının CSS kenar çubuğunda görüntülendiğini görürsünüz.

Dosya adına ( style.css ) tıklarsanız, geliştirme aracının tüm aktif CSS dosyalarını ve içeriklerini göreceğiniz stil düzenleyici ekranına gidersiniz.

Bu, web sitenizde bulunan tüm CSS dosyalarını daha iyi anlamak için faydalı olabilir.

Çözüm

Sonuç olarak, çoğu tarayıcı, geliştiricilerin günlük olarak kullandığı çok güçlü geliştirici araçları içerir. Bu kılavuzda, tarayıcı geliştirici aracının ana özelliklerinden birini size gösterdik. Geliştirme aracında belirli HTML öğelerinin nasıl bulunacağını ve CSS'nin canlı olarak nasıl düzenleneceğini gördük. Ek olarak, CSS kalıtımını ve neden önemli olduğunu açıkladık.

Son olarak, tarayıcı geliştirici aracını kullanarak adım adım CSS komut dosyasını nasıl uygulayacağınızı ve sitenize eklemenin farklı yollarını gösterdik.

Bu öğreticiyi ilginç bulduysanız, sosyal medyada arkadaşlarınızla paylaşın. Sitenizi geliştirmeye yönelik daha faydalı kılavuzlar için aşağıdaki makalelere göz atın:

• Divi menüsü CSS ile nasıl özelleştirilir
• PHP ve CSS ile WooCommerce Mağaza Sayfası nasıl düzenlenir