CSS özellikleri referansı

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Chrome Geliştirici Araçları özelliklerine ilişkin bu kapsamlı referansta yeni iş akışlarını keşfedin. CSS'yi görüntüleme ve değiştirme.

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ı'ndaki Öğeler paneli, tek seferde bir öğenin CSS'sini 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 görüntü alanında vurgulanır. Ancak DOM'de fareyle üzerine gelindiği için Ağaç.

Eğitim için Bir öğenin CSS'sini görüntüleme bölümüne bakın.

Öğ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) tuşlarına basın ya da Control+Üst Karakter+C (Windows, Linux) tuşlarına basın ve ardından öğeyi görüntü alanını değiştirebilirsiniz.
• 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ıp sonucu ve ardından Öğe panelinde göster'i seçin.

CSS'yi göster

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

Bağlantılarla gezinme

Stiller sekmesi, aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere çeşitli yerlere çeşitli başka yerlere giden bağlantılar görüntüler:

• CSS kurallarının yanında, sayfaları ve CSS kaynaklarını biçimlendirmek için: Bu tür bağlantılar Kaynaklar panelini açar. Stil sayfası küçültülmüşse Küçültülmüş bir dosyayı okunabilir hale getirme konusuna bakın.
• Devralındığı kaynak: bölümlerinde üst öğelere.
• var() çağrılarında, özel özellik bildirimlerine.
• animation kısaltılmış mülkte @keyframes olarak.
• 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 belgeleri, 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 belgelerini göster

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

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

Bu mülkte MDN CSS Referansı'na gitmek için Daha fazla bilgi'yi tıklayın.

İpuçlarını kapatmak için Gösterme seçeneğini işaretleyin.

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

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

Değerini 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 sorununu tanır ve farklı şekillerde vurgular.

Stiller sekmesinde CSS'yi anlama konusuna bakın.

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

Stiller sekmesi, bir öğe için geçerli olan tüm kuralları, geçersiz kılındı. Geçersiz kılınan beyanlarla ilgilenmiyorsanız Hesaplanan sekmesini tıklayarak yalnızca bir öğeye uygulanmakta olan CSS'yi görüntüleyebilirsiniz.

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 sırayla görüntüleme

Hesaplanan sekmesini kullanın. Yalnızca bir öğeye gerçekten uygulanmış CSS'yi görüntüleme konusuna bakın.

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

Hesaplanan sekmesinde Tümünü Göster onay kutusunu işaretleyin. Yalnızca gerçekten olan CSS'yi görüntüleme uygulanır.

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 etmenizi sağlayan CSS ifadeleridir. Öğeler > Stiller, özel bölümlerde aşağıdaki kuralları gösterir:

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

@property kuvvetleri göster

@property CSS kuralı, CSS özel özelliklerini açık bir şekilde tanımlamanıza ve bunları herhangi bir 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 kuvvetleri göster

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

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

Not: Yazma sırasında yalnızca Safari CIELAB renk alanını destekler.

@scope kuvvetleri göster

Stiller sekmesi, bir öğeye uygulanan CSS @scope kurallarını gösterir.

Yeni @scope kuralları, CSS Geçişli ve Devralma Düzeyi 6 spesifikasyonunun bir parçasıdır. Bu kurallar, CSS stillerinin kapsamını ayarlamanıza, yani stilleri belirli öğelere açık bir şekilde uygulamanıza olanak tanır.

Not: @scope kuralında kullanılan özellik deneme aşamasındadır. Test etmek için chrome://flags/#enable-experimental-web-platform-features'da Deneysel Web Platformu özellikleri işaretini etkinleştirin. Aksi takdirde bir sonraki önizleme çalışmaz.

@scope kuralını aşağıdaki önizlemede 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 bildirimini geçersiz kılar.

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

@font-palette-values kuvvetleri göster

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

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

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

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 için CSS sabit konumlandırma API'sinin tanıtımı bölümüne bakın.

Öğeler > Stiller, aşağıdakileri çözümler ve 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ğerleri 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 götürür.
4. position-anchor değer bağlantısını veya aynı anchor() bağımsız değişkenlerini tıklayın. Öğeler paneli, karşılık gelen 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 ilgili değeri çift tıklayın.

Bir öğenin CSS'sini arama ve filtreleme

Belirli CSS'leri aramak için Stiller ve Hesaplanan sekmelerindeki Filtre kutusunu kullanın özellikleri veya değerleri.

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

Hesaplanan sekmesinde gezinmek için Grup'u işaretleyerek filtrelenen özellikleri daraltılabilir kategoriler halinde 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çiciler. check_box Odaklanılan sayfayı simüle et seçeneği, böyle bir öğedeymiş gibi hata ayıklamanızı sağlar.

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.

Şu demo sayfasında odaklanılan bir sayfa emülasyonu kullanmayı 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 odakta olduğundan öğe tekrar kaybolur.
3. Öğeler > Stiller'i tıklayın, :hov simgesini tıklayın, check_box Odaklanmış sayfa emülasyonu'nu işaretleyin ve giriş öğesinin seçili olduğundan emin olun. Şimdi altındaki öğeyi inceleyebilirsiniz.

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

Sanal sınıfı aç/kapat

Sahte bir sınıfı (ör. :active, :focus, :focus-within, :target, :hover, :visited veya focus-visible) 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 yapay sınıfı işaretleyin.

Görüntü alanında, öğenin aslında üzerine gelmese bile Geliştirici Araçları'nın background-color bildirimini öğeye uyguladığını görebilirsiniz.

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

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

Sözde öğeler, öğelerin belirli parçalarını biçimlendirmenizi sağlar. Vurgulama sahte öğeler, "seçili" değerine sahip doküman bölümleridir ve durumlarına göre "vurgulanmış" özelliğini kullanabilirsiniz. Örneğin, 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 kısmı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 özellik, büyük kod tabanları, tasarım sistemleri ve uygulamalardaki üçüncü taraf stillerinin yönetiminde faydalıdır.

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

Stiller sekmesinde, 3 kademeli katmanı ve bunların stillerini görüntüleyin: page, component ve base.

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 belirginliğ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 öğesini 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'leri görüntüleme

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

1. Command+üst karakter+P (Mac) tuşlarına basın veya Geliştirici Araçları çalışırken Control+Üst Karakter+P (Windows, Linux, ChromeOS) dokunarak Komut menüsünü açın.

2. coverage yazmaya başlayın.

   

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

   

4. Yeniden yükle'yi tıklayın. Sayfa yeniden yüklenir ve Kapsam sekmesi, web sitenizin ne kadar CSS (ve JavaScript) kullanılan bir veri kümesidir.

   

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

5. Yukarıdaki önizlemede bir CSS dosyasını tıklayarak kullandığı CSS'nin satır satır dökümünü görebilirsiniz.

   

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

Yazdırma önizleme modunu zorunlu kıl

Geliştirici Araçları'nı Baskı Önizleme Moduna Zorlama bölümüne bakın.

CSS'yi kopyala

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

Buna ek olarak, CSS özelliklerini JavaScript söz diziminde kopyalayabilirsiniz. CSS-in-JS kitaplıkları kullanıyorsanız bu seçenek kullanışlıdır.

CSS'yi kopyalamak için:

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

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

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

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

   • 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. Sizi Hesaplanan sekmesine yönlendirir.

CSS'yi değiştir

Bu bölümde, Öğeler > Stiller.

Ayrıca şunları yapabilirsiniz:

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

Bir öğeye CSS bildirimi ekleme

Bildirimlerin sırası, bir öğenin stilinin nasıl ayarlandığını etkilediğinden açıklamaları şuraya ekleyebilirsiniz: farklı şekillerde kullanabilirsiniz:

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

Hangi iş akışını kullanmalısınız? Çoğu senaryoda muhtemelen satır içi bildirim iş akışını takip edin. Satır içi bildirimlerin belirli bir kesinliği harici olanlardan daha yüksektir. Bu nedenle, iş akışı, değişikliklerin öğede beklediğiniz gibi geçerli olmasını sağlar. Bkz. Seçici Türler'e göz atın.

Bir öğenin stillerinde hata ayıklıyorsanız ve bir öğe dışa aktarıldığında ne olduğunu bildirimi farklı yerlerde tanımlanmışsa 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 köşeli ayraçlarını tıklayın. İmleç odaklanarak metin girmenizi sağlar.
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. DOM Ağacı'nda şunları yapabilirsiniz: öğeye bir style özelliği eklendiğini görürsünüz.

   

   Ekran görüntüsünde, margin-top ve background-color özellikleri seçilen öğeye 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, eklemek istediğiniz stil kuralının köşeli ayraçlarını tıklayın beyanda bulunun. İmleç odaklanarak metin girmenizi sağlar.
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 bildirimini alıyor.

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

Bir bildirimin adını veya değerini çift tıklayarak değiştirin. Numaralandırılabilir değerleri şununla değiştirme: klavye kısayollarında bir değeri 0, 1, 1 veya 10 veya 100 birim.

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:

• Option+Up (Mac) veya Alt+Up (Windows, Linux) 0,1 artar.
• 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ış için Üst Karakter+Yukarı.
• Üst Karakter+Command+Up (Mac) veya Control+Üst Karakter+Page Up (Windows, Linux) tuşlarına basarak değeri 100 kat artırın.

Azaltma da işe yarar. Daha önce bahsedilen her bir Up örneğini Aşağı.

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 açmak için ayarları Ayarlar'ı temizleyin > Denemeler > check_box CSS <length> desteğini sonlandırma içerik oluşturma aracını kullanın. crbug/1522657 adresinden geri bildirimlerinizi iletebilirsiniz.

Genişlik, yükseklik, dolgu, kenar boşluğu veya kenarlık gibi uzunluktaki herhangi bir özelliği değiştirmek için işaretçinizi kullanabilirsiniz.

Uzunluk birimini değiştirmek için:

1. Birim adının üzerine gelin ve altının çizili olduğuna dikkat 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. İmleci birim değerinin üzerine getirin ve işaretçinizin yatay çift başlı 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 seçeneğini 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 emüle et ve otomatik koyu modu etkinleştir

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: ışık şeklinde olduğunu varsayalım. Kullanıcının açık temayı tercih ettiğini belirtir.
   • prefers-color-scheme: dark değerini belirleyin. Kullanıcının koyu temayı tercih ettiğini belirtir.
   • Otomatik koyu mod. Siz uygulamasanız bile sayfanızı koyu modda görüntüler. 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ı aç/kapat

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. Bir öğeye sınıf ekleme bölümünü inceleyin. Yeni Ekle Sınıf kutusu, bu öğeye uygulanan tüm sınıflardı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ı ekle

Yeni bir stil kuralı eklemek için:

1. Bir öğe seçin.
2. New Style Rule'u (Yeni Stil Kuralı) tıklayın. . Geliştirici Araçları, element.style kuralının altında yeni kuralı değiştirebilirsiniz.

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ın ekleneceği stil sayfasını seçme

Yeni bir stil kuralı eklerken Yeni Stil Kuralı'nı tıklayıp basılı tutun. Seçmek için simgesini tıklayın işaretini tıklayın.

Beyanı aç/kapat

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. Onay kutuları görünür ekleyin.
3. Beyanın yanındaki onay kutusunu işaretleyin veya kutunun işaretini kaldırın. Bir beyanı temizlediğinizde Geliştirici Araçları, artık etkin olmadığını belirtmek için bu değerin ü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 ızgarasını inceleme bölümünde 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çılı Saat, CSS özellik değerlerindeki <angle> öğelerini değiştirmek için bir GUI sağlar.

Açılı Saat'i açmak için:

1. Açı açıklamasıyla 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 saatin solundaki küçük saatler açı önizlemeleridir.

3. Açılı Saat'i açmak için önizlemeyi tıklayın.

   

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

5. Açı değerini değiştirmek için kullanabileceğiniz başka klavye kısayolları da vardır. Stiller bölmesinde daha fazla bilgi bulabilirsiniz klavye kısayollarını kullanın.

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

Gölge Düzenleyici, 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ü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ır. Kaydırma çubuğunu sürükleyin veya bir değer belirtin.
   • Yaygın (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şak Geçiş 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 bildirimine sahip 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şak Geçiş Düzenleyici'de, bir anahtar kelime değeri ayarlamak için seçici düğmelerinden birini tıklayın:
   • doğrusal
   • yumuşak giriş
   • kolay giriş
   • yumuşak çıkış

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)
	Dışarı, Kübik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Hızlı ve Yavaş	cubic-bezier(0.4, 0, 0.2, 1)
	Giriş, Tekrar	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)
	İçinde, Kübik	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	İçeri, Geri	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Hızlı Çıkma, Doğrusal	cubic-bezier(0.4, 0, 1, 1)
yumuşak çıkış	Çıktı, Sinüs	cubic-bezier(0.39, 0.58, 0.57, 1)
	Dışarı, İkinci dereceden	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Dışarı, Kübik	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.

  

• Cubic Bezier işlevleri için denetim noktalarından birini sürükleyin.

  

Herhangi bir değişiklik, düzenleyicinin üst kısmındaki Önizleme'de bir top animasyonunu tetikler.

(Deneysel) CSS değişikliklerini kopyalama

Not: Bu deneysel özelliği etkinleştirmek için Ayarlar > altındaki CSS değişikliklerini Stiller sekmesinde senkronize edin seçeneğini işaretleyin. Denemeler'i tıklayın ve Geliştirici Araçları'nı yeniden yükleyin.

Bu deneme etkinleştirildiğinde Stiller sekmesinde CSS değişiklikleriniz yeşille 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 sekmesiyle yaptığınız değişiklikleri izleyebilirsiniz.