7 новых возможностей CSS, которые упростят вашу веб-разработку

Вы все должны быть знакомы с важностью CSS. Как это обратимая часть веб-разработки? Когда человек решает сделать шаг вперед в веб-разработке, HTML и CSS — это два самых важных навыка, которые ему необходимо освоить.

Без этого вы ничего не сможете сделать. HTML демонстрирует скелет веб-страницы, тогда как CSS отвечает за стиль и придает потрясающий вид.

Что нового? Обновление до CSS, которое вы можете протестировать и протестировать. Внедрение в проекты веб-разработки

С каждым обновлением новые функции CSS помогают создавать красивые макеты и вносить изменения в дизайн. У него есть потенциал, чтобы управлять эстетикой и действием даже без использования JavaScript. Вы можете сделать более чем достаточно, зная HTML и CSS.

Снимок прокрутки

Точная настройка возможностей прокрутки с помощью этого свойства привязки прокрутки, запущенного в CSS> Многие люди не знают о его существовании. Пользователи лучше контролируют положение контейнера и его поведение. Вы можете установить выравнивание контейнера с помощью scroll-snap-align. Кроме того, вы можете управлять типом как типом привязки прокрутки. Попробуйте это в редакторе кода IDE, чтобы увидеть динамический предварительный просмотр:

.scroll-container,
  .scroll-area {
    max-width: 850px;
    height: 300px;
    font-size: 60px;
  }

  .scroll-container {
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 500px;
  }

  .scroll-area {
    scroll-snap-align: start;
  }

  .scroll-container,
  .scroll-area {
    margin: 0 auto;
  }

  .scroll-area {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .scroll-area:nth-of-type(1) {  background: IndianRed; }
  .scroll-area:nth-of-type(2) {  background: Moccasin; }
  .scroll-area:nth-of-type(3) {  background: thistle; }
  .scroll-area:nth-of-type(4) {  background: seagreen; }
</style>

<div class="scroll-container">
    <div class="scroll-area">1</div>
    <div class="scroll-area">2</div>
    <div class="scroll-area">3</div>
    <div class="scroll-area">4</div>
</div>

Вы также можете определить поведение контейнеров с вложенными прокрутками. Вам нужно ввести свойство общего поведения там. Это не заботит ничего и приведет вас к детскому движению. Это все потому, что вы определили тип движения прокрутки как y required и выравнивание по start. ВЫ можете настроить вещи в соответствии со своими предпочтениями близости.

Последняя цветовая палитра

Все разработчики имеют доступ к трем цветам: RGB, HEX и название. Все три достаточно хороши, чтобы придать веб-странице привлекательный вид. Все пытаются придумать впечатляющие и инновационные вещи. В связи с этим для веб-дизайнеров были запущены еще три цветовые палитры. Это потребность сегодняшнего дня; люди изучают новые цветовые схемы и без колебаний пробуют последнюю версию.

| Цветовая палитра | Свойство с первой буквой | Свойство второй буквы | Свойство 3-й буквы | |----|----|----|----| | ХВБ | оттенок | Белизна | Чернота | | ЛАБОРАТОРИЯ | МКО легкость | Расстояние по оси А | Расстояние л | | ЛЧ | Легкость | цветность | оттенок |

HWB имеет лучшую удобочитаемость для человека. Вы можете сделать свою любимую цветовую комбинацию, добавив черный и белый. Он совместим с Chrome/Firefox и сафари. В дополнение к этому мы хотим сообщить вам, что он также совместим с прозрачностью альфа-канала.

Акцентный цвет для элементов отображения

Хотите сделать элементы дисплея более крутыми и привлекательными? Вот кстати, Акцентный цвет. Вы можете быстро переключить все внимание на флажки, переключатели и аналогичные элементы отображения. Однако дизайнеры использовали пользовательские виджеты для доступа к аналогичным функциям, но не в браузере.

==Используйте его следующим образом:==

input[type="radio"] {
    accent-color: magenta;
}

Каскадные слои(@layer)

Они совместимы со всеми веб-браузерами: Google Chrome, Mozilla Firefox, Edge и Safari.

Стоит добавить всем разработчикам. Это каким-то образом сгладило управление слоями, не возникнув проблемы с переопределением стиля слоя. До этого включения происходило следующее: ранее загруженные слои стилей перезаписывались недавно загруженными.

n @layer предоставит доступ к файлу ввода для предварительного определения слоев и порядка и избавит вас от багажа времени. Все определенные и загруженные стили будут сохранены в слое, управляющем переопределением. Это дает больше свободы и контроля над определенными слоями. Вы можете увидеть визуализацию в Chrome DevTools.

Выбрать меню

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

На данный момент нет возможности их стилизовать. Это была одна из трудоемких задач, чтобы сделать их креативными и привлекательными. В большинстве случаев они полагались на внешние библиотеки. Но мы привезли кое-что интересное.

Одним из самых богатых включений в мире HTML является <selectmenu>. Вам просто нужно изменить некоторые функции следующим образом:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

Подсетка

Макет CSS Grid – популярная концепция в CSS. Он напоминает идеальную планировку прямоугольной формы. Вам просто нужно объявить свойство отображения как сетку. Мы можем получить доступ к аналогичным функциям разметки сетки CSS через Flexbox.

При этом вы получаете контроль над сеткой прямоугольной формы в двух измерениях. Одним из хороших способов эволюции является использование сложных обходных путей для установки направления/позиции элемента.

Чтобы соответствовать потребностям современных разработчиков, CSS обновил новую функциональность, которая будет управлять функциями ваших проектов. Мы называем это подсеткой, с помощью которой вы можете управлять или получить контроль над сеткой вашего ребенка. Он получит доступ к возможностям основной сетки, но если вы хотите переопределить, это разрешено.

Вам просто нужно указать целевую сетку и объединить ее с обычными свойствами разметки сетки CSS. Попробуйте это с столбцами сетки CSS и строками: grid-template-columns или grid-template-rows. Доступность не запускается для Google Chrome, Safari или Edge. Мы можем ожидать, что этот макет CSS-сетки будет запущен в конце года или в 2023 году.

grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
}

.grid > figure {
    display: grid;
    grid-template-rows: subgrid;
}

.grid figcaption {
    grid-row: 2;
}

Компоновка кирпичной кладки

Попробуйте визуализировать макет каменной кладки в своем проекте, но не хотите делать ничего лишнего. Это нормально. Нет необходимости включать или вызывать какую-либо библиотеку JavaScript; новые возможности CSS: макет Masonry доступен здесь. Вы можете иметь организованную сетку каменной кладки для правильного отображения изображений.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Вы можете получить доступ к интерактивному представлению в Mozilla Firefox. Это одно из лучших достижений для веб-дизайнеров и разработчиков.

В новую версию CSS было добавлено много других новых функций CSS. Идите и исследуйте, чтобы избежать сложности разработки. Не нужно писать тяжелый или сложный код или запускать какую-либо библиотеку. Быстро ознакомьтесь с новыми функциями CSS или учебными ресурсами и внедрите их, чтобы освоить повседневную практику.