![[Nevor.ru]](../images/logo.jpg){kind=logo}
| |||||||||||||||||||
| |||||||||||||||||||
Совместимость (кроссбраузерность) Эту статью я написал, дабы затронуть проблему кроссбраузерности и связанные с ней особенности верстки сайтов. Уверен, вам известно значение слова "стандарт" и то, для чего они (стандарты) вообще существуют. Проблема кроссбраузерности возникла в то самое время, когда кое-кто об этом забыл. Не воспринимайте это "кое-кто" как намек или камень в чей-то конкретный огород. Злоупотребляют стандартами практически все интернет-обозреватели. В сети полно форумов, забитых бесполезным трепом о том, чье болото лучше, поэтому я не буду поднимать данный вопрос в этой статье, скажу лишь, что отдаю предпочтение интернет-обозревателю Firefox, которому, кстати, тоже достанется. Верстаю я с оглядкой на три браузера (Internet Explorer, Opera и Mozilla Firefox), о них речь и пойдет. Пора перейти на частности и личности и в заключение не забыть упомянуть, к чему я это все затеял. Грех первый: стандарты HTML. Возьмем тэг <HR> как пример. Internet Explorer, как бы его ни ругали, не создает проблем при построении линии, создают остальные. Приходится изобретать велосипед с квадратными колесами и делать линию из таблицы, чтобы всем (кроме меня) было хорошо. С другой стороны во многих других случаях детище Microsoft косячит не по-детски и вообще поддерживает тэги, которых не существует. Такие вот пироги с мелкомягкими котятами. Примеры линий Построение с помощью тега <HR> <HR> с применением CSS Построение с помощью таблиц Грех второй: стандарты CSS. Итак, рассмотрим стиль text-shadow. Рассмотреть его можно только в Opera, к сожалению. Оставшиеся два товарища молча прикинутся шлангом. Однако если взять стиль cursor, шлангом прикидываться будет как раз-таки Opera и о том, что дизайнер еще и о курсоре думал вы так и не узнаете. В примере курсор темно-васильковый с голубым ореолом
Примеры работы стилей "text-shadow" и "cursor" "text-shadow" "cursor" "cursor" + "text-shadow" Примечание 03.07.09: только что обновил обозреватель Firefox до недавно вышедшей версии 3.5 и вот что хочется отметить - заработал стиль "text-shadow". Улучшилась ситуация с альфа-каналом в курсорах (об этой проблеме написано ниже). Цвет передается не лучшим образом, зато с прозрачностью все в порядке, никакого черного цвета! И это только первое впечатление. Думается, доработок значительно больше. Дело движется. Ура, товарищи! Грех третий: стандарт PNG. Формат PNG ( Portable Network Graphics ) интересен для web-дизайнеров прежде всего возможностями, которые дает технология альфа-канала, а именно прозрачность и полупрозрачность (в отличие от PNG, формат GIF полупрозрачность не поддерживает и не удобен еще и тем, что рассчитан на палитру в 256 цветов). Интересен-то он интересен конечно, только вот поддержку этого формата Microsoft реализовала только в седьмой версии своего интернет-обозревателя. А по умолчанию в ОС Windows XP стоит версия 6, которая его не поддерживает. И эта версия стоит у многих. Еще один неприятный момент - это ситуация с полупрозрачностью в Firefox3. Если использовать альфа-канал при создании курсоров, то в третьей версии прозрачный цвет будет трактоваться как черный и градиент будет с переходом именно в черный, а не в бесцветный. На предыдущем примере хорошо это видно. А ведь во второй версии интернет-обозревателя такого не было. Такие вот чудеса. Будем надеяться, что это исправят в будущих релизах (я внес свой скромный вклад, отправив письмо разработчикам). Альфа-канал на примере линии (формат PNG)
Я думаю, картина ясна. И вот что я хочу сказать в заключение: как бы не выглядел сайт в разных интернет-обозревателях, я стараюсь придерживаться стандартов. Потому что верстать под продукты тех, кто на эти стандарты плюет, значит тоже на них плевать. А они ведь не для этого пишутся и принимаются. Приходится порой идти на компромисс, не без этого. Я, например, иногда указываю атрибут высоты у таблиц и он работает, хотя по стандарту такого атрибута у таблицы нет. Важно отметить, что не существующие атрибуты программы поддерживают "на ура", а стандартные порой понимать и вовсе отказываются, поэтому реализовать задуманное без криминала либо сложно, либо невозможно вообще. Но я старался сверстать этот сайт не под какую-то версию браузера, а именно под стандарт, который разрабатывался и принимался консорциумом W3C, плодами труда сотрудников которого мы с вами сейчас пользуемся. Так что если что-то вдруг "поползло" или еще чего приключилось - не судите строго. А если можете помочь исправить недочеты способом, не противоречащим стандарту, буду только рад. Если интересно, можете ознакомиться со списком практических приемов, которые я использую для преодоления возникающих проблем. На этом все, благодарю за внимание! P.S.: При верстке советую указывать DOCTYPE документа как "Strict". Это заметно приблизит вас к стандарту, потому что несуществующие атрибуты, вроде высоты таблиц и не рекомендованные к использованию в таком документе работать не будут. Проверить совместимость сайта с разными версиями Internet Explorer, начиная с версии 5.5 можно с помощью программы IETester. Внизу страницы после описания программы перечислены ее известные ошибки и недостатки. Например, в ней вы не сможете отследить работу Java на локальном сервере. Недавно у меня возникла такая необходимость, когда делал меню для сайта на CSS с использованием свойства hover, которое IE6 не поддерживает. Проблему решал как раз при помощи Java. |
|||||||||||||||||||
. Применение свойства стиля "text-shadow" дает такой эффект 
