Всем привет✌️
На этом канале собраны html, css и js трюки которые сделают из вас ниндзя веб разработки.
Следите за обновлениями, контент постоянно пополняется.

background-blend-mode

Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.

Возможные значения:
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light

Когда-нибудь работали с Photoshop? Тогда, думаю, вы понимаете, о чем идет речь.

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

https://codepen.io/nerdy-girl/pen/dxZyOL

scroll-behavior

Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы без JavaScript:

https://codepen.io/harryheman/pen/vYxKXGz

text-overflow

Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера.

p {
  text-overflow: ellipsis;
}

caret-color

Свойство caret-color позволяет определять цвет каретки — видимого маркера (|), указывающего на место вставки следующего символа.

textarea {
  caret-color: #00b74a;
}

scroll-snap

Группа свойств scroll-snap (scroll-span-type, scroll-snap-align и scroll-snap-stop) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:

Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS.

https://codepen.io/harryheman/pen/QWjgqWw

@supports

Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.

/* проверяем поддержку свойств `grid` и `image-rendering` */
@supports (display: grid) {
  section {
    display: grid;
  }
}

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

:target

Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript:

https://codepen.io/harryheman/pen/yLMJaVO

::marker

Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after. Сейчас существует более простой способ — псевдоэлемент ::marker.

https://codepen.io/harryheman/pen/gOmMwLE

::selection

Псевдоэлемент ::selection позволяет стилизовать выделение текста.

p::selection {
  background-color: #262626;
  color: #fbfbfb;
}

background-clip

Свойство CSS background-clip определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

https://codepen.io/gregh/pen/dNyWRP

Сокращение с помощью AND

Давайте рассмотрим ситуацию, в которой у нас есть логическое значение и функция.

let isPrime = true;
const startWatching = () => {
    console.log('Started Watching!');
}

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

if (isPrime) {
    startWatching();
}

А как насчёт использования сокращённой записи вместе с оператором AND (&&)? Да, условный оператор "if" нам больше не нужен. Круто, правда?

isPrime && startWatching();

Значение по умолчанию с помощью OR

Если для переменной необходимо предусмотреть запасное значение по умолчанию, это достаточно просто реализуется с помощью оператора OR.

let person = {name: 'Jack'};

// если свойство "age" равно "undefined", устанавливает значение 35
let age = person.age || 35;

console.log(`Age of ${person.name} is ${age}`);

Максимальная оптимизация загрузки изображений для Интернета в 2021 году

8 методов оптимизации загрузки изображений, позволяющие минимизировать как трафик, используемый для загрузки картинок в Интернет, так и использование ЦП для отображения фотографий.

https://dzen.ru/a/YNQqPDL6bjwY1eRm