7 новых функций для создания адаптивного веб-сайта
Современный CSS берет на себя полный контроль над стилем веб-сайта с помощью необходимого JavaScript. В этой статье мы выделим семь новых обновлений CSS, которые упростят будущее стилизации. Кроме того, мы рассматриваем поддержку браузерами Chrome, Edge и Firefox. Наконец, мы обсудим проблемы, решения и почти все, что вам нужно, чтобы сразу начать работу.
Учитывая все приемы и приемы, вот несколько отобранных функций CSS, которые стоят вашего времени. Итак, без лишних слов, давайте прямо сейчас погрузимся в это.
1. Подсетка CSS
В отличие от возможности CSS flexbox двигаться только в одном направлении, вы можете определять оба размера в сетках. По мере того, как в ближайшие десятилетия они становятся мощными и популярными, в веб-дизайне наблюдаются огромные изменения. Вложенные сетки используются для рисования сеток внутри сеток. Но каковы основные недостатки, из-за которых возникла необходимость в подсетках CSS?
- Вложенные сетки после уровня 2 используются для переполнения содержимого за пределами более крупной сетки, что сильно влияет на скорость отклика веб-сайта.
- Вложенные сетки действовали как независимые элементы внутри большего контейнера сетки. Никакой ссылки на родительский контейнер для каких-либо изменений не было.
Без подсеток:
После подсеток:
Вот как можно реализовать подсетки:
.container {
width: 700px;
height: 500px;
background: rgb(214, 255, 139);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.container div {
background: rgb(72, 170, 137);
grid-row: 2/ 3;
grid-column: 2 / 5;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}Вы можете разместить несколько подсеток. Заметным исключением является то, что подсетки наследуют родительское свойство grid-gap. Это приведет к созданию всех подсеток с одинаковыми свойствами зазора внутри каждой родительской сетки.
Лучшее в подсетках – это то, что они очень отзывчивые, настраиваемые и масштабируемые.
Совместимость браузера: Firefox
2. Свойство соотношения сторон
Вы можете устранить все проблемы с настройкой и расчетами, изменив соотношение сторон данного контейнера. Если вы хотите вставить видео, все, что вам нужно сделать, это исправить соотношение сторон относительно изменяющегося размера экрана. Но при работе с двумерными множественными сетками возможны переполнения и вид по умолчанию.
Вы можете исправить это, поддерживая свойство пропорции с атрибутом ширины. Это становится удобным для адаптивных изображений, так как вы можете определить высоту или ширину.
Вот как можно реализовать свойство соотношения сторон:
.container {
width: 700px;
aspect-ratio: 16 / 9;
background: rgb(72, 170, 137);
}
Вы также можете ввести соотношение сторон: авто вместо указания соотношения сторон. Обратной стороной автоматического значения по умолчанию является то, что браузер выберет исходный размер изображения. Несомненно, это снижает отзывчивость сайта.
Совместимость браузера: Chrome, Edge, Firefox (частичная)
3. Разрыв Flexbox
Grid-gap довольно популярен для создания равного пространства между каждой сеткой. Но вы должны были применять отрицательные поля, селекторы псевдоклассов и сложные селекторы для обработки пространства между каждым гибким элементом. Таким образом, разрыв Flexbox приводит к меньшему количеству строк кода с более высокой масштабируемостью.
Вот как можно реализовать зазор гибкого бокса:
.container {
width: 700px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}Выход:
Совместимость с браузером: все основные браузеры, включая Chrome, Edge и Firefox.
4. Привязка прокрутки
Прокрутка помогает делиться дополнительной информацией об одном веб-сайте, не загромождая веб-копию. Но основным недостатком прокрутки является то, что она может останавливаться на половине параграфа или изображения. Иногда контроль над контентом, разбитым на страницы, оставляют на полпути. JavaScript продуманно используется, чтобы избежать настройки прокрутки. Но до появления CSS Scroll Snap это не было полностью удовлетворительным результатом.
Используя Scroll Snap, вы можете определить определенные границы, чтобы исправить макет и видимость данного контейнера. Например, отлично работает для создания каруселей и определенных разделов сайта. Обратите внимание, что вам не потребуется JS для любой настройки.
Вот как можно реализовать привязку прокрутки:
.container {
width: 100%;
height: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
width: 100%;
height: 100%;
}Выход:
У оснастки прокрутки CSS есть родительские и дочерние свойства. Свойство parent или container определяет направление прокрутки (x или y) и поведение привязки прокрутки. Например, вы можете установить scroll-snap-type: x обязательным. Он предоставит пользователю возможность выбора точки прокрутки без учета положения прокрутки.
С другой стороны, scroll-snap-type: y приближение работает только тогда, когда посетитель веб-сайта находится ближе к точке прокрутки.
Свойство child – scroll-snap-align для выравнивания элементов во время привязки прокрутки CSS. Он вводит начальное, конечное и центральное значения для соответствующего выравнивания элементов.
5. Запросы функций
Запросы функций используются для постепенного снижения производительности. Например, сегодня довольно популярны сетки CSS. Но стоит упомянуть, что старые браузеры не могут его отображать.
Здесь запросы функций проверяют, поддерживает ли конкретный браузер конкретное свойство или нет, и предоставляют систему поддержки, которая поощряет обращение к свойству CSS только в том случае, если оно поддерживается в этом браузере. В противном случае рассматривается значение по умолчанию. В этом случае вы можете размещать блоки вместо сеток для любого прогнозируемого отката.
Вот как можно реализовать запросы функций:
@supports (content-visibility: auto) {
body{
background: teal;
width: 100%;
height: 100%;
}
}Следовательно, только те браузеры, которые отображают свойства видимости содержимого, будут иметь бирюзовый цвет фона; в противном случае будет рассматриваться значение по умолчанию. Обратите внимание, что @ похоже на @media в медиа-запросах, где вы должны были установить максимальную ширину или минимальную ширину для временных корректировок. Это упрощает запоминание функциональных запросов @supports.
Совместимость с браузером: все основные браузеры, включая Chrome, Edge и Firefox.
6. Свойство content-visibility
Быстрый рендеринг работает как основа для интерактивного веб-сайта. С ростом популярности мобильных устройств производительность рендеринга веб-сайта становится узким местом для создания привлекательного веб-сайта.
Здесь свойство видимости содержимого играет решающую роль. Потому что по умолчанию браузеры отображают сразу все элементы сайта. Это уменьшает время загрузки и общую производительность сайта, особенно если на вашем сайте много тяжелых анимаций. С другой стороны, свойство content-visibility отображает только элементы области просмотра и показывает другие элементы при прокрутке страницы.
#main {
content-visibility: auto;
/* contain-intrinsic-size: 0 500px; */
}Свойство content-visibility вводит три значения. content-visibility: visible не показывает никакого эффекта, в то время как content-visibility: hidden аналогичен display: none, когда элемент пропускает недоступное содержимое. Content-visibility: auto пропускает нерелевантный контент, но он доступен как обычная страница для функций пользовательского агента.
Давайте измерим силу видимости контента. Вот результат:
7. Переход, трансформация и анимация.
В CSS у нас есть два способа применить анимацию. Переход используется для плавного изменения визуальных свойств элементов. С другой стороны, без перехода преобразование внезапно перешло бы из одного состояния в другое.
Анимации используются с @keyframes, которые задают стили в нескольких точках во время анимации. Интересно то, что @keyframes определяют, когда произойдет изменение , трансформация и анимация контролируют изменение, а переход заботится о том, как произойдет изменение (например, эффекты наведения).
.child {
background: teal;
height: 150px;
width: 150px;
color: white;
transition: transform 0.2s ease-in-out;
animation: myAnimation 2s infinite;
}
.child:hover {
transform: scale(2, 2) rotate(45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transform: translateX(400px)
}
100% {
transform: translateX(0px)
}
}Совместимость с браузером: все основные браузеры, включая Chrome, Edge и Firefox.
Заключение
Каскадная разметка таблиц стилей постоянно совершенствуется. До сих пор вы узнали об этих семи удивительных функциях, которые включают подсетку CSS, свойство соотношения сторон, зазоры гибкого бокса, привязку прокрутки, запросы функций, свойство видимости содержимого, переход, преобразование и анимацию.
В конце концов, вы должны убедиться, какие функции упрощают стилизацию вашего сайта.