Застарілі теги

Теги, які потрібно видалити з коду та замінювати на сучасні аналоги.

Оновлено 1 серпня 2024

У міру розвитку веб-технологій з'являються нові теги та CSS-властивості. Але деякі теги старіють, і їх використання вже не є гарною практикою. Є й такі, які вже не підтримуються браузером або ніколи не були частиною специфікації W3C.

Що робити, якщо у вашому проекті зустрінеться один із таких тегів? Чи є сучасна заміна чи альтернатива?

Список всіх застарілих тегів та властивостей у специфікації HTML.

Розмітка тексту

Скопіювати посилання "Розмітка тексту" Скопійовано

- акроніми та абревіатури

Скопіювати посилання "acronym - акроніми та абревіатури" Скопійовано

Акронім - вид абревіатури. Акроніми утворюються початковими звуками. Фактично, акронім є словом, що є скороченням, яке можна вимовити разом, на відміну від інших видів абревіатур, які вимовляють «за буквами», наприклад: СНД — [ес-ен-ге], МВС — [ем-ве-де] .

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

Для опціонального розшифрування абревіатури або цілого тексту пояснення відображається у підказці під час наведення курсору.

приклад

Скопіювати посилання "Приклад" Скопійовано

GIF - Застарілий формат графіки
acronym
title="Graphics Interchange Format"> GIF acronym> - Застарілий формат графіки

Копіювати
Скопійовано
Не вдалося скопіювати

Незважаючи на те, що слово GIF дуже схоже на абревіатуру, вимовляють його одним словом «гіф», а не «джи-ай-еф» навіть в англійській мові.

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Для цього є сучасна альтернатива — .

- миготливий текст

Скопіювати посилання "blink - миготливий текст" Скопійовано

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

Для візуального виділення тексту, який буквально буде блимати.

приклад

Скопіювати посилання "Приклад" Скопійовано

Навіщо комусь так робити? Виглядає не гуманно.
blink>Навіщо комусь так робити? Виглядає не гуманно.blink>


Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Складно придумати реальний випадок, коли подібна візуальна поведінка не матиме ефект, що явно відволікає, але якщо дуже хочеться, можна повторити подібне за допомогою CSS:

blink  animation: 2s linear infinite condemned_blink_effect;>
@keyframes condemned_blink_effect  0%  visibility: hidden;
>
50%  visibility: hidden;
>
100%  visibility: visible;
>>
blink

animation:
2s linear infinite condemned_blink_effect;
>
@keyframes condemned_blink_effect

0%

visibility: hidden;
>
50%

visibility: hidden;
>
100%

visibility: visible;
>
>


Копіювати
Скопійовано
Не вдалося скопіювати

- стилізація тексту

Скопіювати посилання "font - стилізація тексту" Скопійовано

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

До повноцінної підтримки браузерами стилізації тексту за допомогою CSS це був єдиний спосіб змінити колір, шрифт або розмір. На жаль, для верстки листів під клієнтів, які не підтримують CSS, це залишається єдиною можливістю змінити зовнішній вигляд тексту.

приклад

Скопіювати посилання "Приклад" Скопійовано

Летіли два крокодила.Один - зелений, а інший - до Африки.
Летіли два font
size="+1">крокодилаfont>. Один - font
color="green">зеленийfont>, а інший - до Африки.

Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Сучасні можливості CSS надають набагато більше можливостей для стилізації тексту:

h1  font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнітура шрифту */
font-size: 150%; /* Розмір тексту */
font-weight: lighter; /* Світле зображення */>
.text_color_green  color: green; /* Колір тексту */>
.text_style_italic  font-style: oblique; /* Похилий шрифт */>
.text_transform_uppercase  text-transform: uppercase; /* Всі букви - великі */>
.text_emphasis  letter-spacing: .5em; /* Міжлітерний інтервал (трекінг) */
word-spacing: 2em; /* Відстань між словами (ширина пробілу) */
text-shadow: 3px 5px 6px #6C9; /* Тінь */>
h1

font-family: Arial, Helvetica, Verdana, sans-serif;
/* Гарнітура шрифту */
font-size:
150%;
/* Розмір тексту */
font-weight: lighter;
/* Світле зображення */
>
.text_color_green

color:
green;
/* Колір тексту */
>
.text_style_italic

font-style: oblique;
/* Похилий шрифт */
>
.text_transform_uppercase

text-transform: uppercase;
/* Всі букви - великі */
>
.text_emphasis

letter-spacing:
.5em;
/* Міжлітерний інтервал (трекінг) */
word-spacing:
2em;
/* Відстань між словами (ширина пробілу) */
text-shadow:
3px
5px
6px
#6C9;
/* Тінь */
>


Копіювати
Скопійовано
Не вдалося скопіювати

- Нерозривний текст

Скопіювати посилання "nobr - нерозривний текст" Скопійовано

Тег використовувався для заборони перенесення тексту на новий рядок. За замовчуванням, якщо текст не розміщується по ширині, він автоматично розбивається на найближчому символі пробілу і переноситься на новий рядок. Текст, поміщений у тег, зберігатиме свою однорядковість і може призвести до появи смуги прокручування.

Тег ніколи не був частиною специфікації W3C, його підтримка – особиста ініціатива кожного браузера.

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

Хорошим тоном вважається використання склеювання спілок та прийменників з наступним словом, одиниць виміру.

приклад

Скопіювати посилання "Приклад" Скопійовано

Сучасні технології досяглитакого рівня…кластеризації зусиль
Сучасні технології досягли nobr>такого рівня…nobr> кластеризації зусиль

Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Для коротких текстів, коли потрібно з'єднати пару слів або символів, можна використовувати нерозривну прогалину ( , та інші):

У вашому кошику товарів на 1 200 ₽
У вашому кошику товарів на 1 200 ₽


Копіювати
Скопійовано
Не вдалося скопіювати

Для інших випадків є відповідна CSS-властивість:

Сучасні технології досяглитакого рівня…кластеризації зусиль
Сучасні технології досягли span
style="white-space: nowrap">такого рівня…span> кластеризації зусиль

Копіювати
Скопійовано
Не вдалося скопіювати

Для великих об'ємів тексту простіше скористатися програмами-типографами, які можуть автоматично розставити символи нерозривної прогалини, наприклад, друкар Артемія Лебедєва або друкар Євгена Лепешкіна.

- Закреслений текст

Скопіювати посилання "strike - закреслений текст" Скопійовано

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

Для позначення тексту, який втратив свою актуальність, наприклад, зміни ціни: «Розпродаж: 1200 990 ₽»

приклад

Скопіювати посилання "Приклад" Скопійовано

Розпродаж: 1200 990 ₽
Розпродаж: strike>1200strike> 990 ₽

Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Розпродаж: 1200 ₽
990 ₽
Розпродаж: del>1200 ₽del>
ins>990 ₽ins>


Копіювати
Скопійовано
Не вдалося скопіювати

А для ситуації, коли потрібно просто закреслити текст, додали більш скорочений запис:

Блокові елементи

Скопіювати посилання "Блокові елементи" Скопійовано

- Вбудований Java-аплет

Скопіювати посилання "applet - вбудований Java-аплет" Скопійовано

Підтримка цього тега збереглася лише в Internet Explorer та Safari.

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

До заходу Adobe Flash можливості динамічного контенту в браузері були дуже обмежені. Тег дозволяв вбудувати у сторінку цілу програму зі своїм інтерфейсом, написану Java.

приклад

Скопіювати посилання "Приклад" Скопійовано

Вибачте, у вас не встановлена ​​Java,
або ваш браузер не підтримує вбудовані Java-аплети.


applet
code="game.class"
archive="game.zip"
height="250"
width="350">
param
name="difficulty"
value="easy">
p>Вибачте, у вас не встановлена ​​Java, або ваш браузер не підтримує вбудовані аплети.p>
applet>


Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Сучасні браузери підтримують «вбудований вміст» за допомогою тега:

data="/media/examples/In-CC0.pdf"
width="250"
height="200">

object
type="application/pdf"
data="/media/examples/In-CC0.pdf"
width="250"
height="200">
object>


Копіювати
Скопійовано
Не вдалося скопіювати

- фонова музика

Скопіювати посилання "bgsound - фонова музика" Скопійовано

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

приклад

Скопіювати посилання "Приклад" Скопійовано

bgsound
src="sound2.mid"
loop="infinite">


Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Для контрольованого відтворення аудіофайлів або .

- центрування контенту

Скопіювати посилання "center — центрування контенту" Скопійовано

Досить популярний тег навіть у наші дні, наприклад, при верстках листів — поштові клієнти можуть не підтримувати або просто вирізати стилі і часом це єдиний спосіб центрування.

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

Для вирівнювання вмісту у центрі батьківського блоку.

приклад

Скопіювати посилання "Приклад" Скопійовано

Мамо, дивися – я в центрі!
center>Мамо, дивися – я в центрі!center>


Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Мамо, дивися – я в центрі!


Цей вкладений блок центровано по горизонталі.


div
class="title-center">Мамо, дивися – я в центрі!div>
div
class="parent">
div
class="child"> Цей вкладений блок центровано по горизонталі. div>
div>


Копіювати
Скопійовано
Не вдалося скопіювати

.title-center  text-align: center;>
.parent  width: 500px;
border: solid;>
.child  margin: 0 auto;
width: 400px;
height: 400px;
border: solid;>
.title-center

text-align: center;
>
.parent

width:
500px;
border: solid;
>
.child

margin:
0 auto;
width:
400px;
height:
400px;
border: solid;
>


Копіювати
Скопійовано
Не вдалося скопіювати

— рядок, що біжить

Скопіювати посилання "marquee — рядок, що біжить" Скопійовано

Тег дозволяє задати область, в якій вміст буде зациклено рухатися заданою траєкторією (горизонтально, вертикально або відбиваючись від країв).

Коли використовувалося

Скопіювати посилання "Коли використовувалось" Скопійовано

Чітких рекомендацій, коли корисний цей прийом, немає. Швидше за все, саме тому був згодом вилучений зі специфікації. Була ідея перенести ефект CSS, але від неї відмовилися.

приклад

Скопіювати посилання "Приклад" Скопійовано

Цей текст рухатиметься праворуч наліво
Цей текст рухатиметься знизу вгору


Цей текст відображатиметься від стінок


marquee>Цей текст рухатиметься праворуч налівоmarquee>
marquee
direction="up">Цей текст рухатиметься знизу вгоруmarquee>
marquee
direction="down"
width="250"
height="200"
behavior="alternate"
style="border:solid">
marquee
behavior="alternate"> Цей текст відображатиметься від стінок marquee>
marquee>


Копіювати
Скопійовано
Не вдалося скопіювати

Чим замінити

Скопіювати посилання "Чим замінити" Скопійовано

Сучасних аналогів немає, можна зімітувати анімацію за допомогою JavaScript або CSS.

Showreel
Showreel
Showreel
Showreel


div
class="marquee">
div
class="marquee__inner"
aria-hidden="true">
span
class="marquee__content">Showreelspan>
span
class="marquee__content">Showreelspan>
span
class="marquee__content">Showreelspan>
span
class="marquee__content">Showreelspan>
div>
div>


Копіювати
Скопійовано
Не вдалося скопіювати

.marquee  position: relative;
overflow: hidden;
--offset: 20vw;
--move-initial: calc(-25% + var(--offset));
--move-final: calc(-50% + var(--offset));>
.marquee__inner  width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(-move-initial), 0, 0);
animation: marquee 5s linear infinite;
animation-play-state: paused;>
.marquee__content  font-size: 10vw;
padding: 0 2vw;>
.marquee:hover .marquee__inner  animation-play-state: running;>
@keyframes marquee  0%  transform: translate3d(var(-move-initial), 0, 0);
>
100%  transform: translate3d(var(-move-final), 0, 0);
>>
.marquee

position: relative;
overflow: hidden;
--offset:
20vw;
--move-initial:
calc(-25%
+
var(--offset));
--move-final:
calc(-50%
+
var(--offset));
>
.marquee__inner

width: fit-content;
display: flex;
position: relative;
transform:
translate3d(var(--move-initial),
0,
0);
animation: marquee 5s linear infinite;
animation-play-state: paused;
>
.marquee__content

font-size:
10vw;
padding:
0
2vw;
>
.marquee:hover
.marquee__inner

animation-play-state: running;
>
@keyframes marquee

0%

transform:
translate3d(var(--move-initial),
0,
0);
>
100%

transform:
translate3d(var(--move-final),
0,
0);
>
>


Копіювати
Скопійовано
Не вдалося скопіювати

Анімація відтворюється при наведенні курсору або при тапі:

Висновок

Скопіювати посилання "Висновок" Скопійовано

Автори специфікацій постійно ведуть роботу над покращенням користувальницького та розробчого досвіду (UX і DX), потенційно шкідливі теги ( , , ) видаляються зі специфікації, замінюються на семантичні ( замість ) або переносять управління на рівень CSS ( , ). Деякі з таких тегів можна зустріти в коді і зараз, але розробники браузерів не гарантують, що незабаром збережеться їхня підтримка — їх краще замінити на сучасний аналог або переглянути, наскільки доцільним є його використання в принципі.

Переповнення вмісту

В цьому уроці ми розглянемо іншу важливу концепцію в CSS. переповнення. Переповнення це те, що трапляється, коли занадто багато контенту міститься всередині блоку. У цьому гайді ви вивчите, що це і як цим керувати.

Що таке переповнення?

Ми вже знаємо, що все в CSS - блоки, і що ми можемо обмежувати розмір цих блоків, привласнюючи їм певне значення за допомогою width і height (або inline-size та block-size). Переповнення це те, що трапляється, коли у вас занадто багато контенту в блоці, так що він не міститься в обмежений розмір. CSS дає нам різні інструменти керування переповненням, і це також корисна концепція для розуміння на цій ранній стадії. Ви будете зустрічатися з переповненням досить часто, коли пишіть CSS, особливо коли глибше поринете в CSS розкладку.

CSS намагається уникнути "втрати даних"

Розглянемо два приклади, що демонструють поведінку CSS за умовчанням у разі переповнення.

Перший приклад — це блок, обмежений встановленим параметром height . Потім ми додали контент, що перевищує виділений простір. Контент вийшов за межі поля та потрапив до абзацу нижче.

Другий приклад – слово в блоці. Блок виявився надто маленьким для цього слова, і тому воно виходить за його межі.

Ви можете поставити запитання, чому CSS працює так неакуратно, відображаючи контент за межами призначеного для нього блоку. Чому б не приховувати контент, що виходить за межі? Чому б не масштабувати розмір блоку, щоб він відповідав розміру вмісту?

По можливості CSS не приховує контент, тому що це може призвести до втрати даних. Проблема полягає в тому, що ви не можете помітити зникнення даних. Відвідувачі сайту можуть не помітити цього.Якщо кнопка надсилання форми зникне і ніхто не може заповнити форму, це може стати великою проблемою! Тому, замість того, щоб приховувати контент, що виходить за межі блоку, CSS явно його відображає. Так ви з більшою ймовірністю побачите проблему розробки. У гіршому випадку це помітить відвідувач сайту та повідомить вас про це.

Якщо ви обмежуєте поле за допомогою параметрів width або height, CSS довіряє вам і вважає, що ви знаєте, що робите. CSS передбачає, що ви керуєте ситуацією та передбачаєте можливість виникнення переповнення. Загалом, обмеження розміру блоку є проблематичним, якщо він містить текст. У цьому місці може бути більше тексту, ніж ви очікували або його розмір може бути більшим (наприклад, якщо користувач збільшив розмір шрифту).

У двох уроках пояснюються різні підходи управління розмірами, які дозволяють зменшити ймовірність виникнення переповнення. Однак, якщо вам потрібний фіксований розмір блоку, ви також можете контролювати поведінку переповнення.

Властивість overflow

Властивість overflow дозволяє взяти під контроль переповнення елемента і підказати браузеру, як він повинен поводитися. Значення overflow за замовчуванням – visible , що означає – «показувати контент, коли він виходить за межі блоку».

Щоб обрізати контент, що виходить за межі блоку, ви можете встановити overflow: hidden . Ця властивість робить саме те, про що говорить: приховує контент, що виходить за межі. Пам'ятайте, що це може зробити частину вмісту невидимим. Використовуйте це значення лише тоді, коли приховування вмісту не викликає проблем.

Можливо, що при переповненні замість приховування ви захочете відобразити смуги прокручування. При використанні overflow: scroll браузери з видимими смугами прокручування завжди відображатимуть їх, навіть якщо вмісту недостатньо для виникнення перекриття. Це дозволяє зберегти цілісність розкладки, оскільки смуги прокручування не з'являтимуться і пропадатимуть в залежності від кількості вмісту в контейнері.

Видаліть частину вмісту з поля нижче. Зверніть увагу, що смуги прокручування залишаються, навіть якщо прокручування не потрібно.

У наведеному вище прикладі нам потрібно прокручувати вміст тільки по осі y, однак ми отримуємо смуги прокручування по обох осях. Ви можете використовувати властивість overflow-y, яка дозволяє прокручувати вміст тільки по осі y.

Ви також можете встановити прокручування по осі x за допомогою overflow-x, але це не рекомендований спосіб відображення довгих слів! Якщо ви маєте довге слово в маленькому полі, ви можете використовувати властивості word-break або overflow-wrap . Крім того, деякі методи, описані в розділі Зміна розмірів CSS, можуть допомогти вам створювати блоки, які краще масштабуються з різним обсягом вмісту.

Як і у випадку зі scroll, ви отримуєте смугу прокручування незалежно від того, чи достатньо вмісту для її появи.

Примітка: Ви можете точно встановити прокручування по осях x і y, використовуючи властивість overflow , передавши два значення. Перше значення буде відноситися до overflow-x, а друге - до overflow-y. Якщо передати одне значення, overflow-x і overflow-y отримають однакові значення. Наприклад, overflow: scroll hidden встановлює overflow-x в scroll і overflow-y в hidden .

Якщо ви бажаєте, щоб смуги прокручування відображалися лише тоді, коли вміст більше, ніж може поміститися в полі, використовуйте overflow: auto . Це дозволяє браузеру автоматично визначати, чи слід відображати смуги прокручування.

У наведеному нижче прикладі зменшіть кількість вмісту так, щоб він помістився в полі. Ви повинні побачити, що смуги прокручування зникнуть.

Overflow встановлює контекст форматування блоку

Коли ви використовуєте значення overflow, як scroll або auto , ви створюєте контекст форматування блоку (BFC). Вміст блоку, для якого ви встановили параметр overflow, набуває автономної розкладки. Контент поза блоком не може проникнути в блок, і ніщо не може вилізти з цього блоку в навколишній простір. Це дає можливість прокручувати вміст, щоб він не виходив за межі блоку.

Небажане переповнення у веб-розробці

Сучасні методи розкладки (описані в розділі CSS розкладка) справляються з переповненням дуже добре, незалежно від того, скільки контенту буде на веб-сторінці.

Це не завжди було нормою. У минулому деякі сайти були побудовані з фіксованими блоками висоти для вирівнювання нижніх кордонів блоків. Проте ці блоки могли мати нічого спільного між собою. Це була тендітна конструкція. У застарілих програмах ви можете зустріти блок, в якому вміст перекриває інший вміст на сторінці. Тепер ви розумієте, що це відбувається через переповнення. В ідеалі необхідно провести рефакторинг розмітки, щоб не покладатися на блоки з фіксованою висотою.

Під час розробки сайту завжди пам'ятайте про переповнення. Тестуйте дизайни як з великою, так і малою кількістю контенту. Перевірте різні розміри тексту шрифту.Переконайтеся, що ваш CSS працює надійно. Зміна значення overflow для приховування вмісту або додавання смуг прокручування, повинна використовуватися тільки при необхідності (наприклад там, де ви хочете використовувати блок, що прокручується).

Перевірте свої навички!

У цій статті ми розглянули багато, але ви можете згадати найважливішу інформацію? Ви можете знайти додаткові тести, щоб переконатися, що ви засвоїли цю інформацію, перш ніж рухатися далі – див. Перевір свої навички: переповнення.

Висновок

У цьому уроці було представлено концепцію переповнення. Важливо розуміти, що CSS за замовчуванням намагається уникнути обрізання вмісту, що виходить за межі блоку. Ми вивчили, як можна впоратися з переповненням, а також розглянули важливість тестування поведінки веб-сторінок як з малою кількістю контенту, так і з великою.

In this module

1. Каскад та успадкування
2. Селектори CSS
   • Селектори типу, класу та ID
   • Селектори атрибуту
   • Псевдокласи та псевдоелементи
   • Комбінатори
3. Блокова модель (The box model)
4. Фон та кордону
5. Обробка різних напрямів тексту
6. Переповнення вмісту
7. Значення та одиниці виміру
8. Розміри в CSS
9. Елементи зображень, форм та медіа-елементи
10. Стилізація таблиць
11. Налагодження CSS
12. Організація вашої CSS