Оверфлов цсс руле

Није увек неопходно да елемент странице буде видљив. Често само требате учинити видљивим његов садржај, обично слику, текст, таблицу. ЦСС правило преливања поставља режим приказа садржаја.

Постављањем блоковских елемената једни у друге, можете ефикасно да регулишете приказивање садржаја унутар жељених граница, управљате клизачима и направите сопствену опцију управљања садржајем.

Општа правила примене

ЦСС правило преливања прихвата пет вредности:

• видљиво;
• хидден;
• сцролл;
• ауто;
• наследити.

Када је видљиво назначено, садржај се може проширити изван елемента. У случају скривеног, део који излази ван ће бити исечен. Користећи сцролл и ауто можете да додате траке за померање да бисте прегледали садржај изван елемента.

Величина елемента је одређена правилима ширине и висине. Када ЦСС правило преливања дозвољава скроловање (скролирање и аутоматске вредности), његове шипке се налазе унутар елемента. То није увек згодно иу већини случајева неће одговарати дизајну странице када је програмер заинтересован за управљање садржајем и не планира да користи класичне "клизаче".

Пракса, када се елемент са садржајем сматра изолованим, даје мало могућности за постизање жељеног резултата. Ако се елемент сматра скупом од неколико блоковских ознака уграђених или комбинованих једна са другом, отвара се мноштво могућности.

Када ЦСС прелијевања није стандардна верзија правила, одговорност за исправан приказ садржаја почива на ЈаваСцрипт коду.

Пример: ЈаваСцрипт + оверфлов без ЦСС-а

Једина "мана" у ЦСС правилима је да испуни своју мисију како је прописана њиховом синтаксом и сврхом. У већини случајева, ово је више него довољно.

Идеално, користите оверфлов цсс (ауто или сцролл вриједности). Када тестирате, увек можете видети шта је приказано у одређеном блоку.

У међувремену, дизајн сајта, жеља програмера да понуди сопствену опцију кретања кроз садржај и, што је најважније, опсег сајта може захтевати јединствено другачије решење од онога што ЦСС може да понуди.

У овом примјеру, блокови не могу садржавати само садржај који "сеже" изван граница. Постоји потреба да се она помјери једна према другој. Један објекат је емулација електронске табеле за размену валута (у ствари, то је див), али два примерка садржаја. У једном случају, један смер размене, у другом - други.

Сваки блок може да се растеже (скупља) по висини и ширини, налази се изнад другог блока. Имплементација ових функција са стандардним ЦСС преливањем није могућа. Када промените величину главне јединице морате реконструисати све интерне дивове. Истовремено, величина фонта би се требала сразмјерно мијењати, јер се чини да је опција прекидања информација у финанцијским програмима слабо примјењива.

Чисти ЦСС оверфлов, али без клизача

Скроловање које нуди ХТМЛ / ЦСС је несумњиво практично, али за фазу отклањања грешака једноставно је потребно, али постоји једна значајна точка. Када је миш изнад блока у коме се помера, садржај овог блока се помера, а не цела страница.

Овај тренутак није баш погодан у пракси: морате контролисати мјесто на страници гдје можете окренути котачић миша. Неки посјетитељи се не свиђају, неки једноставно не обраћају пажњу.

У међувремену, ништа не спречава програмера да комбинује могуће са жељеним. Ако садржај блока прелази границе, можете само да унесете његову суштину, забранивши скроловање у њему. Али када корисник обрати пажњу на њега, док држи курсор миша неко вријеме, потребно је проширити блок на жељену величину и унијети сав садржај у њега.

У овом утјеловљењу, страница ће бити концентрирана садржај, који, ако је потребно, посјетитељ може открити.

У општем смислу, приликом креирања блоковских елемената, требало би да се одмакнете од идеје да је један елемент један “див”, “спан” или “тд”. Размишљање са ХТМЛ таговима није нешто што је корисно. Много је практичније размишљати семантичким елементима странице, а колико им је потребно за имплементацију ХТМЛ тагова је друго питање.

Покрет који покреће садржај

Ако узмемо идеју „постоји блок чије димензије одређују његов садржај“, онда за ЦСС правило преливања то је сасвим друга опција. Нема потребе за ослањањем на стандардно скроловање или писање сопственог ЈаваСцрипт кода.

Ако дизајнирате сајт као колекцију елемената, чија величина и позиција су одређени њиховим садржајем, онда ће у зависности од активности посетиоца, бити откривени одређени блокови. Могуће је да ће они бити откривени на цијелој страници или на њеном значајном дијелу.

Углавном, кретање посетиоца је његово интересовање за информације. Долазећи на локацију, он посматра своје почетно стање и бира оно што му је занимљиво. Кретање миша на екрану или прст на паметном телефону аутоматски отвара тренутни тренутни блок, остављајући га да га затвори и отвори следећи.

Тренутно, када је креирање модерног сајта није тако тешко, постало је проблематично изненадити и заинтересовати посетиоца. Добра идеја је прелазак са размишљања са ХТМЛ таговима на манипулисање информацијским елементима који су релевантни за посетиоца.