CSS özellikleri referansı

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.

Seçili bir öğeye örnek.

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

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

  • Görüntüleme alanınızda öğeyi sağ tıklayın ve İncele'yi seçin.
  • DevTools'da Bir öğe seçin'i tıklayınÖğe seçin 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'da 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.

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

Bunların bazıları aşağıda vurgulanmıştır:

Çeşitli bağlantılar vurgulanmıştır.

Bağlantılar farklı şekilde biçimlendirilebilir. Bir öğenin bağlantı olup olmadığından emin değilseniz bağlantı olup olmadığını öğrenmek için öğeyi tıklamayı deneyin.

CSS dokümanları, özgünlük ve özel mülk değerleri içeren ipuçları görüntüleme

Öğeler > Stiller, fareyle 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.

CSS mülküyle ilgili dokümanları içeren ipucu.

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

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

Bunları tekrar etkinleştirmek için Ayarlar'a dokunun. Ayarlar > Tercihler > Öğeler > Onay kutusu. CSS dokümanlarını ipucu olarak göster'i işaretleyin.

Seçicinin özgünlüğünü görüntüleme

Fareyle bir seçicinin üzerine gelerek özgünlük ağırlığını içeren bir ipucu görebilirsiniz.

Eşleşen bir seçicinin özgül ağırlığını içeren ipucu.

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

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

Bir ipucu metnindeki özel mülkün değeri.

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 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ı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 Hesaplanmış sekmesine gidin.

Hesaplandı sekmesi.

Tüm mülkleri 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

Hesaplanmış 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 Inherited from <element_name> adlı bölümleri bulun.

Stiller sekmesinin &quot;Devralındı...&quot; bölümünü görüntüleyin.

CSS at-kuralları görüntüleme

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

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

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

Stiller sekmesindeki böyle bir mülkün adının üzerine gelerek mülkün değerini, tanımlayıcılarını ve Stiller sekmesinin alt kısmındaki daraltılabilir @property bölümünde kayıt bağlantısını içeren bir ipucunu 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:

@supports at-kuralları görüntüleyin.

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

@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 specification (CSS Yığınlama ve Devralma 6. Seviye Spesifikasyonu) kapsamındadır. Bu kurallar, CSS stillerini kapsamanıza, yani stilleri belirli öğelere açıkça uygulamanıza olanak tanır.

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

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

@scope kuralı.

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

Bir 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 bölümünde @font-palette-values bölümünü bulun.

@font-palette-values kuralı.

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 at-kuralları görüntüleme

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 aşağıdakileri çözer ve bağlar:

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

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

popover ile ankraj kullanan demo
  1. Önizlemede alt menüyü açın. Yani HESABINIZ'ı, ardından MAĞAZA'yı tıklayın.
  2. Önizlemede id="submenu" ile öğeyi inceleyin.
  3. Stiller bölümünde position-try-options mülkünü 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.

position-try-options mülkü, @position-try bölümü ve popover hedef özelliğine sahip öğe.

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

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

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

Kutu modeli şeması.

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 Hesaplanmış sekmelerindeki Filtre kutusunu kullanın.

Stiller sekmesini filtreleme.

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

Hesaplanan sekmesinde devralınan özellikleri filtreleme.

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

Filtrelenmiş mülkleri gruplandırma

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. Odaklanmış sayfa emülasyonu seçeneği, bu tür bir öğede odaklanmış gibi hata ayıklamanıza olanak tanır.

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. DevTools'u açın. Sayfa yerine Geliştirici Araçları penceresi odaklandığından öğe tekrar kaybolur.
  3. Öğeler > Stiller bölümünde :hov'u tıklayın, Odaklanmış bir sayfayı taklit et'i işaretleyin ve giriş öğesinin seçili olduğundan emin olun. Artık altındaki öğeyi inceleyebilirsiniz.

&quot;Odaklanmış sayfa emülasyonu&quot; seçeneğini etkinleştirmeden önce ve sonra.

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çma/kapatma

Sanal sınıfı etkinleştirmek veya devre dışı bırakmak için:

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

Bir öğede fareyle üzerine gelme sözde durumunu değiştirme

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:

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.

&quot;textarea&quot; öğesinin &quot;Belirli bir öğe durumunu zorunlu kıl&quot; bölümü.

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

Sanal öğeler, öğelerin belirli bölümlerine stil uygulamanıza olanak tanır. 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'dır.

Özellikte belirtildiği gibi, birden fazla stil çakıştığında kazanan stil basamaklı olarak belirlenir.

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 vurgulu metin sözde öğesinin stilini devraldım. Beni seçin.
  2. Yukarıdaki metnin bir bölümünü seçin.

  3. Stiller sekmesinde, Inherited from ::selection pseudo of... bölümünü bulmak için aşağı kaydırın.

Stiller sekmesinin Devralındı bölümünü görüntüleyin.

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

Dizi katmanları, stil özgünlüğüne ilişkin anlaşmazlıkları önlemek için CSS dosyalarınız üzerinde daha net bir kontrol sağlar. Bu, büyük kod tabanları, tasarım sistemleri ve uygulamalarda üçüncü taraf stillerini 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.

Katmanları basamaklandırma

Katman sırasını görüntülemek için katman adını veya Katmanları açma/kapatma 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ülemek için:

  1. Komut menüsünü açın.
  2. Rendering yazmaya başlayın ve Show Rendering'ü seçin.
  3. CSS Medya Emülasyonu açılır menüsünde print'i 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 DevTools odaktayken Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux, ChromeOS) tuşlarına basın.
  2. coverage yazmaya başlayın.

    Komut menüsünden Kapsam sekmesini açma.

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

    Kapsam sekmesi.

  4. Kapsam enstrümantasyonunu başlatın ve sayfayı yeniden yükleyin. 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.

    Ne kadar CSS (ve JavaScript) kullanıldığına ve kullanılmadığına genel bakış.

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

  5. Bir CSS dosyasını tıklayarak, yukarıdaki önizlemede hangi CSS'nin kullanıldığını satır satır görebilirsiniz.

    Kullanılan ve kullanılmayan CSS&#39;nin satır satır dökümü.

    Ekran görüntüsünde, devsite-google-blue.css için 55 ila 57 ve 65 ila 67 arasındaki satırlar kullanılmazken 59 ila 63 arasındaki 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ı, bildirimleri, mülkleri, 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. CSS&#39;yi kopyala açılır menüsü.
  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ştirme

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:

Bir öğeye CSS beyanı ekleme

Bildirimlerin sırası bir öğenin stilini etkilediğinden, bildirimleri farklı şekillerde ekleyebilirsiniz:

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 beyan ekleme

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

  1. Bir öğe seçin.
  2. Stiller sekmesinde, element.style bölümünün köşeli 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. İlgili mülk 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.

    Satır içi beyanlar ekleme.

    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 beyan ekleme

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

  1. Bir öğe seçin.
  2. Stiller sekmesinde, beyanı eklemek istediğiniz stil kuralının köşeli 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. İlgili mülk için geçerli bir değer girin ve Enter tuşuna basın.

Bir beyanın değerini değiştirme.

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

Tanımlama adını veya değerini değiştirme

Değiştirmek için bir bildirimin adını veya değerini çift tıklayın. Bir değeri 0, 1, 1, 10 veya 100 birim artırıp azaltmak için kısayollara göz atmak isterseniz Listelenebilen değerleri klavye kısayollarıyla değiştirme başlıklı makaleyi inceleyin.

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 artırmak için yukarı, mevcut değer -1 ile 1 arasındaysa 0,1 artırmak için ise yukarı düğmesine basın.
  • 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 işlemi de işe yarar. Bunun için, daha önce bahsedilen her Yukarı ifadesini Aşağı ile değiştirmeniz yeterlidir.

Uzunluk değerlerini değiştirme

İşaretçinizi kullanarak genişlik, yükseklik, dolgu, kenar boşluğu veya kenar gibi uzunluk içeren tüm özellikleri değiştirebilirsiniz.

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 geldiğinizde işaretçinizin yatay çift başlı bir oka dönüştüğünü göreceksiniz.
  2. Değeri artırmak veya azaltmak için yatay olarak sürükleyin.

Değeri 10'a göre 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.

Öğe sınıfları bölümü.

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

Otomatik koyu modu etkinleştirmek 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çın veya kapatın.Genel oluşturma emülasyonlarını aç/kapat'ı tıklayın. Genel oluşturma emülasyonlarını açın veya kapatı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 değerini otomatik olarak dark olarak ayarlar.

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

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 etkinleştirin veya devre dışı bırakın.

Stil kuralı ekleme

Yeni bir stil kuralı eklemek için:

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

Yeni bir stil kuralı ekleme.

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

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ı Yeni Stil Kuralı. basılı tutun.

Stil sayfası seçme.

Beyan aç/kapat

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

  1. Bir öğe seçin.
  2. Stiller sekmesinde, beyanı tanımlayan kuralın üzerine gelin. Her beyanın yanında onay kutuları görünür.
  3. 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.

Bir beyanı etkinleştirme veya devre dışı bırakma.

Ekran görüntüsünde, şu anda seçili olan öğenin color mülkü devre dışı bırakılmıştır.

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

Animasyonlar bölümündeki 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ındaki 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çı değerini açı saatiyle 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.

    Açı önizlemesi.

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

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

    Açı saati.

  4. Açı Saati çemberini tıklayarak açı değerini değiştirin veya farenizi 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 Stil bölmesi klavye kısayolları bölümüne bakın.

Gölge düzenleyiciyle kutu ve metin gölgelerini 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 beyanının yanında gölge Gölge. simgesini bulun.

    Gölge simgeleri.

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

    Gölge düzenleyici.

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

    • Tür (yalnızca box-shadow için). Dışa doğru veya İçe doğru'yu 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.
    • Spread (yalnızca box-shadow için). Kaydırma çubuğunu sürükleyin veya bir değer belirtin.
  5. Öğe'ye uygulanan değişiklikleri gözlemleyin.

Easing Düzenleyici ile animasyon ve geçiş zamanlamalarını düzenleme

Yumuşatma Düzenleyici, transition-timing-function ve animation-timing-function değerlerini değiştirmek için bir 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 bildirimlerinin veya transition kısaltma mülkünün yanındaki mor Rahatlayın. simgesini bulun. Easing Editor simgesi.
  3. Yumuşatma Düzenleyici'yi açmak için simgeyi tıklayın: Yumuşatma Düzenleyicisi.

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

Zamanlamaları tek tıklamayla ayarlamak için 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 Doğrusal düğme.
    • ease-in-out Yumuşak giriş çıkış düğmesi.
    • ease-in Yavaşça başlama düğmesi.
    • ease-out Yavaşça sonlandırma düğmesi.
  2. Hazır ayar değiştiricide Sol. veya Sağ. 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ış In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
Giriş Çıkış, İ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ş In, Sine 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)
İçinde, Arka 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ış Dışarı, Sine 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ş 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ırma

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

  • Doğrusal işlevler için çizginin herhangi bir yerini tıklayarak bir kontrol noktası ekleyin ve sürükleyin. Noktayı kaldırmak için çift tıklayın.

    Doğrusal bir fonksiyonun kontrol noktasını sürükleme.

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

    Kübik Bezier işlevinin kontrol noktalarını sürükleme.

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

(Deneme) CSS değişikliklerini kopyala

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&#39;ya dokunun. Kopyala düğmesini tıklayın.

CSS tanımı değişikliğini kopyalayın.

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.

Tüm CSS değişikliklerini kopyalayın.

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