Привет, Хабр! Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML.
Раньше возможности для создания первых сайтов были предельно ограничены: стандартные шрифты, минимум графики и полотна текста. Недостаток инструментов компенсировали изобретательностью. Она позволяла решать, казалось бы, невозможные задачи. Вспоминаем самые популярные из них.
№1. Создать макет страницы в табличной верстке
Зачем: раньше не существовало гибких инструментов для создания сложных и адаптивных макетов.
До появления инструментов, таких как Flexbox и CSS Grid, веб-мастера использовали HTML-таблицы (<table>), чтобы создавать структуру веб-страницы:
<body>
<table>
<!-- Шапка сайта -->
<tr>
<td colspan="3" class="header">
Шапка сайта
</td>
</tr>
<!-- Основная структура: меню, контент, боковая панель -->
<tr>
<!-- Боковое меню -->
<td class="menu">
<strong>Меню:</strong>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</td>
<!-- Основной контент -->
<td class="content">
<h2>Основной контент</h2>
<p>Это пример основного контента страницы. В эпоху до CSS Grid и Flexbox веб-разработчики использовали таблицы для создания макетов сайтов.</p>
<p>Таблицы позволяли расположить элементы на странице в виде ячеек, но это нарушало семантическую структуру HTML и затрудняло адаптацию под разные экраны.</p>
</td>
<!-- Боковая панель -->
<td class="sidebar">
<strong>Боковая панель:</strong>
<p>Здесь можно разместить дополнительную информацию, новости или рекламу.</p>
</td>
</tr>
<!-- Подвал сайта -->
<tr>
<td colspan="3" class="footer">
© 2024 Пример сайта на табличной верстке. Все права защищены.
</td>
</tr>
</table>
</body>Как это выглядело на сайте:
Решение было далеко от идеала: оно нарушало семантическую структуру HTML, ограничивало гибкость верстки и делало сайты менее доступными для пользователей с особыми потребностями. Впрочем, об этом тогда не думали.
Сайты создавали с фиксированными размерами. Они не адаптировались под разные устройства и выглядели некрасиво на экранах с очень маленьким или большим разрешением. С развитием CSS-технологий таблицы уступили место универсальным методам, которые изменили принципы веб-дизайна.
№2. Сделать отступы с помощью картинок
Зачем: чтобы разделять смысловые блоки, отображать контент на странице более структурированно.
Веб-мастера вставляли крошечные прозрачные GIF-изображения для имитации отступов — невидимых пробелов и разделителей между элементами. Настраивая размер и ориентацию «картинки», можно было разделять элементы разными промежутками.
<body>
<p>Текст до отступа</p>
<img src="https://via.placeholder.com/10x1/FFFFFF/FFFFFF" width="10" height="1" alt="Отступ">
<p>Текст после отступа</p>
</body>Как это выглядело на сайте:
Выглядит странно, но тогда наряду с табличной структурой это было едва ли не единственным способом регулировать расположение элементов на странице. Минус решения — об адаптивности верстки речь не шла. Сейчас CSS-свойства margin, padding и gap делают такие манипуляции ненужными.
№3. Добавить анимированный текст
Зачем: привлечь внимание пользователя к определенному тексту в эпоху до сложных CSS-анимаций.
Веб-мастера добавляли тег <blink>, который заставлял текст непрерывно мигать:
<body>
<blink>Важное объявление!</blink>
</body>Или тег для создания бегущей строки:
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">Текст движется по экрану!</marquee>
</body>Как это выглядело на сайте:
Анимация была популярна поначалу, но быстро стала восприниматься как некачественный раздражающий элемент. Тег <blink> окончательно ушел в прошлое: его удалили из стандарта HTML5 и отключили в современных версиях браузеров Chrome, Firefox и Edge. Но бегущая строка всё еще поддерживается браузерами из-за обратной совместимости.
Сейчас для подобных эффектов используют современные CSS-анимации. Они тоже могут раздражать пользователей, но выглядят элегантнее.
№4. Создать уникальный дизайн текста
Зачем: чтобы уйти от ограниченного количества стандартных шрифтов и создать свой визуальный стиль сайта.
На заре веб-разработки браузеры отображали в основном только стандартные шрифты, например Arial, Times New Roman и Verdana. Они были предустановлены на устройствах пользователей.
Веб-мастера использовали костыли, чтобы добавить разнообразия. Например, заменяли текст графическими изображениями или использовали sIFR (Scalable Inman Flash Replacement) — с помощью Flash вместо текстовых элементов показывали векторные шрифты.
<body>
<!-- Замена текста картинкой -->
<h1><img src="https://via.placeholder.com/300x50?text=Custom+Font" alt="Заголовок"></h1>
<!-- Использование sIFR для замены текста на векторные шрифты через Flash:-->
<script type="text/javascript">
replaceSWF("h1", "customfont.swf");
</script>
</body>Как это выглядело на сайте:
Решение вызывало множество проблем. Одна из них — ухудшение SEO из-за медленной загрузки страниц и невозможности индексировать текст с картинок. Метод sIFR работал только при установке Flash на компьютере пользователя. Проблему решило добавление технологии @font-face в CSS.
№5. Адаптировать сайт для разных браузеров
Зачем: чтобы сайт правильно отображался в разных браузерах.
В эпоху «войн браузеров» в 1997–1999 годы Internet Explorer и его конкурент Netscape Navigator по-разному интерпретировали CSS. Разные версии IE тоже обрабатывали HTML и CSS каждая по-своему. Всё это создавало хаос для веб-мастеров.
Приходилось использовать специфическое написание селекторов CSS для разных браузеров: например, <_width> понимал Internet Explorer, но игнорировал Netscape.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>CSS-хак для IE</title>
<style>
p {
color: blue;
_color: red; /* Только для Internet Explorer 6 */
}
</style>
</head>
<body>
<p>Этот текст должен быть красным в IE6 и синим в других браузерах.</p>
</body>
</html>Позже применяли условные комментарии, которые работали только в определенной версии Internet Explorer:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Условные комментарии для IE</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
h1 {
color: blue; /* Стандартный стиль для всех браузеров */
}
</style>
<!-- Условный комментарий для IE6 -->
<!--[if IE 6]>
<style>
h1 {
color: red; /* Стиль для IE6: заголовок становится красным */
}
body::before {
content: "Вы используете Internet Explorer 6!";
color: white;
background-color: red;
padding: 10px;
display: block;
text-align: center;
}
</style>
<![endif]-->
</head>
<body>
<h1>Заголовок с условными стилями</h1>
<p>Этот текст выглядит одинаково во всех браузерах, а заголовок изменится в IE6.</p>
</body>
</html>Отсутствие единых правил вынуждало веб-мастеров изобретать хаки для корректного отображения сайтов. Современные стандарты и унификация рендеринга сделали такие решения неактуальными.
№6. Открывать сайт быстрее
Зачем: оптимизировать скорость загрузки сайта, чтобы улучшить пользовательский опыт и рейтинг сайта в поисковых системах.
Веб-мастера используют атрибут loading="lazy" для отложенной загрузки изображений: картинки загружаются не при переходе на сайт, а только когда пользователь доходит до нужного места на странице.
<body>
<img src="https://via.placeholder.com/600x400?text=Lazy+Loaded" loading="lazy" alt="Ленивая загрузка">
</body>И для предварительной загрузки шрифтов и скриптов:
<head>
<meta charset="UTF-8">
<title>Предзагрузка шрифтов</title>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf" as="font" type="font/woff2" crossorigin="anonymous">
<style>
body {
font-family: 'Roboto', Arial, sans-serif;
}
</style>
</head>Эти методы значительно ускорили работу сайтов. Ленивая загрузка уменьшала первичное время загрузки страниц с большим количеством контента, экономя трафик пользователей. Предварительная загрузка позволяла браузеру заранее подготовить важные файлы, улучшая скорость отображения. Если раньше подобные задачи решались сложными JavaScript-скриптами, то теперь это стандартные функции HTML.
№7. Упростить автозаполнение форм
Зачем: создать подсказки для заполнения форм без лишних скриптов и тяжелого кода.
Вместо скриптов и библиотек веб-мастера используют тег <datalist> для создания списков автозаполнения:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Автозаполнение форм</title>
</head>
<body>
<h1>Введите название браузера</h1>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
<option value="Opera">
</datalist>
</body>
</html>Как это выглядело на сайте:
До появления <datalist> веб-разработчики создавали сложные JavaScript-решения для автозаполнения. Нативный HTML5-элемент простой, легковесный и не требует подключения дополнительных библиотек. Тег позволяет создавать интерактивные подсказки на основе введенной информации прямо в HTML.
Описанные приемы — не просто технические курьезы, а важный этап развития интернета. Ведь каждое нестандартное решение тогда было шагом к удобным сайтам. Конечно, сейчас можно посмеяться над странными решениями, но такой подход двигал технологии вперед.
Комментарии (7)
PaulZi
14.02.2025 10:55Куда больший хак было использование float для верстки, т. к. по сути это просто свойство для обтекания картинок текстом.
А так ещё из типичных костылей ранней верстки - это создание закругленных углов кнопок и блоков через картинки.
lifestyle
14.02.2025 10:55Я был там, Гэндальф...
Еще поддержка прозрачных png, было той ещё болью в IE)
born86
Когда-то напишут, что в далёком 2025 люди собирали js в бандлы, использовали react, препроцессоры и прочие костыли, использовали раздутую базу npm, которая валила проекты при обновлении, бескультурие обновления модулей без обратной совместимости и прочее. Когда-то, когда движки будут эксклюзивными поставщиками универсальных технологий, инструкций и удобных инструментов.
johnfound
И это все напишут в статье на gemini техноблоге.
И кстати, это не троллинг – когда Интернет перекинется между планетами, то вспомнят все эти старые технологии на новый лад.