Как вы думаете, это плохо использовать много CSS3 материала на странице?

Question

Я полагаю, что приведенный ниже css считается css3, если нет, то это не так, но мой вопрос по-прежнему относится к приведенному ниже коду.

Как вы думаете, приведенный ниже код повлияет на производительность / время рендеринга пользователей или что-то еще, если он будет использован для примера на 50 различных изображениях на странице?

добавить кривые и тени

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;

и все в таком духе

использует цвета RGB

 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);

Answer 1

Что касается комментария Джонатана Сэмпсона:

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

С учетом сказанного, Джейсондавис не жалуется на свой выбор.

Лично я не думаю, что это ухудшит производительность на 50 изображениях или около того. Убедитесь, что вы не используете его для n (неограниченных) изображений на странице, и убедитесь, что вы не используете дорогостоящие операции Javascript, которые приведут к тому, что эти рендерингам придется многократно повторять рендеринг в ряд (например, определенные эффекты анимации или движения). И, конечно же, обязательно протестируйте все браузеры, на которые вы ориентируетесь.

Answer 2

Чтобы быть в безопасности, не полагайтесь на вещи, которые широко не поддерживаются.

Answer 3

Я бы проверил это, чтобы быть уверенным - на всех доступных системах. Очевидно, IE будет игнорировать все границы, а Firefox (на данный момент) не будет понимать тени. (Я думаю, что это только webkit).

Кроме того, если вы предоставляете ссылку «Действительный CSS», вам необходимо добавить параметр GET, чтобы сообщить валидатору, что он должен проверяться как CSS3.

Не могу вспомнить, подтверждают ли префиксы вендора или нет.

UPDATE

Я на самом деле думаю, что теневые вещи работают с Firefox 3.5

Answer 4

Я часто использую закругленные углы, но не настолько, чтобы страница зависела от них. Это делает сайт более привлекательным для тех, кто использует современный браузер.

Answer 5

Это зависит от того, используете ли вы эти функции или нет. Идея заключается в том, что, по возможности, сайт должен изящно ухудшаться в старых браузерах. Тени от перетаскивания под пунктами меню хороши, потому что, если это не поддерживается, теней отпадает. Это нормально.

Хорошей альтернативой для таких вещей, как изогнутые углы, является использование плагина jQuery, который будет просто использовать атрибуты CSS3, Firefox или Webkit, если они поддерживаются, а если нет, то будет использовать Javascript. Таким образом, вы получаете стабильный внешний вид в разных браузерах, не прибегая к наименьшему общему знаменателю или не используя Javascript для всего.