CSS minimallaşdırıcısı

CSS minimallaşdırıcısı lazımsız simvolları CSS-dən silən, minimallaşdırılmış stil cədvəlini qaytaran və emaldan əvvəlki və sonrakı simvol sayını göstərən pulsuz alətdir.

CSS minimallaşdırılması nə edir?

CSS minimallaşdırılması brauzerlərə lazım olmayan formatlaşdırmanı silərək stil cədvəlindəki simvolların sayını azaldır. Adətən girintilər, sətir keçidləri, şərhlər və durğu işarələrinin ətrafındakı məcburi olmayan boşluqlar silinir.

Brauzer yenə də CSS qaydalarını, selektorları və deklarasiya dəyərlərini qəbul edir. Nəzərdə tutulan vizual nəticə dəyişməməli, brauzerə ötürülən fayl isə daha kiçik olmalıdır. CSS stil cədvəlinin minimallaşdırılmasının praktik faydası ilkin fayldan, HTTP sıxılmasından və brauzer keşindən asılıdır. Yaxşı sıxılmış stil cədvəlində ötürülən baytların azalması cüzi ola bilər.

Minimallaşdırma sayta yerləşdirmədən əvvəl, həddindən artıq böyük üçüncü tərəf CSS fayllarını yoxlayarkən və ya tərtibat zamanı istifadə olunan formatlaşdırmanın fayl ölçüsünə təsirini ölçərkən faydalıdır. Bu proses istifadə olunmayan selektorları silən, eyni mənalı qaydaları birləşdirən və ya deklarasiyaları yenidən yazan optimallaşdırmadan fərqlənir. Bu alət həmin daha geniş əməliyyatları yerinə yetirdiyini iddia etmir.

CSS minimallaşdırıcısından necə istifadə edim?

Stil cədvəlini CSS sahəsinə yapışdırıb aləti işə sal, sonra Minimallaşdırılmış CSS nəticəsini uyğun yığma və ya yerləşdirmə prosesinə köçür. Oxunaqlı CSS mənbə faylını minimallaşdırılmış nüsxə ilə birdəfəlik əvəz etmə, onu ayrıca saxla.

1. Saytının və ya tətbiqinin istifadə etdiyi mənbə CSS faylından başla.
2. Minimallaşdırmadan əvvəl CSS-in düzgün təhlil olunduğunu yoxla.
3. Onu CSS sahəsinə yapışdır və aləti işə sal.
4. CSS simvolları göstəricisini Minimallaşdırılmış CSS simvolları ilə müqayisə et.
5. Nəticəni sınaq səhifəsində yoxla. Adaptiv vəziyyətləri, çap üslublarını və interaktiv komponentləri də sınaqdan keçir.

CSS serverdə minimallaşdırılır. Göndərdiyin CSS HTTPS vasitəsilə serverə ötürülür və saxlanmır. Stil cədvəlində məxfi URL-lər, daxili host adları və ya başqa həssas məlumatlar varsa, onları server tərəfli hər hansı alətə göndərməyin təşkilatının məlumatlarla işləmə qaydalarına uyğun olub-olmadığını nəzərə al.

Nəticəni necə başa düşüm?

Nəticədə dəyişdirilmiş CSS və iki simvol sayı göstərilir. Beləliklə, çıxışı yoxlaya və azalmanı birbaşa görə bilərsən. CSS simvolları göndərilən mətnin uzunluğunu, Minimallaşdırılmış CSS simvolları isə minimallaşdırmadan sonrakı uzunluğu göstərir.

Bu göstəricilər çoxbaytlı simvolları nəzərə alan uzunluq funksiyası ilə hesablanır. Onları şəbəkə üzərindən ötürüləcək ölçünün dəqiq proqnozu saymaq olmaz. UTF-8 simvolları bir baytdan çox yer tuta bilər, Brotli və ya gzip sıxılması isə HTTP vasitəsilə göndərilən ölçünü əhəmiyyətli dərəcədə dəyişə bilər.

Bu alət üçün ayrıca doğrulama və ya xəta sahəsi göstərilmir. Buna görə də onu CSS validatoru kimi qəbul etmək olmaz. Uyğunlaşdırılmamış fiqurlu mötərizələr, çatışmayan iki nöqtə, bağlanmamış sətir, səhv qurulmuş şərhlər və ya etibarsız iç-içə yerləşdirmə kimi ümumi problemləri brauzerin tərtibatçı alətləri, linter və ya standartları nəzərə alan validatorla yoxlamaq lazımdır. Etibarsız CSS zahirən yığcam nəticə verə bilər, lakin gözlənildiyi kimi işləməyə bilər.

Kiçik CSS minimallaşdırma nümunələri

Adi minimallaşdırılmış versiya qaydanın özünü saxlayır, formatlaşdırmanı isə silir.

CSS

p { color: red; }

Minimallaşdırılmış CSS

p{color:red}

Bu nümunədə oxunaqlı giriş 17, yığcam forma isə 12 simvoldan ibarətdir. Dırnaq içindəki sətirlərdə olan boşluqlar və durğu işarələri dəyərin bir hissəsi kimi saxlanmalıdır.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Minimallaşdırılmış CSS

.notice,.warning{color:#c00;margin:0 1rem}

Bütün boşluqları kor-koranə silmək təhlükəlidir. Boşluq törəmə selektor kombinatorunu ifadə edə bilər. calc() kimi funksiyalardakı riyazi operatorlar üçün də boşluqlarla bağlı tələblər var. Sətirlər, data URL-ləri, qaçış simvollu identifikatorlar və fərdi xassə dəyərləri də sintaksisi nəzərə alan emal tələb edir.

Aksentli və latın əlifbasına aid olmayan simvollar sətirlərdə, CSS identifikator qaydalarına uyğun olduqda isə selektorlarda işlənə bilər. Rəqəmlər, onluq nöqtələri, faizlər və ölçü vahidləri dekorativ mətn deyil, sintaksisin hissəsidir. Buna görə deklarasiyanı anlamadan onları sadəcə qısaltmaq olmaz. Boş stil cədvəlində minimallaşdırılacaq CSS yoxdur. Çox böyük stil cədvəlləri üçün yığma mərhələsində işləyən minimallaşdırıcıdan istifadə etmək, mətni onlayn formaya köçürməklə müqayisədə adətən daha asan təkrarlanır və yoxlanılır.

CSS-i minimallaşdırmağa nə vaxt dəymir?

Fayl artıq minimallaşdırılıbsa və ya yığcam istehsal resursu kimi yaradılıbsa, minimallaşdırmanı təkrarlamağa adətən dəymir. CSS-in ikinci dəfə minimallaşdırılması az yer qazandıra və ya heç bir fərq yaratmaya bilər, əvəzində buraxılış prosesinə daha bir dəyişdirmə mərhələsi əlavə edər.

• Yalnız brauzerin və ya yığma sisteminin oxuyacağı CSS-i əvvəlcə formatlaşdırıb sonra yenidən minimallaşdırma.
• Minimallaşdırmanı istifadə olunmayan freymvork qaydalarının və ya təkrarlanan deklarasiyaların silinməsinə alternativ kimi istifadə etmə.
• Simvol sayının azalmasının renderi bloklayan sorğuları, keş problemlərini və ya şriftlərin gec yüklənməsini üzə çıxaracağını gözləmə.
• Xüsusən spesifiklik, kaskad layları və ya media sorğularındakı xətaları araşdırarkən formatlaşdırılmış mənbəni silmə.

CSS avtomatik paketlənirsə, minimallaşdırıcını həmin prosesdə istifadə et ki, hər buraxılışa eyni parametrlər tətbiq olunsun. Əlaqəli resursları əl ilə yerləşdirərkən HTML minimallaşdırıcısı və JS minimizatoru uyğun əməliyyatı həmin fayl növlərinə tətbiq edə bilər.

Tez-tez verilən suallar

CSS-i minimallaşdırmaq selektorun spesifikliyini dəyişir?

Düzgün minimallaşdırma selektorun spesifikliyini dəyişmir, çünki selektorun komponentləri və onların sırası eyni qalmalıdır. Bununla belə, mənbədə qaçış simvolları, yeni psevdosinflər və ya köhnə minimallaşdırıcının anlamaya biləcəyi avtomatik yaradılmış sintaksis varsa, mürəkkəb selektorları diqqətlə müqayisə et.

CSS fərdi xassələrini minimallaşdırmaq olar?

Fərdi xassələri minimallaşdırmaq olar, lakin onların dəyərlərindəki tokenlər və boşluqlar sonradan var() ilə əvəzlənmək üçün saxlanıla bilər. Görünən hər boşluğun məcburi olmadığını düşünmək əvəzinə, hesablamalar, ehtiyat dəyərlər və ya daxili sətirlər olan deklarasiyaları layihənin dəstəklədiyi brauzerlərdə sınaqdan keçir.

Alət mənbə xəritəsi yaradır?

Xeyr, nəticələr arasında mənbə xəritəsi göstərilmir. İstehsal mühitində xəta araşdırarkən yığcam CSS-i Sass, Less və ya başqa mənbə ilə əlaqələndirmək lazımdırsa, minimallaşdırılmış faylı və onun mənbə xəritəsini ilkin fayl quruluşunu tanıyan kompilyator və ya paketləyici daxilində yarat.

Lisenziya şərhləri nəticədə qalacaq?

CSS şərhlərinin saxlanacağını güman etmə. Asılılığın lisenziyası bildirişin yayılan kodla birlikdə təqdim olunmasını tələb edirsə, bildirişi ayrıca saxla və ya buraxılışdan əvvəl yaradılmış nəticəni yoxla.

Minimallaşdırma işləməyən CSS-i düzəldə bilər?

Xeyr. Minimallaşdırma lazımsız simvolları silir, lakin etibarsız selektoru, dəstəklənməyən xassəni, çatışmayan resursu və ya səhv kaskadı düzəltmir. Əvvəlcə mənbədəki təhlil xəbərdarlıqlarını və vizual xətaları aradan qaldır.

Yerləşdirmədən əvvəl yoxlanılmalı məqamlar

Minimallaşdırılmış nəticəni ayrıca istehsal resursu kimi saxla, URL-lərin və dırnaq içindəki məzmunun dəyişmədiyini yoxla, sonra brauzer konsolu açıq vəziyyətdə onu sınaq səhifəsində yüklə. Tipik səhifələri dar və geniş görünüş sahələrində müqayisə et. Sonda serverin gözlənilən məzmun növünü, keş siyasətini və HTTP sıxılmasını tətbiq etdiyinə əmin ol.