Читайте нас в телеграм:

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логический задачи с айтишных собеседований

8 фишек фронтенд-разработки, о которых знают далеко не все

Внимание, в этой статье хранятся уникальные секреты (🤐), о существовании которых разработчики обычно не подозревают. Надеемся они будут вам интересны.

Тег <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.

Читайте также

Обсуждение

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

читайте нас в телеграм

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логические задачи на собеседованиях в IT

Фронтендер от бога

Божественный канал о тестировании

Mobile Dev Lib

Популярное

Делаем все правильно: проект на Python в 2021

Цель данного Руководства - описать правильную экосистему разработчика Python в 2021 году. Оно будет полезно любому, кто пришел в Python, зная другой язык программирования.

Как я делал канбан, и что из этого вышло

Советы опытного разработчика по стеку React + React Native + Next.js. Приложение Kanban Brisqi

Пишем простой Twitter-бот на Python: Tweepy

Как сделать бот для Twitter - при помощи библиотеки Tweepy