Глаза страшат, а руки делают

Маленькие хитрости
Советы-крошки



Предисловие

Как и все простые постсоветские люди, я пользовался браузером Internet Explorer (в просторечии — «ослом»). Когда я начал заниматься сайтостроительством, пришлось обзавестись разными другими браузерами, ни один из которых, признаюсь, мне поначалу не понравился. Теперь уже окончательно пересел на «Мозиллу», «осла» держу только для FTP (прим. авт., 2008).

Но мои заметки посвящены не обсуждению достоинств и недостатков разных навигаторов, а некоторым чисто практическим мелочам, с помощью которых страницы, сделанные под IE, смогут адекватно выглядеть и в Опере, и в других браузерах.

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

Должен предупредить, что мои соображения не являются «истиной в последней инстанции», поскольку помимо различных браузеров существуют разные компьютеры, мониторы, оперативные системы, индивидуальные пользовательские настройки, и создать абсолютно универсальную страницу практически невозможно. Но, решив проблему на своём компьютере, своём браузере, мы решим её и на миллионах других, подобных нашим.

Сначала один общий принцип. Так как большинство этих хитростей делается на javascript, то необходимо знать, каким образом этот язык распознаёт навигаторы. Для этого в javascript есть объект navigator, имеющий следующие свойства:

  • appCodeName — кодовое имя браузера;
  • appName — имя браузера; 
  • appVersion — версия браузера;
  • userAgent — кодовое имя и версия браузера;
  • plugins — массив подключаемых модулей (работает только в Netscape);
  • mimeTypes — поддерживаемый массив типов MIME.

Весь список я привёл, так сказать, для общего развития, обратив ваше внимание на нужное свойство.

navigator.appName == "Microsoft Internet Explorer"  // Это наш ослик.
navigator.appName == "Opera"  // А это - "Opera".

Обратите внимание: в браузере «Opera» есть настройка, которая может идентифицировать его с другими браузерами. Это не означает, что он будет работать как IE или Mozilla, но свойство appName он будет принимать то, которое указано в настройке.

Поэтому, если хотите, чтобы скрипты правильно работали по крайней мере в Вашем личном браузере «Opera», то сделайте следующее:

  • в меню Tools выберите Prefefences;
  • выберите вкладку Advanced;
  • в левой колонке появившегося окна найдите и нажмите Network;
  • настройте Browser identification.

А теперь можно перейти непосредственно к нашим хитростям.

Хитрость первая. Заголовки

Она относится к одной особенности IE.

На эту проблему я наткнулся, когда просматривал в Опере свои статьи на этих вот самых страницах (имеется в виду предыдущая версия сайта — А.Ф., 2008). Заголовки оказались явно меньше, чем в IE. То же самое и в Netscape, и в Firefox. Оказалось, всё дело в том, что для <body> я задал стиль:

<style type="text/css">
    body {
        font-family: 'Arial';
        font-size: 82%;
        background-color: #F8F8F8;
    }
</style>

И оказалось также, что в IE и только в IE мои 82% не распространяются на заголовки.

Проблемой можно было бы и пренебречь, но подзаголовки, данные в <h5>, во всех остальных браузерах выглядят ну уж о-о-чень мелкими. А <h4> смотрится в них, как «ослиный» <h5>. Поэтому, в частности, для подзаголовка данной подглавки, возникло такое забавное решение:

<script type="text/javascript">
if (navigator.appName == "Microsoft Internet Explorer")
{document.write("<h5 class='indent'>")}
    else {document.write(<h4 class='indent'>")}
</script>
Хитрость первая. Заголовки
<script type="text/javascript">
if (navigator.appName == "Microsoft Internet Explorer")
{document.write("</h5>")}
    else {document.write(</h4>")}
</script>

То есть все тэги форматирования я помещаю в document.write() скрипта, который сначала определяет, IE это или не IE, а потом выводит нужные тэги.

Хитрость вторая. Цвет полосы <hr>

Эта проблема решается без помощи javascript.

Цветные полоски <hr>, сделанные под IE, в других браузерах теряют свой индивидуальный цвет и выглядят стандартно. Столкнувшись с этим казусом, я обратился на форум ТвойWeb, где мне всё объяснили. Теперь могу объяснить и я.

В IE объект <hr> интерпретируется как строка, а следовательно, в HTML и в CSS имеет атрибут color. В других навигаторах — это блок, аналогичный <div>, и его атрибутами окажутся bgcolor в HTML и background-color в CSS.

Просто задаём и то, и другое. И ещё: чтобы эти атрибуты правильно работали, нужно задать noshade:

<hr noshade color="#мой_цвет" bgcolor="#мой_цвет">

или

<hr noshade style="color: #мой_цвет; background-color: #мой_цвет;">

Вот и всё.

PS. Если Вы везде используете одинаково настроенные <hr>, то проще задать в CSS:

    hr {
        color: #мой_цвет;
        background-color: #мой_цвет;
    }

А в тэге —

<hr noshade>

Если Вы хотите, чтобы код был совместим с xhtml, тогда —

<hr noshade="noshade"/>

Но это уже другая песня...

Хитрость третья. Перенаправление ссылок

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

Делаем несколько версий страницы под разные браузеры. Предположим, mypage.html, mypage_op.html и mypage_ns.html. Допустим, по умолчанию делаем mypage.html для IE. В её <head> помещаем такой код:

<script type="text/javascript">
 var IE = (navigator.appName == "Microsoft Internet Explorer");
 var OP = (navigator.appName == "Opera");
 var NS = (navigator.appName == "Netscape");
 if (OP) {self.parent.location="mypage_op.html";}
 else {
    if (NS) {self.parent.location="mypage_ns.html";}
 }
</script>

Теперь каждый из этих трёх браузеров по ссылке на mypage.html откроет «свою» страницу.

Но бывают ещё различные версии браузеров, а также «Опера» не всегда воспринимает себя как «Оперу» (см. самое начало — о настройках).

Значит, этот список переменных можно расширить и сделать более гибким (см. в начале список свойств браузера «для общего развития»). Но основа — вот она.

Кстати, подобным образом можно бороться и с открытием «голых» страниц, предназначенных для фреймов. Ставим в такую страницу следующий «предохранитель»:

<script type="text/javascript">
if (self.parent.frames.length == 0)     //то есть на странице фреймов нет
{self.parent.location="myframe.html";}  //указываем страницу с фреймом
</script>

Похожим способом можно отправить посетителя на переехавший сайт. Да мало ли что ещё?

Но это уже пошёл «оффтопик»…

Хитрость четвёртая. Мнимый «iframe» и его реализация через CSS в разных браузерах

Многие вообще не любят фреймы и ифреймы. Это отдельная тема. Впрочем, как «кольцом самотворчества крепко обезопасить себя вовне» (классическая фраза шизофреника из старинного учебника психиатрии), я уже писал. Лично же я невзлюбил их потому, что на бесплатном хостинге, где был расположен один из моих сайтов, в ифреймы лепят здоровенные баннеры про «девочек без комплексов» или «ржачные приколы». Собственно, ничего против них как таковых не имею, но, господа, всему же должно быть своё место!

Итак, выход есть. Вместо ифрейма делаем <div> фиксированной высоты с нужными параметрами стиля CSS overflow.

Вот тут и может встретиться одна засада.

Чаще всего нам нужна вертикальная прокрутка — и только вертикальная. И логичнее всего в этом случае выглядит {overflow-y: scroll;}.

Но дело в том, что никто, кроме IE, не понимает overflow-x и overflow-y. Зато просто overflow понимают все. Если мы сделаем {overflow: scroll;}, то вылезут обе прокрутки. Остаётся {overflow: auto;}. То есть при фиксированной ширине дива «лишний» текст будет спускаться вниз, а когда он перекроет фиксированную высоту дива, появится желанная вертикальная прокрутка.

И последнее: маленькая народная мудрость. Старайтесь не набирать курсивом большие абзацы со стилем justify: курсив почему-то иногда непредсказуемо растягивает ширину дива. Слегка. Но смотрится криво и неряшливо. Да вот, кстати, длинное название этого самого совета в оглавлении наверху. Там был стиль justify, но пришлось заменить его на left.

Хитрость пятая. Имена переменных

Маленький совет по JavaScript — особливо народникам и прочим бесплатникам, у которых ночуют непрошеные баннеры.

Давайте своим переменным длинные, уникальные, заковыристые и даже выпендрёжные имена, чтобы ненароком не оказались в тёзках с левыми постояльцами. Имею собственный горький опыт, потому и советую.

Хитрость шестая. «Распорки» в таблицах (с помощью CSS)

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

Как же не позволить ячейке сжиматься?

Вставим вверху этой ячейки пустой div со следующим стилем:

<div style="position: relative; width: Npx; margin-top: -20px;"></div>

Вместо N нужно подставить значение ширины данной ячейки.

Смещение вверх — margin-top: -20px; — вставляется, чтобы не тревожить текст или картинку в ячейке (иначе они уедут вниз). Значение -20px подобрано мной методом «тыка».

Хитрость седьмаая. Грамотный «border-collapse» в таблицах (CSS)

Когда мы хотим сделать таблицу с одинаковыми рамками, таблице нужно задать border-collapse: collapse, а ячейкам — параметры рамки.

<style type="text/css">
table {border-collapse: collapse;}
td {border: 2px solid Blue;}
</style>

Результат:

   
   

При этом общую рамку для таблицы можно задать независимо от рамок ячеек.

<style type="text/css">
table {border: 6px ridge Yellow; border-collapse: collapse;}
td {border: 2px solid Blue;}
</style>

Результат:

   
   

То есть, стиль border-collapse задаётся таблице, но воздействует на ячейки.

(подробнее см. в статье на эту тему)



 004968