CSS özellikleri referansı

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

CSS'yi görüntüleme ve değiştirme ile ilgili Chrome Geliştirme Araçları özelliklerinin bu kapsamlı referansında 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 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 yalnızca fare DOM Ağacı'nda üzerine geldiği için görüntü alanında vurgulanır.

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

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

• Görünüm pencerenizde öğeyi sağ tıklayın ve İncele'yi seçin.
• Geliştirici Araçları'nda Bir öğe seçin'i tıklayın veya Command+Shift+C (Mac) ya da Control+Shift+C (Windows, Linux) tuşlarına basın, ardından görünüm penceresindeki öğ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 Öğ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, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli yerlere giden bağlantılar gösterilir:

• CSS kurallarının, stil sayfalarının ve CSS kaynaklarının yanında. 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 beyanlarına.
• 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 özellik değerleriyle ilgili ipuçlarını görüntüleme

Öğeler > Stiller'de, 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 özellik 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ı devre dışı bırakmak için Gösterme'yi işaretleyin.

Bu ipuçlarını tekrar etkinleştirmek için Ayarlar > Tercihler > Öğeler > CSS dokümanı ipucunu göster'i işaretleyin.

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

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

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

Bir --custom-property simgesinin üzerine gelerek değerini ipucu olarak görün.

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

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

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

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

Stiller sekmesinde, geçersiz kılınan bildirimler de dahil olmak üzere bir öğe için geçerli olan tüm kurallar gösterilir. 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 Hesaplanmış 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ırayla görüntüleme

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

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

Hesaplanmış sekmesinde 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, aşağıdaki @ kurallarını özel bölümlerde gösterir:

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

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

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

Stiller sekmesinde bu tür bir özelliğin adının üzerine gelerek özelliğin değeri, tanımlayıcıları ve Stiller sekmesinin alt kısmındaki daraltılabilir @property bölümünde kaydına yönelik bir bağlantı içeren ipucunu 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 sekmesinde, bir öğeye uygulanmışsa @supports CSS @ kuralları gösterilir. Ö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ığı sırada CIELAB renk alanı yalnızca Safari tarafından desteklenmektedir.

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

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

Yeni @scope @kuralları, CSS Cascading and Inheritance Level 6 spesifikasyonunun bir parçasıdır. Bu kurallar, CSS stillerini kapsamınıza almanı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 bölümünde 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:

(Codepen'de sofiayem tarafından oluşturulan YzaBqOo adlı kalem)

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 bildirimini geçersiz kılar.

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

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

@font-palette-values CSS @-kuralı, font-palette özelliğinin varsayılan değerlerini özelleştirmenize olanak tanır. Öğeler > Stiller, bu at-rule'u ö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 bunları çift tıklayın.

@position-try @ kurallarını görüntüleme

position-try-options özelliğiyle birlikte @position-try CSS kuralı, öğeler için alternatif sabit konumlar tanımlamanıza olanak tanır. Daha fazla bilgi edinmek için CSS sabitleme konumlandırma API'sinin kullanıma sunulması başlıklı makaleyi inceleyin.

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

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

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

popover ile sabit reklam kullanılarak yapılan demo

1. Önizlemede alt menüyü açın. Yani HESABINIZ'ı, 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şkenlerini 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 değeri çift tıklayın.

Bir öğenin CSS'sini arama ve filtreleme

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

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

Hesaplanmış sekmesinde gezinmek için Gruplandır'ı işaretleyerek filtrelenmiş özellikleri daraltılabilir kategorilerde gruplandırın.

Odaklanılmış sayfa emülasyonu

Odak noktasını sayfadan Geliştirici Araçları'na taşırsanız odaklanma 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 bir öğede 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'ye bakın.

Bu demo sayfasında odaklanılmış bir sayfayı emüle etmeyi 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 ön planda olduğundan öğ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 Rendering (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

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

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

Bu örnekte, öğenin üzerine gelinmemiş olmasına rağmen Geliştirici Araçları'nın öğeye background-color bildirimini 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 Belirli bir öğe durumunu zorunlu kıl bölümü gösterilir. Bu bölümü genişletebilir ve öğeye özgü sözde sınıfları etkinleştirebilirsiniz.

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

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

Sözde öğeler, öğelerin belirli kısımlarını stilize etmenize olanak tanır. Sözde öğe vurguları, "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 hangi stilin kullanılacağını basamaklandırma 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 vurgu 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üne gidin.

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 kullanışlı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 sahip olduğundan öğenin arka planı yeşildir.

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 Medya Emülasyonu açılır listesinde print'i (yazdırma) 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. Komut Menüsü'nü açmak için Geliştirici Araçları ön planda durumdayken Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına bası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 gösterir. Kırmızı, kullanılmayan CSS'yi gösterir.

5. Hangi CSS'nin kullanıldığı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 modunu zorunlu kılma

Geliştirici Araçları'nı Yazdırma Ö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 de kopyalayabilirsiniz. Bu seçenek, CSS-in-JS kitaplıklarını kullanıyorsanız işinize yarayabilir.

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ı kopyalama. Özelliği ve değerini CSS söz diziminde kopyalar: css property: value;
   • Özelliği kopyalama. Yalnızca property adını kopyalar.
   • Değeri kopyalayın. Yalnızca value kopyalanır.
   • Kuralı kopyalama. 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. JavaScript söz dizimindeki tüm özellikleri ve değerlerini 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üleyin. Hesaplanmış sekmesine yönlendirilirsiniz.

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 kaydedin.

Kod tamamlama ile CSS'yi değiştirme

CSS özelliklerinin daha karmaşık kombinasyonlarını (ör. renk geçişleri veya kutu gölgeleri) tam söz dizimlerini hatırlamadan 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 stilize edildiğini etkilediğinden bildirimleri farklı şekillerde ekleyebilirsiniz:

• Satır içi bildirim ekleme Öğ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 bildirim 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 beklediğiniz gibi etkili olmasını sağlar. Özellik hakkında daha fazla bilgi için Seçici Türleri konusuna bakın.

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

Satır içi beyan ekleme

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

1. Bir öğe seçin.
2. Stiller sekmesinde, element.style bölümünün parantezleri arasına 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. İlgili ö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, öğenin style özelliğine yansıtılan bildirimleri 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ı girin ve Enter tuşuna basın.
4. İlgili özellik için geçerli bir değer girin ve Enter tuşuna basın.

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

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

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

Numaralandırılabilir değerleri klavye kısayollarıyla 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) tuşlarına basın.
• Değeri 1 artırmak için Yukarı, mevcut değer -1 ile 1 arasındaysa 0,1 artırmak için yukarı ok.
• 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 Kontrol+Üst Karakter+Page Up (Windows, Linux) tuşlarına basın.

Azaltma da çalışır. Daha önce belirtilen her Up ö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'te sonlandırıldı. Bu özelliği geçici olarak tekrar etkinleştirmek için ayarları temizleyin: Ayarlar > Experiments > check_box Stiller sekmesinde CSS <length> yazma aracını kullanımdan kaldırın. 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. Fareyle birim adının üzerine geldiğinizde adın altının çizildiğini görürsünüz.

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

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

1. Birim değerinin üzerine gelin. İşaretçinizin yatay çift başlı oka dönüştüğünü göreceksiniz.

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

Değeri 10 artırmak veya azaltmak 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/kapatmak 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 belirtir.
   • prefers-color-scheme: dark. Kullanıcının koyu temayı tercih ettiğini gösterir.
   • Otomatik koyu mod. Sayfanızı, koyu mod uygulamamış olsanız bile koyu modda gösterir. Ayrıca, prefers-color-scheme değerini otomatik olarak dark olarak ayarlar.

Bu açılır liste, Rendering (Oluşturma) sekmesindeki CSS medya özelliğini emüle etprefers-color-scheme ve Otomatik koyu modu etkinleştir seçenekleri için bir kısayoldur.

Sınıfı değiştirme

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

1. DOM Ağacı'nda öğeyi seçin.
2. Element 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, Yeni Stil Kuralı tıklanırsa DevTools, 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ı etkinleştirmek veya devre dışı bırakmak için:

1. Bir öğe seçin.
2. Stiller sekmesinde, bildirimi tanımlayan kuralın üzerine gelin. Her beyanın yanında onay kutuları gösterilir.
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, şu anda seçili olan öğ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 öğelerini ve içeriklerini Izgara Düzenleyici ile hizalama

İlgili CSS ızgarasını inceleme bölümüne 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çı saatini kullanarak 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.

Angle Clock'u 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çı Önizlemesi kutusunu tıklayın.

   

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

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

   

4. Açı Saati çemberini tıklayarak açı değerini değiştirin veya fare tekerleğinizi 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. Daha fazla bilgi için Stiller bölmesi klavye kısayolları başlıklı makaleyi inceleyin.

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 bildiriminin yanında gölge simgesini bulun.

   

3. Gölge düzenleyici'yi 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). Başlangıç veya İçeride'yi 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.
   • Yayılma (yalnızca box-shadow için). Kaydırma çubuğunu sürükleyin veya bir değer belirtin.

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

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

Easing Editor, transition-timing-function ve animation-timing-function değerlerini değiştirmek için bir GUI sağlar.

Kolaylık Düzenleyici'yi açmak için:

1. Zamanlama işlevi bildirimi olan bir öğe seçin. Örneğin, bu sayfadaki <body> öğesini seçebilirsiniz.
2. Stiller sekmesinde, transition-timing-function, animation-timing-function beyanlarının veya transition kısa özelliklerinin yanındaki mor simgesini bulun.
3. Easing Editor'ı (Kolaylık Düzenleyici) açmak için simgeyi tıklayın:

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

Zamanlamaları tek tıklamayla ayarlamak için Kolaylık Düzenleyici'deki hazır ayarları kullanın:

1. Kolaylık Düzenleyici'de anahtar kelime değeri ayarlamak için seçici düğmelerden birini tıklayın:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

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

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

Zamanlama anahtar kelimesi	Ön ayarlı	Kübik Bezier
yumuşak giriş çıkış	İçeride, Dışarıda, Sinüs	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	İçeride Dışarıda, Kübik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Hızlı Çıkış, Yavaş Giriş	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
yumuşak giriş	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	İçinde, 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ış	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Çıkış, İkinci Dereceden	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Doğrusal çıkış, yavaş giriş	cubic-bezier(0, 0, 0.2, 1)
	Out, Back	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, kontrol 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 yapıldığında, düzenleyicinin üst kısmındaki Önizleme bölümünde top animasyonu tetiklenir.

(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 sekmesinde CSS değişiklikleriniz yeşil renkle vurgulanır.

Tek bir CSS bildirimi değişikliğini kopyalamak için vurgulanan bildirimin üzerine gelin ve 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ı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.