Статьи

Как избежать CSS3-анимации.

Январь 10, 2019

Минификация — один из самых простых методов оптимизации сайта. Даже самый простой процессор может сократить треть вашего размера загрузки CSS, объединяя отдельный файл в один файл и удаляя ненужные символы. Как правило, это включает удаление комментариев, пробелов и последней точки с запятой в наборе правил, например 

/* my page elements */ .element1, element2 { font-family: sans-serif; font-size: 1em; padding: 0px 0em 0vh 0rem; margin: 10px; }

может быть уменьшено до: 

 .element1,element2{font-family:sans-serif;font-size:1em;padding:0px 0em 0vh 0rem;margin:10px}

Вашему браузеру все равно, что он менее читабелен; что касается минимизированного кода, он идентичен.

Более продвинутые минифинеры продвигают процесс, удаляя ненужные значения и единицы. Например, объявление заполнения из предыдущего блока кода может быть уменьшено до: 

 padding:0 0 0 0;

или: 

 padding:0;

Именно эта оптимизация вызвала у меня несколько часов разочарования в недавнем проекте. Мой локальный сайт работал нормально, но при производственной сборке анимация CSS3 либо не запускалась, либо работала с ошибками в некоторых браузерах. Причина? Минификация …

Ключевой кадр 0%! = 0

Первой проблемой было объявление < @keyframes : 

 @keyframes blink { 0% { background-color: #fff; } 50% { background-color: #000; } 100% { background-color: #fff; } }

Некоторые минифайеры переведут первый ключевой кадр в этом примере: 

 0{background-color:#fff}

К сожалению, ноль не является допустимым значением ключевого кадра. Некоторые браузеры будут анализировать его как 0%, но другие могут начинать со следующего допустимого ключевого кадра или вообще отказаться от анимации.

Сроки 0с! = 0

Сокращенное свойство animation представляет следующие свойства анимации:

<animation-name> || <time> || <timing-function> || <time> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>

Например: 

 animation: blink 2s ease 0s;

запускает анимацию мигания через ноль секунд и повторяется каждые две секунды, используя функцию замедления времени. Тем не менее, код может быть уменьшен до: 

 animation:blink 2s ease 0;

Некоторые браузеры предполагают, что конечное свойство не является временем, но вместо этого будут считывать его как значение animation-iteration-count . Так как это ноль, анимация никогда не запустится.

Исправление ошибок Минтификации

У вас есть два варианта, если ваш minifier демонстрирует это поведение:

  1. Используйте лучший, новый или простой процесс минимизации. Компрессор YUI получил исправление для анимации CSS3 в феврале 2014 года.
  2. Измените способ написания кода, т. 0ms Используйте ключевые кадры from ключевого слова вместо 0% и не 0ms 0s или 0s 0ms в 0ms объявлениях animation .

Ни один из этих вариантов не идеален, но это те проблемы, с которыми мы ежедневно сталкиваемся веб-разработчиками! Во всяком случае, я надеюсь, что это избавит вас от боли, которую я пережил.

Вы нашли другие проблемы минимизации CSS или JavaScript?

34
Share: