CSS3 преобразование поворота против использования изображений

Question

Я работаю над сайтом, который использует изображения по диагонали. Изображения довольно просты и содержат некоторый текст внутри, поэтому я могу добиться эффекта, используя либо изображения, либо свойства CSS3 transform: rotate и border-radius, предоставленные со всеми проприетарными расширениями.

Однако мне интересно, есть ли существенные преимущества в использовании одного над другим. Я думаю, что альтернатива только для CSS будет загружаться быстрее, но недостатком будет использование большего количества кода для каждого изображения. Хотя с использованием изображений мне все равно придется много позиционировать для каждого элемента. Кроме того, CSS в первом случае не будет проверяться с использованием расширений для конкретного браузера. Насколько это важно, если я по-прежнему проверяю, правильно ли отображается сайт в большинстве браузеров?

Есть ли общий подход для использования любого из этих вариантов? Что бы вы порекомендовали?

Answer 1

Я бы честно порекомендовал изображение для этого. CSS3 - это круто, но браузеры, которые его не поддерживают, могут сломать ваш макет. Кроме того (возможно, что еще более важно), текст действительно нуждается в надлежащем сглаживании, чтобы его можно было читать при повороте или масштабировании, и вы можете лучше контролировать его с помощью изображения.

Answer 2

Две вещи, которые я думаю, вы должны рассмотреть здесь:

1. Изображения убивают тех, кто на мобильных устройствах.Поэтому, если вы ориентируетесь на тех, у кого есть мобильные устройства, или ожидаете, что у вас будет большая мобильная аудитория, вы можете пересмотреть вопрос об использовании большого количества изображений (и чтобы ваши пользователи платили тонну пропускной способности).

2. текст на ваших изображениях (если вы используете изображения) не будет доступен для поиска поисковыми системами и не будет доступен для тех, у кого проблемы с доступностью, если вы не умеете заполнять свои теги alt.; -)

Answer 3

Использование CSS3 по сравнению с изображениями лучше всего объясняется вашей необходимостью поддержки Internet Explorer (или других старых или браузеров, не поддерживающих CSS3): если большая часть ваших пользовательских браузеров просматриваетс IE тогда вы должны использовать изображения.

Если вас интересуют только более поздние, более совместимые со стандартами браузеры (возможно, включая IE9, но у меня пока нет опыта работы с ним), тогда CSS 3вероятно, это лучший вариант, так как он может включать в себя больший файл CSS, но он позволяет вам в будущем легче переключать макет без необходимости создавать / воссоздавать новый набор изображений для нового дизайна.

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