В переводе: CSS-переходы 101
Китайский: введение в преобразования CSS3
Автор оригинала: Джейсон Крэнфорд Тиг
Переводчик: Шэнь Фэй
Пожалуйста, соблюдайте авторские права и указывайте источник при перепечатке, спасибо!
Хотя люди ожидают некоторых изменений на экране, CSS и HTML мало что могут сделать для взаимодействия на странице, и их все равно необходимо реализовать в коде.
Например, ссылка бывает такого-то или такого-то цвета; текстовая область может быть такой-то или такой-то большой; изображение либо прозрачное, либо непрозрачное; они напрямую переходят из одного состояния в другое — между ними нет перехода .
Это приводит к тому, что большинство веб-страниц становятся несколько жесткими, поскольку элементы только переключаются или изменяются жестко.
Да, вы можете переусердствовать, используя DHTML, jQuery или написав собственный JS, но для реализации того, что должно быть очень простой функциональностью, потребуется больше кода.
Нам нужен быстрый и простой способ добавить на страницу простые эффекты перехода. В этой статье вы найдете полезную информацию о CSS-переходах и о том, как их использовать.
Несколько месяцев назад я предложил дизайнерам начать использовать новые технологии CSS 3 для достижения некоторой базовой функциональности, которой они так жаждали в течение долгого времени — единственная проблема заключалась в том, что ни одна из этих технологий не была доступна в IE, включая IE8.
Мнение о том, что некоторые читатели считают, что эти технологии будут невидимы для 75% пользователей, ненадежно.
Тем читателям я хочу сказать: «Держитесь крепче», потому что я собираюсь познакомить вас с еще одним новым свойством CSS, которое позволяет вам добавлять крутые эффекты трансформации к любому элементу с помощью всего лишь нескольких строк кода.
Преобразования CSS были только что представлены в CSS 3, но были добавлены как расширение веб-кита. То есть теперь их можно использовать только в браузерах на базе webkit, включая Apple Safari и Google Chrome. Однако, судя по пре-альфа-версии Opera 10.5, Opera будет поддерживать преобразования CSS 3 в следующей версии 10.5. Поэтому , чтобы увидеть реальные эффекты, упомянутые в этой статье, настоятельно рекомендуется использовать Chrome или Safari 4 для просмотра этой статьи .
Откуда берутся CSS-преобразования?Раньше преобразования были просто частью Webkit и основой для некоторых интересных вещей, которые пользовательский интерфейс Safari мог делать, а другие браузеры - нет.
Однако рабочая группа W3C CSS отказалась добавлять преобразования к своим официальным функциям, при этом некоторые члены настаивают на том, что преобразования не являются свойствами CSS и их лучше обрабатывать с помощью сценариев. (Я полон уверенности. Похожую точку зрения я высказал в предыдущем параграфе и обсуждал ее с Гао Гао . Я считаю, что CSS-анимация выходит за рамки производительности. Интерактивные вещи следует реализовывать с помощью скриптов. Но позже, под под руководством брата Гуя я начал с новым пониманием - Шэнь Фэй)
Но многие дизайнеры и разработчики, в том числе и я, настаивают на том, что это действительно стили — просто динамические стили, а не традиционные статические стили, которые мы используем каждый день.
К счастью, дебаты о динамическом стиле остались в прошлом. В марте прошлого года представители Apple и Mozilla начали добавлять модули преобразования CSS в функции CSS 3 , что очень близко к тому, что Apple уже добавила в WebKit.
Краткое введение в улучшения дизайнаПрежде чем мы продолжим, позвольте мне подчеркнуть следующее: никогда не ставьте функциональность веб-сайта в зависимость от стиля, если стиль не является универсальным для браузера (то есть не поддерживается всеми широко используемыми браузерами).
Для тех, кто это пропустил, подчеркиваю еще раз: никогда не позволяйте функциональности веб-сайта зависеть от стиля, если стиль не является универсальным для всех браузеров .
Тем не менее, вы можете использовать стили, такие как преобразования, в качестве улучшения дизайна для улучшения взаимодействия с пользователем, не жертвуя при этом удобством использования для пользователей, которые их не видят. Если это работает без преобразований CSS и пользователи по-прежнему могут выполнять свои задачи, тогда все в порядке, и вы можете использовать преобразования CSS.