Кроссбраузерность свойства scrollbar.

Хочу отметить, что свойства CSS из семейства scrollbar являются расширением спецификации CSS2, введенным компаний Microsoft, и реализованным в браузерах Internet Explorer начиная с версии IE 5.5, соответственно другие браузеры, на тот момент, полностью игнорировали данное свойство. Но прошло время и многие браузеры стали подстраиваться под это дополнение к спецификации от Microsoft.

Однако, до сих пор всё не так уж гладко! Так что во многих браузерах стиль полосы прокрутки или игнорируется или работает не совсем корректно.. например многие игнорируют данное свойство для тега < body> или не понимают некоторые отдельные свойства скроллбара.

Ниже приведу несколько советов, которые возможно помогут решить данную проблему в тех или иных браузерах. Употребляю слово " возможно" потому что очень трудно отследить в динамике за всеми изменениями разных браузеров. Мир не стоит на месте каждый день, там или здесь, что-то меняется! Жаль вот только что кроссбраузерность всегда остаётся головной болью!

Но что то я заговорился.. Итак, ряд " таблеток":

1. По возможности используйте вот такой заголовок <! DOCTYPE> :

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" >

2. Указывайте свойства скроллбара не только для тега < body> но и для тега < html>

Вот так:

html, body{
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
}

3. Попробуйте, если это более менее рационально для Вашего сайта, внедрять стили полосы прокрутки используя атрибут style, а не одноименный тег в " голове" документа или внешний css файл

Вот так:

< div style=" scrollbar-3dlight-color: #ffebcd; scrollbar-arrow-color: #ffffff; " > блок< /div>

Возможно, данные рекомендации сработают в некоторых браузерах, в любом случае в IE (начиная с версии 5.5) всё будет работать корректно, а раз хоть где-то работает это уже хорошо!

Полезные советы:

· Так как scrollbar является одним из важных элементов интерфейса, постарайтесь не вести пользователя в заблуждение, используя совсем уж нестандартный дизайн полосы прокрутки.

· Если Вам прямо таки совсем необходим нестандартный скроллбар, не только нестандартный цвет, он и нестандартная форма, да и еще и работающий во всех браузерах используйте скрипты, но не забывайте про первый совет!!

· В браузере внешний вид полосы прокрутки черпается из настроек Windows и например у меня, она имеет вот такой вид:

Но как только Вы примените к полосе прокрутки любое свойство из семейства scrollbar, связь с настройками Windows потеряется, точнее станет " по умолчанию" и полоса приобретёт вот такой вид:

Глава 15

Псевдоклассы.

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

Вот список всех псевдоклассов:

· hover - Стиль элемента на который наведён курсор мыши.

· active - Стиль для ссылки которая становится активной, но переход по ней еще не совершен.

· visited - Стиль для недавно посещённой ссылки.

· link - Стиль для нечасто посещаемой ссылки.

· focus - Стиль элемента находящегося в фокусе.

· first-child - Стиль первого дочернего элемента.

· lang - Определяет язык, который используется в фрагменте документа.

О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:

a: hover { color: #ff0000}

где:

a - элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
: hover - после двоеточия собственно нужный нам псевдокласс.
{color: #ff0000} - ну и блок объявления стилей в фигурных скобках.

А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку - то она покраснеет.

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Псевдокласс hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Псевдоклассы< /title>
< style type=" text/css" >
.menu {
display: block;
width: 180px;
background-color: #fff8dc;
color: #008;
font-size: 16px;
text-decoration: none;
padding: 3px;
}
.menu: hover {
display: block;
width: 180px;
background-color: #b8860b;
color: #fff;
padding: 3px;
font-size: 16px;
text-decoration: none;
}
tr: hover {
background-color: #b8860b;
}
< /style>
< /head>
< body>
< p> Чем Вам не блок навигации по сайту? < /p>
< a href=" #" class=" menu" > Главная< /a>
< a href=" #" class=" menu" > Карта сайта< /a>
< a href=" #" class=" menu" > Купить слона< /a>
< a href=" #" class=" menu" > Продать слона< /a>
< a href=" #" class=" menu" > Взять слона на прокат< /a>
< hr>
< p> А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.< /p>
< table border=" 1" bordercolor=" #ccc" width=" 600" cellpadding=" 1" cellspacing=" 0" >
< tr>
< td> Иванов< /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td>
< /tr>
< tr>
< td> Петров< /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td>
< /tr>
< tr>
< td> Сидоров< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td>
< /tr>
< /table>
< /body>
< /html>

Несколько слов к примеру выше..

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:

.menu: hover { color: #ff0000; }

Не запутались в терминологии?

Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс.menu ), а остальное оставь как есть!

Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу < tr> . Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок - тег < a> , так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!

Псевдоклассы и ссылки.

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

· active - Стиль активной ссылки.

· visited - Стиль для недавно посещённой ссылки.

· link - Стиль для нечасто посещаемой ссылки.

Сначала покажу пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Псевдоклассы и ссылки< /title>
< style type=" text/css" >
a: link {color: #0000ff}
a: active {color: #ff0000}
a: visited {color: #008000}
< /style>
< /head>
< body>
< a href=" #1" > Ссылка на первый якорь< /a>
< a href=" #2" > Ссылка на второй якорь< /a>
< a href=" #3" > Ссылка на третий якорь< /a>
< hr>
< a name=" 1" > < h4> Первый якорь< /h4> < /a>
< p> Псевдокласс link, в этом примере, указывает, что все не посещенные ссылки должны отображаться синим цветом.< /p>
< a name=" 2" > < h4> Второй якорь< /h4> < /a>
< p> Попробуйте нажить и удерживать на одну из не посещенных ссылок, чтобы увидеть для работу псевдокласса active.< /p>
< a name=" 3" > < h4> Третий якорь< /h4> < /a>
< p> visited - псевдокласс который, в этом примере, говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.< /p>
< /body>
< /html>

Теперь расскажу более подробно.

Псевдокласс active присваивает ссылке определённый стиль в тот момент, когда эта ссылка активна, то есть в тот момент, когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active - это стиль ссылки в момент клика по ней.

Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited указывает стиль ссылки, которая недавно посещалась пользователем.

Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {...} и a: link {...} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.

Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу - работать будет везде, кроме браузера Internet Explorer 6 и ниже.

Псевдокласс focus.

Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя - пользователя. Такими элементами могут быть теги < a> < input> < select> и < textarea> .

Посмотрите на пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Псевдокласс focus< /title>
< style type=" text/css" >
input: focus {color: red}
< /style>
< /head>
< body>
< form>
< input type=" text" value=" Введите текст в эту форму" size=" 30" >
< /form>
< p> Вели? а теперь щелкните по пустому месту на экране чтобы форма потеряла фокус.< /p>
< /body>
< /html>

В примере текст в текстовом поле < input> изначально чёрный, но как только элемент получает фокус - то есть тогда когда пользователь кликнет по данному полю и начнет набирать текст, он окрасится красным.

Вот и весь фокус-покус..

Псевдокласс first-child.

Думаю, в ходе обучения CSS Вы уже поняли, что все элементы можно определить как родительские или дочерние и что элемент родитель может содержать в себе несколько дочерних элементов, ну например:

< div> - блок родитель
< p> < /p> - первый дочерний элемент
< p> < /p> - второй дочерний элемент
< /div>

Так вот псевдокласс first-child определят стиль первого дочернего элемента находящегося в родительском контейнере.

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " http: //www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Псевдокласс first-child< /title>
< style type=" text/css" >
div {
margin: 20px;
padding: 30px;
background-color: #c0e4ff;
border: 2px solid #008000
}
p {
color: #555;
background-color: #dcdcdc;
border: 2px solid #555
}
p: first-child {
color: #f00;
background-color: #c5ffa0;
border: 2px solid #008000
}
< /style>
< /head>
< body>
< div>
< p> первый дочерний параграф - он выделен псевдоклассом first-child< /p>
< p> второй дочерний параграф< /p>
< p> третий дочерний параграф< /p>
< /div>
< div>
< p> и здесь первый дочерний параграф выделен хотя блок родитель уже другой< /p>
< p> второй дочерний параграф< /p>
< /div>
< /body>
< /html>

Обратите внимание на тот факт, что если бы в блоке родителе перед дочерними параграфами стоял любой другой тег, заголовок < h1> к примеру, то псевдокласс first-child уже не действовал бы к первому параграфу.. так как хоть параграф то он и первый, но элемент в блоке родителе уже второй.

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

Язык текста.

Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Если Вы помните из курса HTML, язык документа определяют атрибуты: charset - кодировка документа и content - язык документа (http: //webremeslo.ru/html/glava10.html#charset) для тега < meta> .

< meta http-equiv=" Content-Type" Content=" text/html; Charset=Windows-1251" >
< meta http-equiv=" Content-Language" Content=" ru" >

Так вот для того чтобы определить язык отдельно взятого текстового блока используют псевдокласс lang() - в круглых скобках которого собственно и указывается язык.

Язык может быть:

· ru - Русский

· en - Английский

· de - Немецкий

· fr - Французский

· it - Итальянский

Всё вместе пишется так:

span: lang(en) {font-style: italic}

- здесь мы указали, что текст взятый в контейнер < span> английский и что он должен отображаться курсивом.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдокласс lang< /title>
< meta http-equiv=" Content-Type" Content=" text/html; Charset=Windows-1251" >
< meta http-equiv=" Content-Language" Content=" ru" >
< style type=" text/css" >
p: lang(ru) {color: #00f; }
p: lang(en) {color: #f00; }
< /style>
< /head>
< body>
< p lang=" ru" > Русский текст выделен синим< /p>
< p lang=" en" > English text is chosen red< /p>
< /body>
< /html>

Обратите внимание, что в теге, в нашем случая параграфе, мы указываем с помощью атрибута lang используемый язык и его стиль: < p lang=" en" > текст< /p> прописанный в блоке CSS.

Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег < q> ) с помощью значения quotes - кавычки. В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

Пишется так:

q: lang(en) {quotes: " \201C" " \201D" }

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

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдокласс lang. Цитаты.< /title>
< meta http-equiv=" Content-Type" Content=" text/html; Charset=Windows-1251" >
< meta http-equiv=" Content-Language" Content=" ru" >
< style type=" text/css" >
div {
color: #000;
font-size: 24px;
}
q: lang(en) {quotes: " \201C" " \201D" }
q: lang(de) {quotes: " \201E" " \201C" }
q: lang(fr) {quotes: " \00AB" " \00BB" }
q: lang(ru) {quotes: " ёклмн.." "..ёпрст" }
< /style>
< /head>
< body>
< div>
< p> Обратите внимание на вид кавычек для цитат: < p>
< q> Цитата по умолчанию< /q> < br>
< q lang=" fr" > Французская цитата< /q> < br>
< q lang=" de" > Немецкая цитата< /q> < br>
< q lang=" en" > Английская цитата< /q> < br>
< q lang=" ru" > Русская цитата< /q> < br>
< /div>
< /body>
< /html>

Полезные советы:

· Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style. Можно только с помощью тега < style> в голове документа или внешнего CSS файла.

· Если селектор, какого либо псевдокласса, явно не указывать, а написать вот так, например:

: hover {color: #ff0}

- то это будет значить, что действие данного псевдокласса будет распространятся на все элементы документа.

· Браузер IE6 и ниже игнорирует практически все псевдоклассы.

Глава 16

Псевдоэлементы.

Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.

Вот перечень всех псевдоэлеметов:

· : first-letter - Стиль первой буквы текстового блока

· : first-line - Стиль первой строки текстового блока

· : after - Добавляет содержимое после элемента.

· : before - Добавляет содержимое до элемента.

· :: selection - Стиль выделенного пользователем текста.

Так же как и в случае с псевдоклассами, псевдоэлементы используются согласно следующего синтаксиса:

p: first-letter { color: #ff0000}

где:

p - селектор, к которому применяется псевдоэлемент.
: first-letter - после двоеточия собственно псевдоэлемент.
{color: #ff0000} - блок объявления стилей в фигурных скобках.

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

Ну что ж давайте пробежимся по перечисленным псевдоэлементам.

Стиль первой буквы.

Псевдоэлемент first-letter задаёт стиль первой буквы в каком либо текстовом блоке, проще говоря, без особых усилий позволяет сделать " буквицу". Вы заметили, что на этом сайте первые буквы в абзацах отличны цветом и размером от других букв? - это и есть пример работы псевдоэлемента first-letter.

Ну а если Вам этого примера мало можете взглянуть на ещё один:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдоэлемент first-letter.< /title>
< style type=" text/css" >
p {
font: 16px Arial;
}
p: first-letter {
font: bold 24px Verdana;
color: #ff0000
}
< /style>
< /head>
< body>
< p> Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.< p>
< p> Осмысливая мысли, в смысле смысла, есть смысл, помыслить о немыслимом..< p>
< /body>
< /html>

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

Стиль первой строки.

Псевдоэлемент first-line определяет стиль первой строки в текстовом блоке.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдоэлемент first-line.< /title>
< style type=" text/css" >
body {background-color: #fffacd}
p {color: #005}
p: first-line {
font: 16px Arial;
color: #f00
}
< /style>
< /head>
< body>
< p> Если бы при приеме на работу… … …< /p>
< p> Однажды молодой сисадмин … … …< /p>
< /body>
< /html>

Честно признаться, я не знаю в каких ситуациях действительно целесообразно применять псевдоэлемент first-line, хотя не исключаю, что такие ситуации бывают. Обусловлено это в первую очередь тем, что в зависимости от расширения экрана, размера шрифта, интервала между словами и символам и т.д. первая строка в текстовом блоке будет разной длины, что не позволяет веб мастеру полностью контролировать стиль данного текстового блока.

Контент.

Псевдоэлементы after и before предназначены для " врезки" в страницу сайта контента который изначально неуказан в HTML документе. Вставляется содержание перед (: before) или после (: after) какого либо элемента с помощью свойства content, которое собственно и определяет содержимое для вставки.

Всё вместе пишется так:

p: after {content: " Конец, а кто слушал молодец!! "; }

Теперь после каждого параграфа будет добавляться надпись: " Конец, а кто слушал молодец!! "

Значением свойства content может быть:

· " текст" - собственно любой текст или символы.

· " \0410" - юникод.

· url(путь)- адрес какого либо объекта.

· open-quote - открывающая кавычка.

· close-quote - закрывающая кавычка.

· no-open-quote - отменяет открывающую кавычку.

· no-close-quote - отменяет закрывающую кавычку.

· inherit - наследует значение элемента родителя.

· none - ничего не добавляется.

· normal - для псевдоэлементов before и after тоже самое, что и none.

· counter - показывает значение счетчика, заданного свойством counter-reset.

· attr(атрибут тега) - показывает текст, который является значением атрибута того или иного тега указанного в скобках.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдоэлементы after и before< /title>
< style type=" text/css" >
*: before {color: #00f; font-variant: small-caps; }
*: after {color: #f00; font-variant: small-caps; }
body: before {content: " начало документа"; }
body: after {content: " конец документа"; }
p: before {content: " анекдот: "; }
p: after {content: ": -)"; font-size: x-large; }
ul {list-style-type: none; }
li: before {content: " № "; color: #0f0; }
h4: before{content: url(graphics/marker.gif); }
q: before{content: open-quote; font-size: 30px; }
q: after {content: close-quote; font-size: 30px; }
img: after {content: attr(src); }
< /style>
< /head>
< body>
< hr>
< h4> Заголовок с сердечком.< /h4>
< h4> Параграфы с добавлением слова " анекдот: " вначале и смайлика в конце: < /h4>
< p> Если бы при приеме на работу...< /p>
< p> Однажды молодой сисадмин...< /p>
< h4> После рисунка добавляется значение его атрибута: " src" - путь к рисунку: < /h4>
< img src=" graphics/fon.jpg" >
< h4> Цитата в кавычках: < /h4>
< q> Лёд тронулся, господа присяжные заседатели! < /q>
< h4> Список с нестандартными маркерами: < /h4>
< ul>
< li> Первый
< li> Второй
< li> Третий
< /ul>
< hr>
< /body>
< /html>

Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:

Звездочка перед псевдоэлементом *: псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными " маркерами" в списке из примера.

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

Спецсимволы HTML (например, спецсимвол: & para; ), будут отображаться простым текстом (& para; а не ¶) так что если необходимо добавить какую либо хитрую закорючку используйте юникод.

Псевдоэлементы after и before, как и свойство content не поддерживаются браузерами Internet Explorer 7 и ниже.

Псевдоэлемент:: selection.

Псевдоэлемент :: selection (я не опечатался, пишется именно с двумя двоеточиями) указывает на стиль выделенного пользователем текста.

Данный псевдоэлемент появился на свет только в спецификации CSS3 и к сожалению поддерживается не всеми браузерами так IE его полностью игнорирует, а браузер Firefox использует свой аналогичный псевдоэлемент :: -moz-selection который официально не входит в спецификацию CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдоэлемент:: selection< /title>
< style type=" text/css" >
p:: selection {
color: #f00;
background: #0f0;
}
< /style>
< /head>
< body>
< p> Попробуете выделить данный текст, как будто Вы собираетесь его скопировать. Если Ваш браузер (например Opera 9.6 и выше) поддерживает псевдоэлемент:: selection, Вы увидите, что выделенный текст станет красным, а его фон зелёным.< /p>
< /body>
< /html>

К данному псевдоэлементу можно применить только следующие CSS свойства: color, background и background-color.

Полезные советы:

· В спецификации CSS3 в отличии от CSS2 и CSS2.1 все псевдоэлементы принято писать с двумя двоеточиями :: first-letter, :: first-line, :: after, :: before, и новый :: selection - таким вот способом разработчики решили отделить пседоэлементы от псевдоклассов. Однако такой синтаксис напрочь игнорирует Internet Explorer до 9 версии включительно! Так что пока псевдоэлементы лучше писать по старинке с одним двоеточием. Однако следует понимать, что например : first-letter и :: first-letter это формально два разных псевдоэлемента.

· В правилах стиля для псевдоэлементов допустимо использовать только свойства, относящиеся к шрифту, тексту и его фону.

⇐ Предыдущая123456789

Поделиться: