CSS-i heç nə quraşdırmadan onlayn necə minifikasiya edə bilərəm?

CSS-inizi CSS daxiletməsinə yapışdırın və ya .css faylı sürüşdürüb buraxın, sonra CSS-i minifikasiya et düyməsini basın. Şərhlər və artıq boşluqlar silinir, nəticəni Kopyalaya və ya styles.min.css kimi Yükləyə bilərsiniz.

CSS minifikatoru lisenziya şərhlərini və data URI-ləri toxunulmaz saxlayır?

Bəli. Adi şərhlər silinir, lakin /*! license */ şərhləri saxlanılır. Dırnaqlı sətirlər, url() dəyərləri və data URI-lər ayrıca tokenlərə ayrılır, ona görə boşluq qaydaları onları dəyişmir.

Minifikasiya olunmuş CSS-i yenidən oxunaqlı koda necə çevirə bilərəm?

CSS-i minifikasiya et əvəzinə CSS-i gözəlləşdir düyməsini basın. Kod hər səviyyə üçün iki boşluqla yenidən girintilənir, a:hover kimi selektor iki nöqtələri xassə iki nöqtələrindən fərqləndirilir. Yüklə onu styles.css kimi saxlayır.

Azalmanın yanındakı gzip rəqəmi nə deməkdir?

Bu, brauzerin CompressionStream API-si ilə ölçülən, gzip sıxışdırmasından sonra nəticənin ölçüsünün təxminidir. Brauzerinizdə bu API yoxdursa, gzip ölçüsü göstərilmir.

CSS-i minifikasiya edəndə serverə göndərilir?

Xeyr. Minifikasiya brauzerinizdə işləyən JavaScript tokenizatoru ilə, xarici kitabxana olmadan aparılır. Heç nə yüklənmir, ona görə onu şəxsi üslub cədvəlləri üçün istifadə edə bilərsiniz.

Həqiqətən pulsuzdur?

Bəli. Hər alət pulsuzdur, hesab və kredit kartı tələb olunmur. İş serverlərimizdə deyil, cihazınızda icra olunur, bu da onu pulsuz saxlayır.

Mobil cihazda işləyir?

Bəli. iOS və Android-in müasir mobil brauzerlərində heç nə quraşdırmadan işləyir.

🗜️

Pulsuz CSS Minifikator və Gözəlləşdiricisi

Fayl ölçüsünü azaltmaq üçün CSS-i minifikasiya edin və ya oxunuş üçün minifikasiya edilmiş CSS-i gözəlləşdirin. Ani, brauzerinizdə.

Brauzerdə işləyirQeydiyyat yoxdur, açılan pəncərə yoxdurGiriş tələb olunmurHəmişəlik pulsuz

Bir dəfə yükləndikdən sonra oflayn işləyir

və ya aşağıya .css faylı atın

.css faylını bura atın və ya seçmək üçün klikləyin

CSS · cihazınızda emal edilir

və ya mübadilə buferindən yapışdırmaq üçün Ctrl+V basın

Fayllara baxın

CSS girişi

CSS çıxışı

Çıxış burada görünəcək…

Ümumi istifadələr

İstehsal Yerləşdirmə üçün CSS-i Minifiyə Edinİstehsal yerləşdirilməsindən əvvəl CSS fayl ölçüsünü azaldın — daha sürətli səhifə yükləmələri və aşağı bant eni xərcləri.
Səhv Ayıqlama üçün Minifiyə olunmuş CSS-i GözəlləştirinSıxılmış və ya minifiyə olunmuş CSS-i oxunaqlı koda formatlayın, böylə üslubları inspekt edə və səhv ayıqlaya biləsiniz.
E-Poçt Şablonları üçün CSS-i Minifiyə EdinHTML e-poçt şablonları üçün CSS-i kompakt edin, burada fayl ölçüsü və sətirlər içi stil şişkinliyi önemlidir.
WordPress Mövzusu üçün CSS-i Minifiyə EdinDaha yaxşı PageSpeed xalları üçün özel WordPress mövzu stil cədvəllərlərinin ölçüsünü azaldın.
Kod Nəzarətinə Görə CSS-i Gözəlləştirinİstənilən CSS faylını nəzarət və əməkdaşlığa hazır olan təmiz, girinti edilmiş, oxunaqlı koda formatlaşdırın.

Necə İşləyir

Bu alət tamamilə JavaScript-də qurulmuş əl ilə yazılmış, sıfır-asılılıqlı bir CSS nişanlayıcısından istifadə edir — xarici kitabxana yoxdur, server çağırışı yoxdur. Nişanlayıcı hər hansı çevirmə tətbiq etməzdən əvvəl hər simvolu kod, şərh, dırnaqlanmış sətir, ya da url() dəyəri kimi təsnif edir, bu isə boşluq qaydalarının sətir məzmununu, data URI-ları, ya da calc() ifadələrini pozmasının qarşısını alır.

1
Nişanlanma keçidi
Giriş CSS-i simvol-simvol skan edilir və yazılmış nişanlara bölünür: xam kod seqmentləri, /* ... */ şərhlər, dırnaqlanmış sətirlər (qaçış ardıcıllıqlarını qoruyaraq) və url(...) blokları. Bu, növbəti addımdakı çevirmələrin yalnız real CSS sintaksisinə toxunmasını təmin edir — heç vaxt bir sətir literalı və ya data URI-nin məzmununa deyil.
2
Kiçildilmə və ya gözəlləşdirmə
Kiçildilmə rejimində, adi şərhlər atılır (/*! license */ şərhləri saxlanılır), kod nişanlarındakı boşluq ardıcıllıqları tək boşluqlara sıxılır, { } : ; , > ~ ətrafındakı durğu-yaxın boşluq isə çıxarılır. + və - ətrafındakı boşluqlar calc() ifadələrini pozmamaq üçün qəsdən toxunulmaz saxlanılır. Gözəlləşdirmə rejimində, kod əvvəlcə təmiz bir baza xəttinə kiçildilir, sonra iki-boşluqlu dərinlik izləməsi və bəyanat-nöqtəli-vergül aşkarlaması ilə yenidən nişanlanır və yenidən girintilənir ki, property: value nöqtəli-vergüllərini a:hover kimi seçici nöqtəli-vergüllərindən ayırsın.
3
Gzip ölçü təxmini
Çıxışı yaratdıqdan sonra, nəticəni gzip ilə sıxışdırmaq və nəticələnən bayt sayını ölçmək üçün brauzerin doğma CompressionStream API-si istifadə edilir. Bu, gzip sıxılması olan bir veb serverin şəbəkə üzərindən nə göndərəcəyinə uyğun realist bir ötürmə-ölçü təxmini verir.
4
Kopyala və ya endir
İşlənmiş CSS Clipboard API vasitəsilə mübadilə buferinə yazılır, ya da text/css MIME növü olan bir Blob istifadə edərək styles.min.css (kiçildilmə rejimi) və ya styles.css (gözəlləşdirmə rejimi) kimi endirilir. Ölçü azalması faizi yazdıqca canlı göstərilir.

Əlaqəli Alətlər

✨

SVG Optimallaşdırıcı və Minifikator

SVG fayl ölçüsünü əhəmiyyətli dərəcədə azaltmaq üçün metadataları silin, boşluqları yığcamlaşdırın və ondalıkları yuvarlaqlaşdırın — adətən 30-70% azalma. Vizual önizləmə heç nəyin xarab olmadığını yoxlayır.

SınayınFayllar yerli qalır

🎨

CSS Gözəlləşdiricisi

Sıxılmış CSS-i ardıcıl girintilərlə səliqəyə salın və ya sıxın. Proqnozlaşdırıla bilən fərqlər üçün xassələrin istəyə bağlı əlifba sırası.

Sınayın

📋

JSON Formatlayıcı

JSON məlumatlarını formatlayın, təsdiqləyin, kiçildyin və araşdırın. Ağac görünüşü, sintaksisin vurğulanması və bir klik surəti.