CSS özellikleri referansı

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

CSS'yi görüntüleme ve değiştirmeyle ilgili Chrome Geliştirme Araçları özelliklerinin kapsamlı bir referansı olan bu makalede yeni iş akışlarını keşfedin.

Temel bilgileri öğrenmek için CSS'yi görüntüleme ve değiştirme başlıklı makaleyi inceleyin.

Öğe seçin

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

Ekran görüntüsünde, DOM Ağacında maviyle vurgulanan h1 öğesi seçili öğedir. Öğenin stilleri Stiller sekmesinde gösterilir. Sol tarafta, öğe yalnızca fare DOM Ağacı'nda öğenin üzerine geldiği için görüntü alanında vurgulanmıştır.

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.
• DevTools'da Bir öğe seçin'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, Konsolda 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 Hesaplanan sekmelerini kullanın.

Bağlantılarla gezinme

Stiller sekmesinde, çeşitli yerlerdeki diğer çeşitli yerlere bağlantılar gösterilir. Örneğin:

• CSS kurallarının yanındaki stil sayfalarına ve CSS kaynaklarına gidin. Bu tür bağlantılar Kaynaklar panelini açar. Stil sayfası sıkıştırılmışsa Sıkıştırılmış bir dosyayı okunabilir hale getirme başlıklı makaleyi inceleyin.
• ...öğesinden devralındı bölümlerinde üst öğelere.
• var() çağrılarında özel mülk tanımlarına.
• animation kısayol özelliklerinde @keyframes olarak değiştirilir.
• Doküman ipuçlarındaki Daha fazla bilgi bağlantıları.
• Ve daha fazlası.

Bunlardan bazıları aşağıda belirtilmiştir:

Bağlantıların stili farklı olabilir. Bir şeyin bağlantı olup olmadığından emin değilseniz öğrenmek için bağlantıyı tıklamayı deneyin.

CSS dokümanları, spesifiklik ve özel özellik değerlerini içeren ipuçlarını görüntüleyin

Öğeler > Stiller, belirli öğelerin üzerine geldiğinizde faydalı bilgiler içeren ipuçları gösterir.

CSS dokümanlarını görüntüleme

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

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

Bu mülkle ilgili 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 etkinleştirmek için Ayarlar > Tercihler > Öğeler > CSS dokümanlarını ipucu olarak göster'i işaretleyin.

Seçici belirginliğini göster

Spesifikiyet ağırlığını içeren bir ipucu görmek için seçicinin üzerine gelin.

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

Fareyle bir --custom-property öğesinin üzerine gelerek değerini bir ipucu olarak görebilirsiniz.

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

Stiller sekmesi, birçok CSS sorununu tanır ve farklı şekillerde vurgular.

Stiller sekmesinde CSS'yi anlama konusuna bakın.

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

Stiller sekmesinde, geçersiz kılınmış bildirimler dahil olmak üzere bir öğe için geçerli olan tüm kurallar gösterilir. Üzerine yazılmış beyanlarla ilgilenmiyorsanız yalnızca bir öğeye uygulanan CSS'yi görüntülemek için Hesaplanmış sekmesini kullanın.

1. Bir öğe seçin.
2. Öğeler panelinde 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 olarak görüntüleme

Hesaplanmış sekmesini kullanın. Yalnızca bir öğeye uygulanan CSS'yi görüntüleme başlıklı makaleyi inceleyin.

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

Hesaplanan sekmesinde Tümünü Göster onay kutusunu işaretleyin. Yalnızca bir öğeye uygulanan CSS'yi görüntüleme başlıklı makaleyi inceleyin.

Alternatif olarak, Stiller sekmesinde ilerleyin ve Inherited from <element_name> adlı bölümleri bulun.

CSS kuyruklarını görüntüle

At-kuralları, CSS davranışını kontrol etmenize olanak tanıyan CSS ifadeleridir. Öğeler > Stiller, özel bölümlerde aşağıdaki kuralları gösterir:

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

@property at-kuralları görüntüleme

@property CSS at-kuralı, CSS özel özelliklerini açıkça tanımlamanıza ve JavaScript çalıştırmadan bir stil sayfasına kaydetmenize olanak tanır.

Stiller sekmesinde söz konusu özelliğin adının üzerine gelerek Stiller sekmesinin en altındaki daraltılabilir @property bölümünde mülkün değerini, tanımlayıcılarını ve kayıt 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 at-kuralları görüntüleme

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

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

Not: Bu makalenin yazıldığı sırada yalnızca Safari CIELAB renk alanını desteklemektedir.

@scope at-kuralları görüntüleme

Stiller sekmesinde, bir öğeye uygulanmışsa CSS @scope at-kuraları gösterilir.

Yeni @scope at-kuralları, CSS Cascading and Inheritance Level 6 spesifikasyonunun bir parçasıdır. Bu kurallar, CSS stillerini kapsamanıza, yani stilleri belirli öğelere açıkça uygulamanıza olanak tanır.

Not: @scope at-rule özelliği deneme aşamasındadır. Bunu test etmek için chrome://flags/#enable-experimental-web-platform-features'de Deneysel Web Platformu özellikleri işaretini etkinleştirin. Aksi takdirde, sonraki önizleme çalışmaz.

@scope kuralını aşağıdaki önizlemede görebilirsiniz:

.

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 açıklamasını geçersiz kılar.

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

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

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

Sonraki önizlemede @font-palette-values bölümünü görüntüleyin:

kalemine göz atın.

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 kuvvetleri göster

position-try-options mülküyle birlikte @position-try CSS kuralı, öğeler için alternatif sabit konumlar tanımlamanıza olanak tanır. Daha fazla bilgi için CSS ankraj konumlandırma API'si kullanıma sunuluyor başlıklı makaleyi inceleyin.

Öğeler > Stiller şu öğeleri çözer ve birbirine bağlar:

• position-try-options özellik değerlerini özel bir @position-try --name bölümüne ekleyin.
• popovertarget özelliklerine sahip karşılık gelen öğeler için position-anchor özellik değeri ve anchor() bağımsız değişken.

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

popover ile çapa kullanarak tanıtım

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

Düzenlemek için değerleri ç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.

Öğelerin CSS'sini arama ve filtreleme

Belirli CSS özelliklerini veya değerlerini aramak için Stiller ve Hesaplanan sekmelerindeki Filtre kutusunu kullanın.

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

Hesaplanmış sekmesine gitmek için Gruplandır'ı işaretleyerek filtrelenen mülkleri daraltılabilir kategorilerde gruplandırın.

Odaklanılmış sayfa emülasyonu

Odağı sayfadan Geliştirici Araçları'na geçirirseniz bazı yer paylaşımı öğeleri, odak tarafından tetiklenirse otomatik olarak gizlenir. Örneğin, açılır listeler, menüler veya tarih seçicileri. check_box Odaklanmış sayfa emülasyonu seçeneği, bu tür bir öğede odaklanmış 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'ye göz atın.

Bu demo sayfasında odaklanmış bir sayfayı emüle etmeyi deneyin:

1. Giriş öğesine odaklanın. Bunun 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 odakta olduğundan öğe tekrar kaybolur.
3. Öğeler > Stiller bölümünde :hov'u tıklayın, check_box Odaklanmış 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 dondurmayla ilgili daha fazla bilgi için Ekranı dondurma ve kaybolan öğeleri inceleme başlıklı makaleyi inceleyin.

Sanal sınıfı aç/kapat

Sözde sınıfı değiştirmek için:

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

Bu örnekte, fareyle öğenin üzerine gelinmediği halde DevTools'un 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. Bu tür bir öğeyi seçtiğinizde Stiller sekmesinde, genişletip öğeye özgü sözde sınıfları etkinleştirebileceğiniz bir 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 vurgulu metin sözde öğelerini görüntüleme

Sözde öğeler, öğelerin belirli parçalarını biçimlendirmenizi sağlar. Vurgulanmış sözde öğeler, "seçili" durumuna sahip doküman bölümleridir ve bu durumu kullanıcıya göstermek için "vurgulanmış" olarak biçimlendirilir. Örneğin, bu tür sözde öğeler ::selection, ::spelling-error, ::grammar-error ve ::highlight'dir.

Spesifikasyonda belirtildiği gibi, birden fazla stil çakıştığında kazanan stili basamakla 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 vurgulama sözde öğelerini görüntüleyebilirsiniz:

1. Aşağıdaki metni inceleyin.

   Üst öğemin öne çıkan sözde öğesinin stilini devraldım. Beni seç!

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

3. Stiller sekmesinde Inherited from ::selection pseudo of... bölümünü bulun.

Basamak katmanlarını görüntüleme

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

Basamaklı katmanları görüntülemek için bir 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çın/kapatın düğmesini tıklayın.

page katmanı en yüksek özgürlüğ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'ü seçin.
3. CSS Medyasını Simüle Et açılır menüsü için yazdır'ı seçin.

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

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

1. Geliştirici Araçları odaktayken Komut Menüsünü açmak için Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basın.

2. coverage yazmaya başlayın.

   

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 sekmesi, tarayıcının yüklediği her dosyadan ne kadar CSS (ve JavaScript) kullanıldığına dair genel bir bakış sunar.

   

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

5. Yukarıdaki önizlemede, kullandığı CSS'nin satır satır dökümünü 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 ila 57 ve 65 ila 67 satırları kullanılmazken 59 ila 63 satırları kullanılmaktadır.

Yazdırma önizleme modunu zorunlu kıl

Geliştirici Araçları'nı Yazdırma Önizleme Moduna Zorunlu Kılma başlıklı makaleyi inceleyin.

CSS'yi kopyalama

Stiller sekmesindeki tek bir açılır menüden, ayrı CSS kurallarını, bildirimleri, özellikleri, değerleri kopyalayabilirsiniz.

Ayrıca, CSS özelliklerini JavaScript söz diziminde kopyalayabilirsiniz. Bu seçenek, JS'de CSS kitaplıkları 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:

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

   • Tüm tanımlamaları 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 beyanlarda kopyalar.

   • Hesaplanan değeri görüntüleyin. Sizi Hesaplanmış sekmesine yönlendirir.

CSS'yi değiştir

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

Ayrıca şunları yapabilirsiniz:

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

Bir öğeye CSS beyanı ekleme

Bildirimlerin sırası, bir öğenin stilini belirleme yöntemini etkilediğinden açıklamaları farklı şekillerde ekleyebilirsiniz:

• Satır içi beyan ekleyin. Öğenin HTML'sine style özelliği eklenmesiyle eşdeğerdir.
• Stil kuralına beyan 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 bildirimlerden daha spesifiktir. Bu nedenle satır içi iş akışı, değişikliklerin öğede beklediğiniz şekilde etkili olmasını sağlar. Belirlilik hakkında daha fazla bilgi için Seçici Türleri bölümüne bakın.

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

Satır içi bildirim ekleme

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

1. Bir öğe seçin.
2. Stiller sekmesinde, element.style bölümünün parantezlerini tıklayın. İmleç odaklanır ve metin girmenize olanak tanır.
3. Bir mülk adı girin ve 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 bir style özelliğinin eklendiğini görebilirsiniz.

   

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

Stil kuralına bildirim ekleme

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

1. Bir öğe seçin.
2. Stiller sekmesinde, bildirimi eklemek istediğiniz stil kuralının köşeli ayraçlarını tıklayın. İmleç odaklanır ve metin girmenize olanak tanır.
3. Bir özellik adı girin ve 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ıyor.

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 hızlıca artırmak veya azaltmak için Klavye kısayollarıyla numaralandırılabilir değerleri değiştirme bölümüne göz atın.

Listelenebilir değerleri klavye kısayollarıyla değiştirme

Bir bildirimin listelenebilir 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) tuşlarına basın.
• Değeri 1 olarak değiştirmek için Yukarı'yı veya geçerli değer -1 ile 1 arasındaysa 0, 1 değerini değiştirin.
• 10 artırmak için Üst Karakter+Yukarı tuşlarına basın.
• Değeri 100 artırmak için Üst Karakter+Komut+Yukarı (Mac) veya Ctrl+Üst Karakter+Sayfa Yukarı (Windows, Linux) tuşlarına basın.

Azaltma da işe yarar. Daha önce bahsedilen Up her örneğini Down ile değiştirmeniz yeterlidir.

Uzunluk değerlerini değiştirme

Desteği sonlandırıldı: Bu özelliğin desteği Chrome 123 sürümünde sonlandırılmıştır. Geçici olarak tekrar etkinleştirmek için ayarlar Ayarlar > Deneyler > check_box Stiller sekmesinde CSS <length> yazma aracının desteği sonlandırıldı'yı temizleyin. crbug/1522657 adresinde geri bildirimde bulunabilirsiniz.

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

Uzunluk birimini değiştirmek için:

1. Fareyle birim adının üzerine gelin ve adının altı çizili olduğunu göreceksiniz.

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. Fareyle birim değerinin üzerine gelin. İşaretçinizin yatay, çift başlı bir oka dönüştüğüne dikkat edin.

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

Değeri 10 oranında ayarlamak 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 değiştirmek veya kullanıcının açık veya koyu tema tercihini emüle 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 belirtir.
   • prefers-color-scheme: dark. Kullanıcının koyu temayı tercih ettiğini belirtir.
   • Otomatik koyu mod. Koyu modu uygulamamış olsanız bile sayfanızı koyu modda gösterir. Ayrıca, prefers-color-scheme otomatik olarak dark değerine ayarlanır.

Bu açılır liste, Oluşturma sekmesindeki CSS medya özelliği prefers-color-scheme ve Otomatik koyu modu etkinleştir seçeneklerinin kısayoludur.

Sınıfları etkinleştirme ve devre dışı bırakma

Bir öğedeki 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 veya kutunun işaretini kaldırın.

Stil kuralı ekleme

Yeni bir stil kuralı eklemek için:

1. Bir öğe seçin.
2. New Style Rule (Yeni Stil Kuralı) seçeneğini 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ı ekliyor.

Kural eklenecek stil sayfasını seçme

Yeni bir stil kuralı eklerken, stil kuralını hangi stil sayfasına ekleyeceğinizi seçmek için Yeni Stil Kuralı'nı basılı tutun.

Beyan aç/kapat

Tek bir beyanı etkinleştirmek veya devre dışı bırakmak için:

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

Ekran görüntüsünde, şu anda seçili olan öğe için color özelliği kapalıdır.

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

Animasyonlar'da ilgili bölüme bakın.

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

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

CSS'yi İncele ızgarasında ilgili bölüme bakın.

Renk seçici ile renkleri değiştirme

Renk Seçici ile HD ve HD olmayan renkleri inceleme ve hata ayıklama başlıklı makaleyi inceleyin.

Açılı Saat ile açı değerini değiştirme

Açı Saati, CSS mülk değerlerindeki <angle> değerlerini değiştirmek için bir kullanıcı arayüzü sağlar.

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

1. Açı beyanı içeren bir öğe seçin.

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

   

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

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

   

4. Açılı Saat dairesini tıklayarak açı değerini değiştirin veya açı değerini 1 artırmak / azaltmak için farenizi kaydırın.

5. Açı değerini değiştirmek için daha fazla klavye kısayolu vardır. Daha fazla bilgi için Stil bölmesi klavye kısayolları bölümüne bakın.

Kutu ve metin gölgelerini Gölge Düzenleyici ile değiştirme

Gölge Düzenleyici, text-shadow ve box-shadow CSS beyanlarını değiştirmek için bir kullanıcı arayüzü sağlar.

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

1. Gölge beyanı içeren bir öğe seçin. Örneğin, sonraki öğeyi seçin.

2. Stiller sekmesinde, text-shadow veya box-shadow bildiriminin yanında gölge simgesini bulun.

   

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

   

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

   • Tür (yalnızca box-shadow için). Dış veya İç seçeneklerinden birini belirleyin.
   • 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.
   • Spread (yalnızca box-shadow için). Kaydırma çubuğunu sürükleyin veya bir değer belirtin.

5. Öğeye uygulanan değişiklikleri gözlemleyin.

Yumuşak Geçiş Düzenleyici ile animasyonu 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 kullanıcı arayüzü sağlar.

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

1. Bu sayfadaki <body> öğesi gibi bir zamanlama işlevi beyanı içeren bir öğe seçin.
2. Stiller sekmesinde, transition-timing-function, animation-timing-function bildirimleri veya transition kısaltma ö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

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

1. Yumuşatma Düzenleyici'de anahtar kelime değeri ayarlamak için seçici düğmelerinden birini tıklayın:
   • linear
   • ease-in-out
   • kolay giriş
   • ease-out

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

   • 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ş, Sinüs	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Dışarıda, İkinci dereceden	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	İçe Dışa, Kübik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Hızlı Çıkış, Yavaş Giriş	cubic-bezier(0.4, 0, 0.2, 1)
	İçeride, Dışarıda, Geri	cubic-bezier(0.68, -0.55, 0.27, 1.55)
yumuşak giriş	İçeri, Sinüs	cubic-bezier(0.47, 0, 0.75, 0.72)
	İçinde, İkinci Dereceden	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	İçeri, Geri	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ış	Çıktı, Sinüs	cubic-bezier(0.39, 0.58, 0.57, 1)
	Dışarıda, İkinci Dereceden	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Dışarıda, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Doğrusal Çıkış, Yavaş	cubic-bezier(0, 0, 0.2, 1)
	Dışarı, Geri	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 satırlardaki denetim noktalarını kullanın:

• Doğrusal işlevler için, çizginin herhangi bir yerini tıklayarak denetim noktası ekleyin ve onu 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 bir top animasyonu 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 DevTools'u yeniden yükleyin.

Bu deneme etkinleştirildiğinde Stiller sekmesinde CSS değişiklikleriniz yeşil renkle vurgulanır.

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

Bildirimlerdeki tüm CSS değişikliklerini tek seferde kopyalamak için herhangi bir beyanı sağ tıklayın ve Tüm CSS değişikliklerini kopyala'yı seçin.

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