Внимание, в этой статье хранятся уникальные секреты (🤐), о существовании которых разработчики обычно не подозревают. Надеемся они будут вам интересны.
Тег <datalist>
С помощью тега <datalist> вы можете создать «autocomplete» для <input> элементов, а именно выпадающий список предопределенных параметров.
<input list="cars" name="car" id="car">
<datalist id="cars">
<option value="BMW">
<option value="Mustang">
<option value="Sienna">
<option value="Avalon">
<option value="Fortuner">
</datalist>
Функция CSS calc()
Функция calc() дает возможность рассчитать значения свойств CSS во время их определения. Более детально можно ознакомиться здесь: MDNWebDocs Самое полезное свойство функции calc() состоит в том, что она позволяет совмещать единицы измерения, например, проценты и пиксели, а затем рассчитывает их общее значение. Это позволяет делать стили динамическими.
width: calc(5px + 100px) width: calc(6em * 8) width: calc(100% - 5px)
Оператор in
Оператор in может проверить, существует ли индекс в массиве, и вернет true или false.
let cars = ['tesla', 'bentley', 'mustang', 'fortuner', 'Audi', 'BMW']; 0 in cars // returns true 2 in cars // returns true 9 in cars // returns false
console.table()
Это очень крутая фишка! Функция console.table() записывает сообщение в виде таблицы в консоль либо в терминал, принимая массив объектов.
let actor = {name: 'Leonardo Di Caprio', movie: "Titanic"}
let actor2 = {name: "Shah Rukh Khan", movie: "DDLJ"}
let actor3 = {name: "Robert Downey JR", movie: "Iron Man 2"}
console.table([actor, actor2, actor3]);
Writing mode
Позволяет выводить текст вертикально.
<p class="nlt">Subscribe to DevWriteUps</p>
<style>
.nlt {
writing-mode: vertical-rl;
}
</style>
Legalals или TnC
Вы можете добавлять ссылки, цитаты, положения, условия пользования и сотрудничества, любую другую информацию внизу своей страницы с помощью тега <small>. Тег пропорционально уменьшает шрифт текста.
<p> <small>* Please read Terms and Conditions</small </p>
Математические уравнения
В HTML5 предусмотрена возможность встраивания и вывода математических уравнений, числовых задач, использование языка MathML. Просто нужно поместить все свои вычисления между тегами <math> и можно будет использовать другие математические теги. Пример уравнения:
<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
Селектор для выбора непосредственного дочернего элемента >
Использование знака > для выбора непосредственного дочернего элемента.
#footer > a
Напомним, дочерним элементом считается таковой, который в дереве элементов находится прямо внутри родительского элемента.
В нашем примере мы обращаемся ко всем элементам а внутри footer Прием используется для стилизации либо поиска элементов на странице по css либо Xpath.