Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 144


Информационный Канал Subscribe.Ru
htmlbook.ru Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день.

Продолжается совместная акция сайта htmlbook.ru и хостинга PlusWeb. Только до 1 февраля вы можете заказать один из лучших хостингов с 20% скидкой. Торопитесь, времени остается мало.
Для получения хостинга достаточно заполнить небольшую форму по адресу www.htmlbook.ru/hosting.php

Я закончил написание новой книги под рабочим названием «HTML и CSS в примерах». Книга посвящена преимущественно оформлению веб-страниц с помощью стилей и содержит множество рецептов при работе с текстом, формами, таблицами, рисунками, ссылками. Рассказывается, как сделать разного типа меню, выравнивать элементы, в том числе слои, изменять вид ссылок, полей форм и т.д. Много говорится об особенностях браузеров (в том числе и про Firefox набравший популярность в последнее время) и как сделать универсальный код с их учетом. Никакой воды, сплошной экшен. Куча примеров, иллюстраций, комментариев, все для того, чтобы легко повторить, модифицировать и применять по своему усмотрению.
Выход книги запланирован на май, но возможно, что она появится на прилавках и раньше этого срока.

Пока рекомендую приобрести книгу «Ускорение работы сайта» в интернет-магазинах. Книги писались с тем учетом, чтобы удачно дополнять друг друга, поэтому их содержание не повторяется.

  • Купить книгу в Books.Ru

  • Купить книгу в Озоне

  • Купить книгу в Болеро

    •  

    Для тех, кто уже приобрел книгу, предлагаю небольшой бонус — Справочник по CSS в формате CHM. В удобной форме представлены все основные свойства с описаниями, рисунками и примерами, есть поиск по атрибутам, вдобавок не требуется подключения к Интернету. Размер при этом всего 150 Кб.

    Напишите мне правильный ответ на первый вопрос в конце главы 10 (стр. 189) и я вам вышлю справочник.

    На сайте добавились новые описания атрибутов CSS, а, кроме того, поменялась структура файлов. Теперь, чтобы посмотреть нужный параметр можно писать следующий путь

    http://www.htmlbook.ru/css/display.html

    Например, вот последние описания

    http://www.htmlbook.ru/css/height.html
    http://www.htmlbook.ru/css/width.html
    http://www.htmlbook.ru/css/z-index.html
    http://www.htmlbook.ru/css/visibility.html

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

    Сегодня публикуется новая статья с сокращениями, посвященная браузерам и стилям. Адрес полной статьи на сайте — www.htmlbook.ru/content/233.html

    Каждому браузеру свой стиль

    Несмотря на то, что современные браузеры постепенно приближаются друг к другу по своим возможностям и поддержке спецификации CSS, между ними все еще имеются различия в подходах. Каждый браузер интерпретирует по своему усмотрению код HTML и стилей в особенности. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался. Большинство пользователей просто равнодушно относятся ко всяким стандартам и спецификациям, хотя бы потому, что и не подозревают об их существовании. Многие даже не знают, что такое HTML и пользуются браузером, который установлен в системе по умолчанию. Люди приходят на сайты за информацией и заинтересованы в том, чтобы получить ее быстро и без проблем. Если любимый браузер «криво» отображает сайт, то проще не разбираться в чем дело, а закрыть сайт и перейти на другой, благо их теперь много по любой теме.

    Таким образом, мы приходим к выводу, что код надо делать универсальным, «заточенным» под разные браузеры, а это значит, что требуется изучать их особенности и много тестировать документы. И здесь мы сталкиваемся порой с противоречиями в работе браузеров, обойти которые можно только написанием кода CSS под каждый браузер. Ниже рассматриваются методы, которые учитывают специфику браузеров и позволяют сократить затраты времени и сил при создании сайтов.

    Применение JavaScript

    Проще всего определить нужный браузер с помощью JavaScript, после чего загрузить для него требуемый файл со стилями. Этот способ хорош еще тем, что позволяет узнать версию браузера, а не просто его название. Сам стилевой файл подключается через метод document.write, который в данном случае будет использоваться так:

    document.write("<link rel='stylesheet' href='style.css' type='text/css'>")

    где style.css представляет собой файл для конкретного браузера.

    В общем случае определение браузера и ссылка на файл CSS для него происходит, как показано в примере 1.

    Пример 1. Добавление стиля через JavaScript
    <html>
    <head>
    <script language="JavaScript">

    Netscape4 = document.layer;
    Netscape6 = Mozilla = (navigator.appName == "Netscape") && DOM;
    Netscape7 = navigator.userAgent.indexOf("Netscape/7") >= 0;
    Opera5 = window.opera && DOM;
    Opera6 = Opera5 && window.print;
    Opera7 = Opera5 && navigator.userAgent.indexOf("Opera 7") >= 0;
    IE = document.all && !Opera5;
    Firefox = navigator.userAgent.indexOf("Firefox") >= 0;

    if(IE) document.write("<link rel='stylesheet' href='/ie.css' type='text/css'>");
    else document.write("<link rel='stylesheet' href='/style.css' type='text/css'>");

    </script>
    </head>
    <body>

    ...

    </body>
    </html>

    Не стоит считать, что придется писать отдельные стили для всех браузеров. Например, Netscape (версии 6 и старше), Mozilla и Firefox основаны на одном ядре под названием Gecko, поэтому работают c сайтами примерно одинаково. В какой-то мере по своему подходу близки браузеры Internet Explorer 6 и Opera 7, и в большинстве случаев они отображают результат в равной мере правильно. Получается, что обычно требуется создать всего два разных стиля, предназначенных для браузеров, принадлежавших к разным «лагерям».

    Дочерние селекторы

    Спецификация CSS говорит, что для управления стилем дочерних элементов используется символ > (знак «больше»). Запись H1 > I { color: green } сообщает браузеру установить зеленый цвет для содержимого тега I только в том случае, если заголовок H1 является для него прямым родителем.

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

    DIV > I { ... } Дочерний селектор
    DIV I { ... } Контекстный селектор

    Разница между этими видами селекторов следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 2).

    Пример 2. Неправильное использование дочернего селектора
    <html>
    <head>
    <style type="text/css">
    DIV > I {
    color: red
    }
    </style>
    </head>
    <body>
    <div>
    <p><i>Lorem ipsum dolor sit amet...</i></p>
    </div>
    </body>
    </html>

    В примере показано добавление тега DIV, внутри которого размещается параграф P, а у него в свою очередь, тег I. В стиле прописано изменить цвет текста на красный у селектора I, но только в том случае, если он непосредственно находится внутри DIV. А в нашем случае тег I располагается внутри P, поэтому стиль применяться не будет. Чтобы он заработал, надо использовать один из следующих вариантов.

    P > I
    DIV > P
    DIV > P > I

    Контекстные селекторы не учитывают порядок вложенности элементов, поэтому запись DIV I в примере 2 будет действовать правильно, т.е. цвет текста станет красным.

    Вернемся теперь к браузерам. Internet Explorer не понимает дочерние селекторы, но зато корректно работает с контекстными. Создавая код CSS, который одновременно содержит и те и другие селекторы, тем самым делаем разграничение стиля для браузера IE и всех остальных. Хотя контекстные селекторы понимаются всеми браузерами, последующая строка переназначает текущие установки стиля (пример 3).

    Пример 3. Селекторы для разных браузеров
    <html>
    <head>
    <style type="text/css">
    DIV P {
    color: green /* Для браузера Internet Explorer */
    }
    DIV > P {
    color: red /* Для остальных браузеров */
    }
    </style>
    </head>
    <body>
    <div>
    <p><i>Lorem ipsum dolor sit amet...</i></p>
    </div>
    </body>
    </html>

    В примере показано создание текста зеленого цвета для браузера IE и красного — для всех остальных.

    В браузере Internet Explorer 5 замечена интересная особенность — он понимает конструкцию HTML > селектор, которую другие браузеры, в том числе его же старшие версии, игнорируют. Добавив в код стиля текст HTML > DIV { color: red } получим текст, который находится внутри тега DIV, красного цвета. Но только в IE 5.

    Универсальный селектор

    Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer. Таким образом, изменение стиля для разных браузеров показано в примере 4.

    ример 4. Использование универсального селектора
    <html>
    <head>
    <style type="text/css">
    * HTML DIV P {
    color: olive /* Для браузера Internet Explorer */
    }
    DIV P {
    color: red /* Для остальных браузеров */
    }
    </style>
    </head>
    <body>
    <div>
    <p>Lorem ipsum dolor sit amet...</p>
    </div>
    </body>
    </html>

    В примере показано создание стиля для IE и всех других браузеров.

    Условные комментарии

    Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами <!-- и -->. Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.

    <!--[if IE]>
    Код для браузера Internet Explorer
    <![endif]-->

    Внутри квадратных скобок допустимо использовать следующие ключевые слова:
    IE — любая версия браузера Internet Explorer;
    IE 5 — Internet Explorer 5;
    IE 5.5 — Internet Explorer 5.5;
    IE 6 — Internet Explorer 6;
    lt — номер версии браузера меньше указанной;
    gt — номер версии больше указанной;
    lte — номер версии меньше или равен указанной;
    gte — номер версии браузера больше или равен указанной.

    Поскольку указанные элементы можно писать только внутри контейнера BODY, то следует добавить тег STYLE, как показано в примере 5.

    Пример 5. Добавление условных комментариев
    <html>
    <head>
    <style type="text/css">
    DIV {
    color: silver /* Для всех браузеров, кроме IE */
    }
    </style>
    </head>
    <body>

    <!--[if gt IE 5.5]>
    <style type="text/css">
    DIV {
    color: red /* Для браузера Internet Explorer версии 5.5 и старше */
    }
    </style>
    <![endif]-->

    <div>
    <p>Lorem ipsum dolor sit amet...</p>
    </div>

    </body>
    </html>

    В примере вначале создается стиль для всех браузеров, а затем, с помощью условных комментарием он переназначается только для браузера Internet Explorer. Заканчиваются такие комментарии одинаково, путем добавления конструкции <![endif]-->.

    Использование тега COMMENT

    Следует отметить, что для других браузеров тоже существует вариант, когда им «подкладывают» стиль, отличный от стиля Internet Explorer. С этой целью применяется тег COMMENT, который добавляет комментарий. Хитрость в том, что этот тег понимается только браузером Internet Explorer, соответственно, все, что находится внутри этого контейнера, в этом браузере не отображается. Остальные браузеры этот тег не понимают, поэтому просто его игнорируют, но при этом содержимое этого тега нормально обрабатывается. Получается, что вначале указываем стиль для браузера Internet Explorer, а затем внутри тега COMMENT повторяем стиль уже для остальных браузеров (пример 6). Когда идет несколько одинаковых описаний стиля для одного и того же селектора, то применяется тот стиль, который располагается в коде ниже других.

    Пример 6. Применение тега COMMENT
    <html>
    <body>
    <style type="text/css">
    DIV { background: green; color: white; padding: 4px }
    </style>
    <comment>
    <style type="text/css">
    DIV { background: silver; color: green }
    </style>
    </comment>
    <div>Lorem ipsum dolor sit amet...</div>
    </body>
    </html>

    Internet Explorer покажет белые буквы на зеленом фоне, а остальные браузеры — зеленые символы на сером фоне.


    Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
    Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.

    http://subscribe.ru/
    http://subscribe.ru/feedback/    		 Подписан адрес:
    Код этой рассылки: inet.webbuild.htmlbook    		 Отписаться
    В избранное