Почему я должен использовать кнопки CSS3? - PullRequest
Новая
       12

Почему я должен использовать кнопки CSS3?

3 голосов
/ 07 октября 2010

Я недавно создал сайт и решил создать кнопки, которые нажимают на нажатие с помощью CSS3, довольно круто.

Но есть ли действительно веская причина использовать CSS3 поверх спрайта, поскольку только современные браузеры показывают кнопки CSS3?

Клиент задал мне этот вопрос, и все, что я мог придумать, быломеньше запросов HTTP, поэтому загрузка будет немного быстрее.С точки зрения клиентов я вижу, что это довольно недельный ответ.

Есть ли лучшая причина?

Или есть запасной метод, который мог бы перемещать фон спрайтов-положить, или изменить градиент и добавить тень от рамки при наведении / фокусе?

Просто письмо, которое заставило меня задуматься, будет ли модернизатор справиться с задачей ...

1 Ответ

5 голосов
/ 10 октября 2010

Это гораздо больше этический и деловой вопрос, чем технический вопрос, но давайте посмотрим на некоторые моменты.

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

Вы не должны говорить "Я сделаю ваш сайт с CSS3, некоторыми новыми элементами HTML5 и приятными эффектами javascript" для любопытных людей. Просто скажите «Я могу сделать для вас хороший сайт».

Если он задает вопрос о том, что вы используете или почему вы думаете, что это лучший подход, тогда вы отвечаете с преимуществами.

Он легкий, приносит меньше проблем с совместимостью и проще в обслуживании. => Сократите время, в течение которого его клиент будет ждать загрузки веб-сайта, каждый сможет увидеть его, и в будущем он будет стоить дешевле.

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

CSS-спрайты - это техника, созданная с помощью CSS2, поэтому она должна работать с любым браузером, включая некоторые старые (не уверен в IE6).

Градиенты новые. Их отображают браузеры FF 3.5+, IE9 beta, Opera и webkit. IE8 или старше не делают. Что-то для теней.

Для этого я просто добавил несколько очень простых правил как запасной вариант.

При разработке я помещаю ссылку на основную таблицу стилей в заголовок страницы, а затем использую условный комментарий IE для загрузки только таблиц стилей и сценариев IE.

В этой таблице стилей только для IE я просто добавляю хаки или отступления, необходимые для того, чтобы сделать их немного приличными. У вас есть фильтры MS, чтобы справиться с этим. Моя таблица стилей IE.css выглядит так: 

.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff')";
}

.boxShadow {
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5)";
box-shadow: 5px 5px 5px #666
}

Обратите внимание, что даже с этими правилами есть запасные варианты для обработки IE6, IE7 и IE8 +. Но он крошечный и обеспечивает лучшее отображение.

Кроме того, я предлагаю вам прочитать http://24ways.org/2009/ignorance-is-bliss

Modernizr - хорошая библиотека, но подумайте, действительно ли она вам нужна. Вы можете прекратить использование бульдозера вместо ложки.

...