Overflow CSS: адлюстраванне ўтрымання элемента

Табліцы каскадных стыляў простыя ў выкарыстанні, калі не ўдавацца ў нетры ў спадчыну, размеркавання прыярытэтаў, класавай структуры, тэарэтычных момантаў і практычнага вопыту.

Асноўнае прызначэнне кожнага ўласцівасці CSS - адлюстраваць, але гэта зусім не азначае толькі "visible": не менш важная канструкцыя "CSS Overflow hidden".

элементы старонкі

Старонка ўтрымлівае не толькі элементы, на ёй могуць быць размешчаны элементы элементаў, няхай гэта будзе фрэймы (а гэта можа быць не толькі набор кампанентаў, але і іншы сайт цалкам) або ўласнаручна вырабленыя сістэмы аб'ектаў.

Натуральна, пераважная колькасць распрацоўшчыкаў сайтаў практыкуе гумовую вёрстку, вымушаны лічыцца з якія растуць аб'ёмамі інфармацыі і тым, што бар'ер у 800 на 600 пікселяў - зусім не бар'ер у 640 Кб, якія некалькі дзесяткаў гадоў пераадольваў менталітэт стваральнікаў MS DOS, чым ўскладняў жыццё праграмістам і карыстальнікам першых персаналак.

У сайтостроении першапачаткова ўсё прасцей: не змяшчаецца старонка на экран, браўзэр робіць ёй скролінг. Хоць распрацоўшчык можа прадугледзець выснова змесціва старонкі ў акно без палосак скролінг і без іншых уласцівасцяў: змесціва старонкі ніколі не вылезе за межы выдзеленага ёй вокны. Гэта натуральна, за межамі вокны знаходзяцца іншыя прыкладання, а акно браўзэра - нічым не лепш за іншых вокнаў: аперацыйная сістэма заўсёды стаіць за раўнапраўе прыкладанняў.

Зрэшты, як бы ні былі расстаўленыя прыярытэты ў выбары варыянту вёрсткі, як бы ні размяркоўваўся цікавасць наведвальнікаў да аптымальнага дазволу экрана для прагляду сайтаў, сёння ёсць розныя экраны, у якіх далёка не заўсёды прастакутныя магчымасці фіксаванага памеру.

Дынамічны свет скрозь Overflow CSS

Прынята, што старонка сайта - гэта кантэнт, раскладзенае па тэгах гіпертэксту, якія паказваюць, як яго адлюстроўваць у тым ці іншым выпадку пры тых ці іншых умовах.

Усе бесперапынна мяняецца. Нават калі сайт такі, што яго кантэнт не можа быць зменены на працягу многіх гадоў, няма ніякай гарантыі, што нечаканы наведвальнік не адкрые яго на новым прыладзе, пра які распрацоўшчык гэтага сайта нават не здагадваўся.

Варыянтаў уласцівасцяў у правілы Overflow CSS прадугледжвае усяго чатыры: дапускаецца хаваць усё, што выходзіць за межы вобласці элемента, адлюстроўваць, прадастаўляць скролінг заўсёды, а ці толькі па неабходнасці, альбо успадкаваць значэнне ад продка.

У першым выпадку (overflow: hidden), увесь кантэнт, які выходзіць за межы элемента, будзе скрыты, а тое, што схавалася, не будзе даступна. Такая пазіцыя эфектыўная, але не менш цікавы варыянт паказваць усё, што выходзіць за межы (overflow: visible). Так распрацоўшчык прадастаўляе наведвальніку магчымасць заўсёды мець уяўленне аб поўным кантэнце элемента і кіраваць яго аб'ёмам. Меншыя магчымасці дае скролінг (overflow: scroll - паласы пракруткі заўсёды ёсць; або overflow: auto - паласы пракруткі з'яўляюцца па меры патрэбы).

Асаблівасці выкарыстання правілы Overflow

", представляют особенный интерес, только когда они представляют собой текст. Элементы, якія знаходзяцца ўнутры тэга, які мае сэнс CSS "text overflow", уяўляюць асаблівую цікавасць, толькі калі яны ўяўляюць сабой тэкст. Размяшчэнне іншых кампанентаў, як правіла, фіксуецца па каардынатах або па адносных пазіцыях.

Тэкставыя элементы не заўсёды ўтрымліваюць фіксаванае колькасць знакаў, а калі паўстала неабходнасць выкарыстання правілы overflow, CSS даручаецца кантраляваць варыянты неспадзяванага змены аб'ёму кантэнту.

У прыватнасці, на этапе адладкі можна ўжыць значэнне уласцівасцяў auto або scroll, а затым заблакаваць адлюстраванне ўсяго, што выходзіць за межы вобласці, падаўшы наведвальніку набор кнопак, якімі ён будзе перамяшчаць нябачнае змесціва ў бачную вобласць. Гэта звычайная практыка. Далёка не ўсім імпануе палоска скролінг, некаторыя аддаюць перавагу ёй чатыры кнопкі: да пачатку, наперад, назад, да канца.

Да таго ж правіла overflow CSS у значэнні auto / scroll прыносіць на старонку элемент непрыемнай нявызначанасці: браўзэр пераносіць прыярытэт у частцы скролінг са старонкі на яе элемент, калі над ім знаходзіцца паказальнік мышкі.

Калі элемент ўяўляе сабой тэкставы блок, гэта не занадта прыкметна і нязручна, але калі па ўсёй шырыні акна размясціць слайдэр (блок элементаў-малюнкаў), то пераадолець такую канструкцыю не заўсёды можна пахай, часта даводзіцца выкарыстоўваць кнопкі "у пачатак" або "у канец старонкі ".

прыярытэты скролінг

Дыялог старонкі сайта з наведвальнікам мае істотнае значэнне, як і яе дызайн, распрацоўка, кантэнт. Паколькі сайт адкрывае браўзэр і робіць гэта ва ўласным акне або асобнай ўкладцы, то, хутчэй за ўсё, права на скролінг павінна мець старонка, а не яе элемент. Апошніх можа быць не толькі шмат, але ў кожнага можа быць ўласная функцыя.

Сайт заўсёды нясе ў сабе канкрэтны сэнс, нават калі ён ставіцца да вобласці філасофіі, містыкі ці іншага неспадзяванага кантэнту. Менавіта таму заўсёды можна выказаць здагадку пэўную дыялогавую нагрузку на элементы з правілам overflow CSS.

У прыватнасці, калі элемент ўяўляе сабой селектар выбару года (даты), то класічны селектар будзе нязручны, а яго паласа скролінг будзе дастаўляць відавочнае нязручнасць. Ужываючы ў такім выпадку overflow, CSS эфектна можна выкарыстоўваць у дадатак: ўнутраныя поля ў элеменце, вылучыць перыяды, даць магчымасць наведвальніку хутка і зручна задаць патрэбныя лік, месяц, год.