Geliştirici Araçları İpuçları: CSS sorunlarını keşfetme

Sofia Emelianova
Sofia Emelianova

Bir öğeye CSS uyguladığınız halde çalışmadığını fark ettiniz mi?

Chrome Geliştirici Araçları'nı kullanarak CSS sorunlarını bir bakışta keşfedebilir, hata ayıklayabilir ve test edebilirsiniz.

Öğeler > Stiller bölmesinin çeşitli CSS sorunlarını nasıl vurguladığını öğrenmek için videoyu izleyin:

  • Uyarı: Geçersiz söz dizimi içeren mülk

  • Onay kutusu. Geçersiz kılınan mülk

  • Onay kutusu. Etkin olmayan mülk Bilgi.İpucu ile.

  • parent kaynağından devralındı

    • Onay kutusu. Devralınan mülk
    • Onay kutusu. Devralınmayan mülk
  • Onay kutusu. Genişletilebilir kısayol mülkü Genişlet.

    • Onay kutusu. Geçersiz kılınan uzun adlı mülk
    • Onay kutusu. Etkin uzun el yazısı mülkü

kullanıcı aracısı stil sayfası

  • Düzenlenemeyen mülk
  • Geçersiz kılınan düzenlenemeyen mülk

Hata ayıklamayla ilgili diğer ipuçları:

  • İlgilendiğiniz tek mülke odaklanmak için Stiller bölmesinde filtreyi kullanın.
  • Tüm Cascade kazananlarını ve hesaplanan değerlerini görmek için Hesaplanmış bölmesini kullanın.
  • Hesaplanmış bölmesinde bir mülkü genişletin ve Stiller bölmesinde kaynağını bulmak için bağlantıyı tıklayın.

DevTools'un CSS sorunlarını vurgulama yöntemleri hakkında daha fazla bilgi edinmek için Geçersiz, geçersiz kılınmış, etkin olmayan ve diğer CSS'leri bulma başlıklı makaleyi inceleyin.

CSS uzmanlığınızı geliştirmek için CSS'yi öğrenme başlıklı makaleyi inceleyin.

Hem harika görünen hem de herkes için iyi çalışan web siteleri oluşturmayı öğrenmek istiyorsanız Duyarlı Tasarım hakkında bilgi edinin.