Ключевые слова:html, web, (найти похожие документы)
Date: Wed, 19 Jul 2000 08:43:15 +0400 (MSD)
From: MailList: Темные стороны HTML
Subject: [HTML] Наследование в CSS, проверка наличия фреймов.
Добрый день уважаемые читатели!
18.07.2000
Выпуск 7
В этом выпуске читайте:
*База данных различий
*Наследование каскадных стилей
*Проверка наличия фреймов в документе
*Заключение
----------------------------------------------------------------------------------
**База данных различий**
----------------------------------------------------------------------------------
В одном из выпусков мы упоминали о том, что собираемся сделать базу данных
дефолтовых значений атрибутов всех тегов в Эксплорере и Нетскейпе.
По этому поводу пришло много противоречивых писем. Одни говорят, что
классная идея и что это будет очень востребовано, другие же - что это напрасная
работа и потребность в такой базе данных будет быстро исчерпана. Третьи
предлагали просто обобщить и классифицировать глюки и сделать базу данных
глюков.
В общем-то тут уместно было бы дать определение глюку в данном контексте.
Глюк - неисправимая ошибка программиста при реализации HTML в браузере.<br>
Из данного определения понятно, что глюков не так уж много, чтобы делать
из этого базу данных.
В общем все это велось к тому, что мы хотим спросить уважаемых читателей
(большинство из которых веб-дизайнеры, для которых мы это и делаем) что по их
мнению необходимо и будет востребовано? Какой бы Вы хотели видеть эту базу
данных, что в ней должно быть обязательно?
Надеемся на ваше активное участие.
----------------------------------------------------------------------------------
**Наследование каскадных стилей**
----------------------------------------------------------------------------------
Сегодня мы рассмотрим проблему наследования каскадных стилей. Эта проблема
действительно имеет место, и это действительно проблема, часто даже нерешабельная.
Как всегда для большей наглядности рассмотрим пример.
Для начала совсем примитивный пример:
<html>
<head><title>Test! </title>
<style>
.test { color : #ff0000; background-color: #c0c0c0;}
</style>
</head>
<body>
<p class=test>Test!</p>
<p class=test><hr>Test!</p>
</body>
</html>
Посмотреть пример - http://www.inetcash.newmail.ru/darkside/test/test.html
Из данного вроде видно, что Нетскейп стили НЕ НАСЛЕДУЕТ НИКОГДА.
А вот в Эксплорер появляются некоторые "тонкости". Как видите
стиль от p унаследовал hr, но на Test после hr стили уже не распространились.
Займемся дальнейшим исследованием. Теперь рассмотрим более заумный примерчик.
<html>
<head><title>Test! </title>
<style>
.test { color : #ff0000; background-color: #c0c0c0;}
</style>
</head>
<body>
<p class=test>Test!</p>
<p class=test><pre>Test!</pre></p>
<p class=test><hr>Test!</p>
<p class=test><pre>Test!</pre></p>
<p class=test><hr>Test!</p>
<p class=test><b>Test!</b></p>
<p class=test><hr>Test!</p>
</body>
</html>
Посмотреть пример - http://www.inetcash.newmail.ru/darkside/test/test1.html
Нетскейп, как видите, ведет себя логично и последовательно - как не наследовал,
так и не наследует стили, а вот Эксплорер...
Рассмотрим построчно. Ну первая строка понятно. Вторая строка - мы применили
один из тегов форматирования текста (pre) и он не унаследовал color, но унаследовал
background-color.
Строка 3 - здесь hr уже не наследует ничего (???).
Строка 4 - теперь pre уже ничего не наследует :)
Строка 5 - hr продолжает ничего не наследовать.
Строка 6 - неожиданно b унаследовал стили. В принципе это понятно, учитывая,
что тег b является тегом "простого" форматирования, хотя чем он хуже
или лучше pre я не понимаю.
Строка 7 - вот тебе на. hr снова унаследовал стили.
Это не программирование получается, а цирк со случайным числом.
Теперь проведем общее исследование. Рассмотрит такой, совсем уже
не детский примерчик.
<html>
<head><title>Test! </title>
<style>
.test { color : #ff0000; background-color: #c0c0c0;}
</style>
</head>
<body>
<p class=test>Test</p>
<p class=test><b>b Test</b></p>
<p class=test><i>i Test</i></p>
<p class=test><pre>pre Test</pre></p>
<p class=test><code>code Test</code></p>
<p class=test><cite>cite Test</cite></p>
<p class=test><p>p Test</p></p>
<p class=test><div>div Test</div></p>
<p class=test><pre>pre Test</pre></p>
<p class=test><hr>Test</p>
<p><a href="#">Hyperlink</a></p>
<p class=test><table border="2"><tr><td>Text in table</td></tr></table>Test!</p>
<p class=test><input type="text" size=30 value="text">
</body>
</html>
Посмотреть пример - http://www.inetcash.newmail.ru/darkside/test/test2.html
Что же мы видим? Нетскейп по-прежнему наследует стили при применении тегов
"простого" форматирования текста (b, i, code, cite). Экспорер же творит чудеса:
Строки 1,2,3,5,6 (b, i, code, cite) - полностью наследуются стили.
Строки 4,9 - pre наследует каскадные стили в зависимости от настроения Эксплорера.
Строка 12 - table наследует стили, но к тексту внутри ячеек стили конечно же не применяются.<br>
Строка 11 - a вроде не наследует стили, однако посмотрите приведенный ниже пример:
<html>
<head><title>Test! </title>
<style>
.test { color : #ff0000; background-color: #c0c0c0;}
</style>
</head>
<body>
<p class=test>Test!</p>
<p class=test><pre>Test!</pre></p>
<p class=test><hr>Test!</p>
<p class=test><a href="#">Hyperlink</a>Test!</p>
<p class=test><hr>Test!</p>
</body>
</html>
Посмотреть пример - http://www.inetcash.newmail.ru/darkside/test/test3.html
Здесь a уже наследует background-color. Чудеса да и только.
----------------------------------------------------------------------------------
**Проверка наличия фреймов в документе**
----------------------------------------------------------------------------------
На написание этого скрипта нас надоумил один из подписчиков. Давайте представим
себе следующую ситуацию: есть сайт, сделанный фреймами. Причем левый фрейм
всегда постоянный (меню), а во втором документы меняются. Очевидно предположить,
что веб-мастер для лучшей индексации сайта помещает теги meta в каждый из документов
(причем с различными ключевыми словами, чтобы вероятность хорошей индексации увеличилась).
Возникает проблема. Человек найдя один из документов и открыв его не сможет просомтреть
остальные документы, так как отсутствует меню. Конечно он может зайти на исходный
URL, но мы должны заботиться о посетителе. Выходом из данного положению может
служить данный скрипт.
Он проверяет наличие фреймов в родительском документе. Если в родительском документе
фреймы есть (нормальная ситуация, когда человек зашел на главную страницу сайта),
в противном же случае в левом фрейме открывается фрейм с меню, а в правом запрашиваемый документ.
Использование скрипта разрешено при сохранении данных о его создателях.
Приводим отрывок из скрипта:
<script language="JavaScript">
function check()
{
if (parent.length=="2")
{
document.write("return;")
}
else
{
document.write("<frameset cols='200,*'><frame src=menu.html><frame src=current.html></frameset>");
}
}
</script>
Посмотреть пример - http://www.inetcash.newmail.ru/darkside/scripts/framecheck/index.html
Этот скрипт помещен в документе current.html. Если в текущем окне
не 2 фрейма, то он открывет 2 фрейма - слева меню, а справа запрашиваемый документ.
Однако при написании данного скрипта у нас возникли проблема. Проблема в том,
что в правом окне не хотел открываться текущий документ, потому как в данную
секунду он исполнялся и не мог быть открыт.
Мы постараемся к следующему выпуску попытаться обойти
данную проблему.
----------------------------------------------------------------------------------
**Заключение**
----------------------------------------------------------------------------------
Конечно же в отличие от Нетскейпа у Эксплорера гораздо более
широкие возможности, однако на примере наследования каскадных стилей
становится понятно, что поведение Эксплорера во многих ситуациях предсказать просто
невозможно.
И это конечно же является очень существенным недостатком.
Кроме этих двух монстров, мы рассмотрели еще некоторые (Opera, Mozilla, Netscape 6),
но ни один из них не работает так, как нам бы хотелось! Многие из различий в браузерах
появились еще и из-за самой спецификации HTML, она не охватывает все, что должна охватывать.
Подумав над всем этим у нас возникла идея написать свой браузер,
может быть не завтра и даже не через год, но мы считаем если этот браузер будет в полном
соответствии со стандартом поддерживать хотя бы HTML, Javascript и CSS, то найдется
много людей, готовых его использовать и улучшать.
Может быть в будущем он сможет стать неплохим конкурентом современным браузерам.
В заключение хотим сказать, что без вашей помощи наша рассылка не сможет
полноценно существовать. Мы стремимся сделать действительно профессиональную
рассылку, которая помогала бы людям. Поэтому будем очень благодарны
всем, кто пришлет свои глюки и различия при реализации HTML в различных браузерах.
Еще лучше, если вы будете писать о своих проблемах и затруднениях при создании
сайта. Мы обязательно постараемся вам помочь, кроме того мы расскажем о вашей проблеме
другим людям.
--
Архив рассылки и коллекции глюков будут скоро доступны на сайте http://darkhtml.webservis.ru
в разделе "Web-design".
--
С уважением
автор рассылки и веб-мастер сайта Ведущий раздела "Web-design",
Авдошин Андрей консультант по вопросам веб-дизайна
Дмитрий Видмич
[email protected][email protected][email protected]
Как раз столкнулся с этой проблемой наследования стилей. Необходимо было указать стиль для шапки таблицы и для ее содержания, т.к. прописывать стиль в каждом td неудобно и нелогично. Однако, несмотря на то, что в теории CSS написано обратное, ни <td> ни <tr> не наследует стиль внешнего тэга. В связи с чем пришлось добавить селекторы типа:
h1 tr td {
font: bold 8pt;
}
h2 tr td {
font: normal: 7pt;
}
Интересно как еще можно решить эту проблему, в случае если стиль не наследуется?
