Негізгі мазмұнға өту
LibraTool logoLibraTool

CSS сәнді түрлендіруші — тегін

Кішірейтілген CSS-ті біркелкі шегініспен ретке келтіріңіз немесе кішірейтіңіз. Болжамды айырмашылықтар үшін қасиеттерді әліпби бойынша сұрыптау (міндетті емес).

Жүктелгеннен кейін офлайн жұмыс істейді

Файлды осы жерге тастаңыз немесе таңдау үшін басыңыз

CSS · құрылғыңызда өңделеді

немесе алмасу буферінен қою үшін Ctrl+V басыңыз

Файлдарды шолу
Безендірілген CSS
Шығыс осында пайда болады…

Жиі қолданылуы

  • Өндіктік CSS Ойша өндеуСтиль табу және кері-инженер үшін өндіктік сайт сығылған CSS оқылмалы пішінде байқаңыз.
  • Комманда CSS стиль Қажет еткізуКоманда өндіктік таралған ынамдылық сәтімді әдемілеген аршын пайдаланысын орындау құрал мазмұны туралы, пішімі туралы емес.
  • Сатушы-Префиксі CSS ПішіміСатушы-префиксі CSS (autoprefixer өндіктік) тақырыпты -webkit-, -moz-, -ms- ерекшелік бар. Іруулік үшін пішімі.
  • Pro CSS-дан үйреніңізТұтас дизайн жүйесінен CSS өндіктік білінгіс ауыстырыс пішімі арқылы оқыңыз.
  • Ақауы Есеп үшін CSS ПішіміCSS ақауы ресімдеу кезінде, пішімді CSS қарағалардың оқу және түсіну аса оңайырақ.

Қалай жұмыс істейді

Бұл құрал бетке тікелей енгізілген қолмен жазылған рекурсивті талдағыш арқылы CSS-ті пішімдейді — үшінші тарап кітапханасы жоқ, серверлік шақыру жоқ. Талдағыш CSS-іңізді таңба бойынша аралайды, қарапайымырақ регекс негізіндегі тәсілдерді шатастыратын дәйексөзделген жолдарды, url() мәндерін, кірістірілген at-ережелерін және түсініктемелерді дұрыс өңдейді.

  1. 1
    Таңба деңгейіндегі токенизация
    walkCss функциясы шикі кірісті бір уақытта бір таңбадан сканерлейді, url(), жол мәндері немесе түсініктемелер ішіндегі нүктелі үтір немесе жақшалар ешқашан құрылымдық бөлгіштер деп қателеспеуі үшін дәйексөз күйі мен жақша тереңдігін қадағалайды.
  2. 2
    Блок пен декларацияны бөлу
    Сканер жоғарғы деңгейлі ашылу жақшасын тапқанда, ол алдын алды (селектор немесе at-ереже кілт сөзін) шығарады және блок денесін рекурсивті түрде өңдейді — оның өзі терең рекурсия тереңдігінде өңделетін кірістірілген ережелерді (@media, @supports, нативті CSS кірістіру) қамтуы мүмкін.
  3. 3
    Қасиетті сұрыптау және шегіну
    Әр блоктағы декларациялар бір топқа жиналады, содан кейін таңдаған шегіну енімен (2 немесе 4 бос орын) жазылмас бұрын қалау бойынша қасиет атауы бойынша алфавиттік түрде сұрыпталады. Минификация режимі бос орынды толығымен өткізіп жіберіп, түсініктемелерді алып тастайды.
  4. 4
    Браузерде дереу шығыс
    Нәтижелер useMemo хугі арқылы теру кезінде пайда болады — ешнәрсе ешқайда жіберілмейді. Пішімделген немесе минификацияланған CSS-ті буферге көшіруге немесе .css файлы ретінде жүктеп алуға болады, ал панель түпнұсқамен салыстырғанда өлшем айырмашылығын көрсетеді.

Байланысты құралдар

🌐

HTML сәнді түрлендіруші және кішірейткіш

HTML-ды тиісті кірістіру шегінісімен сәнді басып шығарыңыз немесе кішірейтіңіз. <pre>, <script>, <style> блоктарының ішіндегі мазмұнды сақтайды.

Байқап көріңіз
🗄️

SQL форматтаушы және сәнді түрлендіруші

SQL сұрауларын тиісті шегіністермен, реттелетін кілт сөз регистрімен және негізгі сөйлемдерде жол үзілістерімен сәнді басып шығарыңыз. Кез келген SQL диалектімен жұмыс істейді.

Байқап көріңіз
🗜️

CSS кішірейткіш және сәнді түрлендіруші

Файл өлшемін азайту үшін CSS-ті кішірейтіңіз немесе оқуға ыңғайлылығы үшін кішірейтілген CSS-ті сәнді түрге келтіріңіз. Лезде, браузерде.

Байқап көріңіз

Жиі қойылатын сұрақтар