[help] Тень для всех браузеров

[Evrika]

Привет.

 

Сделала у себя тень для приаттаченных картинок, и к некоторым тегам.

 

Мозила видит так

 

 

 

Хром и опера так (только border отображается а тень и закругление исчезает)

 

 

 

Может я не знаю про какие то хаки? Как заставить другие браузеры принимать это всё? Особенно опера страдает с сглаживанием углов.

[Arhar]

это не опера страдает, а ленивые разработчики, вовсю использующие только-mozilla-совместимый css

[Evrika]

Так если у меня стандартный скин, вроде с ним нет проблем, но в опере хоть с нуля поставь всё равно углы квадратные.

[Ritsuka]

Вообще-то все просто. Первыми скругления - border-radius - реализовали в firefox. В принятых стандартах w3org такого еще нет, поэтому они использовали префикс -moz:

-moz-border-radius: 20px;

 

Затем подтянулся WebKit. А это Safari, Chrome и куча мелких поделок. Стандарта еще не было, потому использован префикс -webkit:

-webkit-border-radius: 20px;

 

Linux-пользователи тоже оценили фичу и в konqueror появился параметр:

-khtml-border-radius: 20px;

 

Дольше всех из свободных браузеров как всегда тормозила Опера. Скругление они реализовали со значительным опозданием, зато сразу по css3 (который, кстати, имеет статус черновика). Сделано это с версии 10.50, используется тег прямо из черновика:

border-radius: 20px;

 

Есть еще IE, но Microsoft не смог сделать скругление в IE8 и предлагает использовать велосипеды. Разве что в IE9 вкрутят...

 

Таким образом, сделать кроосбраузерное скругление для всего кроме IE можно css-кодом:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;

 

В самых свежих бета-версиях Firefox и Chrome читается именно border-radius, так что со временем от -moz и -webkit можно будет отказаться. Но пока рано об этом думать.

 

Так вот, последних двух строк в стандартном шаблоне IP.Board нет, потому в опере и konqueror скругление и не работает.

 

Тени box-shadow - это тоже часть черновика ccs3. Он был реализован по той же схеме - сначала в Firefox, затем в WebKit, и наконец в Opera 10.50. Код выглядит соответственно:

-moz-box-shadow: 10px 10px 10px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
box-shadow: 10px 10px 10px #000; /* CSS3 - Opera и самые последние Firefox & Chrome */

 

Опять же все, кроме IE.

 

Для IE есть htc-скрипт, внедряющий border-radius и box-shadow. Как всегда - велосипед, но куда деваться)

[Evrika]

Ritsuka, Спасибо за разжёвывание т.е. за подробное расписание)))) пойду проверю. Изменено 23 Августа 2010 пользователем Evrika