Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для @supportsздесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы о том, что следует учитывать при поддержке нескольких браузеров.
S для поддержки в нескольких браузерах
Отслеживание того, какие браузеры поддерживают какие функции, является практически полной занятостью. Есть отличные сайты, такие как caniuse.com, чтобы держать нас в курсе, и удивительные инструменты автоматизации, такие как Autoprefixer, которые означают, что вам больше никогда не придется писать префиксы поставщиков.
Но все же, как прилежные разработчики и дизайнеры внешнего интерфейса, мы должны гарантировать, что наш контент доступен как можно большему количеству пользователей, и даже если они не получат супер причудливую версию, они все равно смогут потреблять контент и получать информацию им нужно.
Эти быстрые советы предложат области, которые вам не нужно беспокоиться (по большей части), и в то же время гарантируют, что ваши проекты работают в широком диапазоне браузеров и устройств.
Не беспокойтесь об анимации и переходах
По большей части анимация и переходы должны быть тонкими эффектами, чтобы сделать контент более заметным, направить внимание пользователя или добавить немного индивидуальности и характера на страницу. Если анимации или переходы не поддерживаются в конкретном браузере, элементы будут оставаться статичными или привязываться между состояниями при наведении фокуса.
Пока исходное состояние анимации не помещает элемент за пределы экрана и не делает его невидимым (например, путем установки opacity: 0
В случае анимации вы можете попытаться создать запасной вариант, используя JavaScript, но мне действительно нужно задуматься о том, стоит ли дополнительных усилий, кода и обслуживания хлопот.
Не беспокойтесь о тонких преобразованиях
Аналогично комментариям об анимации и переходах, я бы также не особо подчеркивал, чтобы на каждом устройстве работали тонкие эффекты, такие как повороты или перекосы.
.wonky-image {
transform: rotate(2deg);
}
Если устройство поддерживает transform Действительно ли имеет значение, видит ли пользователь со старым браузером прямое изображение? Возможно нет. Мы должны потратить наше время на решение более актуальных проблем, чем на то, чтобы каждая страница выглядела одинаково в каждом браузере.
Не беспокойтесь о полупрозрачных цветах
Основываясь на предыдущих советах, вы должны получить представление о том, что не стоит беспокоиться о том, чтобы каждая последняя визуальная деталь работала на любом типе устройства или браузера. В конце концов, это больше об опыте в целом и об улучшении этого опыта для тех, кто обладает более современными возможностями.
Прогрессивное улучшение означает обеспечение хорошего базового опыта для всех, а затем его улучшение там, где это необходимо и где это возможно.
В случае анимаций или трансформаций, в действительности нет альтернативы — хотя вы можете использовать GIF для анимации в зависимости от обстоятельств. Однако в некоторых случаях отсутствие поддержки означает, что на странице ничего не отображается. Если вам требуется поддержка IE8, это, безусловно, относится к полупрозрачным цветам.
К счастью, из-за того, как CSS обрабатывает свойства или значения, которые он не понимает, может быть предоставлено простое решение для отката.
Если вы хотите добавить полупрозрачный красный цвет к backgroundcolor
.box {
background: red;
background: rgba(255,0,0,0.5);
}
Старые браузеры увидят первое объявление и «поймут» значение красного. Затем они увидят следующее объявление (которое должно переопределить первое), но увидят значение, которое они не понимают. Это делает второе объявление backgroundbackground
Современные браузеры увидят первое background Если браузер знает, что такое rgba()color
Эту технику можно использовать с прозрачными цветами, градиентами, закругленными углами, используя значения rem
О чем мне беспокоиться тогда?
Может показаться, что я отрицаю необходимость думать о поддержке браузера, но это не так. Я полагаю, что визуальный талант не должен (обязательно) выглядеть и работать одинаково в каждом браузере или на каждом устройстве.
Есть три вещи, о которых я бы беспокоился, освободив кучу времени, не беспокоясь о вышесказанном. Не беспокойтесь о:
- раскладка
- разборчивость
- Производительность
Макет — это ключ к тому, чтобы пользователь мог перемещаться по вашему сайту, использовать ваше приложение или использовать ваш контент. Убедитесь, что методы, которые вы использовали для верстки, работают во всех браузерах, которые вам необходимо поддерживать.
Разборчивость невероятно важна. Недавно я пытался прочитать статью, которую мы нарисовали очень мелким средне-серым шрифтом на светло-сером фоне. Мне пришлось возиться с инструментами разработчика, чтобы увеличить контрастность, чтобы я мог читать контент!
Производительность вашего сайта также невероятно важна. Это огромная тема, которую я не собираюсь подытоживать в одном абзаце, но в связи с нашей темой поддержки браузеров, не пытайтесь использовать функциональность polyfill или добавлять целую кучу анимации и эффектов с помощью JS на за счет производительности. Многие из старых браузеров, которые вы пытаетесь исправить с помощью дополнительного кода, уже неуклюжи и медленны при разборе сценариев, поэтому добавление большего — это всего лишь рецепт для катастрофы.
Вместо этого используйте прогрессивное улучшение и начните с хорошего базового опыта для как можно большего количества людей и максимально возможного количества устройств в рамках ограничений проекта. Затем улучшите этот базовый опыт со всеми прибамбасами, чтобы ваша работа действительно сияла.