CSS özellikleri referansı

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

CSS'yi görüntüleme ve değiştirme ile ilgili Chrome Geliştirici Araçları özelliklerinin yer aldığı bu kapsamlı referansta yeni iş akışlarını keşfedin.

Temel bilgileri öğrenmek için CSS'yi görüntüleme ve değiştirme bölümüne bakın.

Öğe seçin

Geliştirici Araçları'nın Öğeler paneli, bir öğenin CSS'sini tek seferde görüntülemenize veya değiştirmenize olanak tanır.

Ekran görüntüsünde, DOM ağacında mavi renkle vurgulanan h1 öğesi seçili öğedir. Sağ tarafta, öğenin stilleri Stiller sekmesinde gösterilir. Solda, öğe görüntü alanında vurgulanır ancak bunun tek nedeni farenin DOM ağacında öğenin üzerine gelmesidir.

Eğitim için Bir öğenin CSS'sini görüntüleme başlıklı makaleyi inceleyin.

Öğe seçmenin birçok yolu vardır:

• Görüntü alanınızda öğeyi sağ tıklayın ve İncele'yi seçin.
• Geliştirici Araçları'nda Öğe seç'i tıklayın veya Command+Üst Karakter+C (Mac) ya da Control+Üst Karakter+C (Windows, Linux) tuşlarına basın ve ardından görüntü alanındaki öğeyi tıklayın.
• Geliştirici Araçları'nda DOM Ağacı'ndaki öğeyi tıklayın.
• Geliştirici Araçları'nda, Konsol'da document.querySelector('p') gibi bir sorgu çalıştırın, sonucu sağ tıklayın ve ardından Öğeler panelinde göster'i seçin.

CSS'yi görüntüleme

CSS kurallarını görüntülemek ve CSS sorunlarını teşhis etmek için Öğeler > Stiller ve Hesaplanmış sekmelerini kullanın.

Bağlantılarla gezinme

Stiller sekmesinde, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli yerlere giden bağlantılar gösterilir:

• CSS kurallarının yanında, stil sayfalarına ve CSS kaynaklarına. Bu tür bağlantılar Kaynaklar panelini açar. Stil sayfası küçültülmüşse Küçültülmüş dosyayı okunabilir hale getirme başlıklı makaleyi inceleyin.
• ...öğesinden devralındı bölümlerinde üst öğelere.
• var() çağrılarında, özel nitelik bildirimlerine.
• animation kısaltma özelliklerinde @keyframes.
• Belge ipuçlarındaki Daha fazla bilgi bağlantıları.
• Ve daha fazlası.

Bunlardan bazıları aşağıda vurgulanmıştır:

Bağlantılar farklı şekilde biçimlendirilebilir. Bir öğenin bağlantı olup olmadığından emin değilseniz tıklayarak öğrenebilirsiniz.

CSS belgeleri, özgüllük ve özel nitelik değerlerini içeren ipuçlarını görüntüleme

Öğeler > Stiller'i tıkladığınızda, fareyle belirli öğelerin üzerine geldiğinizde faydalı bilgiler içeren ipuçları gösterilir.

CSS belgelerini görüntüleme

Kısa bir CSS açıklaması içeren ipucunu görmek için Stiller sekmesinde mülk adının üzerine gelin.

Not: Geliştirici Araçları, ipuçlarının açıklamalarını VS Code Özel Verileri'nden alır.

Bu özellik hakkında MDN CSS Referansı'na gitmek için Daha fazla bilgi'yi tıklayın.

İpuçlarını kapatmak için Gösterme'yi işaretleyin.

Bunları tekrar açmak için Ayarlar > Tercihler > Öğeler > CSS dokümanları ipucunu göster'i işaretleyin.

Seçici özgüllüğünü görüntüleme

Stiller sekmesindeki bir seçicinin (iç içe yerleştirilmiş CSS kurallarındaki üst seçiciler, devralınan iç içe yerleştirilmiş kurallar ve @nested-declarations kuralları dahil) üzerine gelerek özgüllük ağırlığını içeren bir ipucu görüntüleyin ve görüntü alanındaki eşleşen öğeleri vurgulayın.

Özel özelliklerin değerlerini görüntüleme

Değerini bir ipucunda görmek için fareyle --custom-property simgesinin üzerine gelin.

Geçersiz, geçersiz kılınmış, etkin olmayan ve diğer CSS'leri görüntüleme

Stiller sekmesi, birçok CSS sorunu türünü tanır ve bunları farklı şekillerde vurgular.

Stiller sekmesinde CSS'yi anlama başlıklı makaleyi inceleyin.

Yalnızca bir öğeye uygulanan CSS'yi görüntüleme

Stiller sekmesi, geçersiz kılınan bildirimler de dahil olmak üzere bir öğeye uygulanan tüm kuralları gösterir. Geçersiz kılınan bildirimlerle ilgilenmediğinizde, yalnızca bir öğeye gerçekten uygulanan CSS'yi salt görüntülemek için Hesaplanmış sekmesini kullanın.

1. Bir öğe seçin.
2. Öğeler panelindeki Hesaplanan sekmesine gidin.

Tüm özellikleri görmek için Tümünü Göster onay kutusunu işaretleyin.

Hesaplanan sekmesinde CSS'yi anlama başlıklı makaleyi inceleyin.

CSS özelliklerini alfabetik sıralama olarak görüntüleme

Hesaplanmış sekmesini kullanın. Yalnızca bir öğeye uygulanan CSS'yi salt görüntüleme bölümüne bakın.

Devralınan CSS özelliklerini görüntüleme

Hesaplanan sekmesindeki Tümünü Göster onay kutusunu işaretleyin. Yalnızca bir öğeye gerçekten uygulanan CSS'yi salt görüntüleme.

Alternatif olarak, Stiller sekmesini kaydırıp Inherited from <element_name> adlı bölümleri bulun.

CSS @ kurallarını görüntüleme

At-rules, CSS davranışını kontrol etmenizi sağlayan CSS ifadeleridir. Öğeler > Stiller bölümünde aşağıdaki @ kuralları özel bölümlerde gösterilir:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

@property @ kurallarını görüntüleme

@property CSS kuralı, CSS özel niteliklerini açıkça tanımlamanıza ve herhangi bir JavaScript çalıştırmadan bunları bir stil sayfasında kaydetmenize olanak tanır.

Stiller sekmesinde bu tür bir özelliğin adının üzerine gelerek özelliğin değerini, tanımlayıcılarını ve Stiller sekmesinin alt kısmındaki daraltılabilir @property bölümünde kaydının bağlantısını içeren bir ipucu görebilirsiniz.

Bir @property kuralını düzenlemek için adını veya değerini çift tıklayın.

@supports @ kurallarını görüntüleme

Stiller sekmesi, bir öğeye uygulanmışsa @supports CSS at kurallarını gösterir. Örneğin, aşağıdaki öğeyi inceleyin:

Tarayıcınız lab() işlevini destekliyorsa öğe yeşil, aksi takdirde mor renkte olur.

Not: Bu makalenin yazıldığı tarih itibarıyla yalnızca Safari CIELAB renk uzayını desteklemektedir.

@scope @ kurallarını görüntüleme

Stiller sekmesi, bir öğeye uygulanmışsa CSS @scope at-kurallarını gösterir.

Yeni @scope kuralı, CSS Basamaklı ve Devralma Seviye 6 spesifikasyonunun bir parçasıdır. Bu kurallar, CSS stillerini kapsamlandırmanıza (diğer bir deyişle, stilleri belirli öğelere açıkça uygulamanıza) olanak tanır.

Not: @scope kural özelliği deneyseldir. Özelliği test etmek için chrome://flags/#enable-experimental-web-platform-features'da Deneysel Web Platformu özellikleri işaretini etkinleştirin. Aksi takdirde sonraki önizleme çalışmaz.

Aşağıdaki önizlemede @scope kuralını görüntüleyin:

1. Önizlemede karttaki metni inceleyin.
2. Stiller sekmesinde @scope kuralını bulun.

Bu örnekte, @scope kuralı, card sınıfına sahip öğelerin içindeki tüm <p> öğeleri için genel CSS background-color beyanını geçersiz kılar.

@scope kuralını düzenlemek için kuralı çift tıklayın.

@font-palette-values @ kurallarını görüntüleme

@font-palette-values CSS at-kuralı, font-palette özelliğinin varsayılan değerlerini özelleştirmenize olanak tanır. Öğeler > Stiller, bu kuralı özel bir bölümde gösterir.

Sonraki önizlemede @font-palette-values bölümünü inceleyin:

1. Önizlemede metnin ikinci satırını inceleyin.
2. Stiller'de @font-palette-values bölümünü bulun.

Bu örnekte, --New yazı tipi paleti değerleri, renkli yazı tipinin varsayılan değerlerini geçersiz kılar.

Özel değerlerinizi düzenlemek için çift tıklayın.

@position-try @ kuralını görüntüle

position-try-options özelliğiyle birlikte @position-try CSS kuralı, öğeler için alternatif bağlantı konumları tanımlamanıza olanak tanır. Daha fazla bilgi edinmek için CSS sabitleme konumu API'sine giriş başlıklı makaleyi inceleyin.

Öğeler > Stiller, aşağıdakileri çözer ve bağlar:

• position-try-options özellik değerlerini özel bir @position-try --name bölümüne taşıyın.
• position-anchor özellik değerleri ve anchor() bağımsız değişkenleri, popovertarget özelliklerine sahip ilgili öğelere eklenir.

Bir sonraki önizlemede position-try-options değerlerini ve @position-try bölümlerini inceleyin:

popover ile sabit reklam kullanma demosu

1. Önizlemede alt menüyü açın. Diğer bir deyişle, HESABINIZ'ı ve ardından VİTRİN'i tıklayın.
2. Önizlemede id="submenu" ile öğeyi inceleyin.
3. Stiller bölümünde position-try-options özelliğini bulup --bottom değerini tıklayın. Stiller sekmesi sizi ilgili @position-try bölümüne yönlendirir.
4. position-anchor değer bağlantısını veya aynı anchor() bağımsız değişkenleri tıklayın. Öğeler paneli, ilgili popovertarget özelliğine sahip öğeyi seçer ve Stiller sekmesinde öğenin CSS'si gösterilir.

Değerleri düzenlemek için çift tıklayın.

Bir öğenin kutu modelini görüntüleme

Bir öğenin kutu modelini görüntülemek için Stiller sekmesine gidin ve işlem çubuğunda Kenar çubuğunu göster düğmesini tıklayın.

Bir değeri değiştirmek için çift tıklayın.

Bir öğenin CSS'sini arama ve filtreleme

Belirli CSS seçicileri (iç içe yerleştirilmiş kurallardaki üst seçiciler dahil), özellikleri veya değerleri aramak için Stiller ve Hesaplanan sekmelerindeki Filtre kutusunu kullanın.

Hesaplanan sekmesinde devralınan özellikleri de aramak için Tümünü Göster onay kutusunu işaretleyin.

Hesaplanan sekmesinde gezinmek için Grup'u işaretleyerek filtrelenmiş özellikleri daraltılabilir kategoriler halinde gruplandırın.

Odaklanılmış sayfa emülasyonu

Odak noktasını sayfadan Geliştirici Araçları'na geçirirseniz odak tarafından tetiklenen bazı yer paylaşımı öğeleri otomatik olarak gizlenir. Örneğin, açılır listeler, menüler veya tarih seçiciler. check_box Odaklanılmış sayfa emülasyonu seçeneği, bu tür öğelerde odaklanılmış gibi hata ayıklamanıza olanak tanır.

Dikkat: Bu seçenek etkinleştirildiğinde document.visibilityState, visible olarak ayarlanır ve visibilitychange etkinliği tetiklenmez. Daha fazla bilgi için Page Visibility API başlıklı makaleyi inceleyin.

Bu demo sayfasında odaklanılmış sayfa emülasyonu yapmayı deneyin:

1. Giriş öğesine odaklanın. Altında başka bir öğe görünür.
2. Geliştirici Araçları'nı açın. Artık sayfa yerine Geliştirici Araçları penceresi odaklandığından öğe tekrar kaybolur.
3. Öğeler > Stiller'de :hov'u tıklayın, check_box Odaklanılmış bir sayfayı taklit et'i işaretleyin ve giriş öğesinin seçili olduğundan emin olun. Artık altındaki öğeyi inceleyebilirsiniz.

Aynı seçeneği Oluşturma panelinde de bulabilirsiniz.

Bir öğeyi dondurmanın diğer yollarını öğrenmek için Ekranı dondurma ve kaybolan öğeleri inceleme başlıklı makaleyi inceleyin.

Sözde sınıfı açma/kapatma

Sözde sınıfı açmak veya kapatmak için:

1. Bir öğe seçin.
2. Öğeler panelinde Stiller sekmesine gidin.
3. :hov simgesini tıklayın.
4. Etkinleştirmek istediğiniz sözde sınıfı işaretleyin.

Bu örnekte, öğenin üzerine fareyle gelinmese bile Geliştirici Araçları'nın background-color bildirimini öğeye uyguladığını görebilirsiniz.

Stiller sekmesinde tüm öğeler için aşağıdaki sözde sınıflar gösterilir:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Ayrıca, bazı öğelerin kendi sözde sınıfları olabilir. Böyle bir öğeyi seçtiğinizde Stiller sekmesinde, genişletebileceğiniz ve öğeye özgü sözde sınıfları etkinleştirebileceğiniz Belirli bir öğe durumunu zorunlu kıl bölümü gösterilir.

Etkileşimli bir eğitim için Sınıfa sözde durum ekleme başlıklı makaleyi inceleyin.

Devralınan vurgu sözde öğelerini görüntüleme

Sözde öğeler, öğelerin belirli bölümlerini biçimlendirmenize olanak tanır. Vurgulama sözde öğeleri, "seçili" durumuna sahip doküman bölümleridir ve bu durumu kullanıcıya belirtmek için "vurgulanmış" olarak biçimlendirilir. Örneğin, ::selection, ::spelling-error, ::grammar-error ve ::highlight gibi sözde öğeler.

Spesifikasyonda belirtildiği gibi, birden fazla stil çakıştığında basamaklandırma, kazanan stili belirler.

Not: Bu özelliği etkinleştirmek için Chrome'u --enable-blink-features=HighlightInheritance işaretiyle çalıştırın.

Kuralların devralınmasını ve önceliğini daha iyi anlamak için devralınan vurgu sözde öğelerini görüntüleyebilirsiniz:

1. Aşağıdaki metni inceleyin.

   Üst öğemin vurgulama sözde öğesinin stilini devraldım. Beni seçin.

2. Yukarıdaki metnin bir bölümünü seçin.

3. Stiller sekmesinde aşağı kaydırarak Inherited from ::selection pseudo of... bölümünü bulun.

Basamaklı katmanları görüntüleme

Basamaklı katmanlar, stil özgüllüğü çakışmalarını önlemek için CSS dosyalarınızın daha açık bir şekilde kontrol edilmesini sağlar. Bu özellik, büyük kod tabanları, tasarım sistemleri ve uygulamalarda üçüncü taraf stillerini yönetirken faydalıdır.

Basamaklı katmanları görüntülemek için sonraki öğeyi inceleyin ve Öğeler > Stiller'i açın.

Stiller sekmesinde, 3 basamaklı katmanı ve stillerini (page, component ve base) görüntüleyin.

Katman sırasını görüntülemek için katman adını veya CSS katmanları görünümünü aç/kapat düğmesini tıklayın.

page katmanı en yüksek özelliğe sahiptir. Bu nedenle öğenin arka planı yeşildir.

Bir sayfayı yazdırma modunda görüntüleme

Bir sayfayı yazdırma modunda görüntülemek için:

1. Komut Menüsü'nü açın.
2. Rendering yazmaya başlayın ve Show Rendering simgesini seçin.
3. CSS Medyasının Benzetimini Yap açılır menüsünde yazdır'ı seçin.

Kullanılan ve kullanılmayan CSS'yi Kapsam sekmesinde görüntüleme

Kapsam sekmesi, bir sayfanın gerçekten hangi CSS'yi kullandığını gösterir.

1. Geliştirici Araçları'na odaklanmışken Command+üst karakter+P (Mac) veya Ctrl+üst karakter+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın.

2. Yazmaya başlayın coverage.

   

3. Kapsamı Göster'i seçin. Kapsam sekmesi görünür.

   

4. Yeniden yükle'yi tıklayın. Sayfa yeniden yüklenir ve Kapsam sekmesinde, tarayıcının yüklediği her dosyadan ne kadar CSS (ve JavaScript) kullanıldığına dair genel bir bakış sunulur.

   

   Yeşil, kullanılan CSS'yi temsil eder. Kırmızı, kullanılmayan CSS'yi gösterir.

5. Yukarıdaki önizlemede hangi CSS'yi kullandığını satır satır görmek için bir CSS dosyasını tıklayın.

   

   Ekran görüntüsünde, devsite-google-blue.css dosyasının 55-57 ve 65-67. satırları kullanılmamış, 59-63. satırları ise kullanılmıştır.

Yazdırma önizleme moduna girmeye zorla

Geliştirici Araçları'nı Baskı Önizleme Moduna Zorlama başlıklı makaleyi inceleyin.

CSS'yi kopyalama

Stiller sekmesindeki tek bir açılır menüden ayrı CSS kurallarını, bildirimlerini, özelliklerini ve değerlerini kopyalayabilirsiniz.

Ayrıca CSS özelliklerini JavaScript söz diziminde kopyalayabilirsiniz. Bu seçenek, CSS-in-JS kitaplıklarını kullanıyorsanız kullanışlıdır.

CSS'yi kopyalamak için:

1. Bir öğe seçin.
2. Öğeler > Stiller sekmesinde bir CSS özelliğini sağ tıklayın.

3. Açılır menüden aşağıdaki seçeneklerden birini belirleyin:

   • Beyanı kopyalayın. Özelliği ve değerini CSS söz diziminde kopyalar: css property: value;
   • Mülkü kopyala. Yalnızca property adını kopyalar.
   • Değeri kopyala. Yalnızca value kopyalanır.
   • Kuralı kopyala. CSS kuralının tamamını kopyalar: css selector[, selector] { property: value; property: value; ... }
   • Beyanı JS olarak kopyala. Özelliği ve değerini JavaScript söz diziminde kopyalar: js propertyInCamelCase: 'value'
   • Tüm tanımlamaları kopyala. CSS kuralındaki tüm özellikleri ve değerlerini kopyalar: css property: value; property: value; ...

   • Tüm bildirimleri JS olarak kopyalayın. Tüm özellikleri ve değerlerini JavaScript söz diziminde kopyalar: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Tüm CSS değişikliklerini kopyalayın. Stiller sekmesinde yaptığınız değişiklikleri tüm bildirimlere kopyalar.

   • Hesaplanan değeri görüntüleme. Sizi Hesaplanan sekmesine yönlendirir.

CSS'yi değiştirme

Bu bölümde, Öğeler > Stiller'de CSS'yi değiştirebileceğiniz tüm yöntemler listelenir.

Ayrıca şunları yapabilirsiniz:

• Sayfa yüklemeleri arasında CSS'yi geçersiz kılma.
• Değiştirilen CSS'yi bir çalışma alanındaki yerel kaynaklarınıza kaydetme

Kod tamamlama ile CSS'yi değiştirme

Tam söz dizimini hatırlamadan CSS özelliklerinin daha karmaşık kombinasyonlarını (ör. gradyanlar veya kutu gölgeleri) denemek ya da birden fazla ilgili özelliğe dayalı olarak ızgara ve esnek düzenleri hızlıca oluşturmak için bir CSS özelliği yazmaya başlayıp kod tamamlama özelliğini kullanabilirsiniz.

Bir öğeye CSS bildirimi ekleme

Bildirimlerin sırası, bir öğenin nasıl stillendirileceğini etkilediğinden bildirimleri farklı şekillerde ekleyebilirsiniz:

• Satır içi beyan ekleyin. Öğenin HTML'sine style özelliği eklemeye eşdeğerdir.
• Stil kuralına bildirim ekleme

Hangi iş akışını kullanmalısınız? Çoğu senaryoda satır içi beyan iş akışını kullanmak isteyebilirsiniz. Satır içi bildirimler, harici olanlara göre daha yüksek özgüllüğe sahiptir. Bu nedenle, satır içi iş akışı, değişikliklerin öğede beklendiği gibi etkili olmasını sağlar. Özgüllük hakkında daha fazla bilgi için Seçici Türleri bölümüne bakın.

Bir öğenin stillerinde hata ayıklıyorsanız ve bir bildirimin farklı yerlerde tanımlandığında ne olacağını özellikle test etmeniz gerekiyorsa diğer iş akışını kullanın.

Satır içi beyan ekleme

Satır içi beyan eklemek için:

1. Bir öğe seçin.
2. Stiller sekmesinde, element.style bölümünün köşeli parantezleri arasına tıklayın. İmleç odaklanır ve metin girmenize olanak tanır.
3. Bir mülk adı girip Enter tuşuna basın.

4. Bu özellik için geçerli bir değer girin ve Enter tuşuna basın. DOM Ağacı'nda, öğeye style özelliğinin eklendiğini görebilirsiniz.

   

   Ekran görüntüsünde, seçili öğeye margin-top ve background-color özellikleri uygulanmıştır. DOM Ağacı'nda, bildirimlerin öğenin style özelliğine yansıtıldığını görebilirsiniz.

Stil kuralına bildirim ekleme

Mevcut bir stil kuralına bildirim eklemek için:

1. Bir öğe seçin.
2. Stiller sekmesinde, bildirimi eklemek istediğiniz stil kuralının parantezleri arasına tıklayın. İmleç odaklanır ve metin girmenize olanak tanır.
3. Bir mülk adı girip Enter tuşuna basın.
4. Bu özellik için geçerli bir değer girin ve Enter tuşuna basın.

Ekran görüntüsünde, bir stil kuralı yeni border-bottom-style:groove beyanını alır.

Bildirim adını veya değerini değiştirme

Değiştirmek için bir bildirimin adını veya değerini çift tıklayın. Bir değeri 0, 1, 1, 10 veya 100 birim artırmak ya da azaltmak için klavye kısayollarını kullanma hakkında bilgi edinmek istiyorsanız Numaralandırılabilir değerleri klavye kısayollarıyla değiştirme başlıklı makaleyi inceleyin.

Klavye kısayollarıyla numaralandırılabilir değerleri değiştirme

Bir bildirimin numaralandırılabilir değerini (ör. font-size) düzenlerken değeri sabit bir miktarda artırmak için aşağıdaki klavye kısayollarını kullanabilirsiniz:

• 0,1 artırmak için Option+Yukarı (Mac) veya Alt+Yukarı (Windows, Linux).
• Değeri 1 veya mevcut değer -1 ile 1 arasındaysa 0, 1 artırmak için Yukarı
• 10 artırmak için Üst karakter+Yukarı tuşlarına basın.
• Değeri 100 artırmak için üst karakter+command+yukarı ok (Mac) veya control+üst karakter+Page Up (Windows, Linux) tuşlarına basın.

Azaltma da kullanılabilir. Daha önce bahsedilen Yukarı ifadesinin her örneğini Aşağı ile değiştirmeniz yeterlidir.

Uzunluk değerlerini değiştirme

Desteği sonlandırıldı: Bu özelliğin desteği Chrome 123'te sonlandırıldı. Geçici olarak tekrar etkinleştirmek için Ayarlar Ayarlar > Denemeler > check_box Stiller sekmesinde CSS <length> yazma aracını kullanımdan kaldır'ı temizleyin. crbug/1522657 adresinden geri bildirim gönderebilirsiniz.

Genişlik, yükseklik, dolgu, kenar boşluğu veya kenarlık gibi uzunluk içeren tüm özellikleri değiştirmek için işaretçinizi kullanabilirsiniz.

Uzunluk birimini değiştirmek için:

1. Fare imlecini birim adının üzerine getirin ve adın altının çizildiğini fark edin.

2. Açılır menüden bir birim seçmek için birim adını tıklayın.

Uzunluk değerini değiştirmek için:

1. Fare imlecini birim değerinin üzerine getirin ve imlecin yatay çift başlı oka dönüştüğünü görün.

2. Değeri artırmak veya azaltmak için yatay olarak sürükleyin.

Değeri 10 artırmak için sürüklerken Üst Karakter tuşunu basılı tutun.

Bir öğeye sınıf ekleme

Bir öğeye sınıf eklemek için:

1. DOM ağacında öğeyi seçin.
2. .cls dosyasını tıklayın.
3. Yeni Sınıf Ekle kutusuna sınıfın adını girin.
4. Enter tuşuna basın.

Açık ve koyu tema tercihlerini taklit etme ve otomatik koyu modu etkinleştirme

Otomatik koyu modu açmak veya kullanıcının açık ya da koyu tema tercihini taklit etmek için:

1. Öğeler > Stiller sekmesinde Genel oluşturma emülasyonlarını aç/kapat'ı tıklayın.

2. Açılır listeden aşağıdakilerden birini seçin:

   • prefers-color-scheme: light. Kullanıcının açık temayı tercih ettiğini gösterir.
   • prefers-color-scheme: dark. Kullanıcının koyu temayı tercih ettiğini gösterir.
   • Otomatik koyu mod. Uygulamamış olsanız bile sayfanızı koyu modda gösterir. Ayrıca prefers-color-scheme değerini otomatik olarak dark şeklinde ayarlar.

Bu açılır menü, Oluşturma sekmesinin CSS medya özelliğini taklit et prefers-color-scheme ve Otomatik koyu modu etkinleştir seçenekleri için bir kısayoldur.

Sınıfı açma/kapatma

Bir öğede sınıfı etkinleştirmek veya devre dışı bırakmak için:

1. DOM ağacında öğeyi seçin.
2. Öğe Sınıfları bölümünü açın. Öğeye sınıf ekleme başlıklı makaleyi inceleyin. Yeni Sınıf Ekle kutusunun altında, bu öğeye uygulanan tüm sınıflar yer alır.
3. Etkinleştirmek veya devre dışı bırakmak istediğiniz sınıfın yanındaki onay kutusunu işaretleyin.

Stil kuralı ekleme

Yeni bir stil kuralı eklemek için:

1. Bir öğe seçin.
2. Yeni Stil Kuralı'nı tıklayın . Geliştirici Araçları, element.style kuralının altına yeni bir kural ekler.

Ekran görüntüsünde, Geliştirici Araçları Yeni Stil Kuralı'nı tıkladıktan sonra h1.devsite-page-title stil kuralını ekler.

Kural eklenecek stil sayfasını seçin.

Yeni bir stil kuralı eklerken, stil kuralının hangi stil sayfasına ekleneceğini seçmek için Yeni Stil Kuralı'nı tıklayıp basılı tutun.

Beyanı açma/kapatma

Tek bir beyanı açmak veya kapatmak için:

1. Bir öğe seçin.
2. Stiller sekmesinde, beyanı tanımlayan kuralın üzerine gelin. Her beyanın yanında onay kutuları görünür.
3. Beyanın yanındaki onay kutusunu işaretleyin veya temizleyin. Bir bildirimi temizlediğinizde DevTools, artık etkin olmadığını belirtmek için bildirimin üzerini çizer.

Ekran görüntüsünde, seçili öğenin color özelliği devre dışı bırakılmış.

Animasyon sırasında ::view-transition sözde öğelerini düzenleme

Animasyonlar bölümündeki ilgili kısma bakın.

Daha fazla bilgi için View Transitions API ile sorunsuz ve basit geçişler başlıklı makaleyi inceleyin.

Izgara Düzenleyici ile ızgara öğelerini ve içeriklerini hizalama

CSS ızgarasını inceleme bölümündeki ilgili bölüme bakın.

Renk seçiciyle renkleri değiştirme

Renk seçiciyle HD ve HD olmayan renkleri inceleme ve hatalarını ayıklama başlıklı makaleyi inceleyin.

Açı saatiyle açı değerini değiştirme

Angle Clock, CSS özelliği değerlerindeki <angle> değerlerini değiştirmek için bir GUI sağlar.

Açı Saati'ni açmak için:

1. Açı bildirimi olan bir öğe seçin.

2. Stiller sekmesinde, değiştirmek istediğiniz transform veya background bildirimini bulun. Açı değerinin yanındaki Açı Önizleme kutusunu tıklayın.

   

   -5deg ve 0.25turn'nin solundaki küçük saatler, açı önizlemeleridir.

3. Açı Saati'ni açmak için önizlemeyi tıklayın.

   

4. Açı Saati dairesini tıklayarak açı değerini değiştirin veya fareyle kaydırarak açı değerini 1 artırın / azaltın.

5. Açı değerini değiştirmek için daha fazla klavye kısayolu vardır. Stiller bölmesi klavye kısayolları bölümünde daha fazla bilgi edinebilirsiniz.

Gölge düzenleyici ile kutu ve metin gölgelerini değiştirme

Shadow Editor, text-shadow ve box-shadow CSS bildirimlerini değiştirmek için bir GUI sağlar.

Gölge Düzenleyici ile gölgeleri değiştirmek için:

1. Gölge bildirimi olan bir öğe seçin. Örneğin, sonraki öğeyi seçin.

2. Stiller sekmesinde, text-shadow veya box-shadow beyanının yanında bir gölge simgesi bulun.

   

3. Gölge düzenleyiciyi açmak için gölge simgesini tıklayın.

   

4. Gölge özelliklerini değiştirme:

   • Tür (yalnızca box-shadow için). Dış veya İç'i seçin.
   • X ve Y ofsetleri. Mavi noktayı sürükleyin veya değerleri belirtin.
   • Bulanıklaştırma Kaydırma çubuğunu sürükleyin veya bir değer belirtin.
   • Dağılım (yalnızca box-shadow için). Kaydırma çubuğunu sürükleyin veya bir değer belirtin.

5. Öğeye uygulanan değişiklikleri inceleyin.

Yumuşatma düzenleyici ile animasyon ve geçiş zamanlamalarını düzenleme

Yumuşatma Düzenleyici, transition-timing-function ve animation-timing-function değerlerini değiştirmek için bir GUI sağlar.

Yumuşak Geçiş Düzenleyici'yi açmak için:

1. Bu sayfadaki <body> öğesi gibi zamanlama işlevi bildirimi olan bir öğeyi seçin.
2. Stiller sekmesinde transition-timing-function, animation-timing-function beyanlarının veya transition kısaltılmış özelliğinin yanındaki mor simgesini bulun.
3. Yumuşak Geçiş Düzenleyici'yi açmak için simgeyi tıklayın:

Zamanlamaları ayarlamak için hazır ayarları kullanma

Zamanlamaları tek bir tıklamayla ayarlamak için Yumuşak Geçiş Düzenleyici'deki hazır ayarları kullanın:

1. Yumuşak Geçiş Düzenleyici'de anahtar kelime değeri ayarlamak için seçici düğmelerinden birini tıklayın:
   • doğrusal
   • ease-in-out
   • ease-in
   • ease-out

2. Hazır ayar değiştiricide, aşağıdaki hazır ayarlardan birini seçmek için veya düğmelerini tıklayın:

   • Doğrusal hazır ayarlar: elastic, bounce veya emphasized.
   • Kübik Bezier hazır ayarları:

Zamanlama anahtar kelimesi	Ön ayarlı	Kübik Bezier
yumuşak giriş çıkış	Giriş Çıkış, Sinüs	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Giriş Çıkış, İkinci Dereceden	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Giriş Çıkış, Kübik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Hızlı Çıkış, Yavaş Giriş	cubic-bezier(0.4, 0, 0.2, 1)
	İçeri Dışarı, Geri	cubic-bezier(0.68, -0.55, 0.27, 1.55)
yumuşak giriş	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	İçeri, İkinci Dereceden	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Hızlı Çıkış, Doğrusal Giriş	cubic-bezier(0.4, 0, 1, 1)
yumuşak çıkış	Çıkış, Sinüs	cubic-bezier(0.39, 0.58, 0.57, 1)
	Çıkış, Karesel	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Çıkış, Kübik	cubic-bezier(0.22, 0.61, 0.36, 1)
	Doğrusal Çıkış, Yavaş Giriş	cubic-bezier(0, 0, 0.2, 1)
	Gidiş, Dönüş	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Özel zamanlamaları yapılandırma

Zamanlama işlevleri için özel değerler ayarlamak üzere çizgilerdeki kontrol noktalarını kullanın:

• Doğrusal fonksiyonlarda, denetim noktası eklemek için çizginin herhangi bir yerini tıklayın ve sürükleyin. Noktayı kaldırmak için çift tıklayın.

  

• Kübik Bezier işlevleri için kontrol noktalarından birini sürükleyin.

  

Herhangi bir değişiklik, düzenleyicinin üst kısmındaki Önizleme bölümünde top animasyonunu tetikler.

(Deneysel) CSS değişikliklerini kopyalama

Not: Bu deneysel özelliği etkinleştirmek için Ayarlar > Denemeler bölümünde Stiller sekmesindeki CSS değişikliklerini senkronize et'i işaretleyin ve Geliştirici Araçları'nı yeniden yükleyin.

Bu deneme etkinleştirildiğinde Stiller sekmesi, CSS değişikliklerinizi yeşil renkle vurgular.

Tek bir CSS bildirimi değişikliğini kopyalamak için fareyle vurgulanan bildirimin üzerine gelip Kopyala düğmesini tıklayın.

Tüm CSS değişikliklerini bildirimler arasında tek seferde kopyalamak için herhangi bir bildirimi sağ tıklayıp Tüm CSS değişikliklerini kopyala'yı seçin.

Ayrıca, Değişiklikler sekmesinde yaptığınız değişiklikleri izleyebilirsiniz.