Онлайн css-минификатор без багов?

Ссылка скопирована
1 ответ

Посоветуйте сайт, где можно минифицировать css-код. Проверил десятка два с первых страниц гугла - абсолютно все кривые

Дополнительно:

а зачем онлайн и что подразумевается под минификацией? и что подразумевается под кривостью?

  • Антон Антон, Иногда возникает необходимость быстро минифицировать часть стилей без развертывания проекта с gulp или ему подобным.
    Под минификацией я подразумеваю удаление пробелов, переноса строк и последней точки с запятой.
    Что подразумевается под кривостью - преобразование кода в процессе минификации с рабочего в не валидный.
  • leeroyjenkins176, сто лет назад использовал первый попавшйися по запроасу css minifier, ни один из них не был кривым
  • Проверил десятка два с первых страниц гугла - абсолютно все кривые

    Тут начинаются подозрения, что может быть дело не в них?..

  • Ankhena, чтобы развеять подозрения
    .x {     width: min(1px, 1px + 1vw);     border: min(1px, 1px + 1vw) solid #fff;     transition-delay: 0s; } @supports (font-size: 1px) {     @media (min-width: 1px) {         .x {}     } }

    .x { width: min(1px, 1px + 1vw); border: min(1px, 1px + 1vw) solid #fff; transition-delay: 0s; } @supports (font-size: 1px) { @media (min-width: 1px) { .x {} } }

  • leeroyjenkins176, действительно кривые минификаторы (сарказм).

    Вы просите минифицировать код. Что делает сервис: убирает пробелы, последние точки с запятой, пустые селекторы.

    Итого: дело не в них, а в вашем коде.

  • Ankhena, эти сервисы специально написаны для обработки css-кода, а не рандомного текста. И они должны сделовать определенным правилам.
    Когда они полностью вырезают часть с @supports {} или значение border-width в примере выше, это по вашему проблема в моем коде?
  • leeroyjenkins176, да, они им и следуют. Удаляют селекторы в которых нет свойств.

    spoiler

    Онлайн css-минификатор без багов?

    Онлайн css-минификатор без багов?

  • Ankhena, нашел сайт со скрина. Это первый, который вроде как со всем справился.
    Касательно утверждения, что остальные сайты тоже правильно минифицируют - чтобы не быть голословным, результат работы первых трех сайтов из гугл выдачи. В остальных схожая ситуация
    toptal.com
    border: min(1px, 1px + 1vw) solid #fff; /* => border:solid #fff; */

    border: min(1px, 1px + 1vw) solid #fff; /* => border:solid #fff; */

    codebeautify.org

    width: min(1px, 1px + 1vw) /* => width: min(1px, 1px 1vw); */

    width: min(1px, 1px + 1vw) /* => width: min(1px, 1px 1vw); */

    freeformatter.com

    width: min(1px, 1px + 1vw); /* => width:min(1px,1px+1vw); */ transition-delay: 0s; /* => transition-delay:0 */

    width: min(1px, 1px + 1vw); /* => width:min(1px,1px+1vw); */ transition-delay: 0s; /* => transition-delay:0 */

  • leeroyjenkins176, Вы знаете, тот, который я показала, был первым попавшимся в который я тыкнула. На первой странице Яндекса.
  • > Иногда возникает необходимость быстро минифицировать часть стилей

    Но зачем?

  • Ответы:

    Почему бы webpack или gulp не настроить для это цели?

    Можно вот этот, проверил, вроде все ок.
    https://www.toptal.com/developers/cssminifier

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Дмитрий К. Ответ

    Для минификации CSS кода онлайн без багов, вы можете использовать различные инструменты, такие как CSS Minifier, CSS Minify, CSS Minifier Online и другие.

    Однако, если вы хотите использовать PHP для минификации CSS кода, вам нужно будет написать свою собственную функцию. Вот пример кода на PHP, который может помочь вам минифицировать CSS:

    function minify_css($input) {
        if (trim($input) === "") return $input;
        return preg_replace(
            array(
                '/\s+/',           // пробелы, табуляции, переносы строк
                '/\/\*.*?\*\//',    // комментарии
                '/\s*([:;{}])\s*/', // пробелы перед и после символов
            ),
            array(
                ' ',
                '',
                '\1',
            ),
            $input
        );
    }
     
    $css = "
    body {
        color: #333;
        font-size: 16px;
    }
     
    .container {
        width: 100%;
        margin: 0 auto;
    }
    ";
     
    $minified_css = minify_css($css);
    echo $minified_css;

    function minify_css($input) { if (trim($input) === "") return $input; return preg_replace( array( '/\s+/', // пробелы, табуляции, переносы строк '/\/\*.*?\*\//', // комментарии '/\s*([:;{}])\s*/', // пробелы перед и после символов ), array( ' ', '', '\1', ), $input ); } $css = " body { color: #333; font-size: 16px; } .container { width: 100%; margin: 0 auto; } "; $minified_css = minify_css($css); echo $minified_css;

    Этот код определяет функцию `minify_css`, которая принимает входную CSS строку и возвращает ее минифицированную версию. Затем определяется пример CSS кода в переменной `$css` и он минифицируется с помощью этой функции.

    Вы можете использовать этот пример кода в своем проекте или на своем сервере, чтобы минифицировать CSS код. Не забудьте также проверить результат и убедиться, что он соответствует вашим ожиданиям.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно