Сегодня в программировании используются таблица каскадных стилей. Это конечно очень хорошо, но почему же сознание разработчиков так долго шло к этому понятию? CSS – это массив времен начала эпохи компьютерных программ, но совершенно в другом ракурсе. Даже после того, как массивы стали ассоциативными, это не произвело революции. По большому счету, страница сайта – это теги HTML-разметки, которым может быть приписан определенный идентификатор стиля или стилевой класс. Если идентификатор стиля можно определить только один раз и приписывать сколько нужно к чему угодно, то стилевой класс принадлежит к конкретному элементу.
Общая логика описания стилей
Стиль по традиции помещается в CSS-файл, однако он также может быть приписан к конкретному элементу в атрибуте style. Можно создать стиль в динамике при помощи средств JavaScript. Не имеет особого значения, как описывать, к примеру, посредством CSS размер шрифта, его цвет и гарнитуру, фон и прочее. Только в контексте двух идей место описания стиля имеет значение. Во-первых, чем позже будет приведено описание, тем оно приоритетнее. Если оно описано на элементе, то это !important. Последнее ясно определяет приоритет. Можно как угодно и где угодно поменять стиль, чтобы какое-то fontcolor поменяло цвет. Однако вопрос заключается в том, как к этому в ходе разборки всех стилей в совокупности отнесется интернет-браузер. Сколько процессорного времени на это будет потрачено? В идеале, fontcolor может быть обозначено всего один раз. Это классический вариант. Конечно, можно додумывать к одному простому описанию еще парочку, но это не совсем практично.
Пример общей логики
Здесь все довольно просто. Определив посредством CSS color всего для трех элементов, можно получить три проблемы
#Ele1, #Ele2, #Ele3 {
POSITION: absolute;
left : 20px;
top : 14px;
color: red;
}
#Ele2, #Ele3 {
left : 90px; // меняем координату CSS в горизонтальном направлении
color: yellow; //меняем цвет шрифта CSS
}
#Ele3 {
top : 114px; // меняем координату CSS по вертикали
color:green; // еще раз меняем цвет шрифта CSS
background-color: lightgrey; // цвет выделения текста CSS изменен, но этого нет в #Ele1 и #Ele2; его положение тоже изменилось, но оно уже менялось в #Ele2 и не так, как здесь
}
Необходимо учитывать, что все три этих элемента где-то определены. В случае смены цветовых представлений владельца сайта, разработчику придется менять не только color, но и правила top и left. Также не стоит забывать и об изменении цвет выделения текста. Далеко не все разработчики учитывают требование CSS о том, что стиль идентификатора должен соответствовать только одному элементу, а стиль класса – множеству тегов. Последние к тому же можно указывать в тегах как прилагательные. Чтобы задать цвет шрифта в CSS, можно использовать стиль класса ground Color. Для уточнения размера шрифта можно использовать класс size 15. Для установления положения достаточно использовать класс PlaceUp. Использование идентификаторов, особенно в тех случаях, когда они соответствуют только одному элементу разметки, лучше десятка стилевых классов, которые расписаны в различных сочетаниях по множеству элементов страницы. Однако во всем есть своя логика. Разработчик должен все это грамотно учесть. Даже если цвет шрифта HTML, CSS предлагает описывать жестко, то важно обеспечить гибкость общей структуры описаний.
Результаты использования общей логики
Современные интернет-браузеры весьма спокойно относятся к большому числу стилевых файлов и их объемам. Однако при проектировании color все страницы, в частности посредством CSS, необходимо думать также и о разумной достаточности. Не все стилевые правила в применении выглядят «дешево». Безусловно, лаконичная простая запись *{color; white} выглядит красиво, однако она относится ко всем без исключения элементам страницы. Из правил, которыми оснащен CSS, самыми важными являются:
— стиль – класс, тогда его имя начинается с «.»;
— стиль – идентификатор и его имя начинается с «#»;
— в остальных случаях это может быть наименование тега или что-то другое.
Другие идеи, касающиеся описания стилей, такие как перекрытие свойств, наследование, приоритеты, порядок, положение и так далее, нужно применять осмысленно и только в случае необходимости. Дело в том, что интернет-браузеры пропускают то, в описании чего не могут разобраться, так что особых неожиданностей в этом плане не будет. Если чего-то в нужном месте не оказалось, или не удалось задать цвета в CSS, значит, в стиле была допущена ошибка.
Неожиданные возможности
Не следует злоупотреблять стилями вроде * { left: 124px; } или
olol, olul, ulul, ulol{ margin-bottom: 0; } a img { border: 0; }
Однако иногда даже начинающих разработчиков бывает сложно заставить использовать правила CSS в таком виде, как есть. В разработке любого сайта даже совершенно простой синтаксис CSS может привести к непредвиденным проблемам. Если же направить все усилия в область корректного использования синтаксиса и применить по отношению к нему функционал JavaScript, то можно будет избежать для каждого элемента монотонного создания идентификаторов или следить за многообразием использования стилевых классов. CSS позволяет не только создать файл стилей, подключенный через тег link к странице, или вставленный на страницу через тег style.CSS также дает возможность создавать на лету новый стиль или менять уже существующий. Цвет шрифта, используя CSS, можно задать программным путем, как и размер, и отступы, и положение. Стоит понимать, что сайт не является целью применения знаний в области HTML, CSS, PHP и JavaScript. Веб-ресурс прежде всего является информацией, предоставляемой определенным образом. Поэтому лучше всего рассматривать CSS в динамике сквозь призму того, как можно сформировать нужный файл стилей под конкретный тест или актуальный контент. Стиль класса или идентификатора можно формировать буквально на лету в процессе работы страницы, когда конкретный посетитель перейдет на нее.
Статическая динамика
Не всегда нужно писать сложный код JavaScript, чтобы сделать контент динамичным. В некоторых случаях достаточно только использовать имеющиеся возможности. Если изначально определить посредством CSS цвет шрифта статичным правилом, то можно будет скрыть это правило и визуализировать другое.
Динамика здесь не требует алгоритма
// сделать подсветку кнопки для входа на сайт
functionscfWelcomeOver() {
document.getElementById(‘scDocxNamePiP’).style.visibility = ‘visible’;
}
// сделать кнопку входа на сайт скрытой
functionscfWelcomeOut() {
document.getElementById(‘scDocxNamePiP’).style.visibility = ‘hidden’;
}
В CSS предлагаются собственные варианты динамики: прозрачность элементов, бегущие строки, различные варианты затуханий цвета, наложений, проявлений. Также в CSS цвет шрифта можно сделать таким, который не предусмотрен ни одним стилевым правилом.
Динамичное отображение контента
Без догм прогресс был бы невозможен. Бороться было бы просто не с чем. Много догм в мир принес гипертекст. Пришла пора наконец обратить на них внимание и заняться разработкой сайтов в практичном и прагматичном стиле. Изначально имеется страница (P), на которой размещен контент (К). Теги страницы описаны таблицей стилей (S). Формировать страницу P через Perl или PHP на сервере не ново. К ней автоматом приложится имеющаяся таблица стилей. Но Kможет быть изменен. Такое изменение в большинстве случаев влечет за собой отсутствие необходимости в других стилях, т.е. в S+. Предположим, заказчик говорит, что сайт про жизнь Москвы, будет лучше смотреться, если описания ночных мероприятий будут описаны в стиле «ЛасВегас», новостные статьи – в стиле «ЗаЗавтраком», а статьи о науке и технике в стиле – «МодернТехно». Если на эти три варианта сделать S, то нет никакой гарантии, что у заказчика вдруг не появится идея получить набор статьей «Праздники», «На заметку хозяйкам», «Работа» и так далее. Поэтому более практично будет использовать немного другой подход. В статье вне зависимости от ее категории всегда присутствует содержание, которое можно раскрасить в тот или иной цвет. Вот здесь возникает вполне разумная идея: при получении конкретного K можно еще на сервере сформировать адекватную S, а когда браузер потребует P, он получит содержание о правильном оформлении.
Стиль от JavaScript: динамика
Изготовление стилевого оформления в браузере клиента является минимальным, но при этом достаточно эффективным решением. Прежде всего, это позволяет разгрузить сервер. На формирование гипертекста страницы и файлов стилей для нее больше не нужно будет затрачивать время. К тому же, естественные временные затраты внутри браузера создают эффект того, что страница занята процессом и активно поддерживает диалог с посетителем. Тот все равно не воспринимает контент оптом, значит, ему придется по душе продуманный и последовательный вывод информации. Также такая организация позволяет разработчику предоставить в распоряжение посетителя сайта механизм формирования контента в том стиле, в котором это удобно. Такого еще нет ни у кого. Чтобы воплотить эту идею, необходимо реализовать механизм создания стилей элементов сразу же после загрузки страницы, а также в процессе функционирования. В том или ином варианте, современный сайт – это AJAX. Формирование стилей можно без труда осуществлять прямо в процессе формирования дерева страницы. Все это просто, эффективно и доступно, так как контент идет одновременно со своим оформлением. Это не противоречит современным тенденциям отделения представлений данных от их обработки и осуществляется над данными, уходящими в отображение.
CSS как активный компонент
С гипертекстом пришло много всего хорошего, однако лишь маленькая часть естественной информации была успешно формализована. В результате появился опыт и инструменты для создания качественных документов HTML, CSS, XML. Формализовать новые объемы информации и поменять уже сделанные ранее – это не проблема. Данный процесс в отношении CSS уже активизируется в несколько ином контексте. Встроенные средства JavaScript, которые позволяют создать элементы и стили «на лету», такую возможность не предполагали. Создатели PHP полагали заниматься формированием только HTML страниц. И то, и другое, позволяет заниматься программированием стилей. Так называется новое направление в сфере информационных технологий. Стили – это более формальная вещь, чем XML или HTML. Какой бы природы ни была информация, в ней всегда присутствует стиль. Программисты занимаются оформлением данных в более неформализованных сферах. Несмотря на то, что CSS является очень простой задачей, она по каким-то причинам не попадала в поле зрения процесса разработки.
Догмы в области программирования
Догма, как айсберг, просто не может долгое время бороздить информационные просторы. Накопленный опыт не мог концентрироваться только на стандартах HTML и CSS и инструментах работы с ними. Простая задача, связанная с изменением посредством CSS цвета шрифта, нашла отличное решение. Синтаксис, логика, удобство и правила в данном случае несомненны. Даже когда шрифтов нужно немного, цветов для практики тоже много не надо, да и вообще для целей виртуализации реальности не требуется накопленная «сила» CSS и HTML, приходит момент, когда ситуативные знания переходят в репродуцирующие. В результате появляются инструменты и опыт естественного образования стилей от контента. Возможно, еще не совсем ясно, как это будет, однако очевидно, что процесс уже идет.