CSS özellikleri referansı

Chrome Geliştirici Araçları'nın CSS görüntüleme ve değiştirmeyle ilgili özelliklerine ilişkin bu kapsamlı referansı inceleyerek 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ı makaleye bakın.

Öğe seçin

Geliştirici Araçları'nın Öğeler paneli, aynı anda bir öğenin CSS'sini görüntülemenizi veya değiştirmenizi sağlar.

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. Sol tarafta, öğe görüntü alanında vurgulanır, ancak bunun tek nedeni DOM Ağacı'nda fare imleci bu öğenin üzerine getirmesidir.

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

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

• Görüntünüzde öğeyi sağ tıklayın ve İncele'yi seçin.
• DevTools'da Öğ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.
• DevTools'un Konsol'unda 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öster

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ılar ile gezinin

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

• CSS kurallarının yanında, stil sayfaları 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 konusuna bakın.
• ...öğesinden devralındı bölümlerinde, üst öğelere.
• var() çağrılarında özel mülk bildirimlerine.
• animation stenografi özelliğinde, @keyframes olarak değiştirin.
• Belge ipuçlarındaki daha fazla bilgi bağlantıları.
• Ve daha fazlası.

Bunlardan bazıları vurgulanmıştır:

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

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

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

CSS belgelerini göster

Kısa bir CSS açıklaması olan ipucunu görmek için fareyle Stiller sekmesinde özellik adının üzerine gelin.

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

İpuçlarını devre dışı bırakmak için Göster seçeneğini işaretleyin.

Tekrar etkinleştirmek için Ayarlar > Tercihler > Öğeler > CSS dokümanları ipucunu göster'i kontrol edin.

Seçici belirginliğini göster

Spesifik olma ağırlığıyla ilgili ipucunu görmek için fareyle bir seçicinin üzerine gelin.

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

Değerini ipucunda görmek istediğiniz --custom-property simgesinin üzerine gelin.

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

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

Stiller sekmesinde CSS'yi anlama konusuna bakın.

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

Stiller sekmesi, geçersiz kılınan bildirimler de dahil olmak üzere bir öğe için geçerli olan tüm kuralları gösterir. Geçersiz kılınan bildirimlerle ilgilenmiyorsanız yalnızca gerçekten bir öğeye uygulanan CSS'yi görüntülemek için Hesaplanan 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 bölümüne bakın.

CSS özelliklerini alfabetik sırada görüntüleme

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

Devralınan CSS özelliklerini göster

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

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

CSS at-kurallarını görüntüle

İ-kurallar, CSS davranışını kontrol etmenizi sağlayan CSS ifadeleridir. Öğeler > Stiller, aşağıdaki i-kuralları özel bölümlerde gösterir:

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

@property kuralını görüntüle

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

Stiller sekmesinde bu tür bir mülkün 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 mülk kaydına yönelik bir bağlantı görebilirsiniz.

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

@supports kuralını görüntüle

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

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

@scope kuralını görüntüle

Stiller sekmesinde, bir öğeye uygulanan CSS @scope kuralları gösterilir.

Yeni @scope kuralları, CSS Geçişli ve Devralma Düzeyi 6 spesifikasyonunun bir parçasıdır. Bu kurallar, CSS stillerini kapsama almanıza olanak tanır. Başka bir deyişle, stilleri belirli öğelere açıkça uygulayabilirsiniz.

@scope kuralını şu ö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ı bulunan öğelerdeki tüm <p> öğeleri için genel CSS background-color bildirimini geçersiz kılar.

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

@font-palette-values kuralını görüntüle

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

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

1. Önizlemedeki metnin ikinci satırını inceleyin.
2. Stiller bölümünde @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 çift tıklayarak düzenleyin.

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

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

Odaklanılmış sayfa emülasyonu

Odağı, sayfadan Geliştirici Araçları'na değiştirirseniz bazı yer paylaşımı öğeleri odak tarafından tetiklendiğinde otomatik olarak gizlenir. Örneğin açılır listeler, menüler veya tarih seçiciler. check_box Odaklanmış sayfa emülasyonu seçeneği, böyle bir öğede odaktaymış gibi hata ayıklamanızı sağlar.

Bu demo sayfasındaki odaklanılmış bir sayfayı taklit 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 odakta olduğundan öğe tekrar kayboluyor.
3. Öğeler > Stiller bölümünde :hov öğesini tıklayın, check_box Odaklanmış sayfa emülasyonu'nu 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.

Sözde sınıfı aç/kapat

:active, :focus, :focus-within, :target, :hover, :visited veya focus-visible gibi sözde bir sınıfı açmak/kapatmak için:

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

Görüntü alanında, fareyle öğenin ü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 bölümüne bakın.

Devralınan, vurgulu sözde öğeleri görüntüle

Sahte öğeler, öğelerin belirli bölümlerini şekillendirmenize olanak tanır. Vurgulama sözde öğeleri, durumu "seçildi" olan doküman bölümleridir ve kullanıcıya bu durumu belirtmek için "vurgulu" 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 kademeli olarak belirler.

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

1. Aşağıdaki metni inceleyin.

   Üst öğemin vurgulama 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ü bulmak için aşağı kaydırın.

Basamaklı katmanları 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ı ve tasarım sistemleri için ve uygulamalarda üçüncü taraf stillerini yönetirken kullanışlıdır.

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

Stiller sekmesinde, 3 basamaklı katmanı ve 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 belirliliğ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 seçeneğini belirleyin.
3. CSS Medyası emülasyonu 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çekte 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 bir dosyadan ne kadar CSS (ve JavaScript) kullanıldığına dair genel bir bakış sunar.

   

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

5. Yukarıdaki önizlemede bir CSS'nin kullandığı CSS'nin satır satır dökümünü görmek için ilgili CSS dosyasını tıklayın.

   

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

Baskı önizleme modunu zorla

DevTools'u Yazdırma Önizleme Moduna Zorunlu Kılma başlıklı makaleyi inceleyin.

CSS'yi kopyala

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

Buna ek olarak, JavaScript söz dizimindeki CSS özelliklerini kopyalayabilirsiniz. CSS-in-JS kitaplıklarını 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 özelliğini sağ tıklayın.

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

   • Beyanı kopyala. Ö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 öğesini kopyalar.
   • Kuralı kopyala. 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 beyanları kopyala. CSS kuralındaki tüm özellikleri ve değerlerini kopyalar: css property: value; property: value; ...

   • Tüm tanımlamaları JS olarak kopyala. JavaScript söz dizimindeki tüm özellikleri ve değerlerini kopyalar: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

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

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

CSS'yi değiştir

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

Ayrıca:

• Sayfa yüklemelerinde CSS'yi geçersiz kılın.
• 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 nasıl biçimlendirileceğini etkilediğinden bildirimleri farklı şekillerde ekleyebilirsiniz:

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

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 bildirimlerden daha yüksek spesifikliğe sahiptir. Bu nedenle satır içi iş akışı, değişikliklerin öğede beklediğiniz gibi geçerli olmasını sağlar. Belirlilik hakkında daha fazla bilgi için Seçici Türleri bölümüne bakın.

Bir öğenin stillerinde hata ayıklayorsanız ve bir bildirim farklı yerlerde tanımlandığında ne olduğunu özel olarak 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 köşeli parantezlerini tıklayın. İmleç odaklanarak metin girmenizi sağlar.
3. Bir mülk adı girin ve Enter tuşuna basın.

4. Söz konusu özellik için geçerli bir değer girip 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çilen öğeye uygulanmıştır. DOM Ağacı'nda, bildirimlerin öğenin style özelliğinde 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 köşeli parantezlerini tıklayın. İmleç odaklanarak metin girmenizi sağlar.
3. Bir mülk adı girin ve Enter tuşuna basın.
4. Söz konusu özellik için geçerli bir değer girip 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

Değiştirmek istediğiniz bildirimin adını veya değerini çift tıklayın. Bir değeri 0, 1, 1, 10 veya 100 birim hızla artırmak veya azaltmak için kısayollarla ilgili Klavye kısayolları ile numaralandırılabilir değerleri değiştirme sayfasına göz atın.

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

Bir bildirimin numaralandırılabilir bir değerini (örneğin, font-size) düzenlerken değeri sabit bir miktar 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 değiştirmek için Yukarı, geçerli değer -1 ile 1 arasındaysa 0,1 değerini girin.
• 10 artırmak için Üst Karakter+Yukarı.
• Değeri 100 artırmak için Üst Karakter+Command+Yukarı (Mac) veya Control+Üst Karakter+Page Up (Windows, Linux) tuşlarına basın.

Küçültme de işe yarar. Daha önce bahsedilen tüm Up örneklerini Down ile değiştirmeniz yeterlidir.

Uzunluk değerlerini değiştir

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

Uzunluk birimini değiştirmek için:

1. İmleci birim adının üzerine getirin ve altı çizili olduğuna dikkat edin.

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. İmleci birim değerinin üzerine getirin ve işaretçinizin çift başlı yatay 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 değerine 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'yi 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 açmak veya kullanıcının açık ya da 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: açık değerini seçin. Kullanıcının açık temayı tercih ettiğini belirtir.
   • prefers-color-scheme: koyu olarak ayarlayın. Kullanıcının koyu temayı tercih ettiğini belirtir.
   • Otomatik koyu mod. Uygulamadığınız halde sayfanızı koyu modda görüntüler. Ayrıca, prefers-color-scheme değerini otomatik olarak dark değerine ayarlar.

Bu açılır menü, 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üne bakın. 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 işaretini kaldırın.

Stil kuralı ekle

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ı ekliyor.

Kuralın ekleneceği stil sayfasını seçin

Yeni bir stil kuralı eklerken Yeni Stil Kuralı simgesini tıklayıp basılı tutarak stil kuralının ekleneceği stil sayfasını seçin.

Beyanı aç/kapat

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

1. Bir öğe seçin.
2. Stiller sekmesinde imleci bildirimi tanımlayan kuralın üzerine getirin. Her bildirimin yanında onay kutuları görünür.
3. Bildirimin yanındaki onay kutusunu işaretleyin veya kutunun işaretini kaldırın. Bir bildirimi temizlediğinizde Geliştirici Araçları, artık etkin olmadığını belirtmek için beyanın üstünü çizer.

Ekran görüntüsünde, geçerli olarak seçili olan öğe için color özelliği kapalıdır.

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

Animasyonlar bölümünde ilgili bölüme bakın.

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

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

CSS'yi denetleme tablosunda ilgili bölüme bakın.

Renk Seçici ile renkleri değiştirin

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ştirin

Açılı Saat, CSS özellik değerlerindeki <angle> değerlerini değiştirmek için bir GUI sağlar.

Açılı Saat'i 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 öğelerinin solundaki küçük saatler, açılı önizlemelerdir.

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

   

4. Açı Saati 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 başka klavye kısayolları da vardır. Stiller bölmesi klavye kısayollarından daha fazla bilgi edinebilirsiniz.

Gölge Düzenleyici ile kutu ve metin gölgelerini 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 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ştirin:

   • 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ır. Kaydırma çubuğunu sürükleyin veya bir değer belirtin.
   • Dağıt (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 animasyon 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 bildirimi olan bir öğe seçin.
2. Stiller sekmesinde transition-timing-function, animation-timing-function bildirimlerinin veya transition kısayol özelliğinin yanındaki mor simgesini bulun.
3. Yumuşak Geçiş Düzenleyicisi'ni 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üzenleyicisi'ndeki hazır ayarları kullanın:

1. Yumuşak Geçiş Düzenleyicisi'nde anahtar kelime değeri belirlemek için seçici düğmelerinden birini tıklayın:
   • doğrusal
   • yumuşak giriş çıkış
   • yumuşatma
   • yumuşak çıkış

2. Hazır ayar değiştiricide, veya düğmesini 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ış	İçinde, Sinüs	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Yayında, İkinci dereceden	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	İçeride, Kübik	cubic-bezier(0.65, 0.05, 0.36, 1)
	Hızlı Giden, 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ş	İçinde, 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ı Giden, Doğrusal Giriş	cubic-bezier(0.4, 0, 1, 1)
yumuşak çıkış	Haydi, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Dışarı, İ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)
	Dışarı, Geri	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Özel zamanlamaları yapılandır

Zamanlama işlevleri için özel değerler ayarlamak üzere çizgiler üzerindeki denetim noktalarını kullanın:

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

  

• Kübik 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 animasyonu tetikler.

(Deneysel) CSS değişikliklerini kopyalama

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

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

Bildirimlerdeki tüm CSS değişikliklerini aynı anda kopyalamak için herhangi bir bildirimi sağ tıklayıp Tüm CSS değişikliklerini kopyala'yı seçin.

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