Bozuk CSS'inizi buraya yapıştırın ve "CSS'i Düzelt!!" düğmesine tıklayınGeçersiz CSS girin

CSS Düzeltme Aracı Nedir?

CSS sessizce başarısız olur. color: #222'den sonraki noktalı virgülü unutursunuz, text-align yerine txt-align yazarsınız, #cart-summary'den önce fazladan bir { bırakırsınız ya da content: "Total içindeki dizeyi kapatmazsınız — tarayıcı hata atmaz, sadece kuralı atlar. Araç bu bozulmaları yakalar ve gerçekten ayrıştırılan CSS'i geri verir. .order-row veya #cart-summary gibi gerçek seçicilerle çalışır, oyuncak örneklerle değil.

CSS spesifikasyonu W3C CSS Working Group tarafından sürdürülür ve aktif taslaklar drafts.csswg.org'da bulunur; her özelliğin ne yaptığına dair günlük referans MDN CSS'tir. Düzeltmeden sonra çıktıyı doğrulamak için bir CSS doğrulayıcısından geçirin ve tarayıcı desteği için caniuse.com'a bakın.

İşlem sunucu tarafında yapılır ve girdi kalıcı olarak saklanmaz. Kuralları düzeltin, stil sayfanıza geri yapıştırın, dağıtın.

CSS Düzeltme Aracı Nasıl Kullanılır

Üç adım. Her adım bu sayfadaki gerçek düğmeleri kullanır.

Bozuk CSS yapıştırın veya örnek yükleyin

Bozuk CSS'inizi sol editöre yapıştırın. En yaygın hataları içeren kasıtlı bozuk bir kuralı yüklemek için Örnek CSS'a tıklayın. Aracın işlediği bozuk CSS örneği:

.order-row {
  color: #222
  padding 12px;
}

Eksik noktalı virgülleri, dengesiz {}'leri, özellik ile değer arasında eksik iki noktaları, kapatılmamış dizeleri ve txt-align gibi özellik adlarındaki bariz yazım hatalarını onarır.

"CSS'i Düzelt!!" düğmesine tıklayın

Araç çubuğundaki yeşil CSS'i Düzelt!! düğmesine tıklayın. Araç girdinizi analiz eder, sözdizim sorunlarını tespit eder ve onarılmış sürümü sağ panele yazar. İşlem sırasında yükleme göstergesi görünür.

Düzeltilmiş çıktıyı inceleyin

Sağ panel onarılmış CSS'i gösterir. Özellik değerlerine dokunulmaz — yalnızca etrafındaki sözdizimi düzeltilir. Çıktıyı stil sayfanıza geri yapıştırın.

Bu aracı gerçekten ne zaman kullanırsınız

Eski stil sayfalarını temizleme

Eski stil sayfaları küçük sözdizim bozulmaları biriktirir — editörünüzün size hiç bildirmediği türden, çünkü üstteki ve alttaki kural yine ayrıştırılıyor. Linter'ınızın atladığını bulmak için dosyayı araçtan geçirin.

CMS veya WYSIWYG editörlerinden CSS

CMS tema editörleri ve WYSIWYG dışa aktarımları fazladan bir kapanış süslü parantezi yaymayı çok sever. Araç bunu fazlalık <code>}</code>'yi avlamanıza gerek kalmadan normalleştirir.

Build öncesi doğrulama

Bozuk CSS'i PostCSS, Sass veya bundler'ınıza ulaşmadan önce araçtan geçirin — girdi başlangıçta geçerli CSS olduğunda transpiler hataları çok daha az anlaşılmaz hale gelir.

Yapay zeka tarafından üretilen parçaları onarma

LLM tarafından üretilen CSS sıklıkla bir veya iki noktalı virgülü kaçırır. Modelin çıktısını araçtan geçirin; sessizce başarısız olmak yerine tarayıcıda gerçekten uygulanan CSS elde edersiniz.

Sık Sorulan Sorular

CSS verilerim saklanıyor mu?

Hayır. Onarım sunucuda çalışır ama girdiyi kalıcı olarak saklamayız. Yanıt tarayıcınıza döndüğünde bizim tarafımızda artık bulunmaz.

Hangi tür hataları düzeltir?

Eksik noktalı virgüller, dengesiz süslü parantezler, özellik ile değer arasında eksik iki noktalar, kapatılmamış dizeler ve özellik adlarındaki bariz yazım hataları — günlük problemler. Tasarımınızı yeniden yazmaz, yalnızca etraftaki sözdizimi düzeltir.

Özellik değerlerim değişiyor mu?

Yalnızca sözdizim için gerekli olduğunda (örneğin txt-align'i text-align olarak düzeltmek). Sayısal değerler, renkler ve dizeler yazdığınız gibi kalır.

<code>@media</code> ve <code>@keyframes</code>'i ele alır mı?

Evet — araç at-kuralları (@media, @keyframes, @supports) içindeki blokları üst düzey kural blokları gibi ele alır. İçlerindeki eksik süslü parantezler veya noktalı virgüller de onarılır.

Düzeltilen CSS'in geçerli olduğunu nasıl onaylarım?

Düzeltmeden sonra çıktıyı bir CSS doğrulayıcısından geçirin. Hızlı bir ikinci geçiş için aracı CSS Doğrulayıcı ile birlikte de kullanabilirsiniz.

SCSS veya LESS ile çalışır mı?

Araç düz CSS'i hedefler. Ön işlemci sözdizimi (değişkenler, iç içe yerleştirme, mixin'ler) için önce SCSS'ten CSS'e veya LESS'ten CSS'e ile derleyin, sonra gerekirse aracı çalıştırın.

Diğer CSS Araçları

Düzeltmek yalnızca bir adım. İşte birlikte iyi çalışan diğer CSS araçları: