Савремени ЦСС преузима потпуну контролу над обликовањем веб страница уз помоћ потребног ЈаваСцрипт-а. У овом чланку ћемо истакнути седам нових ЦСС исправки како бисмо поједноставили будућност стила. Поред тога, разматрамо подршку за прегледаче Цхроме, Едге и Фирефок. На крају ћемо разговарати о проблемима, решењима и готово свему што ће вам требати да бисте одмах започели.
Узимајући у обзир све трикове и технике, ево неколико ручно изабраних ЦСС функција које вреде вашег времена. Дакле, без икаквог одлагања, заронимо право у то.
1. ЦСС Субгрид
За разлику од способности ЦСС флекбока да се креће само у једном правцу, обе димензије можете дефинисати у мрежама. Како у наредним деценијама почињу да постају моћни и популарни, виде се огромне промене у веб дизајну. Гнездене решетке се користе за цртање мрежа унутар мрежа. Али, који су главни недостаци који су покренули позив за ЦСС подмреже?
- Гнездене мреже након нивоа 2 користиле су се за преливање садржаја изван веће мреже која је знатно утицала на одзив веб локације.
- Гнездене мреже су деловале као независни елементи унутар већег контејнера мреже. Није било референце за надређени контејнер за било какву промену.
Без подрежа:
После подрежа:
Ево како можете да примените подреже:
.контејнер {
ширина: 700пк;
висина: 500пк;
позадина: ргб (214, 255, 139);
приказ: мрежа;
грид-темплате-цолумнс: 1фр 1фр 1фр 1фр;
грид-темплате-редови: 1фр 1фр 1фр 1фр;
}
.цонтаинер див {
позадина: ргб (72, 170, 137);
ред мреже: 2/3;
мрежа-колона: 2/5;
приказ: мрежа;
грид-темплате-цолумнс: субгрид;
грид-темплате-редови: подмрежа;
}Можете поставити више подмрежа. Изузетан изузетак је тај што подмреже наслеђују родитељско својство мреже-јаз. То ће резултирати стварањем свих подмрежа са истим својствима празнине унутар сваке родитељске мреже.
Најбоља ствар код подмрежа је што су врло одзивне, прилагодљиве и скалабилне.
Компатибилност прегледача: Фирефок
2. однос својства
Све проблеме са подешавањем и рачунањем можете елиминисати променом односа ширине и висине датог контејнера. Ако желите да убаците видео, све што треба да урадите је да поправите однос ширине и висине у односу на променљиву величину екрана. Али, док радите са дводимензионалним вишеструким мрежама, постоје шансе за преливање и подразумевани приказ.
Можете га поправити подржавањем својства односа ширине и висине са атрибутом ширине. То постаје згодно за одзивне слике јер можете да дефинишете висину или ширину.
Ево како можете да примените својство односа ширине и висине:
.контејнер {
ширина: 700пк;
однос ширине и висине: 16/9;
позадина: ргб (72, 170, 137);
}
Такође можете унети однос ширине и висине: аутоматски уместо да наведете однос. Лоша страна подразумеване аутоматске вредности је та што ће прегледач одабрати оригиналну димензију слике. Несумњиво, то кочи одзив сајта.
Компатибилност прегледача: Цхроме, Едге, Фирефок (делимично)
3. Флекбок Гап
Грид-јаз је прилично популаран за стварање једнаког простора између сваке мреже. Али, требали сте да примените негативне маргине, селекторе псеудо-класе и сложене селекторе да бисте обрађивали простор између сваке флекс-ставке. Дакле, Флекбок јаз резултира мањим редовима кода са већом скалабилношћу.
Ево како можете применити флекбок јаз:
.контејнер {
ширина: 700пк;
висина: 500пк;
дисплеј: флек;
алигн-итемс: центер;
јустифи-цонтент: центар;
јаз: 1ем;
}Излаз:
Компатибилност прегледача: Сви главни прегледачи, укључујући Цхроме, Едге и Фирефок.
Помицање помаже у размјени више информација о једној веб локацији без нереда на веб копији. Али, главни недостатак помицања је тај што се може зауставити на половини параграфа или слике. Понекад се контрола пагинираног садржаја оставља на пола пута. ЈаваСцрипт се замишљено користи да би се избегло прилагођавање помицања. Али, то није био потпуно задовољавајући резултат док није дошао ЦСС Сцролл Снап.
Коришћењем помицања помицањем можете дефинирати одређене границе да бисте поправили распоред и видљивост датог спремника. На пример, сјајно делује када се праве вртуљци и одређени одељци веб страница. Имајте на уму да вам неће бити потребан ЈС за било какво прилагођавање.
Ево како можете применити помицање помицања:
.контејнер {
ширина: 100%;
висина: 100%;
дисплеј: флек;
оверфлов-к: сцролл;
сцролл-снап-типе: к обавезно;
}
сецтион {
флекс: ниједан;
дисплеј: флек;
алигн-итемс: центер;
јустифи-цонтент: центар;
величина фонта: 15ем;
породица фонтова: Ариал, Хелветица, санс-сериф;
сцролл-снап-алигн: енд;
ширина: 100%;
висина: 100%;
}Излаз:
ЦСС помицање помицања има својство родитеља и дјетета. Својство родитеља или контејнера одлучује о смеру помицања (к или и) и понашању пуцања помицања. На пример, можете да поставите сцролл-снап-типе: к обавезна. Кориснику ће дати контролу да одлучи тачку померања без разматрања положаја помицања.
С друге стране, близина тип-помицање: и близина функционише само када је посетилац веб локације ближи тачки померања.
Подређено својство је сцролл-снап-алигн да поравна елементе током ЦСС снап помицања. Уноси вредности почетка, краја и центра да би се елементи поравнали у складу с тим.
5. Упити о карактеристикама
Упити за карактеристике користе се за решавање грациозне деградације. На пример, ЦСС мреже су данас прилично популарне. Али, вреди напоменути да га старији прегледачи не могу приказати.
Овде упити за функције проверавају да ли одређени прегледач подржава одређено својство или не и даје систем подршке који подстиче позивање на ЦСС својство само ако је на томе подржано претраживач. У супротном, узима се у обзир подразумевана вредност. У овом случају можете поставити блокове уместо мрежа за било који предвиђени резервни учинак.
Ево како можете да примените упите о карактеристикама:
@суппортс (цонтент-висибилити: ауто) {
тело {
позадина: теал;
ширина: 100%;
висина: 100%;
}
}Према томе, само они претраживачи који приказују својства видљивости садржаја имаће боју позадине теал; у супротном би се узела у обзир подразумевана вредност. Имајте на уму да је @ сличан @медиа за медијске упите, где је требало да подесите максималну ширину или минималну ширину за импровизована подешавања. Поједностављује памћење упита функције @суппортс.
Опширније: Како се користе медијски упити у ХТМЛ-у и ЦСС-у
Компатибилност прегледача: Сви главни прегледачи, укључујући Цхроме, Едге и Фирефок.
6. својство видљивости садржаја
Брзо приказивање делује као окосница за корисничку интерактивну веб локацију. Са све већом популарношћу мобилних уређаја, перформансе приказивања веб странице делују као уско грло за добијање привлачне веб локације.
Овде својство видљивости садржаја игра пресудну улогу. Јер, прегледачи подразумевано генеришу све елементе веб странице одједном. Смањује време учитавања и укупне перформансе веб локације, посебно ако ваша веб локација има много тешких анимација. С друге стране, својство видљивости садржаја приказује само елементе оквира за приказ и приказује друге елементе док се крећете по страници.
#главни {
видљивост садржаја: аутоматски;
/ * садрже-интринсиц-сизе: 0 500пк; */
}Својство видљивости садржаја уноси три вредности. цонтент-висибилити: висибле не показује ефекат, док цонтент-висибилити: хидден је сличан дисплаи-у: ноне где елемент прескаче неприступачан садржај. Видљивост садржаја: аутоматски прескаче небитан садржај, али је доступан као нормална страница функцијама корисничког агента.
Измеримо снагу видљивости садржаја. Ево резултата:
7. Транзиција, трансформација и анимација
У ЦСС-у имамо два начина за примену анимације. Прелаз се користи за глатке промене визуелних својстава елемената. С друге стране, без транзиције, трансформација би нагло манипулисала из једног стања у друго.
Анимације се користе са @кеифрамес који постављају стилове у неколико тачака током трајања анимације. Занимљиво је то @кеифрамес дефинишу када ће се промена догодити, трансформише и анимација преузима контролу над променом, а транзиција брине о томе како ће се промена догодити (нпр. ефекти лебдења).
.дете {
позадина: теал;
висина: 150пк;
ширина: 150пк;
бела боја;
прелаз: трансформишите 0,2 с улазак-излазак;
анимација: миАниматион 2с бесконачно;
}
.дете: ховер {
трансформисати: скала (2, 2) ротирати (45дег);
}
@кеифрамес миАниматион {
0% {
}
50% {
трансформиши: транслатеКс (400пк)
}
100% {
трансформиши: транслатеКс (0пк)
}
}Компатибилност прегледача: Сви главни прегледачи, укључујући Цхроме, Едге и Фирефок.
Окончање
Каскадно означавање табеле стилова континуирано се развија са бољим карактеристикама. До сада сте сазнали за ових седам сјајних карактеристика које укључују ЦСС подмрежу, својство односа ширине и висине, флекбок празнине, помицање помицања, упити карактеристика, својство видљивости садржаја, прелазак, трансформација и анимација.
На крају дана морате да осигурате које функције поједностављују стил вашег веб сајта.
Ако развијате веб локације и апликације помоћу Боотстрап ЦСС оквира, ево шта је ново у Боотстрап 5.
Прочитајте следеће
- Програмирање
Наинци се специјализовао за изградњу веб страница са високим одзивом и ефикасне стратегије садржаја заједно са веб копијама. Она је слободна технолошка писац која пажљиво прати модерне технологије.
Претплатите се на наш билтен
Придружите се нашем билтену за техничке савете, прегледе, бесплатне е-књиге и ексклузивне понуде!
Још један корак…!
Молимо потврдите своју адресу е-поште у е-поруци коју смо вам управо послали.
