Эксперимент

[ViStefan]

Друзья! Имеется страница http://vistefan.narod.ru/a.html - главная якобы какого-то альянса.

Всё свёрстано валидно, и работает одинаково в последних версиях fx opera chrome ie.

Появилась идея провести эксперимент, насколько вырастет объём кода и файлов после приданию данной странице кроссбраузерности (начиная хотя бы с IE 7).

Насколько я понимаю, тут основная запара будет в скруглении углов и прозрачностью (т.к. Древние ie на знакомы с RGBA)

За одно зацените диз и элегантность кода.

По поводу прозрачности, можно считать что тут всё просто. Кроссбраузерности достигаем так:

background: url("bg.png") //картинка размером 1x1 px нужного цвета с % непрозрачности

А вот с углами и тенями хотел бы послушать ваших оригинальных предложений (особенно таких гуру как Vlad, psywalker, Necromancer)

P.S. Ваш валидатор вопит из-за баннера narod.ru

Edited August 27, 2011 by ViStefan

[pika]

Не могу сказать ничего по поводу кода, не дорос еще, но вот красные ссылки в меню очень режут глаза. Может слегка потемнее их сделать?

[ViStefan]

Не могу сказать ничего по поводу кода, не дорос еще, но вот красные ссылки в меню очень режут глаза. Может слегка потемнее их сделать?

Зависит от настроек монитора конечно, но вообще красная ссыль под :hover - это правила хорошего тона в мире вёрстки. (с)ArtLebedev

Но здесь ещё наверное text-shadow делает своё, выделяя текст.

Edited August 27, 2011 by ViStefan

[Vlad]

Вы изначально неверно ставите задачу. Не важно, насколько вырастет объём файлов, он в любом случае будет незначительным. Учитывайте время, которое вы потратите на кроссбраузерность и IE.

[Softlink]

Учитывайте время, которое вы потратите на кроссбраузерность и IE.

Ага, даже экспериментировать не хочется из-за этого. Ведь большой сложности сверстать под ИЕ6-7 нет, но вот сколько это займет времени - вопрос совершенно другой.

[ViStefan]

Учитывайте время, которое вы потратите на кроссбраузерность и IE.

Ага, даже экспериментировать не хочется из-за этого. Ведь большой сложности сверстать под ИЕ6-7 нет, но вот сколько это займет времени - вопрос совершенно другой.

А почему тогда уходит много времени, если "большой сложности нет"?

Вы изначально неверно ставите задачу. Не важно, насколько вырастет объём файлов, он в любом случае будет незначительным. Учитывайте время, которое вы потратите на кроссбраузерность и IE.

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

Влад, что скажете о кроссбраузерных тенях? Как верстать?

[Softlink]

А почему тогда уходит много времени, если "большой сложности нет"?

Сложно вот это сверстать http://psywalker.ru/Forum/Menu/13/menu.html ? Ну средней сложности, согласен.

А вот аналог на CSS3 http://jsfiddle.net/PMWPL/14/

И теперь представьте, сколько времени надо, чтобы подогнать все размеры, картинки, паддинги и все остальное в первом случае. На второй же вариант ушло минут 15, не больше.

[cyklop77]

а зачем меню таблицей, если даже не резиновая страница?

[ViStefan]

А почему тогда уходит много времени, если "большой сложности нет"?

Сложно вот это сверстать http://psywalker.ru/Forum/Menu/13/menu.html ? Ну средней сложности, согласен.

А вот аналог на CSS3 http://jsfiddle.net/PMWPL/14/

И теперь представьте, сколько времени надо, чтобы подогнать все размеры, картинки, паддинги и все остальное в первом случае. На второй же вариант ушло минут 15, не больше.

Вопрос был про кроссбраузерность а не про путь решения. Как раз на второй вариант IE вас пошлёт подальше... )

Edited August 27, 2011 by ViStefan

[Softlink]

А почему тогда уходит много времени, если "большой сложности нет"?

Я вам на этот вопрос отвечал.

[Vlad]

Сложности гектар картошки выкопать тоже нет, а времени уходит ого-го.

Рисунками в кроссбраузерности всё делается. Вот так тени.

http://htmlbook.ru/content/sozdanie-teni-po-tipu-lukovoy-shelukhi

[ViStefan]

а зачем меню таблицей, если даже не резиновая страница?

А зачем горизонт меню дивами, если даже не резиновая страница? )

Сложности гектар картошки выкопать тоже нет, а времени уходит ого-го.

Рисунками в кроссбраузерности всё делается. Вот так тени.

http://htmlbook.ru/content/sozdanie-teni-po-tipu-lukovoy-shelukhi

А как насчёт тени текста (эквивалент css-ному text-shadow)? Каждое изменение на сайте влечёт за собой перерисовку всего бг?

[Vlad]

Тень под текстом делают на JS.

[ViStefan]

Тень под текстом делают на JS.

Ясно, спасибо за разъяснения.

[Softlink]

и мои 5 копеек.

ИМХО. Делать тень для текста повсеместно на сайте - это зло. Ухудшается читабельность и восприятие его. А для отдельных блоков(меню например) можно и картинкой ее сделать.

[ViStefan]

А саму мою вёрстку так никто и не оценит?

и мои 5 копеек.

ИМХО. Делать тень для текста повсеместно на сайте - это зло. Ухудшается читабельность и восприятие его. А для отдельных блоков(меню например) можно и картинкой ее сделать.

Согласен, но макет эксперементальный, не суди.

[Nekromancer]

Раз уж меня занесли в этот "список" то и я отвечу.

Кроссбраузерность и css3/html5 на данный момент почти мистика, хотя за последние пол года прогресс на лицо. Древний ИЕ ещё будет жить как минимум 2-3 года (это моё сугубо скептическое мнение, ибо я не верю в свет просвещения над юзерами) по этому о полной кроссбраузерности можно забыть... пока.

По этому нужно изначально ставить цель - вы делаете сайт "будущего" с новыми фичами с расчётом, что скоро все браузеры подтянутся, либо вам нужен кроссбраузерный сайт для самых популярных браузеров на данный момент. В этом случае вам придётся забыть про новые трюки и верстать по старинке, какой бы не была заманчивая "простота" css3...

Конечно, на всё есть исключения. Кто то использует кривые костыли от чего "калеки" становятся ещё хуже. Кто то просто забивает на старые версии и просто делает более-менее приемлемый сайт, интуитивно понятный и без эффектов для старых браузеров.

А есть ещё и гуру JavaScript кода которые разрабатывают серьёзные и большие проекты (да и не только) которые вполне способны написать сами костыли для ИЕ в виде фильтров/htc/vml, эти костыли во многом эмулируют поведение css3 но не восполняют его полностью. По этому либо приходится писать их под отдельные нужды, либо написать такой хороший код который сможет подойти под любую ситуацию. Но имхо, нужно постараться.

Ну а теперь решайте сами, что вам ближе

[Shader]

Тоже считаю, что сейчас уже безсмысленно поддерживать это старье. Ориентироватся как минимум на ИE9+ (крайний случай ИЕ8, но не 6 точно!).

Все от того, что юзрые всегда куда-то спешат и у них "нехватка" времени, чтобы обновить систему или какой-то ее компонент. Их надо пугать сообщениями на весь экран : "Ваша версия браузера устарела, это может нанести большой вред вашему компьютеру, пожалуйста, обновите версию вашего браузера." Вот и все, я ща вижу многие делают эту фичу на JS, которая опеределяет браузер и, если там подобие ИЕ6, то выводит эту страницу.

[Nekromancer]

Тоже считаю, что сейчас уже безсмысленно поддерживать это старье. Ориентироватся как минимум на ИE9+ (крайний случай ИЕ8, но не 6 точно!).

Я этого не говорил, я свои работы выболняю для ИЕ 6/7+

Все от того, что юзрые всегда куда-то спешат и у них "нехватка" времени, чтобы обновить систему или какой-то ее компонент.

Враньё. Половине просто лень, а другая половина не знает что можно обновится. Ещё какая то часть сверху просто физически не может обновится, а ещё кто то думает, что если у них стоит дома комп то там всё как то само всё работает, а сайты в интернете изначально были, а если сайт плохо показывает значит он плохой, надо закрыть его

я ща вижу многие делают эту фичу на JS, которая опеределяет браузер и, если там подобие ИЕ6, то выводит эту страницу.

Имхо, так проще:

<!--[if lte IE 6]>

	<meta content="0; URL=/ie6.htm" http-equiv="refresh">

 <![endif]-->

[ViStefan]

Раз уж меня занесли в этот "список" то и я отвечу.

Кроссбраузерность и css3/html5 на данный момент почти мистика, хотя за последние пол года прогресс на лицо. Древний ИЕ ещё будет жить как минимум 2-3 года (это моё сугубо скептическое мнение, ибо я не верю в свет просвещения над юзерами) по этому о полной кроссбраузерности можно забыть... пока.

По этому нужно изначально ставить цель - вы делаете сайт "будущего" с новыми фичами с расчётом, что скоро все браузеры подтянутся, либо вам нужен кроссбраузерный сайт для самых популярных браузеров на данный момент. В этом случае вам придётся забыть про новые трюки и верстать по старинке, какой бы не была заманчивая "простота" css3...

Конечно, на всё есть исключения. Кто то использует кривые костыли от чего "калеки" становятся ещё хуже. Кто то просто забивает на старые версии и просто делает более-менее приемлемый сайт, интуитивно понятный и без эффектов для старых браузеров.

А есть ещё и гуру JavaScript кода которые разрабатывают серьёзные и большие проекты (да и не только) которые вполне способны написать сами ИЕ в виде фильтров/htc/vml, эти костыли во многом эмулируют поведение css3 но не восполняют его полностью. По этому либо приходится писать их под отдельные нужды, либо написать такой хороший код который сможет подойти под любую ситуацию. Но имхо, нужно постараться.

Ну а теперь решайте сами, что вам ближе

Спасибо за высказанное мнение, а почему "список" в кавычках?

[Nekromancer]

Спасибо за высказанное мнение, а почему "список" в кавычках?

Потому, что до гуру мне ещё есть, потому и ковычки которые означают скептическое отношение к списку

П.С. В тексте там опечатка, не "сделать ИЕ" (конечно же), а "сделать костыли для ИЕ".

[orion_by]

Ну вот если говорим про IE7 то вот что получилось Сслыка , для IE6 немного подлатать нужно. может пригодится

[ViStefan]

Ну вот если говорим про IE7 то вот что получилось Сслыка , для IE6 немного подлатать нужно. может пригодится

Спасибо, интересный вариант.

[orion_by]

ViStefan, всегда пожалуйста

[buddah]

А зачем горизонт меню дивами, если даже не резиновая страница? )

Почему бы не сделать ul+li+inline-block?

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