Web Geliştirme

CSS Minify / Beautify

Üretim için CSS'i sıkıştırın veya sıkıştırılmış CSS'i okunabilir bir biçime dönüştürün.


                        
                    

Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.

How to use it

Common uses

Things to keep in mind

Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.

Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.

Bu araç hakkında makale: CSS küçültme: dosyadan gerçekte ne kaldırılır ve neden

Sıkça sorulan sorular

Küçültme CSS'imden tam olarak neyi kaldırır?

Minify, boşlukları, satır sonlarını ve yorumları kaldırır ve bazı değerleri kısaltarak CSS'in davranışını değiştirmeden dosya boyutunu azaltır.

Beautify orijinal biçimlendirmemi mükemmel şekilde geri yükleyebilir mi?

Beautify, okunabilirlik için küçültülmüş CSS'i girinti ve satır sonlarıyla yeniden biçimlendirir, ancak yorumları veya orijinal stil seçimlerinizi geri getiremez, çünkü bunlar küçültme sırasında zaten kaldırılmıştır.

Küçültme herhangi bir geçerli CSS için güvenli mi?

Evet — sözdizimsel olarak geçerli CSS için küçültme yalnızca gereksiz karakterleri kaldırır ve seçicileri veya özellik değerlerini asla değiştirmez, ve her şey tarayıcınızda yerel olarak çalışır.

Sunucu dosyaları zaten Gzip ile sıkıştırıyorsa yine de küçültmeye ihtiyaç var mı?

Evet — küçültme ve Gzip/Brotli sıkıştırması birbirini tamamlar: küçültme, sıkıştırmadan önce kaynak dosyayı küçültür, Gzip/Brotli ise sonucu aktarım sırasında daha da sıkıştırır, bu yüzden ikisi birlikte, tek başına herhangi bir teknikten daha küçük bir nihai boyut verir.

Küçültülmüş CSS için source map nedir?

Source map, küçültülmüş CSS'in satırlarını orijinal, biçimlendirilmiş kodla eşleştiren ayrı bir dosyadır; bu sayede üretime aslında küçültülmüş sürüm dağıtılsa bile, tarayıcı geliştirici araçları hata ayıklama sırasında doğru satır numaralarını ve dosya adlarını gösterebilir.

Makaleler: Web Geliştirme

HEX, RGB, HSL: bir rengi yazmanın neden bu kadar çok yolu var

Tasarımcılar elle bir renk tonu seçerken neden genellikle HEX yerine HSL'yi tercih eder.

JavaScript küçültme: küçültme ile karartma arasındaki fark

İstenirse küçültülmüş kod hâlâ okunabilirken, karartılmış kodun neden okunamadığı.

HTML küçültme: işaretlemedeki boşluklar neden önemli

<pre> veya bir textarea içindeki boşlukları kaldırmak, hemen hemen her yerin aksine sayfanın görünümünü neden bozabilir.

CSS gradyanları: linear, radial ve conic'ten nasıl farklıdır

conic-gradient neden pasta grafikleri için işe yararken, radial-gradient neden bir ışık lekesi efekti verir.

Luhn algoritması: bir kart numarasının doğruluğu nasıl kontrol edilir

Luhn kontrolünden geçen bir kart numarasının, o kartın gerçekten var olduğu anlamına neden gelmediği.

IBAN: uluslararası bir banka hesap numarası nasıl yapılandırılmıştır

Bir IBAN'ın ilk iki harfinin neden hesap numarasının bir parçası değil, bir ülke kodu olduğu.

QR kodları: bir bağlantı piksellerden oluşan bir kareye nasıl sığar

Ortasında logo bulunan bir QR kodu, desenin bir kısmı kaplanmış olsa bile neden hâlâ taranabiliyor.

Barkodlar: Code 128, EAN-13'ten nasıl farklıdır

Mağaza raflarındaki ürünlerin neredeyse her zaman Code 128 yerine EAN-13 kullandığı.

Placeholder görseller: geliştirme sırasında sahte resimler neden önemli

Bir tasarım henüz inşa halindeyken geliştiricilerin gerçek fotoğraflar yerine bilerek gri kutular yerleştirdiği.