История HTML и CSS. Какие элементы и свойства ушли навсегда

melnik9099 минут назадОбъяснить с

История HTML и CSS. Какие элементы и свойства ушли навсегда

Уровень сложностиСреднийВремя на прочтение6 минОхват и читатели245Блог компании RUVDS.comВеб-разработка*HTML*CSS*ОбзорХабр, привет.

Многие люди с интересом относятся к истории. Читают книги, рассматривают архитектуру городов, смотрят фильмы времени наших родителей. Мне кажется, веб достиг периода, когда мы можем с интересом поговорить о прошлом HTML и CSS.

Сегодня я пришел к вам, чтобы оглянуться немного назад и вспомнить фичи, которые когда-то были частью веба. Возможно, некоторые из них вы когда-то даже использовали.

Давайте посмотрим, что я вам подготовил.

Элемент marquee

Вы помните уличную рекламу с бегущими строками? В моём городе редко, но всё же можно её встретить. А вот из веба бегущая строка совсем ушла в прошлое. Наверное, она осталась только на нишевых сайтах.

А я помню элемент marquee. Он создавал бегущую строку на сайтах. В школе я его использовал для своего сайта о футбольном клубе «Локомотив» (Москва). Помню, как вставил текст «Локомотив — чемпион России 2004».

<body>
<marquee height="200">Локомотив чемпион России 2004</marquee>
</body>На самом деле элемент marquee прикольный. У него есть достаточно много возможностей. Например, мы можем менять направление анимации на вертикальное, указав значение down для атрибута direction.

<body>
<marquee scrolldelay="50" direction="down" height="200">Локомотив чемпион России 2004</marquee>
</body>Можно задавать скорость анимации с помощью атрибута scrollamount. Например, я укажу 50 миллисекунд.

<body>
<marquee scrolldelay="50" direction="down" height="200">Локомотив чемпион России 2004</marquee>
</body>Даже можно включить обратную анимацию, указав значение alternate для атрибута behavior. В этом случае текст будет доходить до границ элемента и возвращаться обратно.

<body>
<marquee behavior="alternate" scrolldelay="50" direction="down" height="200">Локомотив чемпион России 2004</marquee>
</body>Вот такие бегущие строки можно было реализовывать с помощью элемента marquee. Хотя есть ещё один плюс.

В своих примерах я не стилизовал текст, но в реальных проектах, конечно, он был ещё более ярким. Особенно мне запомнились красные буквы на чёрном фоне.

Элемент applet

Двадцать лет назад возможности JavaScript были ограничены. Их фактически было мало, да ещё кроссбраузерная поддержка хромала. По этой причине интерактивность интерфейса была элементарной.

Правда, программисты хотели как-то разнообразить пользовательский опыт. Даже думали заменить сам JavaScript. Хорошо же, что не стали. Правда?

Хотя был ещё один способ добавить интерактивность в интерфейс пользователя. Вы помните элемент applet? Именно он какое-то время позволял вставить на страницу разнообразные интерактивные элементы. Текущее время, анимация и, конечно же, калькуляторы!

Это было возможно, если разработчик написал мини-программу на языке Java и подключил её на странице с помощью элемента applet, указав в атрибуте code имя Java-класса с логикой. Например, я это сделаю, чтобы отобразить текущее время.

<body>
<applet code="Clock.class" width="400" height="500">
К сожалению, не получилось отобразить текущее время.
</applet>
</body>Если же у разработчика была более сложная логика, он мог подключать целые JAR-архивы, содержащие вспомогательные ресурсы мини-программы. Для этого использовался атрибут archive.

<body>
<applet code="Clock.class" archive="resources.jar" width="400" height="500">
К сожалению, не получилось отобразить текущее время.
</applet>
</body>По умолчанию подключаемый класс должен был находиться рядом с HTML-файлом. Это было не всегда удобно, поэтому также была возможность указать другой путь с помощью атрибута codebase.

<body>
<applet code="Clock.class" codebase="/applets/" archive="resources.jar" width="400" height="500">
К сожалению, не получилось отобразить текущее время.
</applet>
</body>Вот таким был один из способов создания интерактивности интерфейсов раньше. Не сказать, что пользователи получали большие возможности от элемента applet, но всё же он оставил свой след в истории веба.

Элемент center

Как вы будете центрировать текст? Большинство читателей недоумённо подумают о свойстве text-align со значением center. Коллеги, просто вы не так давно знакомы с вёрсткой, как я. Раньше был совсем другой способ.

Центрирование контента — задача очень древняя. Вообще-то таким способом многие разработчики выделяли свои сайты. Это была изюминка! Правда, в те времена ещё не было свойства text-align, а был элемент center.

Как вы догадались из названия, он центрировал контент. Например, я размечу элементом свою фотографию и текст.

Моя фотография и текст находятся строго по центру! Всё так, как было, когда я делал свою первую веб-страничку в школе. Кстати, я до сих пор помню, как меня бесило писать HTML в обычном блокноте. Прошло двадцать лет.

Свойства float и clear

Сегодня задача по расположению элементов в строку не является проблемой. Есть флексбоксы и CSS-гриды. А я застал время, когда их не было. Мне приходилось использовать свойство float.

Давайте попробуем расположить два элемента в строку, задав значение left.

<body>
<div class="awesome-container">
<div class="awesome-block">Первый</div>
<div class="awesome-block">Второй</div>
</div>
</body>.awesome-block {
width: 250px;
height: 250px;
float: left;
}У нас получилось! Элементы расположены в строку. Казалось бы, всё отлично. Но разработчики моего поколения горьким опытом научились не торопиться с выводами.

Давайте добавим свойство border к родительскому элементу.

.awesome-container { border: 2px solid; }

.awesome-block {
width: 250px;
height: 250px;
float: left;
}Мы видим, что рамка схлопнута. Как будто родительский элемент пустой.

Да, это негативное последствие свойства float. Оно «вытаскивает» элементы из своего окружения, и поэтому они становятся «невидимыми» для родительского и соседних элементов.

Для решения этой задачи мы использовали костыль. Создавали пустой элемент div. Ему добавляли класс clearfix, а также для него объявляли свойство clear со значением both.

<body>
<div class="awesome-container">
<div class="awesome-block">Первый</div>
<div class="awesome-block">Второй</div>
<div class="clearfix"></div>
</div>
</body>.awesome-container {
border: 2px solid;
}

.awesome-block { width: 250px; height: 250px; float: left; }

.clearfix {
clear: both;
}Мы очистили действие свойства float. Браузеры отобразили родительский элемент с корректной высотой. Только теперь уже можно спокойно выдохнуть.

Свойство zoom

Многие коллеги всегда удивлялись тому, что масштабирование элемента с помощью трансформации является не единственным способом. Спасибо нужно сказать браузеру Internet Explorer, в котором было свойство zoom.

Данное свойство также масштабирует элемент, как делает это свойство scale или функция scale(). Только они работают совершенно по-разному.

<body>
<div class="awesome-block">
<img src="https://assets.codepen.io/151389/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1505459000&width=512" width="128" alt="">
<p>Этот пример с scale</p>
</div>
<div class="awesome-block">
<img src="https://assets.codepen.io/3893640/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1764711425&width=512" width="128" alt="">
<p>Этот пример с zoom</p>
</div>
</body>.awesome-block:nth-child(1) img {
scale: 1.5;
}

.awesome-block:nth-child(2) img {
zoom: 1.5;
}Пожалуйста, обратите внимание на текст под изображением. В примере со свойством scale изображение перекрывает его, поэтому его не видно. Свойство zoom же не скрывает текст. Он просто сместился ниже и всё так же видим.

Так получается, потому что браузеры рассчитывают геометрию элементов, которых касается элемент с объявленным свойством zoom. При трансформации этого не происходит. Браузеры переносят элемент на другой слой и масштабируют.

А теперь самое интересное. До появления свойства transform в вебе не было масштабирования. Свойство zoom не использовалось по назначению, потому что оно существовало только в браузере Internet Explorer.

Эта особенность помогала разработчикам бороться с багами браузера. Возможно, вы когда-то видели код, где свойство zoom объявлено со значением 1.

.clearfix {
*zoom: 1;
}Данный код помогал браузеру корректно отображать элементы в разных ситуациях, связанных с позиционированием элемента. Например, свойство zoom помогало корректно отображать свойство float в браузере Internet Explorer версий 6 и 7.

И это не единственный случай. Свойство zoom добавляли в самые разные места. Для демонстрации я посмотрел первую версию библиотеки Twitter Bootstrap. Там свойство zoom использовалось в классе .container.

.container {
width: 940px;
margin: 0 auto;
zoom: 1;
}Для читателей, которые никогда не использовали библиотеку Twitter Bootstrap, сделаю ремарку. Класс .container использовался в качестве основного элемента страницы, который задавал ширину и центрировал всё содержимое.

Вот представьте, как весело было нам, что свойство zoom добавлялось даже при центрировании контента.

Думаете, это всё? Нет, свойство zoom даже использовалось для корректного отображения элементов audio, canvas и video в библиотеке normalize.css, когда они только появились в браузерах.

/* * Corrects inline-block display not defined in IE6/7/8/9 & FF3 */

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

Заключение

Вот такие возможности мы перестали использовать со временем. Это то, что я запомнил. Конечно, это не всё, и поэтому хочется узнать ещё.

У меня есть просьба к вам. Поделитесь в комментариях своими возможностями HTML и CSS, которые ушли в прошлое. Это могут быть атрибуты, элементы, свойства. Спасибо.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих ТГ‑каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

© 2026 ООО «МТ ФИНАНС»Теги:• html
• css
• веб-разработка
• фронтенд
• браузеры
• вёрстка
• устаревшие технологии
• legacy
• ruvds_статьиХабы:• Блог компании RUVDS.com
• Веб-разработка
• HTML
• CSS