Атрибут text тега <body>
Описание
Атрибут text использовался в HTML4 для задания основного цвета текста на всей странице. Этот атрибут устарел и был удалён из HTML5 в пользу CSS-стилей.
Устарело: Атрибут text не поддерживается в HTML5. Используйте CSS-свойство
color вместо него.
Устаревший синтаксис:
<body text="#333333">
<p>Этот текст будет тёмно-серого цвета</p>
</body>
Современный CSS-эквивалент:
body {
color: #333333;
}
Проблемы устаревшего подхода:
| Проблема | Решение в CSS |
|---|---|
| Ограничение только цветом текста | Полный контроль над всеми текстовыми стилями |
| Нет наследования для сложных структур | Возможность управления наследованием |
| Не поддерживает современные функции | Поддержка переменных, медиа-запросов |
| Смешивание структуры и стилей | Чистое разделение HTML и CSS |
Современные возможности стилизации текста:
/* Базовые стили текста */
body {
color: var(--text-color);
font-family: system-ui, sans-serif;
line-height: 1.6;
text-rendering: optimizeLegibility;
}
/* Темная тема */
@media (prefers-color-scheme: dark) {
body {
color: #f0f0f0;
background-color: #121212;
}
}
/* Специфичные стили для элементов */
p {
margin: 0 0 1rem 0;
font-size: 1.1rem;
}
h1, h2, h3 {
color: var(--heading-color);
line-height: 1.2;
}
Рекомендации по современной типографике:
- Используйте CSS-переменные для управления цветами
- Реализуйте поддержку темной/светлой темы
- Выбирайте читаемые шрифтовые семейства
- Контролируйте межстрочный интервал (line-height)
- Обеспечьте достаточный цветовой контраст (WCAG)
Полный пример современного подхода:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--text-color: #333;
--heading-color: #111;
--bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: #f0f0f0;
--heading-color: #fff;
--bg-color: #121212;
}
}
body {
color: var(--text-color);
background-color: var(--bg-color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
</style>
</head>
<body>
<h1>Современная типографика</h1>
<p>Пример правильно оформленного текста</p>
</body>
</html>
Преимущества CSS-подхода:
- Поддержка адаптивного дизайна через медиа-запросы
- Возможность использования кастомных свойств (CSS-переменных)
- Лучшая производительность и поддерживаемость
- Доступ к современным функциям (font-display, font-feature-settings)
- Соответствие стандартам доступности
Примечание: Хотя атрибут text может продолжать работать в браузерах для обратной совместимости, профессиональная веб-разработка требует использования CSS для всех аспектов оформления текста. Это обеспечивает лучшую гибкость, контроль и соответствие современным стандартам.