7 новых функций для создания адаптивного веб-сайта

Современный CSS берет на себя полный контроль над стилем веб-сайта с помощью необходимого JavaScript. В этой статье мы выделим семь новых обновлений CSS, которые упростят будущее стилизации. Кроме того, мы рассматриваем поддержку браузерами Chrome, Edge и Firefox. Наконец, мы обсудим проблемы, решения и почти все, что вам нужно, чтобы сразу начать работу.

Учитывая все приемы и приемы, вот несколько отобранных функций CSS, которые стоят вашего времени. Итак, без лишних слов, давайте прямо сейчас погрузимся в это.

1. Подсетка CSS

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

• Вложенные сетки после уровня 2 используются для переполнения содержимого за пределами более крупной сетки, что сильно влияет на скорость отклика веб-сайта.
instagram viewer
• Вложенные сетки действовали как независимые элементы внутри большего контейнера сетки. Никакой ссылки на родительский контейнер для каких-либо изменений не было.

Без подсеток:

После подсеток:

Вот как можно реализовать подсетки:

.container {
ширина: 700 пикселей;
высота: 500 пикселей;
фон: rgb (214, 255, 139);
дисплей: сетка;
сетка-шаблон-столбцы: 1fr 1fr 1fr 1fr;
сетка-шаблон-строки: 1fr 1fr 1fr 1fr;
}
.container div {
фон: rgb (72, 170, 137);
сетка-ряд: 2/3;
сетка-столбец: 2/5;
дисплей: сетка;
сетка-шаблон-столбцы: подсетка;
сетка-шаблон-строки: подсетка;
}

Вы можете разместить несколько подсеток. Заметным исключением является то, что подсетки наследуют родительское свойство grid-gap. Это приведет к созданию всех подсеток с одинаковыми свойствами зазора внутри каждой родительской сетки.

Лучшее в подсетках - это то, что они очень отзывчивые, настраиваемые и масштабируемые.

Совместимость браузера: Firefox

2. Свойство соотношения сторон

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

Вы можете исправить это, поддерживая свойство пропорции с атрибутом ширины. Это становится удобным для адаптивных изображений, так как вы можете определить высоту или ширину.

Вот как можно реализовать свойство соотношения сторон:

.container {
ширина: 700 пикселей;
соотношение сторон: 16/9;
фон: rgb (72, 170, 137);
}

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

Совместимость браузера: Chrome, Edge, Firefox (частичная)

3. Flexbox Gap

Grid-gap довольно популярен для создания равного пространства между каждой сеткой. Но вы должны были применять отрицательные поля, селекторы псевдоклассов и сложные селекторы для обработки пространства между каждым гибким элементом. Таким образом, разрыв Flexbox приводит к меньшему количеству строк кода с более высокой масштабируемостью.

Вот как можно реализовать зазор гибкого бокса:

.container {
ширина: 700 пикселей;
высота: 500 пикселей;
дисплей: гибкий;
align-items: center;
justify-content: center;
пробел: 1em;
}

Выход:

Совместимость с браузером: все основные браузеры, включая Chrome, Edge и Firefox.

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

Используя Scroll Snap, вы можете определить определенные границы, чтобы исправить макет и видимость данного контейнера. Например, отлично работает для создания каруселей и определенных разделов сайта. Обратите внимание, что вам не потребуется JS для любой настройки.

Вот как можно реализовать привязку прокрутки:

.container {
ширина: 100%;
высота: 100%;
дисплей: гибкий;
переполнение-x: прокрутка;
scroll-snap-type: x обязательный;
}
раздел {
гибкость: нет;
дисплей: гибкий;
align-items: center;
justify-content: center;
размер шрифта: 15em;
семейство шрифтов: Arial, Helvetica, sans-serif;
прокрутка-привязка-выравнивание: конец;
ширина: 100%;
высота: 100%;
}

Выход:

У оснастки прокрутки CSS есть родительские и дочерние свойства. Свойство parent или container определяет направление прокрутки (x или y) и поведение привязки прокрутки. Например, вы можете установить scroll-snap-type: x обязательным. Он предоставит пользователю возможность выбора точки прокрутки без учета положения прокрутки.

С другой стороны, scroll-snap-type: y приближение работает только тогда, когда посетитель веб-сайта находится ближе к точке прокрутки.

Дочерним свойством является scroll-snap-align для выравнивания элементов во время привязки прокрутки CSS. Он вводит начальное, конечное и центральное значения для соответствующего выравнивания элементов.

5. Запросы функций

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

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

Вот как можно реализовать запросы функций:

@supports (content-visibility: auto) {
тело{
фон: бирюзовый;
ширина: 100%;
высота: 100%;
}
}

Следовательно, только те браузеры, которые отображают свойства видимости содержимого, будут иметь бирюзовый цвет фона; в противном случае будет рассматриваться значение по умолчанию. Обратите внимание, что @ похоже на @media в медиа-запросах, где вы должны были установить максимальную ширину или минимальную ширину для временных корректировок. Это упрощает запоминание функциональных запросов @supports.

Читать далее: Как использовать медиа-запросы в HTML и CSS

Совместимость с браузером: все основные браузеры, включая Chrome, Edge и Firefox.

6. Content-visibility Свойство

Быстрый рендеринг работает как основа для интерактивного веб-сайта. С ростом популярности мобильных устройств производительность рендеринга веб-сайта становится узким местом для создания привлекательного веб-сайта.

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

#основной {
видимость содержимого: авто;
/ * содержать внутренний размер: 0 500 пикселей; */
}

Свойство content-visibility вводит три значения. content-visibility: visible не показывает никакого эффекта, в то время как content-visibility: hidden аналогичен display: none, где элемент пропускает недоступное содержимое. Content-visibility: auto пропускает нерелевантный контент, но он доступен как обычная страница для функций пользовательского агента.

Давайте измерим силу видимости контента. Вот результат:

7. Переход, трансформация и анимация

В CSS у нас есть два способа применить анимацию. Переход используется для плавного изменения визуальных свойств элементов. С другой стороны, без перехода преобразование внезапно перешло бы из одного состояния в другое.

Анимации используются с @keyframes, которые задают стили в нескольких точках во время анимации. Интересно то, что @keyframes определяет, когда произойдет изменение, преобразование и анимация контролируют изменение, а переход заботится о том, как это изменение произойдет (например, эффекты наведения).

.ребенок {
фон: бирюзовый;
высота: 150 пикселей;
ширина: 150 пикселей;
цвет белый;
переход: преобразование 0,2 с легкость входа-выхода;
анимация: myAnimation 2s infinite;
}
.child: hover {
преобразовать: масштаб (2, 2) повернуть (45 градусов);
}
@keyframes myAnimation {
0% {
}
50% {
преобразовать: translateX (400 пикселей)
}
100% {
преобразовать: translateX (0px)
}
}

Совместимость с браузером: все основные браузеры, включая Chrome, Edge и Firefox.

Заключение

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

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

7 новых функций, на которые следует обратить внимание в Bootstrap 5

Если вы разрабатываете веб-сайты и приложения с использованием CSS-фреймворка Bootstrap, вот что нового в Bootstrap 5.

Читать далее

Об авторе