CSS кішірейткіш және сәнді түрлендіруші — тегін
Файл өлшемін азайту үшін CSS-ті кішірейтіңіз немесе оқуға ыңғайлылығы үшін кішірейтілген CSS-ті сәнді түрге келтіріңіз. Лезде, браузерде.
.css файлын осында апарыңыз немесе шолу үшін басыңыз
CSS · құрылғыңызда өңделеді
немесе алмасу буферінен қою үшін Ctrl+V басыңыз
Жиі қолданылуы
- Өндіктеме түрлендіру үшін CSS өндіктеңізӨндіктеме түрлендіру алдында CSS файлдың өлшемін төмендетіңіз - парақ жүктеменің тездігін төмендетіңіз және аймақ ағытылу құны төмендетіңіз.
- Ақаулықтарды шешу үшін орықты өндіктелген CSS-ні әдеп етуСығылмалы немесе өндіктелген CSS оқылатын кодка пішімдеңіз, шамалы стильдерді тексеріңіз және ақаулықтарды шешіңіз.
- Электрондық пошта ұстағалары үшін CSS өндіктеңізHTML электрондық пошта ұстағалары үшін CSS сығыңыз файлдың өлшемі мен ішінді стиль бүглеу мәселі болып табылады.
- WordPress тақырыпты үшін CSS өндіктеңізІс-әрекет WordPress тақырыпты стиль парақтарының өлшемін төмендетіңіз жақсы PageSpeed бағасы үшін.
- Кодтарын қарап шығу үшін CSS ті әдеп етуКез келген CSS файлын таза, жиынтықты, оқылатын коддың қарап шығу мен өнеу дайындау.
Қалай жұмыс істейді
Бұл құрал толығымен JavaScript-те жасалған қолмен жазылған, нөлдік тәуелділікті CSS токенайзерін пайдаланады — сыртқы кітапханалар жоқ, серверлік шақырулар жоқ. Токенайзер кез келген түрлендіру қолданылмас бұрын әр таңбаны код, түсініктеме, дәйексөзделген жол немесе url() мәні ретінде жіктейді, бұл бос орын ережелерінің жол мазмұнын, деректер URI-ларын немесе calc() өрнектерін бұзуын болдырмайды.
- 1Токенизация өтуіКіріс CSS таңба бойынша сканерленеді және терілген белгілерге бөлінеді: шикі код сегменттері, /* ... */ түсініктемелер, дәйексөзделген жолдар (қашу тізбектерін сақтай отырып) және url(...) блоктары. Бұл келесі қадамдағы түрлендірулердің тек нақты CSS синтаксисіне тиуін қамтамасыз етеді — ешқашан жол литералының немесе деректер URI-ының мазмұнына емес.
- 2Минификация немесе әсемдеуМинификация режимінде, әдеттегі түсініктемелер алынып тасталады (/*! license */ түсініктемелер сақталады), код белгілеріндегі бос орын қатарлары бір бос орынға сығылады, ал { } : ; , > ~ айналасындағы тыныс белгісіне жанасатын бос орын алынады. + пен - айналасындағы бос орындар calc() өрнектерін бұзбау үшін әдейі өзгеріссіз қалдырылады. Әсемдеу режимінде, код алдымен таза негізге минификацияланады, содан кейін a:hover сияқты селектор қос нүктелерінен property: value қос нүктелерін ажырату үшін екі бос орын тереңдігін қадағалау және декларация-қос нүктесін анықтаумен қайта токенайзделеді және қайта шегіндіріледі.
- 3Gzip өлшемін бағалауШығысты шығарғаннан кейін, браузердің нативті CompressionStream API-ы нәтижені gzip арқылы сығу және алынған байт санын өлшеу үшін пайдаланылады. Бұл gzip сығуы бар веб-сервер желі арқылы жіберетінге сай нақты тасымал өлшемін бағалауды береді.
- 4Көшіру немесе жүктеп алуӨңделген CSS Буфер API арқылы буферге жазылады немесе text/css MIME түрі бар Blob пайдаланып styles.min.css (минификация режимі) немесе styles.css (әсемдеу режимі) ретінде жүктеп алынады. Өлшем азаю пайызы теру кезінде тірі көрсетіледі.
Байланысты құралдар
SVG оңтайландырушы және кішірейткіш
SVG файл өлшемін айтарлықтай кішірейту үшін метадеректерді жойыңыз, бос орындарды біріктіріңіз және ондықтарды дөңгелектеңіз — әдетте 30-70% қысқару. Визуалды алдын ала қарау ештеңе бұзылмайтынын тексереді.
CSS сәнді түрлендіруші
Кішірейтілген CSS-ті біркелкі шегініспен ретке келтіріңіз немесе кішірейтіңіз. Болжамды айырмашылықтар үшін қасиеттерді әліпби бойынша сұрыптау (міндетті емес).
JSON пішімдеушісі
JSON деректерін пішімдеңіз, растаңыз, кішірейтіңіз және зерттеңіз. Ағаш көрінісі, синтаксисті бөлектеу және бір рет басу арқылы көшіру.