Работа с vendor-префиксами

Библиотека Cash представляет собой облегчённый аналог jQuery, обеспечивающий удобную работу с DOM, событиями, CSS и анимацией. Одной из важных возможностей при работе с современными браузерами является управление vendor-префиксами для CSS-свойств, что позволяет корректно использовать экспериментальные или частично поддерживаемые свойства.

Автоматическое добавление префиксов

Cash не требует ручного добавления -webkit-, -moz-, -ms- или других префиксов при работе с CSS. Все свойства, которые нуждаются в префиксах, можно задавать через метод .css(). Библиотека автоматически подставляет префиксы для поддерживаемых браузеров:

import $ from 'cash-dom';

$('#box').css('user-select', 'none');

В этом примере Cash обеспечит добавление необходимых префиксов:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Ключевой момент: библиотека опирается на текущую поддержку браузеров и использует внутреннюю карту свойств с префиксами. Это устраняет необходимость вручную проверять, какие префиксы нужны.

Работа с transform, transition и animation

CSS-свойства transform, transition и animation особенно часто требуют префиксов в старых версиях браузеров. Cash позволяет безопасно использовать их без опасений:

$('#box').css({
    transform: 'rotate(45deg)',
    transition: 'transform 0.3s ease-in-out'
});

Cash автоматически генерирует:

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;

Для сложных комбинаций свойств библиотека объединяет префиксы и основное свойство, избегая дублирования кода и конфликтов.

Чтение префиксированных свойств

Метод .css() используется не только для установки, но и для получения значения свойства. Если свойство имеет префиксы, Cash автоматически возвращает приведённое значение, игнорируя префиксы, что упрощает логику:

const transformValue = $('#box').css('transform');
console.log(transformValue); // 'rotate(45deg)'

Это позволяет работать с универсальными именами свойств, не заботясь о различиях между -webkit-transform и transform.

Особенности при использовании анимаций

При работе с анимациями через .animate() префиксы также учитываются. Например:

$('#box').animate({ transform: 'translateX(100px)' }, 500);

Cash автоматически добавит все необходимые префиксные варианты для корректной работы анимации во всех поддерживаемых браузерах, сохраняя единый интерфейс и единый код анимации.

Ограничения и рекомендации

  • Cash добавляет префиксы только для стандартных экспериментальных свойств, широко применяемых в вебе. Для нестандартных или редких свойств ручная проверка всё же необходима.
  • Префиксы генерируются только при установке свойства через .css() или .animate(). Прямое манипулирование element.style потребует ручной установки.
  • Для производительности рекомендуется комбинировать несколько свойств в объекте при вызове .css(), чтобы Cash добавлял префиксы за один проход.

Примеры использования

Множественные свойства с префиксами:

$('#box').css({
    transform: 'scale(1.2)',
    transition: 'transform 0.5s ease',
    userSelect: 'none'
});

Возврат значения без префиксов:

const userSelect = $('#box').css('user-select');
console.log(userSelect); // 'none'

Анимация с transform:

$('#box').animate({ transform: 'rotate(90deg)' }, 800);

Cash обеспечивает корректное отображение анимации во всех актуальных браузерах, подставляя нужные префиксы.

Использование vendor-префиксов в Cash упрощает работу с CSS-свойствами, делает код более читаемым и переносимым между браузерами. Библиотека берет на себя заботу о кросс-браузерной совместимости, позволяя концентрироваться на логике интерфейса и анимаций.

Оглавление