CSS: цвет шрифта, стили, фон, размер
Программирование – что зеркало: вначале было слово, а отразился вовсе не ответ. И очень быстро пришлось «поменять»: сначала зеркало, потом слово... В данный момент времени таблицы каскадных стилей – это хорошо, но почему так долго к ним шло сознание разработчика? CSS – это все тот же массив времен начала эры компьютерных программ, но только в другом ракурсе. Даже когда массивы стали ассоциативными, революции это не произвело.
Страница сайта – это теги HTML-разметки, которым может быть приписан определенный стилевой класс или идентификатор стиля. Первое можно определить однажды и приписывать к чему угодно сколько нужно раз, второе принадлежит конкретному элементу.
Общая логика описания стилей
По традиции, стиль помещается в CSS-файл, но может быть приписан к конкретному элементу в его атрибуте style. Стиль можно создать в динамике средствами JavaScript. Особого значения не имеет, как описать, например, посредством CSS цвет шрифта, его размер, гарнитуру, фон под ним и проч. Место описания стиля имеет значение в контексте, обычно двух, идей: чем позже описано, тем оно приоритетнее, а если описано на элементе, то это вовсе !important. Последнее, записанное как есть, явно определяет приоритет.
Применять стиль чтобы, например, некое font color поменяло цвет, можно где угодно и как угодно. Вопрос в том, как к этому отнесется браузер в ходе разборки всех стилей в совокупности. Сколько он на это потратит процессорного времени?
В идеале, font color должно быть обозначено только один раз – это классика. Додумывать к одному простому описанию еще парочку, а потом еще и еще ... конечно, можно. Это модно, но непрактично.
Пример общей логики
Все очень просто: определив посредством 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, но и про правила left и top, да и об изменении цвета выделения текста следует не забыть.
Далеко не все разработчики чтут требование CSS: стиль идентификатора – только одному элементу, а стиль класса – многим тегам, к тому же последние можно указывать в тегах как прилагательные:
- задать цвет шрифта в CSS – стиль класса groundColor;
- уточнить размер шрифта – класс size15;
- установить положение – класс PlaceUp.
Естественно, использование идентификаторов, особенно когда они принадлежат одному элементу разметки, лучше десятка стилевых классов, расписанных в различном сочетании по сотне элементов страницы. Но во всем есть своя объективная логика.
Разработчик просто должен грамотно учитывать: если даже цвет шрифта HTML, CSS предлагает описать жестко, то гибкость общей структуры описаний – это его работа.
Ожидаемый результат применения общей логики
Современные браузеры спокойно относятся к большому количеству стилевых файлов и их объемам. Однако проектируя, в частности, посредством CSS, color всей страницы, всегда следует думать о разумной достаточности. Не все стилевые правила «дешево» выглядят в применении. Простая лаконичная запись: * {color: white;} – безусловно красива, но относится она ко всем элементам страницы без исключения.
Из всех правил, которыми оснащен CSS, самое важное:
- стиль – класс, и тогда его имя начинается с ".";
- стиль – идентификатор и его имя начинается с символа "#";
- в остальных случаях – это наименование тега или что-то особенное
Остальные идеи в части описания стилей (наследование, перекрытие свойств, приоритеты, положение, порядок и т. д.) следует применять осмысленно и строго по необходимости.
Браузер всегда пропустит, что не разберет в описании, так что особенных неожиданностей не будет. Если чего-то не оказалось в нужном месте или задать цвет шрифта в CSS не удалось, значит, ошибка в стиле.
Неожиданные возможности
Не следует злоупотреблять стилями вроде * { left: 124px; } или
ol ol, ol ul, ul ul, ul ol { margin-bottom: 0; }
a img { border: 0; }
Хотя трудно заставить даже начинающего разработчика использовать правила CSS как есть. Всегда в разработке любого сайта даже идеально простой синтаксис CSS дарит непредвиденные проблемы. Впрочем, если направить усилия в область правильного использования синтаксиса, но применить к нему функционал JavaScript, то новые неожиданные возможности позволят избежать монотонного создания идентификаторов для каждого элемента или следить за многообразием применения стилевых классов.
CSS – это не только файл стилей, подключенный к странице через тег link или вставленный в нее через тег style. Это также возможность создать стиль на лету или изменить уже существующий.
Применяя CSS, цвет шрифта можно сделать программно. Так же как и размер, и положение, отступы. Сайт – это не цель применить знания в CSS, HTML, PHP или блеснуть эффектами JavaScript.
Веб-ресурс – это прежде всего информация, предлагаемая определенным образом. Именно поэтому CSS лучше всего рассматривать в динамике сквозь призму того, как можно сформировать, пока страница еще на сервере (ею занят PHP в момент, когда на сайт пришел посетитель, а не разработчик в то время, когда он разрабатывает сайт), нужный файл стилей под конкретный текст, под актуальный контент или создать стиль класса или идентификатора на лету в процессе работы страницы, когда ее просматривает конкретный посетитель.
Статическая динамика
Не всегда следует писать сложный JavaScript-код, чтобы сделать контент динамичным, а его оформление – адекватным содержанию. Иногда достаточно правильно использовать имеющиеся возможности. В частности, определив посредством CSS цвет шрифта изначально статичным правилом, можно скрыть это правило (hidden) и визуализировать другое (visible).
Здесь динамика не требует алгоритма:
// подсветить кнопку входа на сайт
function scfWelcomeOver() {
document.getElementById('scDocxNamePiP').style.visibility = 'visible';
}
// скрыть кнопку входа на сайт
function scfWelcomeOut() {
document.getElementById('scDocxNamePiP').style.visibility = 'hidden';
}
CSS предлагает собственные варианты динамики: бегущие строки, прозрачность элементов, различные варианты наложений, проявлений, затуханий цвета. В CSS цвет шрифта можно сделать даже таким, которым ни одним стилевым правилом не предусмотрено.
Динамичное отображение контента
Если бы не было догм, вероятно, не было бы и прогресса. Просто не с чем было бы бороться. Гипертекст принес в мир много догм. Настала пора обратить на них внимание и заняться разработкой сайтов в прагматичном и практичном стиле.
Изначально есть страница (P), на ней размещен контент (K), все теги страницы описаны в таблице стилей (S). Не ново формировать страницу P через PHP или Perl на сервере, выбирая K из базы данных. Имеющаяся таблица стилей S приложится автоматом. Однако K может быть изменен, а в большинстве случаев такое изменение повлечет за собой надобность в других стилях, то есть в S+.
Например, заказчик сказал: «Сайт, описывающий жизнь Москвы, лучше будет смотреться, если новостные статьи оформлены в стиле "ЗаЗавтраком", описания ночной суеты в стиле "ЛасВегас", а статьи о научно-техническом прогрессе в стиле "МодернТехно"». Но если сделать S на три этих варианта, то нет никакой гарантии, что у заказчика не возникнет идеи иметь набор статей «Новости», «Праздники», «Работа», «CSS/HTML» и бонус «ХозяйкеНаЗаметку».
Более практичен другой подход. Вне зависимости от категории статьи в ней всегда есть содержание, которое можно раскрасить в определенный цвет. Вот на этом месте возникает вполне здравая мысль: получив конкретное K, еще на сервере сформировать адекватную S, и когда браузер потребует P, он получит нужное содержание в надлежащем оформлении.
Динамика стиля от JavaScript
Минимальное, хотя и очень эффективное решение, – делать стилевое оформление непосредственно в браузере клиента. Во-первых, это разгружает сервер – не нужно будет тратить время на формирование гипертекста страницы и файлов стилей для нее.
Во-вторых, естественные траты времени внутри браузера создадут эффект, что страница занята делом и активно поддерживает диалог с посетителем: все равно тот не воспринимает контент оптом, следовательно, ему понравится последовательный и продуманный вывод информации.
В-третьих, это дает возможность разработчику предоставить в распоряжение посетителя механизм формирования контента в таком стиле, в котором ему это удобно. Этого нет еще ни у кого.
Для воплощения этой идеи необходимо реализовать механизм создания стилей элементов сразу после загрузки страницы и в процессе ее функционирования. Современный сайт – это AJAX в том или ином варианте. Не составляет труда выполнять формирование стилей непосредственно в процессе формирования дерева страницы. Это просто, доступно и эффективно, потому как контент идет вместе со своим оформлением.
Это не противоречит современной тенденции отделить представление данных от их обработки и выполняется над данными уходящими в отображение.
CSS как активная компонента
Гипертекст принес много хорошего, но только малая толика естественной информации была успешно формализована, появились инструменты и опыт создания качественных HTML, XML, CSS документов. Не проблема формализовывать новые объемы информации и изменять уже сделанное ранее.
В отношении CSS этот процесс уже активизируется в совершенно ином контексте. Встроенные средства в JavaScript, позволяющие «на лету» создавать элементы и стили элементов, не предполагали такую возможность, а создатели PHP, в частности, полагали заниматься формированием только HTML страниц.
И первое, и второе позволяют заняться программированием стилей. Это новое направление в области информационных технологий. Стили значительно более формальная вещь, чем HTML или XML, правила очень просты. Стиль всегда присутствует в информации, какой бы природы она ни была.
Оформлением данных программисты занимаются всегда в гораздо более неформализованных сферах, но вот тема CSS – очень простая задача, но как-то не попадала в поле зрения процесса разработки.
О догмах в области программирования
Как и айсберг, догма не может долго бороздить информационные просторы. Накопленный опыт должен был сконцентрироваться не только в HTML- и CSS-стандартах, инструментах работы с ними, знаниях разработчиков.
Простая задача – сделать посредством CSS цвет шрифта – нашла свое отличное решение. Правила, синтаксис, логика и удобство несомненны. Но даже когда шрифтов на самом деле нужно не много, цветов для практики тоже много не надо, да и вообще для целей виртуализации реальности вовсе не нужна вся накопленная «сила» HTML и CSS, наступает момент, когда ситуативные знания уходят в репродуцирующие, и появляется опыт и инструменты естественного образования стилей от контента.
Как это будет, может и не совсем ясно, но то, что процесс уже идет, очевидно.