проблемы совместимости различных броузеров
 

тов. Vadimmac хотел получить ответы на множество сабжевых вопросов, я думаю, что не он один (и я не исключение).
Так вот: открыл топик в котором пусть каждый, кто хоть что-нибудь знает про совместимость (а именно оптимизацию HTML) скажет свое веское слово - небольшай идея способна серьезно облегчить нашу трудовую жизнь :)

Я, так и быть, первый:

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

1) Не использовать сомнительные "технологии" ХТМЛ, такие как:
- слои
- маски
- изменение интерфейса броузера (чрезмерное)
- чрезмерное применение файлов, для просмотра которых требуется "бесплатно скачать необходимый plug-in"
- и тому подобные вещи

Эти принципы позволяют ЗАРАНЕЕ избежать проблем с совместимостью и не тратить много времени на создание сомнительного выпад. меню, например. Если очень надо, то приходиться мучаться - но это уже в исключительных ситуациях.

2) Страница должна хорошо смотреться во всех броузерах (за исключением очень древних).
Это означает, что моя страница должна функционировать под следующими системами и броузерами:

Винды: ИЕ4 и выше, НН4.х и выше, Опера 5 и выше (ниже 4ки под Вин нету)
Маки: какой-у-них-там-сейчас-броузер
Линуксы (и вся компания): Конкерор, Опера4 и выше, НН 4 и выше.

Может быть этот список пополнится, но на данный момент этого хватает на ~99% пользователей.

3) Страница должна быть удобна при разрешении 640х480 до 1600х1200. Многие дизайнеры забывают про 640-юзеров или
просто не могут оптимизировать сайт. Я же решил, что даже если сайт и вылезает за 640 по ширине (очень частые случаи), то пользователю должно быть все равно удобно с ним работать - например на странице меню верт. влева, а текст вправа, так вот этот текст должен полностью укладываться в 640, даже если меню за экраном - ибо пока юзер читает ему меню не нужно.

4) Если код о-оочень долго верстается, выглядит громоздко и портит настроение, то надо искать другой, более легкий, путь решения проблемы, ибо см. мою подпись. Например, ЦИ никак не тыком вычислял координаты для своего эффекта "Стань известным - добавь исходник!". Он придумал некую прогу (как и я потом, когда тоже захотел такое сделать) для получения этих координат, но нам он ее не даст и не покажет (моя прога сделана во Флеше и я тоже не дам ;) ).

5) Если работа не выходит за рамки принципов, то надо подключит все свои (и чужие не помешают) знания, чтобы все доделать и отдать кому надо с чистым сердцем.

Все. Про технологии и знания я расскажу позже.

"сайтаюстраницы" -> "сайта или страницы" :)

Про технологии:

Даже в этом разделе я пользуюсь некоторыми принципами, как то:
- не применяю фреймов (мой сайт не в счет - переделываю)
- не использую хтмл генераторы, как frontpage, dreamweaver, golive, и другие.
- использую минимум графики - страница должна грузиться очень быстро, или не очень, но так, чтобы необходим. информация отображалась сразу.
- всю графику оптимизирую вручную (у гифов палитру руками чищу)
- навигация на сайте должна быть интуитивно понятна
- любая работа не должна иметь ни одного намека на плагиат!

Хочу сказать, что этот список - это не ру/ководство в кратком виде, это действительно опыт создания сайтов (не без помощи ру/ководства, конечно :)

Приемы в хтмл следующие (первое, что пришло на ум):

1) Отступ текста в <P></P>: <img src=trans.gif width=40 height=1>, где trans.gif - это однопиксельный прозрачный гиф.

2) Во избежание 3Д бортика вокруг картинки, пока она грузится в Опере (border=0 не спасет) можно воткнуть ее в background таблицы с размерами картинки, но в саму таблицу необходимо воткнуть trans.gif c определенными (!) width и height, иначе в НН таблица будет размером 1х1, если не хуже.

3) При верстке сраницы я открываю несколько броузеров (Оперу, НН4, НН6, ИЕ) сразу и при изменении кода сразу смотрю, что получилось. Потом не надо искать забытый тег по всему тексту.

Пока в голову ничего не приходит, потом еще добавлю мыслей.

Re: проблемы совместимости различных броузеров
 

Hi !

Ну дизайн молодец :) Даже меня переплюнул (что кстати крайне тяжело) :)
Только такая чрезерность по моему все-таки ни к чему :)
По всем нормам международного права флешовый (подразумевается развлекательный) сайт считается нормальным если он идет в IE4-6/PC и NN4.xx/PC :)
Что захватывает 97% интернетчиков :)

И кстати еще - игнорирование 640х480 тоже вмещается в пределы допустимых трех процентов :)
В декабре такого народа было вроде бы 2.91% :)

но цифра 99 мне больше нравится, а раздраженного sts'a со своим Маком я еще помню, так что Маки в счет.

...что-то дискуссия превращается во флейм, наро-од! где вы все?

Оформительские полноцветные картинки, в которых есть куски фона должны быть гифами. Почему? Потому что только в гифе можно делать прозрачные пиксели - этих кусков фона не должно быть в принципе! Сейчас объясню. Разные броузеры по-разному отображают цвета. Причем отображают неоднозначно. Например в ИЕ фон таблицы/страницы указанный в виде #rrggbb (даже background=somecolor.gif не спасет) выглядит не так, как просто <img src=somecolor.gif>. Это прежде всего относится в оттенкам серого, даже к "безопасным" цветам, типа #cccccc/999999/666666/333333. Поэтому перед экспортом картинки необходимо удалить (сделать прозрачными) все пиксели фонового цвета. Хуже всего отображает цвета ИЕ (сам проверял), на втором месте - ННы (последние версии хорошо показывают). Ну и лучше всех - Опера - ни одного промаха с отображением цветов. Под Маками и Линуксами не тестировал - ИЕ хватило.

Всем участникам Форума: Ау, я один этот топик не вытяну. Нужны ваши идеи!

все это конечно хорошо
 

когда есть время можно, конечно, и палитру почистить ручками в гифке... И теги в нотпаде писать... и все такое.
Однако в реальной жизни бывать да-а-алеко не так :(
Особенно это касается глубинки, а не столицы. Расценки у нас гораздо ниже, а требования - на уровне :)
Ну как же! "А вон у них как! Я, Вась, такую же хочу!"
Вот и получается - Дримваевер, ворованный клип-арт, одинаковые менюшки и верстка, жпеги по 50Кб.

Грусно! Но есть, правда (если есть), отдушина - какой-нибудь личный проект, типа хом пейджа. Вот там можно и палитру руками править и все такое...
:)

именно так и именно в нашей реальной жизни ;)

Статья №4
 

Пока у меня есть целый час до урока испанского я хочу рассказать о ссылках. Да-да, именно о них.

Сначала о поп-апах (pop-up - выпригивающее окошко с рекламой/анкетой - верный признак порносайта).
Когда я делал сайт www.fotogallery.by.ru (работает только под ИЕ, пока :( ) появилась следующая проблема: в несчастном ИЕ при нажатии на ссылку, даже ведущую вникуда (href=javascript:// или href=#), этот броузер останавливал загрузку текущей страницы, а именно превьюшки. Дело обстояло так: пользователь нажимает на картинку и ему в лицо выпригивает фуллскрин с этой фоткой, только большого размера, а все превьюшки, которые должны были спокойно подгружаться (пока человек любуется картинкой), не подгружаются!%@#$ Как с этим бороться? А просто! Надо всего-навсего в конец той функции, которая вызывается так:
<a href=javascript:open("image.jpg");>
или так:
<a href=javascript:// onclick=open("image.jpg");>

вставить return false и ИЕ подавится своим возмущением. (правда на сайте я пока не исправил)

Это был пункт 1, теперь - второй:
Якоря (anchors, ссылки, ведущие на кусок текущей страницы) влекут за собой кучу проблем, даже Лебедев, говоря о location.replace(file.html#anchor) не учел (или учел, но не сказал) того, что разные броузеры - а раз мы говорим о совместимости, то это надо иметь в виду - разные броузеры по-разному ведут на один и тот же кусок документа, а именно:

Допустим, у вас где-то есть якорь, тогда ИЕ прокрутит документ так, что этот якорь будет наверху экрана (см. рисунок), а ННы и Опера прокрутят документ, так, что якорь будет внизу. Кстати, все это относится и к "горизонтальному" сайту. Поэтому я либо использую document.scroll(x,y); - это возможно только при фиксированных размерах страницы, если она не "расплывается" - либо не использую совсем. По моему личному мнению такие важные (с т. зрения эргономики) элементы навигации никак не могут работать по-разному.

Пункт третий относится скорее не к ссылкам, а к оформлению, но все равно не маловажный. Итак, допустим вам приспичило выделить кусок текста подчеркиванием (!). Что же делает пользователь, встретив такой сюрприз? Он протягивает к нему лапку и с удивлением обнаруживает, что курсор не меняется! Он начинает кликать на этот кусок текста и делает, как минимум, 3 щелчка. Лично меня, когда я выступаю в его роли, это ужасно раздражает (у меня мыша оптическая и не тормозит - представьте пользователя со старой шариковой мышой). Так вот надо бороться с этим - выделяйте либо жирностью, либо наклонностью.

В Инет подрубаюсь в-основном на выходных, среди недели в разъездах.. Поэтому молчу

Мной подмечена такая фишка в NN 4.7
Есть две таблица - родительская с одной ячейкой и дочерняя, вложенная в эту ячейку
Background-image, описанный в родительской таблице, повторяется в каждой ячейке дочерней таблицы по умолчанию!!!. Это некрасиво :)
Решение - в каждой ячейке дочерней таблицы вставлять прозрачный gif размерами ячейки:

По поводу общения в этом топике - subway::design начал очень полезную практику.
Статьи с донесением своего опыта превратят этот топик в кладезь бесценной информации.
Давайте решим, в рамках этого топика мы будем задавать и отвечать друг другу на вопросы по вышеуказанной теме(проблемы совместимости различных броузеров)?

Если да, тогда вот вопрос:
Page имеет сложную табличную структуру с применением внешнего файла стилей.
Когда в код в произвольное место вставляется слой с абсолютным позиционированием в НН4.7 стили перестают читаться. Пробовал писать этот слой и тегом <layer> и <span> и <div>.В решении необходимо использовать слой, к сожалению. ИЕ и НН6.0 - все ok. Кто-то сталкивался?