Привет, Хабр! Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 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.
Описанные приемы — не просто технические курьезы, а важный этап развития интернета. Ведь каждое нестандартное решение тогда было шагом к удобным сайтам. Конечно, сейчас можно посмеяться над странными решениями, но такой подход двигал технологии вперед.
ссылка на оригинал статьи https://habr.com/ru/articles/882574/
Добавить комментарий