CSS Biçimlendirici, Güzelleştirici ve Küçültücü

CSS'i tarayıcınızda anında biçimlendirin, güzelleştirin ve küçültün. Dağınık stil sayfalarını düzenleyin veya sıkıştırın — ücretsiz, gizli, CSS'iniz cihazınızdan çıkmaz.

Takip Yok Tarayıcıda Çalışır Ücretsiz

CSS Girdi

Girinti

Biçimlendirilmiş CSS

🔒 %100 tarayıcıda — CSS'iniz cihazınızdan çıkmaz.

Reviewed for render-safe formatting and lossless minification — Go Tools Engineering Team · Jun 5, 2026

CSS Biçimlendirme Nedir?

CSS biçimlendirme (güzelleştirme veya düzgün yazdırma da denir), bir stil sayfasını yapısı kolay okunacak şekilde tutarlı girinti, satır sonları ve boşluklarla yeniden yazar. Stiller önce ve sonra aynı şekilde işlenir — yalnızca boşluk değişir. Küçültme bunun tersini yapar: yorumları söker ve CSS'i mümkün olan en küçük boyuta sıkıştırarak sayfaların daha hızlı yüklenmesini sağlar. Bu araç ikisini de, tamamen tarayıcınızda yapar.

Temel Özellikler

Biçimlendir ve küçült

Dağınık CSS'i okunabilirlik için güzelleştirin veya gönderilebilir en küçük boyuta sıkıştırın — tek araçta.

Bayt tasarruf göstergesi

Küçültmenin kaç bayt tasarruf ettiğini tam olarak görün; böylece yük etkisini öğrenin.

%100 gizli

Tüm işlemler tarayıcınızda gerçekleşir. CSS'iniz hiçbir zaman bir sunucuya gönderilmez.

Stil denetimleri

Ekibinizin kurallarına uyacak şekilde 2 boşluk, 4 boşluk veya sekme girintisi seçin.

Örnekler

Küçültülmüş kural seti

body{margin:0;padding:0;font-family:system-ui}.card{display:flex;gap:1rem;padding:16px;border-radius:12px;background:#fff}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}

Tek satırlık bir stil sayfasını okunabilir, girintili kurallara genişletin.

Medya sorgusu

@media(max-width:640px){.nav{flex-direction:column}.nav a{padding:8px 0}}

İç içe at-kurallarını girintileyerek kesme noktalarını kolayca taranabilir hale getirin.

Özel özellikler

:root{--primary:#6366f1;--gap:8px}.btn{color:var(--primary);margin:var(--gap)}

CSS değişkenlerini ve var() kullanımını temiz biçimde düzenleyin.

Keyframe'ler

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

Animasyon keyframe'lerini satır satır düzenleyin.

Yaygın Kullanım Senaryoları

Devralınan CSS'i temizleme: Küçültülmüş veya tutarsız bir stil sayfasını gerçekten okuyup düzenleyebileceğiniz hale getirmek için güzelleştirin.
Kod incelemesi: Pull request açmadan önce CSS'i biçimlendirerek inceleyenlerin tutarlı ve fark alınabilir stiller görmesini sağlayın.
Daha küçük gönderim: Üretim CSS'ini küçülterek bayt azaltın ve sayfa yükleme hızını artırın.
Örneklerden öğrenme: Bir siteden kopyaladığınız bir parçacığı yapıştırın ve yapısını anlamak için biçimlendirin.

Teknik Ayrıntılar

js-beautify ile güzelleştirilir: Öngörülebilir, yapılandırılabilir çıktı için popüler çevrimiçi güzelleştiricilerin arkasındaki aynı savaşta sınanmış motoru kullanır.
CSSO ile küçültülür: Güvenli biçimde sıkıştırır — boşlukları birleştirir ve stillerin işlenme biçimini değiştirmeden yorumları kaldırır.
Tarayıcı tabanlı: Tamamen istemci tarafında çalışır; hiçbir CSS cihazınızdan çıkmaz veya bir sunucuya ulaşmaz.

En İyi Uygulamalar

Kaynağı biçimlendirin, üretim için küçültün: Okunabilir CSS'i deponuzda tutun; yalnızca bir derleme/dağıtım adımı olarak küçültün.
Tek bir girinti stili seçin: Temiz farklar için ekip genelinde 2 boşluk, 4 boşluk veya sekme üzerinde anlaşın.
En son küçültün: Tüm düzenlemelerden sonra küçültme yapın — küçültülmüş CSS'i elle düzenlemek zordur.

Sıkça Sorulan Sorular

CSS'i online olarak nasıl biçimlendiririm?

CSS'inizi giriş kutusuna yapıştırın ve Biçimlendir'e tıklayın. Araç, stil sayfasını tutarlı satır sonları ve boşluklarla yeniden girintiler, ardından kopyalamanıza izin verir. Her şey tarayıcınızda yerel olarak çalışır — hiçbir şey yüklenmez.

CSS'i nasıl küçültürüm?

CSS'inizi yapıştırın ve Küçült'e tıklayın. Araç yorumları kaldırır ve boşlukları daraltarak mümkün olan en küçük eşdeğer stil sayfasını üretir; kaç bayt tasarruf ettiğinizi gösterir. Küçültülmüş CSS, orijinaliyle tam olarak aynı şekilde işlenir.

CSS biçimlendirme ile küçültme arasındaki fark nedir?

Biçimlendirme (güzelleştirme), CSS'i okunabilir kılmak için girinti ve satır sonları ekler. Küçültme bunun tersini yapar: daha hızlı yükleme için dosyayı küçültmek amacıyla yorumları ve boşlukları soyar. Her ikisi de orijinaliyle aynı şekilde işlenen stiller üretir.

Biçimlendirme stillerimin görünümünü değiştirir mi?

Hayır. Biçimlendirme ve küçültme yalnızca boşlukları ve yorumları değiştirir — seçicileri, özellikleri veya değerleri asla. Sayfa önce ve sonra tamamen aynı şekilde görüntülenir.

CSS'im bu araçla güvende mi?

Evet. Tüm biçimlendirme ve küçültme işlemleri JavaScript kullanılarak tarayıcınızda yerel olarak gerçekleşir — CSS'iniz hiçbir zaman herhangi bir sunucuya gönderilmez, kaydedilmez veya depolanmaz. Bu, yapıştırdığınız her şeyin bir kopyasını alan sunucu tarafı biçimlendiricilerin aksine, onu özel veya yayımlanmamış stiller için güvenli kılar.

SCSS veya Less biçimlendirebilir mi?

Standart CSS'i biçimlendirir ve küçültür. Aynı zamanda geçerli CSS olan düz SCSS/Less genellikle sorunsuz biçimlenir, ancak yalnızca ön işlemciye özgü sözdizimi (iç içe geçme, mixin'ler, $ veya @ ile değişkenler) en iyi ön işlemcinizin kendi biçimlendiricisiyle ele alınır.

CSS için hangi girintiyi kullanmalıyım?

İki boşluk en yaygın varsayılandır ve farkları kompakt tutar; dört boşluk derin iç içe geçmiş kurallarda okunabilirliği artırabilir; sekmeler her geliştiricinin kendi genişliğini seçmesine izin verir. Birini seçin ve tutarlı biçimde uygulayın — bu araç üçünü de destekler.

İlgili Araçlar

Tüm araçları görüntüleyin →

HTML Biçimlendirici, Güzelleştirici ve Küçültücü

Kod

HTML'yi tarayıcınızda anında biçimlendirin, güzelleştirin ve küçültün. Dağınık işaretlemeyi girintileyin veya sıkıştırın — ücretsiz, gizli, HTML'niz cihazınızdan çıkmaz.

JavaScript Biçimlendirici ve Küçültücü

Kod

JavaScript'i tarayıcınızda anında biçimlendirin, güzelleştirin ve Terser ile küçültün. Dağınık kodu temizleyin veya sıkıştırın — ücretsiz, gizli, kodunuz cihazınızdan çıkmaz.

SQL Biçimlendirici ve Güzelleştirici

Kod

SQL'i tarayıcınızda anında biçimlendirin, güzelleştirin ve küçültün. PostgreSQL, MySQL, SQL Server, BigQuery, Snowflake, Oracle ve SQLite destekler. Ücretsiz, gizli — SQL'iniz cihazınızdan çıkmaz.

Sayı Tabanı Dönüştürücü — Binary, Hex, Decimal ve Octal

Dönüştürme Araçları

Binary, hex, decimal, octal ve herhangi bir taban (2-36) arasında anında dönüştürün. Ücretsiz ve gizli — tüm işlem tarayıcınızda yapılır.

Base64 Çözücü ve Kodlayıcı

Kodlama ve Biçimlendirme

Base64'ü ücretsiz çevrimiçi kodlayın ve çözün. Tam UTF-8 ve emoji desteğiyle gerçek zamanlı dönüştürme. %100 tarayıcıda — kayıt gerekmez.

Base64'ü Görsele Çevirme Aracı

Kodlama ve Biçimlendirme

Bir Base64 dizesini ya da data URI'yi tarayıcınızda görsele geri çözün. Önizleyin, boyutları ve MIME'ı okuyun, ardından PNG, JPG, GIF, SVG olarak indirin. Yükleme yok.