Оптимизация кода под браезеры

312

16 августа 2007 года

392 / / 26.11.2006

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

Ошибки в HTML:
Попробовал протестировать обсуждаемый ранее код:
[HTML]<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="name.swf">
<param name="quality" value="high">
<param name="flashvars" value="var1=value1&">
<param name="bgcolor" value="#ffffff">
<embed src="name.swf" quality="high" flashvars="var1=value1&" bgcolor="#ffffff"
width="550" height="400" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>[/HTML]
Почему-то он матерится и плюется кислотой на всю эту строчку:(
[HTML]<embed src="name.swf" quality="high" flashvars="var1=value1&" bgcolor="#ffffff" width="550" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">[/HTML]
объясните, пожалуйста, почему

наиболее популярные ошибки(по крайней мере у меня:)):

<img src=”” [COLOR="Red"]alt=””[/COLOR]>
<table [COLOR="Red"]height=””[/COLOR]>
<script language="" [COLOR="#ff0000"]type=""[/COLOR]>

Для визуальной оптимизации я использовал следующий код в head-е:

Код:

echo " <style type=\"text/css\">@import url(\"design/style.css\");</style>\n";
if (preg_match ("/msie/i", $_SERVER['HTTP_USER_AGENT'])){

 echo " <style type=\"text/css\">@import url(\"design/style_ie.css\");</style>\n ";
} elseif (preg_match ("/firefox/i", $_SERVER['HTTP_USER_AGENT'])){

 echo " <style type=\"text/css\">@import url(\"design/style_ff.css\");</style>\n ";
} elseif (preg_match ("/safari/i", $_SERVER['HTTP_USER_AGENT'])){

 echo " <style type=\"text/css\">@import url(\"design/style_saf.css\");</style>\n ";
}

Команда [COLOR="Navy"]$_SERVER[/COLOR][COLOR="#006400"][[/COLOR][COLOR="DarkRed"]HTTP_USER_AGENT[/COLOR][COLOR="DarkGreen"]][/COLOR] возвращает нам информацию о пользователе. Какая OC у него стоит, каким браузером он пользуется, какая версия браузера и т.д.
В файле style.css я прописываю все стили и оптимизирую под любимый браузер.
Тут кому как больше нравится, я оптимизировал под Opera.
Далее мы подгружаем один из трех файлов с CSS стилями, подготовленных специально под каждый браузер.
В моем предыдущем топике я перечислил 7 браузеров. Объясню, почему же я пишу только под 4. Netscape Navigator и Flock созданы на основе браузера Mozilla Firefox, а Maxthon на основе Internet Explorer. Как результат лично я не заметил отличий в отображении кода интернет страниц.:)

Ошибки в CSS:
обсуждалось ранее

Код:

body {

 scrollbar-face-color: #57f;

 scrollbar-shadow-color: #57f;

 scrollbar-highlight-color: #aaf;

 scrollbar-3dlight-color: #aaf;

 scrollbar-darkshadow-color: #000;

 scrollbar-track-color: #bbf;

 scrollbar-arrow-color: #00f;

}

Других ошибок в CSS замечено не было:cool:

352

17 августа 2007 года

skywalker

694 / / 10.02.2006

Цитата: dead_star

Потому что в спецификации (X)HTML вообще нет тега embed, это придумка нетскейпа... Если хотите внедрить флешь и при этом оставить код валидным, то делайте так:

Код:

<object type="application/x-shockwave-flash" data="/path/name.swf" width="385" height="150">

<param name="movie" value="/path/name.swf" />

</object>

Или используйте внешний JS файл.

Цитата: dead_star

наиболее популярные ошибки(по крайней мере у меня:)):

<img src=”” [COLOR="Red"]alt=””[/COLOR]>
<table [COLOR="Red"]height=””[/COLOR]>
<script language="" [COLOR="#ff0000"]type=""[/COLOR]>

Тег img лучше закрывать и прописывать атрибут alt (или хотя бы ставить alt=""), т.е. <img src="/path/name.gif" alt="картинка"/>.
Атрибута height у таблицы, при использовании XHTML нет, используйте CSS (через классы или атрибут style).
А у тега script нет атрибута language, надо писать так:

Код:

<script type="text/javascript">

<!--

 //код

//-->

</script>

Цитата: dead_star

Код:

body {

 scrollbar-face-color: #57f;

 scrollbar-shadow-color: #57f;

 scrollbar-highlight-color: #aaf;

 scrollbar-3dlight-color: #aaf;

 scrollbar-darkshadow-color: #000;

 scrollbar-track-color: #bbf;

 scrollbar-arrow-color: #00f;

}

Других ошибок в CSS замечено не было:cool:

В CSS нет такого свойства как scrollbar, это придумка Microsoft, хотя эту вещь при некоторых изворотах понимает так же и Опера, но все равно использовать ее не стоит...
Хотя, соблюсти валидность CSS не реально, в силу таких причин, как плохая поддержка CSS в IE (порой приходится использовать хаки) и некоторых свойств придуманных разработчиками мозиллы (по сути хаки для мозилы).
Могу дать несколько интересных ссылок, для проверки, как выглядят сайты в разных браузерах:
http://browsershots.org/
http://danvine.com/icapture/
http://www.browsercam.com/

352

17 августа 2007 года

skywalker

694 / / 10.02.2006

Цитата: dead_star

И что после такого делать?
Считать ли w3 за основу всех святых, если даже google им пренебрегает?

Зато стандарты W3C стали уважать в http://yandex.ru/ и http://www.msn.com/ , так что эти стандарты надо соблюдать... даже когда они в корни не правильные и на редкость запутанные ;) .

312

17 августа 2007 года

http://browsershots.org/
http://danvine.com/icapture/
http://www.browsercam.com/

392 / / 26.11.2006

первый ответ. ура :D

благодарю skywalker за ответ на оснавной вопрос с флэшом.
остальной текст был скорее утверждение нежели вопрос, но всеравно спаибо.

ОГРОМНОЕ спасибо за ссылочки

Цитата: skywalker

еще один вопрос возник

Цитата: skywalker

много раз натыкался на обозначение "/>" в различных кодах(баннерные ссылки и тд)
но я понятия не имею что это дает и зачем это надо. не находил никакого упоминания в литратуре.:(
у меня и без этого все работает. но все же хотылосьба знать...

352

17 августа 2007 года

skywalker

694 / / 10.02.2006

Цитата: dead_star

первый ответ. ура :D

благодарю skywalker за ответ на оснавной вопрос с флэшом.

ОГРОМНОЕ спасибо за ссылочки

Не за что.

Цитата: dead_star

еще один вопрос возник

много раз натыкался на обозначение "/>" в различных кодах(баннерные ссылки и тд)
но я понятия не имею что это дает и зачем это надо. не находил никакого упоминания в литратуре.:(
у меня и без этого все работает. но все же хотылосьба знать...

Если в документе используется доктайп XHTML, то теги у которых нет закрывающего тега, надо закрывать так />. Хотя, если доктайп HTML, то закрывать эти теги не обязательно, а то что работает и без этого, так за это спасибо разработчикам браузеров :D. Подробнее, о том какие теги можно использовать в XHTML и какие из них надо закрывать (<br />, <img ... />), можно почитать здесь:
http://xhtml.ru/2006/06/05/xhtml-elements/
А про основные ошибки валидации, вот здесь:
http://xhtml.ru/2006/06/04/validator-errors/

312

17 августа 2007 года

392 / / 26.11.2006

Цитата: skywalker

спасибо за разяснение
теперь буду писать правельно

312

23 августа 2007 года