Как да Оптимизирам дизайна под всички браузъри?

L

LuBaTa

Registered
Здравейте, кодирал съм един дизайн, но понеже го "тествам" само на "Opera" и във .CSS файла съм му сложил да е само за Опера(незнам как ще прозвучи), но имам градиенти които незнам как да направя да се виждат за всички браузъри, ето да видите как искам да изглежда дизайна

http://prikachi.com/images/418/4801418r.png - под Опера
http://prikachi.com/images/431/4801431P.png - под IE8
Това ми е първи "кодиран" дизайн..
Проблема е само във Градиент и заоблените ъгли..
За градиент ползвам този код:
Код: 
-o-linear-gradient(top, #цвят1 0%, #цвят2 100%);
и както се вижда е за Опера (-о-)
а за заоблените ъгли на менюто и другите:
Код: 
	border-radius: 0px 0px 5px 5px;

Надявам се някой да помогне.. :)
 
Добре, благодаря ти, но това ми помогна само за border-radius, сега ми трябва нещо за linear-gradient
 
Ползвах един онлайн CSS инструмент от статията на bytheway по-точно Този, излиза добре под всички браузъри, но пробвах да го валидирам със Този валидатор и ми изкара сумати грешки, точно за градиента..
Ето грешките които ми изкарва Цък!
а самия .css файл е ето Тук!
 
Стойностите -moz-linear-gradient и т.н. са специфични за определения браузър и за него това е валиден код (след като ти ги показва по правилен начин), но за W3C (организацията по стандартизиране) то се приема за невалиден код, защото в техния стандарт няма browser prefix (т.е. частта -moz- или -webkit- и т.н.).

Мисля, че ако искаш кода да ти бъде валиден трябва да използваш JS/jQuery, за да добавиш този стил.

Но в крайна сметка съвета ми е "Щом работи както трябва (и посетителите с по-стари браузъри получават добра алтернатива) можеш да направиш лек компромис" :)

Ето една статия за CSS3 Gradients , която е много добра. Прочети и коментарите :)
 
@dakata__92, prefixr е сайт на tutsplus.com и ти добавя автоматично всички цсс3 свойства за останалите браузъри. Примерно ако пишеш само за уебкит, то после ще ти добави за мозила, ие и опера
 
ivzb каза:
@dakata__92, prefixr е сайт на tutsplus.com и ти добавя автоматично всички цсс3 свойства за останалите браузъри. Примерно ако пишеш само за уебкит, то после ще ти добави за мозила, ие и опера
Увеличете...
Интересно, незнаех :D
 
@LuBaTa, ако искаш кода ти да бъде добре визуализиран под повечето версии на A grade браузърите е желателно да се възползваш от следните инструменти:

Normalize.css - Различните браузъри (и версии) задават различни стилове по подразбиране на елементите, което е най-честата причина за получаване на разминавания във дизайна. Normalize.css оправя този проблем.

Modernizr - Не използвай UA sniffing, а използвай feature detection. Много от браузърите твърдят, че поддържат дадено нещо, но понякога не е така. С Modernizr можеш да разбереш дали браузъра поддържа liner gradient (css3 property) и ако да да покажеш градиента, ако не - да покажеш някакъв fallback.

Prefixr - Вече го споменаха в по-горните постове, но инструмента е доста полезен и заслужава да се спомене отново. Prefixr допълва, където е нужно, префиксни стойности на css3 свойства.

HTML5 Boilerplate - С две друми, това е front end основата, която използват повечето модерни уеб сайтове в днешно време. Непременно го разгледай!

Добра практика е да правиш дизайна си в Chrome, а след това да оправяш разминаванията в другите браузъри с малко помощ от Modernizr ;)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе