Хоженые грабли
Мы на них уже наступали.
Не повторяйся!
Оглавление:
Коварство тэга Q
Netscape (Mozilla), при выводе содержимого тэга Q автоматически берет его в кавычки. А вот Internet Explorer так не делает.
Таким образом, вывода цитаты именно в кавычках (или именно без оных) добиться невозможно.
Допустим, ты не ставишь своих кавычек:
<q>моя цитата</q>
В Netscape будет получен текст в кавычках. Но в Internet Explorer — без них.
Теперь попробуем взять текст в кавычки:
<q>"моя цитата"</q>
или:
"<q>моя цитата</q>"
В обоих случаях в Internet Explorer мы получим текст в кавычках. Но Netscape выведет кавычки дважды!
Согласно стандарту, браузер должен ставить кавычки сам, причем разные в зависимости от вложенности и согласно свойству lang, указывающему локализацию. Но Internet Explorer не использует это указание вовсе, а Netscape не учитывает ни вложенность, ни локализацию.
Используй тэг Q, только если абсолютно все равно, выведется текст в кавычках или без, и никогда не окружай его своими собственными кавычками.
Призрачные ссылки
Одно время была у меня привычка ставить метки (тэги A со свойством name — на них потом можно ссылаться с помощью href) таким вот образом:
<a name="myName">Название раздела, для которого поставили метку</a>
Выяснилось, что если в Internet Explorer все в порядке, то в Netscape (Mozilla) для тех меток, у которых не прописано свойство href, все равно могут проявляться разные призрачные эффекты, зависящие от стилей, заданных тэгу A. Это может быть изменение цвета по щелчку мыши, или появление подчеркивания, когда мышь находится над текстом.
Если твой тэг A имеет свойство name, но не имеет свойства href — лучше оставь его пустым, например так:
<a name="myName"></a>Название раздела, для которого поставили метку
Http-equiv и прокси
Нередко используется тэг META со свойством http-equiv для явного указания кодировки документа:
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
К сожалению, мало кто знает, что такое прописывание может вызвать проблемы у тех, кто получает страницу не напрямую, а через прокси.
Дело в том, что прокси может перед передачей изменить кодировку страницы — это вполне допустимая операция — и при этом он правильно откорректирует информацию в http-заголовке. Но изменять информацию тэга META он не будет.
В результате, браузер получит страницу у которой в http-заголовке прописана правильная кодировка, а в тэге META — неправильная (ведь страница уже перекодирована).
Но многие браузеры предпочитают информацию, полученную из META, той, что находится в http-заголовке, и в результате отобразят страницу не в той кодировке.
Не прописывай кодировку страницы в тэге META. Правильно указать кодировку передаваемой страницы — дело веб-сервера.
Истинная сущность свойства alt
Некоторые используют свойство alt тэга IMG для указывания всплывающей подсказки, появляющейся при наведении мыши на картинку. В Internet Explorer при этом все работает как и ожидалось.
Но, согласно стандарту, свойство alt указывает лишь то, какой текст будет отображен в случае, если вывод картинок отключен или картинка недоступна. Стандарт ничего не говорит о необходимости показывать содержимое alt во всплывающих подсказках.
Поэтому, в браузерах, более строго относящихся к стандартам (например, в Netscape или Mozilla), никаких всплывающих подсказок не появится.
Стандарт предписывает использовать для всплывающих подсказок свойство title — такой подход работает и в Netscape, и в Internet Explorer.
Не используй для указания всплывающей подсказки для картинки свойство alt, используй предписанное стандартом свойство title. Кстати, это свойство можно использовать не только для IMG, но и для многих других тэгов.
Опасные сущности
С появлением Internet Explorer версии 6 использование сущности ' (знак апострофа) стало опасным! Дело в том, что вместо вывода апострофа на месте этой сущности шестерка напишет дословно: '
Другие версии Internet Explorer равно как и другие распространенные браузеры этим не страдают.
Тонкости измерения
Поставив в каком-либо свойстве пробел между числом и единицей измерения (например так: 2 in) можно долго искать ошибку. А она проста — этого пробела быть не должно! Единица измерения всегда должна писаться сразу после числа.
Отступы и списки
Если тебе нужно изменить отступ у списочных элементов (UL или OL) — тебя ждет сюрприз! В Internet Explorer и в Netscape окажутся разные результаты. Дело в том, что в Internet Explorer отступ списочных элементов по умолчанию задан свойством margin. А в Netscape — свойством padding. Таким образом, для гарантированного результата придется прописать явно оба этих свойства.
На сайте «НадПроф» эта проблема решена радикально — общий файл стилей main.css содержит код, явно переопределяющий отступы для списочных элементов через свойство margin (свойство padding сброшено в 0). Это дает уверенность в том, что отступ гарантированно регулируется именно свойством margin.
Почему мы свели все именно к margin? Дело в том, что хотя стандартом и не предписывается жестко, как должны быть заданы умолчательные стили различных элементов, но существует рекомендация W3C, предлагающая полагать конкретный набор стилей заданными по умолчанию. Мы поступили согласно рекомендации, приведя ситуацию к описанным в ней умолчательным стилям.
Закрывать иль нет — вот в чем вопрос!
Не все тэги нужно закрывать. Это знают многие ХТМЛщики. Но, к сожалению, не все.
Большинство браузеров отнесется к «закрытию» незакрываемого тэга равнодушно. Но не все. Поэтому я очень рекомендую следовать стандарту и избегать закрывания тэгов «на всякий случай».
Тэги, которые не нужно закрывать обычно называют «непарными». Которые нужно, соответственно, «парными».
Какие же тэги закрывать не надо? BR, LI, IMG, HR, и некоторые другие. У тебя сомнения, нужно ли закрывать тэг? — Не ленись заглянуть в документацию!
Обязательность единиц измерения
Вообще-то, задавая стили, единицы измерения явно указывать не обязательно. Но некоторые браузеры (например Netscape), в некоторых стилевых свойствах (а конкретно — border) без явного указания единицы измерения отказываются этот самый бордер выводить.
Отступы строчных элементов
Internet Explorer не понимает отступы, заданные для строчных элементов.
Удивительно, но факт.
Размеры строчных элементов
Netscape не понимает размеры, заданные для строчных элементов.
Тоже удивительно, и тоже факт.
Картинка в табличке
Internet Explorer не в состоянии правильно определить размеры картинки, находящейся внутри ячейки таблицы, если у картинки размер прописан в процентах (относительно размера ячейки), а ширина ячейки как таковой тоже задана в процентах.
Побороть глюк можно. Но путем таких извращений, что рекомендуется просто упростить страницу, не требуя от браузера слишком многого.
Очень вероятны и другие глюки на эту тему.
Кто такой
— это non-breaking space или неразрывный пробел.
Если между двумя словами поставить , то при переносе они не разорвутся. Этот символ нужно использовать в случаях, когда одна часть
не должна отрываться от следующей: 2 кг, 15 лет, 1 000 рублей,
И. И. Петров.
Соответственно, применять вместо обычных пробелов — негоже.
Есть еще тэг <nobr>, который обеспечивает неразрывность целого блока
текста. Его можно применять в тех случаях, когда, например, пишешь
номер телефона или диапазон значений: +7-812-123-45-67, 125-250 кг
Прислал:
Ksan, ksan@ksan.ru
Как делать отступы?
Есть два стилевых свойства — padding и margin специально для указания отступов.
Можно указать отступ и с какой-нибудь одной стороны — для этого
используются padding-left, padding-right, padding-top, padding-bottom и соответственно margin-left, margin-right, margin-top, margin-bottom.
padding указывает отступ внутри тэга
margin — вне тэга
Вот пример, демонстрирующий разницу:
<div style = "background-color: red; padding-left: 30px">text</div>
<div style = "background-color: red; margin-left: 30px">text</div>
А вот так он выглядит на странице:
text
text
Для решения той же задачи можно использовать таблицы:
<table cellpadding = 0 cellspacing = 0 border = 0>
<tr>
<td width = 30px>
</td>
<td>
text
</td>
</table>
Это выглядит так:
Иногда удобно использовать UL, отключив значки перед пунктами меню:
<ul style = "list-style-type: none">
<li>text
<li>text
</ul>
Это выглядит так:
(дело в том, что UL по умолчанию имеет отступ)
Надо помнить, что:
- Internet Explorer не понимает padding и margin для строчных тэгов.
- Netscape не понимает свойства width у строчных тэгов, так что идея
вставить пустой строчный тэг нужной ширины:
<span style = "width: 30px"></span>text
— это очень плохая идея.
Вариант
<span style = "width: 30px; padding-left: 30px"></span>text
будет одинаково работать в обоих браузерах, поскольку IE не поймет
padding, а Netscape — width, но понятно, что это очень кривой вариант — вдруг браузеры станут понятливее?
Тире, минус, дефис и типографика
- Есть знак «-» — это дефис. Используется как дефис.
- Есть знак – он же –, он же – — это минус. Используется как минус, а так же в датах, например 1990–1999.
- Есть знак — он же —, он же — — это тире. Используется как тире со знаком до и пробелом после.
Прислал:
Сергей Крук fittipaldi.narod.ru
