Всем привет. В этой небольшой статье разберем еще некоторые новые атрибуты, которые появились в html5 , а именно: reversed , contenteditable и hidden .
Всем привет. В этой небольшой статье разберем еще некоторые новые атрибуты, которые появились в html5, а именно: reversed, contenteditable и hidden.
Reversed
Этот атрибут применяется к нумерованным спискам, и он просто меняет их порядок. Рассмотрим на примере.
<ol reversed>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ol>
В результате выполнения данного кода нумерация будет идти не по нарастающей(1,2,3...), а по убывающей(5,4,3...)
Contenteditable
Данный атрибут позволяет менять содержимое прямо на странице. Создадим блок и применим к нему наш новый атрибут.
<div contenteditable>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
Теперь, кликнув по любому месту блока, вы увидите рамку, которая означает, что вы можете редактировать содержимое блока. Например, стереть часть текста. Это очень удобно использовать в админ панели.
Hidden
Последний новый атрибут, который разберем в этом материале - hidden. По названию несложно догааться, что он делает. Данный атрибут просто скрывает любой элемент на странице, к которому он будет применен. Давайте, например, применим его к нашему блоку.
<div contenteditable hidden>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<p>Какой-то текст...</p>
Я не случайно добавил сюда еще и параграф. Сделано это для того, чтобы показать вам, что элемент с атрибутом hidden полностью исчезает со страницы и больше не занимает места вообще. В нашем случае на его месте будет параграф.
На этом все. Увидимся в следующих статьях.
