Таблицы стилей JavaScript (устарели)

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

Эта альтернативная технология стилей документа, основывающаяся на рекомендованной W3C модели каскадных таблиц стилей, позволяет вам устанавливать свойства отображения различных элементов HTML как в виде атрибутов, встроенных в тег, так и на
уровне документа, либо в виде внешнего файла стилей, используемого для целого собрания документов.

Таблицы JSS устарели. Даже их изобретатель отказался от поддержки JSS в пользу стандарта CSS2.Мы твердо стоим за разумную стандартизацию, и теперь, когда модель
CSS2 полностью поддерживается стандартами HTML 4 и XHTML, мы не можем рекомендовать вам использовать что-либо, кроме таблиц стилей, соответствующих стандарту CSS. Мы подробно обсудили идеи и понятия, стоящие за таблицами стилей – особенно каскадными таблицами стилей, – в главе 8, так что не будем здесь повторяться. Вместо этого мы коснемся только того, как следует создавать стили JavaScript и манипулировать ими (исключительно из любви к истории).

Синтаксис таблиц стилей JavaScript
В Netscape версии 4 и более ранних JSS реализованы путем расширения нескольких существующих тегов HTML и определения нескольких новых объектов для хранения стилей ваших документов.


Netscape больше не поддерживает JSS, да и любой другой броузер – тоже.

Внешние, на уровне документа и встроенные JSS
Как и в случае CSS, можно указать и загрузить внешние JSS-файлы при помощи тега . Например:



Единственное существенное различие между этим тегом и таким же для внешних таблиц стилей CSS состоит в том, что атрибуту type тега присваивается значение text/JavaScript вместо text/CSS. Файл, на который указывает тег, styles.js, содержит предложения JavaScript, определяющие стили и классы, используемые затем Netscape для
управления отображением текущего документа.

JSS на уровне документа определяется в теге

Заметьте, во-первых, что мы используем стандартные JavaScript- и HTML-комментарии, окружающие наши JSS-определения, чтобы не поддерживающие JSS броузеры не стали обрабатывать их как HTML-содержимое.


Заметьте также, что синтаксис определений стиля соот-ветствует JavaScript, где помимо всего прочего регистр букв имеет значение. Вы ассоциируете встроенные стилевые правила JavaScript с определенным тегом, используя атрибут style так же, как и для встроенных стилей CSS. Значением атрибута является список JSS-присваиваний, разделенных точками с запятой. Например:


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

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

JSS-значения
В общем, все значения, которые вы можете использовать для CSS, могут использоваться также и в JSS-определениях.


В случае ключевых слов, длин и процентных значений заключайте только эти значения в кавычки и используйте их так, как вы делали бы это с любым строковым значением в JavaScript. Таким образом, CSS-значение bold превращается в "bold" или 'bold' в JSS-стилях на уровне документа или во встроенных в тег стилях соответственно. 12pt в CSS превращаются в '12pt' или в "12pt" в JSS.

Указывайте цветовые значения в виде названий цветов или шестнадцатеричных кодов, заключая их в одиночные или двойные кавычки. Десятичные RGB-обозначения CSS не поддерживаются в JSS. В JSS URL значения являются строками, содержащими соответствующий URL. Таким образом, CSS URL, определенный как url(http://www.kumquat.com), превращается в 'http://www.kumquat.com' во встроенных стилях JSS и в "http://www.kumquat.com" – в стилях на уровне документа. Одно преимущество, свойственное только JSS, состоит в том, что любое значение может вычисляться динамически, в процессе обработки документа броузером. Вместо статического определения размера шрифта, например, вы можете вычислить его на ходу:

tags.P.fontSize = favorite_font_size();

Мы предполагаем здесь, что JavaScript-функция favorite_font_size() как-то определяет желательный размер шрифта и возвращает строковое значение, содержащее этот размер.


Оно, в свою очередь, присваи-вается свойству fontSize для тега

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

Определение стилей для тегов
JavaScript определяет новое свойство tags объектов document, содержащее свойства стилей для всех тегов документа. Для определения стиля для тега просто установите необходимое значение нужного свойства в свойстве tags объекта document. К примеру:

document.tags.P.fontSize = '12pt';
document.tags.H2.color = 'blue';

Эти два JSS-определения устанавливают размер шрифта для тега

в 12 пунктов, а все теги

предписывают выводить синим цветом.

Эквивалентные CSS определения выглядят так:

p {font-size : 12pt}
h2 {color : blue}

Поскольку свойство tags всегда относится к текущему документу, вы можете опустить document в любом JSS-определении стилей тега. Мы могли записать предыдущие два стиля как:

tags.P.fontSize = '12pt';
tags.H2.color = 'blue';

Более того, как мы отмечали выше, можно опустить имя тега так же, как свойства document и tags, во встроенных в тег JSS, использующих атрибут style.

Регистр в JSS имеет значение.


Имена тегов в свойстве tags должны набираться целиком заглавными буквами. Заглавные буквы в середине названий свойств тегов имеют значение – любое уклонение от точного побуквенного их воспроизведения влечет ошибку, и Netscape не станет учитывать такое JSS-объявление. Все нижеследующие JSS-определения недействительны, хотя причина этого далеко не очевидна:

tags.P.fontSize = '12pt';
tags.Body.Color = 'blue';
tags.P.COLOR = 'red';
Их правильные варианты таковы:
tags.P.fontSize = '12pt';
tags.BODY.color = 'blue';
tags.P.color = 'red';

Может быть очень скучным занятием определять множество свойств для одного тега, так что можете воспользоваться JavaScript-предложением with, чтобы уменьшить объем набора. Следующие стили:

tags.P.fontSize = '14pt';
tags.P.color = 'blue';
tags.P.fontWeight = 'bold';tags.P.leftMargin = '20%';
могут быть записаны короче:
with (tags.P) {
fontSize = '14pt';
color = 'blue';
fontWeight = 'bold';
leftMargin = '20%';
}

Можно применить один набор стилей к нескольким тегам:

with (tags.P, tags.LI, tags.H1) {
fontSize = '14pt';
color = 'blue';
fontWeight = 'bold';
leftMargin = '20%';
}

Определения классов стилей
Как и в CSS, можно применять JSS-стили к тегам, особым образом используемым в документе. В JSS свойство classes определяет различные стили для одного тега. У свойства classes нет заранее определенных свойств, но любое указанное свойство определяется в качестве класса, который может быть применен в текущем документе. Например:

classes.bold.P.fontWeight = 'bold';
with (classes.abstract.P) {
leftMargin = '20pt';
rightMargin = '20pt';
fontStyle = 'italic';
textAlign = 'justify';
}

Первый стиль определяет класс bold для тега

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

под названием abstract. Эквивалентные CSS правила были бы такими:

P.bold {font-weight : bold}
P.abstract {left-margin : 20pt;
right-margin : 20pt;
font-style : italic;
text-align : justify
}

Определенные по правилам JSS-классы используются так же, как классы CSS, – с применением атрибута class и имени класса.

Как CSS, так и JSS позволяют вам также определять классы без указания тега, к которому будет применяться класс. Это позволяет определять родовые классы, которые вы затем сможете применять к любомутегу. Для создания родового класса стилей используйте специальное свойство all:

classes.green.all.color = "green";

Впоследствии вы сможете вставить class = "green" в любой тег, чтобы Netscape вывел его содержимое зеленым цветом. Эквивалентное CSS определение:

.green {color : green}

Использование контекстных стилей
Одно из самых мощных свойств CSS заключается в возможности создания контекстных стилей, когда броузер применяет стиль только к тегам, определенным образом вложенным в документ. JSS также поддерживает контекстные стили при помощи метода contextual() свойства tags. Параметрами этого метода являются теги и классы, определяющие контекст, в котором Netscape применит этот стиль. Например:

tags.contextual(tags.UL, tags.UL, tags.LI).listStyleType = 'disc';

определяет контекст, в котором элемент (tags.LI) неупорядоченного списка, вложенного в еще один неупорядоченный список, использует диск в качестве маркера. CSS-эквивалент:

ul ul li {list-style-type : disc}

Вы можете смешивать теги и классы в методе contextual(). Например:

tags.contextual(classes.abstract.P,tags.EM).color = 'red';

предлагает броузеру отобразить содержимое тега красным, когда он встретится внутри абзаца из класса abstract. CSS-эквивалент таков:

p.abstract em {color : red}

Поскольку объект tags недвусмысленно включен в метод contextual(), можно опустить его в определении. Следовательно, наш пример с вложенными списками можно переписать так:

tags.contextual(UL, UL, LI).listStyleType = 'disc';

Свойства таблиц стилей JavaScript
В JSS поддерживается подмножество свойств CSS. Стилевые свойства JSS, их CSS-эквиваленты и разделы, в которых эти свойства полностью задокументированы.

В JSS определены также три метода, позволяющие вам определять ширину полей, подложки и рамки в одном стилевом свойстве. Каждый из этих трех методов: margins(), paddings() и borderWidths() – получает четыре параметра, соответствующих верхней, правой, нижней и левой ширине поля, подложки и рамки. В отличие от своих CSS-аналогов, эти JSS-методы требуют, чтобы всегда были указаны все четыре параметра. В JSS нет сокращенного способа установки нескольких значений ширины полей, подложки или рамки при помощи одного значения.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела HTML на эту тему:
JavaScript
Апплеты и объекты
Вложенное содержимое


Вернуться в раздел: HTML / 12. Исполняемое содержимое