Отголоски прежних войн слышны до сих пор. Правда уже ясно - победил здравый смысл. Netscape Navigator пытавшийся диктовать свои стандарты бесславно проиграл все сражения. Не выиграл и Internet Explorer.  Хотя доля его в Интернет достаточно велика, но это объясняется встроенностью IE в Windows.

Зато появились новые отличные браузеры - Firefox, Safari, Google Chrome. Да и Opera, хотя и растерял свои былые преимущества (прежде всего компактность), также является солидным участником соревнования. Именно соревнования, а не боев без правил, как было раньше.

Мы не собираемся разбирать, какой браузер лучше для пользователей, а какой хуже - нам это всё равно. Но для разработчиков сайта надо знать два аспекта:

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

2. Как браузер работает с самой системой управления.

Отображение страниц в браузере

Как будут отображаться страницы в браузере - полностью зависит от дизайнера. Простая страница, сверстанная с использованием таблиц, будет более или менее прилично отображаться в любом браузере. Однако современные сайты построены сложнее. Широко используются каскадные таблицы стилей (CSS). Верстка страниц выполняется с использованием слоев, на страницах используется динамический HTML, меню различных видов и прочие новинки.

CSS мы используем очень давно. Но десять лет назад приходилось писать что-то наподобие:

Для Internet Explorer

margin-left: 0;
margin-right: 10;
margin-top: 0;
font-family:"arial cyr", "arial", "helvetica";
font-size: 10pt;
fontsize: 10pt;
text-align:justify;

Для Netscape Navigator

fontfamily:"arial cyr, arial, helvetica";
textalign:justify;
leftmargin: 0;
rightmargin: 10;
topmargin: 0;

Видите, как отличаются одни и те же понятия? Исключительно, чтобы "назло".

К счастью, "времена мерзопакостные",  когда доминировали два несовместимых между собой браузера давно прошли. Все современные браузеры достаточно хорошо поддерживают  Javascript, спецификации HTML 4 и CSS. Однако, как всегда, "есть нюансы".

В настоящее время хуже всего страницы отображает Internet Explorer, по крайней мере 6-й и 7-й версии. Все остальные ведущие браузеры (Firefox, Orera, Safari, Chrome) отображают страницы одинаково хорошо. С очень небольшими нюансиками. 

Под "хорошо" и "плохо" мы не имеем ввиду скорость загрузки или безопасность браузеров - это отдельные темы. Здесь мы говорим только о поддержке браузерами стандартов HTML и CSS. Страницы этого сайта полностью сверстаны с использованием CSS. Если посмотреть CSS-файлы, то в них имеются множество ненужных добавок, предназначенных для исправления "багов" Internet Explorer.

Вот фрагмент одного из CSS-файлов, полностью предназначенного для исправления глюков IE:

 html {height: auto; margin-bottom:0;}
.news_box {height: 160px;}/* в IE min-height не работает, для него надо height*/
*html textarea { overflow:scroll; overflow-x: hidden; }
* html input { overflow: hidden; }
body { position:relative; }  /* Essential in IE7 for correct layout scaling ... */
* html body { position:static; }  /* ... but not for IE5.x and IE6 */
#main { position: relative; } /* helpful for several problems in older IE versions*/
.clearfix { display: inline-block; }  /* ... especial for IE7 */
.clearfix { display: block; }      /* ... für IE5,IE6,IE7 */
* html .clearfix { height: 1%; }   /* ... für IE5 + IE6/Win | hasLayout aktivieren */
* html .floatbox { width:100%; }
.slidebox {position:relative; margin-right: -1000px; height: 1%;}
* html #col1,  * html #col2,  * html #col3 { position:relative; } 
* html #col_one { position:relative; } 
body { height: 1%; }
#page_margins, #page, #header,  #main, #footer {width: 1200px; zoom:1; } /* IE6 & IE7*/
#page_margins, #page { height: 1%; }  /* IE 5.x       */* 
html #header,  * html #main, * html #footer { width: 100%; }  /* IE 5.x & IE6 */
* html #header,  * html #main, * html #footer { wid\th: auto; } /* IE 6         */* 
html ul, * html ol, * html dl { position: relative; }
body ol li { display:list-item; }
#ie_clearing {    /* (en) Only a small help for debugging */    
position:static;    /* (en) Make container visible in IE */    
display:block;    /* (en) No fix possible in IE5.x, normal clearing used instead */    
\clear:both;    
/* (en) forcing clearing-like behavior with a simple 
oversized container in IE6 & IE7*/    
width: 100%;  
font-size:0px; 
margin: -2px 0 -1em 1px;  } 

  В этой таблице стилей всё кажется не нужным, но без неё страницы нашего сайта не будут правильно отображаться в Internet Explorer!

  Следовательно отображение страниц нужно прежде всего проверять в IE. При этом особое внимание нужно обращать на:

а) изменение ширины окна браузера

б) изменение высоты текста

в) изменение длины текста в боковых и средних колонках.

У IE есть еще одна подлая особенность (правда более при табличной верстке) - этот браузер может скрывать ошибки верстки, например, незакрытые теги элементов таблиц. "Шибко умный" (где не надо) IE как бы сам исправляет ошибки и может показать страницу примерно так как задумал дизайнер. Но в других браузерах это не пройдет - если уж они показывают неправильную верстку, то это непременно вина дизайнера, а не браузера.

Отсюда вывод - проверять вид страницы в разных браузерах - в IE и Firefox. А почему именно в Firefox, а не в Opera, например?

Во-первых, если страницу правильно показывает Firefox, то и в остальных хороших браузерах она будет тоже показана правильно.

Во-вторых, в Firefox всегда можно просмотреть исходный код страницы с подсветкой синтаксиса HTML.

В-третьих, для Firefox имеется замечательное дополнение Web Developer имеющее кучу превосходных инструментов для дизайнера. Вот пример использования инструмента CSS Style Information:

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

Влияние отключения Javascript 

В современных браузерах есть возможность отключить Javascript. MODx широко использует Javascript. Естественно, что при отключении Javascript работа в системе управления невозможна. Естественно, что редактор сайта отключать Javascript в браузере, работающем с админкой не будет. А вот у посетителей сайта Javascript может быть отключен. И это не страшно!

Браузеры Firefox, Safari, Opera показывают front-end и при отключении Javascript, в том числе работает и самое критичное место - главное меню. А вот в Internet Explorer при устаноке Запретить сценарии в главном меню работает только верхний уровень, падающие меню не раскрываются.

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

Работа в системе управления - "админке" 

Кто и как портит код страниц

Вот пример того, что лишнего вставил браузер - фрагмент HTML-кода этой страницы:

Выделенное жирным без спроса написал браузер Chrome, в котором мы для пробы начали писать эту страницу. При этом после сохранения страницы и последующей перегрузки вылетело сообщение, что страница не найдена и в дереве она не появилась! Пришлось даже залезть напрямую в базу данных, чтобы найти её. Сразу можно сделать вывод - для работы в админке Chrome непригоден. Конечно это еще очень молодой браузер, для учёта его особенностей разработчикам ещё придется поработать. Поэтому оговоримся - непригоден пока, для этой версии MODx, для этой версии TinyMCE.

Но такие же теги вставил в код и более "пожилой" браузер - Safari. Сохранять-то страницы он сохраняет, но во вставке в разные места тегов <span class="Apple-style-span">  с различными добавками мы его уличали неоднократно. И это при том, что особенности Safari явно учитывались разработчиками TinyMCE - упоминание о нем встречается в коде множество раз. Но козни Safari полностью преодолеть видимо не удалось. Поэтому мы с сожалением (Safari вообще-то нам очень нравится), вынуждены отказаться от работы в нем с админкой.

А вот так этот абзац записал Firefox:

В обоих случаях слова Netscape Navigator и Internet Explorer мы выделяли жирным, нажимая кнопку Ж редактора TinyMCE. Но Firefox написал правильные теги <strong></strong>, а Chrome и Safari вставили какие-то левые <span class="Apple-style-span" style="font-weight: bold"></span>.

Чем это грозит? Внешне вылядит-то одинаково? 

В действительности это очень плохо. Тег strong является стандартным. При необходимости мы можем его переопределить, например сделать выделение не жирностью шрифта, а курсивом или цветом. Тогда у нас изменится и оформление всех страниц. Класса "Apple-style-span" в наших таблицах нет. Даже если бы мы его ввели, всё равно в конкретном месте записано собственное определение font-weight: bold. Оно замещает все предыдущие свойства класса и мы никогда не сможем сделатьтакие тексты "не жирными".

Особенности Safari

Помимо вставки "левых" тегов класса "Apple-style-xxx" выяснилось, что при выборе ссылки при работе в Safari возвращается в диалог правильное имя файла, но уже в TinyMCE записывается "#mce_temp_url#". Вообще-то это предусмотрено сценарием, но такая временная метка должна заменяться на реальную ссылку. Оказалось, что это особенность Safari - не заменять эту временную метку. Очень плохо. Пахнет смертным приговором Safari. Двух глюков в стратегических местах достаточно.

 А что же Opera?

Теги strong этот браузер, по крайней мере, не заменяет. Стили из таблиц Opera рендерит замечательно. Но у этого браузера давно известный недостаток - неправильная работа с Javascript. В админке же MODx многое держится на Javascript, а TinyMCE вообще только на Javascript построен.

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

Internet Explorer в системе управления

Честно говоря, влезать с ним в админку мы как-то просто не любим. Явных глюков, вроде бы, не замечено. Скорость загрузки, конечно, значительно меньше чем у Firefox, Safari или Chrome. Может из-за этого душа не лежит - всё-таки на наших сайтах есть деревья с более чем 6000 страниц. Вообще впечатление какое-то нехорошее - окна файлового менеджера прыгают в разные стороны, кнопки прячутся за рамку и её каждый раз надо растягивать. Всё мелочи (явно связанные с упоминавшимися выше багами работы с CSS), но мелочи неприятные. Нет, с таким мы "в разведку не пойдем".

  Вывод

В настоящее время наиболее удобным браузером для работы с MODx является Firefox - как для работы внутри системы управления, так и для тестирования страниц.
Что будет дальше - пока неизвестно. Совершенствуются браузеры, совершенствуется MODx, совершенствуются плагины к ней.