Статьи / Веб-Дизайн / Создавая под IE, не забудьте про Netscape

  2008-11-03 17:48

Согласитесь, иногда забавно быть не соучастником, но наблюдателем. Высоко сижу, далеко гляжу... Можно строить четкие аналогии. В независимой голове рождаются независимые оценки... Вот ведь как оно со стороны...
А со стороны видно, что по-прежнему киваем на "старшего брата". Ну? Как там у них? А-а-а, Лебедев "Руководство" изобрел. Ну так мы тоже не лыком шиты. Нате вам "Луководство" и "Осоводство" в придачу!
Что? Порки у них на гребне волны? Так этого хозяйства у нас хоть отбавляй. Как грибы после дождя выросли самостийные "сетевые обозреватели". Не успеешь и "доброе утро" сказать, а они тебе пачку обзоров уже показывают. И где только время берут, графоманы чертовы?
Это сладкое слово "Рунет". Звучит как песня соловья, не правда ли? А вот теперь советую закрыть ушки: "Б-А-Й-Н-Е-Т". О ужас, кто его придумал!?
Вот только с доменами небольшой конфуз (но есть значительные подвиджки, смею вас уверить). Недавно Дима Шейко спросил: "Какие-такие основные события БайНета?" Для меня самой загадочной стала повальная тенденция регистрации двубуквенных доменов в зоне *BY. Откуда ветер дует?
Фантазеры-мечтатели (читай: полиграфисты) — народ бойкий. Ну любят они DHTML до умопомрачения, что ж ты тут поделаешь. Визуальные редакторы HTML, Java тоже не на последнем месте. Ай, что там говорить, сам грешен, имею тягу к CSS. Все, конечно, мило и красиво... в Explorer'e.

Что б так, дык ты вот так...
Не ломая языки, и жизнь прекраснее становится. Если уж и убивать двух (как минимум) зайцев, так для этого не надо изобретать двухколесное транспортное средство. Достаточно всего лишь не "наворачивать" с три короба, а просто стремиться к элементарному и доступному. Вот согласитесь, по-дурацки и местами сумбурно я писал до сих пор? А ведь должно же так, чтобы понятно большинству...
Итак, речь идет об универсальности. Конечно, разные версии сайта — это хорошо. Но удобно ли? Вот, допустим, хиленькая аналогия с обыденной жизненной ситуацией. Помните, раньше в метро вместо жетонов были пятаки? И стояли автоматы по 20, 15 и 10 монет для их размена. А что же делать, когда у тебя 15 копеек, а именно этот автомат и не работает? Идти, искать, где разбить мелочь?
А как удобнее с жетонами — с любой денежной единицей приходишь в кассу и получаешь свой жетон. Процедура сокращена до минимума, до двух операций — решения и действия, направленного на выполнение этого решения. Ты решаешь поехать в метро — ты покупаешь жетон. Промежуточные операции, как то размен и др., теперь уже не твоя головная боль. Система построена так, что берет ее на себя.
Сайт желательно изначально делать удобоваримым не только под IE или Navigator, но и под текстовые браузеры. Тогда и Opera песни запоет, и Linux "покатит". Чтобы пользователь от выпадающих Java-меню не выпал в осадок, текстовая навигация должна быть интуитивно понятна в большинстве мест отдельно взятой страницы и на большинстве страниц.
Если вообще встать на место ЕГО, пользователя, который пришел чисто ЗА ИНФОРМАЦИЕЙ, он не должен отвлекаться на такие мелочи (для него, не для нас, мелочи), как ее представление. Более того, зачем нагружать его лишними заботами, предлагать выбор версии сайта? Только две операции — решение, действие. Решил получить информацию на сайте (решение) — получил (действие). Не более того.
На самом деле все не так сложно. Поосторожнее с чудо-иллюстрациями, разбитыми на мудреные таблицы, CSS, Map-рисунками и Java. А вообще, только с помощью одного текста можно создать отличный дизайн веб-сайта, и, главное, универсальный. И не придется никому ломать языки.

Вот где @ зарыта
А теперь, непосредственно о тех нюансах, которые наиболее часто являются причиной некорректного отображения страниц в Netscape Navigator.

Тэги
Обязательны замыкающие тэги, особенно </td> и </tr>. Navigator это странное создание (без Gekko, разумеется), лишен "искусственного интеллекта", которым бог одарил IE. Ни в какую не прочитает правильно вашу таблицу, если не поставите везде замыкающие тэги. Тоже относится и к формам — открывает <form...>, закрывает </form>.
Для абзацев с красными строками лучше не пользоваться <dd> и <dl>. Применение неразрывных пробелов &nbsp; до сих пор актуально.

Таблицы и заливки
Если заливается только ячейка, то background="images/example.gif" необходимо прописывать в <td>, а никак не в <tr>. Потому что в первом случае заливка будет понятна обоим браузерам, а во втором — только Navigator'у.
Вложенные таблицы. Be careful. Navigator имеет наглость по умолчанию размножать заливку основных таблиц, в ячейках вложенных.
Поэтому если вся либо отдельные ячейки вложенной таблицы должны быть прозрачными, соответственно в <table...> или <td> прописывается background="no".
То, что топором не вырубишь, каленым железом не выжжешь, короче с чем придется смириться — заливка таблицы с установленным расстоянием между ячейками Cell Spacing. Имеется в виду заливка цветом. Если вы хотите, чтобы таблица, независимо от количества ячеек в ней, была одного сплошного цвета <table bgcolor="#">, то Navigator все равно вставит вам палки в колеса и будет показывать пробелы-пустоты Cell Spacing. Выход только один — поместить основную таблицу в другую, залитую необходимым цветом. Причем не забыть сделать основную таблицу прозрачной, то есть background="no".

Стили
Вот уж воистину! Navigator их, как правило, ПРОСТО ИГНОРИРУЕТ. Никакой Америки я здесь, конечно, не открыл. А так, просто эмоционально — э-э-эх — выразился.
Из CSS Navigator адекватно понимает, пожалуй, только текст (шрифт, размер, цвет). Шестнадцатеричное представление цвета обязательно с решеткой #.
Формы <input...> поддаются стилизации частично. Если задан стиль для текста в <table> или <td>, то размер и шрифт текста форм будет аналогичным. Цвет — нет. Что хорошо, можно задать расстояние от форм сверху и снизу, прописав form {margin-bottom: px; margin-top: px}. Можно регулировать величину разрыва строки <br>, установив br {font-size: pt}. Можно управлять параграфом, например: p {text-align: justify; margin-bottom: px; margin-top: px}.

Формы
Надо отметить, что в Navigator'е они выглядят почему-то больше, нежели в IE. Временами это может испортить дизайн сайта, если ячейка, в которой стоит форма, должна быть фиксированной ширины. В IE все будет выглядеть нормально, а вот Navigator растянет форму и вместе с ней ячейку. Поплывет таблица. Во избежание таких сюрпризов, необходимо четко задавать размер формы. Скажем, если это обычное текстовое поле, то <input size="размер_поля">. Сразу подобрать нужный размер — дело проблематичное. Придется перебирать варианты и тестировать в обоих браузерах. Кстати, на последнем можно особо заострить внимание, так как параллельное тестирование в обоих браузерах, а еще лучше и в Oper'е, может существенно прибавить очков в пользу доступности и универсальности вашего сайта.

Автор: Максим Костюченко