Загрузка...
Загружаем последние темы форума...
CSS Compressor & Minifier – оптимизация и сжатие CSS кода онлайн
- Информация
- Автор: Valery
- Категория: Сайтостроительство – немного html и css
- Просмотров: 127
CSS компрессор – инструмент для оптимизации и минификации CSS-кода. Удаляет лишние пробелы, и комментарии, не изменяя сам код. Оптимизированный CSS увеличивает скорость загрузки HTML-страницы.
Делал для себя, поскольку сервисы, которыми пользовался, постепенно перестали открываться. Найдешь ошибку – оставь комментарий!
Вставь CSS код и нажми кнопку Сжать CSS
Скрипт выполняет минификацию и оптимизацию CSS с сохранением 100% валидности
| Исходный CSS | Сжатый результат | Что изменено |
|---|---|---|
| .nav > a :hover { color: red; } | .nav>a :hover{color:red} | Пробел перед :hover сохранён (селектор потомка), остальные схлопнуты |
| width: calc( 100% - 20px ); | width:calc(100% - 20px) | Пробелы вокруг - оставлены по спецификации, лишние удалены |
| padding: var( --gap , 10px ); | padding:var(--gap, 10px) | var() минифицирован без потери фоллбэк-значения |
| margin: 0px 0.5em 0rem 10px; | margin:0 .5em 0 10px | Единицы измерения у 0 удалены, ведущий ноль убран |
| background: #AABBCC !important ; | background:#abc!important | HEX сокращён до 3 символов + приведён к нижнему регистру, !important прижат |
| /* Header */ .box{ color:blue; } | .box{color:blue} | Комментарий удалён (при активном stripComments), точка с запятой перед } убрана |
| @media (max-width:768px) { .el { display:block; } } | @media(max-width:768px){.el{display:block}} | Полная минификация @-правила без потери структуры |
| height: min( 50vh , clamp(200px, 50%, 400px) ); | height:min(50vh,clamp(200px,50%,400px)) | Вложенные функции min()/clamp() обработаны корректно |
Что дает оптимизация и минификация CSS для сайта
- Более быстрая загрузка страниц: уменьшает размер CSS файлов, повышая скорость загрузки.
- Экономия пропускной способности: файлы меньшего размера потребляют меньше трафика, что экономит ресурсы.
- Улучшение пользовательского опыта: более быстрая отрисовка страниц.
- Преимущества для SEO: повышение производительности улучшит позиции в поисковой выдаче.
- Чистый и эффективный код: удаляет ненужные элементы.
.table tr:nth-child(odd)td{background:#000}
Исправлено: больше НЕ удаляет пробел перед td
Вокруг > можно пробелы удалить - будет валидно.