PL

Minifikator CSS: minimalizuj, formatuj i wstaw CSS inline do HTML

Ten minifikator CSS zmniejsza arkusz stylów, formatuje go do czytania albo wstawia inline do atrybutów style dla newsletterów. Komentarze, odstępy i zbędne zera znikają bez zmiany działania. Błędy składni wskazują wiersz, a Twój kod zostaje w przeglądarce.

Źródło: W3C CSS Syntax Module Level 3 (Tokenisierung, Kommentare, Zeichenketten, At-Regeln). Stan na: .

Moje narzędziaWpisane dane są zapisywane tylko w tej przeglądarce.

Kod jest przetwarzany tylko w Twojej przeglądarce. W trybie inline wklej pełny dokument HTML lub fragment z <style>.

Twój tekst zostaje w przeglądarce – nie jest wysyłany, zapisywany ani dodawany do paska adresu.

Traktowany jak jeszcze jeden blok style na końcu, np. z osobnego pliku CSS.

Wynik

Wynik
.button{color:#fff;background:#05a;margin:0 auto;padding:.5em 1em}.button:hover{background:#037}@media (max-width:600px){.button{padding:.25em}}
Rozmiar
215 → 144 znaków (33% mniej).
Usunięto: 1 komentarzy, 0 pustych reguł. Komentarze zaczynające się od /*! zostają.

Jak to obliczamy

To narzędzie oferuje trzy rzeczy dla arkuszy stylów: minimalizację dla małych plików, formatowanie dla czytelnego kodu i wstawianie inline dla e-maili HTML, w których niektóre programy ignorują lub obcinają bloki style.

Minimalizacja CSS

  1. Wybierz „Minimalizuj” i wklej CSS.
  2. Skopiuj wynik lub pobierz go jako style.min.css. Poniżej zobaczysz, o ile plik się zmniejszył.

Stosowane są tylko zmiany, które nie wpływają na działanie: znikają komentarze (poza /*! … */) i odstępy, także ostatni średnik przed }, 0.50em staje się .5em, #aabbcc staje się #abc, a 0px staje się 0. Zera z jednostką zostają tam, gdzie są potrzebne: w calc(), min(), max(), clamp(), w skrócie flex, przy czasie, kątach i procentach oraz we właściwościach niestandardowych. Ciągi znaków i url() pozostają bez zmian.

Formatowanie CSS

Skompresowany CSS staje się czytelnym kodem: jedna deklaracja w wierszu, listy selektorów wiersz po wierszu, bloki z wcięciem i pusty wiersz między regułami. Komentarze zostają.

Wstawianie CSS inline do HTML

Wklej dokument HTML z blokiem style. Dla każdego elementu oceniane są pasujące reguły, sortowane według specyficzności i kolejności, a następnie zapisywane w atrybucie style. Istniejący atrybut style wygrywa ze zwykłymi regułami, a !important ze wszystkim. To, czego nie da się zapisać w elemencie, np. :hover, pseudoelementy, @media i @font-face, zostaje w bloku style.

Warto wiedzieć

Twój kod zostaje w przeglądarce i nie jest wysyłany ani zapisywany.

Najczęściej zadawane pytania

Jak zminimalizować CSS?

Wybierz tryb „Minimalizuj” i wklej CSS. Komentarze, odstępy i zbędne zera zostaną usunięte, a wynik możesz skopiować lub pobrać jako plik.

Czy minimalizacja zmienia wygląd strony?

Nie, stosowane są tylko bezpieczne zmiany. Zera z jednostką zostają na przykład w calc() i w skrócie flex, bo tam są potrzebne. Ciągi znaków i url() nie są ruszane.

Do czego służy wstawianie CSS inline?

Niektóre programy pocztowe całkowicie lub częściowo ignorują bloki style. Przy wstawianiu inline każda reguła trafia do elementu jako atrybut style, dzięki czemu formatowanie dociera.

Co dzieje się z :hover i @media przy wstawianiu inline?

Nie da się ich zapisać w elemencie, więc zostają w bloku style w head. Programy, które je obsługują, nadal je stosują.

Jak narzędzie rozstrzyga sprzeczne reguły?

Według kaskady CSS: najpierw !important, potem wyższa specyficzność, a przy remisie późniejsza reguła. Istniejący atrybut style liczy się jak selektor o najwyższej specyficzności.

Czy mój kod jest wysyłany?

Nie. Wszystko dzieje się w przeglądarce; kod nie jest wysyłany, zapisywany ani dopisywany do paska adresu.

Źródła i podstawa prawna

Stan na: · Zasady redakcyjne

Podobne narzędzia