7 нови функции за създаване на отзивчив уебсайт

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

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

1. CSS подмрежа

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

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

Без подрешетки:

След подрешетки:

Ето как можете да внедрите подмрежи:

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

Можете да поставите множество подрешетки. Забележителното изключение е, че подмрежите наследяват родителско свойство на мрежова разлика. Това ще доведе до създаването на всички подмрежи с еднакви свойства на празнината във всяка родителска мрежа.

Най-доброто при подмрежите е, че те са силно отзивчиви, регулируеми и мащабируеми.

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

2. съотношение аспект Имот

Можете да премахнете всички проблеми с настройката и изчисленията, като промените пропорциите на даден контейнер. Ако се стремите да вмъкнете видеоклип, всичко, което трябва да направите, е да фиксирате пропорция спрямо различния размер на екрана. Но докато работим с двуизмерни множество мрежи, има шансове за препълване и изглед по подразбиране.

Можете да го поправите, като поддържате свойството съотношение на страните с атрибут width. Става удобно за отзивчиви изображения, тъй като можете да определите височина или ширина.

Ето как можете да внедрите свойство пропорции:

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

Можете също така да въведете пропорция: автоматично, вместо да указвате съотношението. Недостатъкът на автоматичната стойност по подразбиране е, че браузърът ще избере оригиналното измерение на изображението. Несъмнено това затруднява отзивчивостта на сайта.

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

3. Flexbox Gap

Разликата в мрежата е доста популярна за създаване на равно пространство между всяка мрежа. Но трябваше да приложите отрицателни полета, селектори на псевдоклас и сложни селектори, за да обработите пространството между всеки flex-елементи. По този начин пропастта на Flexbox води до по-малко редове код с по-висока скалируемост.

Ето как можете да приложите пропастта на flexbox:

.контейнер {
ширина: 700px;
височина: 500px;
дисплей: flex;
align-items: център;
justify-content: център;
празнина: 1em;
}

Изход:

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

Превъртането помага за споделяне на повече информация за един уебсайт, без да се претрупва уеб копието. Но основният недостатък на превъртането е, че може да спре на половината от параграфа или изображението. Понякога контролът върху страничното съдържание е оставен по средата. JavaScript се използва внимателно, за да се избегне персонализирането на превъртането. Но това не беше напълно задоволителен резултат, докато не дойде CSS Scroll Snap.

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

Ето как можете да приложите щракане на превъртане:

.контейнер {
ширина: 100%;
височина: 100%;
дисплей: flex;
overflow-x: превъртане;
scroll-snap-type: x задължително;
}
раздел {
гъвкавост: няма;
дисплей: flex;
align-items: център;
justify-content: център;
размер на шрифта: 15em;
семейство шрифтове: Arial, Helvetica, sans-serif;
превъртане-щракване-подравняване: край;
ширина: 100%;
височина: 100%;
}

Изход:

Прилепването на CSS превъртане има свойство родител и дете. Свойството родител или контейнер решава посоката на превъртането (x или y) и поведението на щракането на превъртането. Например можете да зададете scroll-snap-type: x задължително. Той ще предостави на потребителя контрол за определяне на точката за превъртане, без да се взема предвид позицията за превъртане.

От друга страна, scroll-snap-type: y близостта функционира само когато посетителят на уебсайта е по-близо до точката за превъртане.

Владеещото свойство е scroll-snap-align, за да подравнява елементите по време на CSS scroll snap. Той въвежда начални, крайни и центрирани стойности, за да подреди елементите съответно.

5. Заявки за функции

Заявки за функции се използват за справяне с изящна деградация. Например, CSS мрежите са доста популярни в днешно време. Но си струва да споменем, че по-старите браузъри не могат да го визуализират.

Тук заявките за функции проверяват дали конкретният браузър поддържа конкретно свойство или не и дава система за поддръжка, която насърчава препращането към CSS свойство само ако се поддържа от това браузър. В противен случай се взема предвид стойността по подразбиране. В този случай можете да поставяте блокове вместо решетки за всеки предвиден отстъп.

Ето как можете да внедрите заявки за функции:

@supports (съдържание-видимост: автоматично) {
тяло {
фон: чирка;
ширина: 100%;
височина: 100%;
}
}

Следователно само онези браузъри, които представят свойства за видимост на съдържанието, ще имат цвят на фона на тийл; в противен случай ще се вземе предвид стойността по подразбиране. Имайте предвид, че @ е подобен на @media на медийни заявки, където трябваше да зададете максимална ширина или минимална ширина за импровизирани корекции. Това улеснява запомнянето на функционалните заявки @supports.

Прочетете още: Как да използваме медийни заявки в HTML и CSS

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

6. свойство за видимост на съдържанието

Бързото изобразяване работи като гръбнак за потребителски интерактивен уебсайт. С нарастващата популярност на мобилните устройства, представянето на уебсайт действа като пречка за получаване на привлекателен уебсайт.

Тук свойството за видимост на съдържанието играе решаваща роля. Защото по подразбиране браузърите изобразяват всички елементи на уебсайта наведнъж. Това намалява времето за зареждане и цялостната производителност на сайта, особено ако вашият уебсайт има много тежки анимации. От друга страна, свойството content-visibility рендира само елементите на прозореца за показване и показва други елементи, докато превъртате из цялата страница.

#main {
видимост на съдържанието: автоматично;
/ * съдържат-вътрешен размер: 0 500px; */
}

Свойството за видимост на съдържанието въвежда три стойности. content-visibility: visible не показва ефект, докато content-visibility: hidden е подобен на display: none, когато елементът пропуска недостъпното съдържание. Видимост на съдържанието: автоматично пропуска неподходящото съдържание, но е достъпно като нормална страница за функциите на потребителския агент.

Нека измерим силата на видимост на съдържанието. Ето резултата:

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

В CSS имаме два начина за прилагане на анимация. Преходът се използва за плавни промени във визуалните свойства на елементите. От друга страна, без преход, трансформацията би внезапно манипулирала от едно състояние в друго.

Анимациите се използват с @keyframes, които задават стилове в няколко точки по време на продължителността на анимацията. Интересното е, че @keyframes определят кога ще настъпи промяната, преобразуване и анимация поема контрола върху промяната, а преходът се грижи за това как ще се случи промяната (напр. ефекти върху курсора).

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

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

Обобщавайки

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

В края на деня трябва да се уверите кои функции опростяват стила на вашия уебсайт.

7 нови функции, за които трябва да внимавате в Bootstrap 5

Ако разработвате уебсайтове и приложения, използвайки Bootstrap CSS рамката, ето какво е новото в Bootstrap 5.

Прочетете Напред

За автора