Vždy nie je vždy potrebné, aby bol prvok stránky viditeľný. Často stačí vidieť jeho obsah, zvyčajne obrázky, text, tabuľky. Prepäťové pravidlo CSS nastavuje režim zobrazenia obsahu.

Umiestnením navzájom blokovaných prvkov môžete účinne regulovať zobrazenie obsahu v požadovanom rozsahu, spravovať posúvače a vytvoriť vlastnú možnosť správy obsahu.

Všeobecné pravidlá použitia

V pravidle pretečenia CSS sú povolené päť hodnôt:

viditeľné;

skryté;

rolovať;

automobil;

zdedenie.

Ak je to uvedené, obsah môže ísť nad rámec položky. V prípade skrytej bude vonkajšia časť odrezaná. Použitím posúvacieho tlačidla a automatického spustenia môžete pridať posúvače na zobrazenie obsahu, ktorý presahuje danú položku. Veľkosť prvku určuje pravidlá šírky a výšky. Keď prechodové pravidlo CSS umožňuje posúvanie (posúvanie a automatické hodnoty), jeho pruhy sú umiestnené vo vnútri elementu. Nie vždy pohodlné a vo väčšine prípadov nebude vyhovovať návrhu stránky, keď sa vývojár zaujíma o správu obsahu a neplánuje používať klasické "posuvné".

Prax, pri ktorej je položka s obsahom posudzovaná samostatne, dáva malú príležitosť na dosiahnutie požadovaného výsledku. Ak je položka zobrazená ako zbierka viacerých blokových značiek, vnorených alebo navzájom prepojených, otvorí sa veľa príležitostí. Keď pretečenie CSS nie je štandardnou verziou pravidla, zodpovednosť zaSprávny výstup obsahu je založený na kóde javascript.

Príklad: javascript + pretečenie bez CSS

Jedinou "nevýhodou" pravidiel CSS je plniť svoje poslanie, ako to navrhuje ich syntax a účel. Vo väčšine prípadov je to viac ako dosť. Ideálne na používanie pretečenia css (hodnoty automatického alebo rolovania). Pri testovaní môžete vždy vidieť, že je výstup v jednom alebo inom bloku. Medzitým dizajn lokality, túžba vývojára ponúkať vlastnú navigačnú voľbu obsahu a čo je najdôležitejšie, rozsah stránky môže vyžadovať rozhodne iné riešenie ako to, čo CSS môže ponúknuť.

V tomto príklade bloky nemusia obsahovať len obsah, ktorý sa prechádza zo zahraničia. Je potrebné premiestňovať ju navzájom. Jedným z objektov je emulácia tabuľky výmen elektronických mien (v skutočnosti to sú panny - "div"), ale dve kópie obsahu. V jednej kópii, jeden smer výmeny, v inom - iný. Každý blok môže byť natiahnutý (stlačený) vo výške a šírke umiestnený nad iným blokom. Implementácia týchto funkcií nie je možná v prípade štandardnej verzie pretečeného CSS. Pri zmene veľkosti hlavnej jednotky musia byť všetky vnútorné panny znovu vytvorené. Zároveň by sa veľkosť písma mala meniť proporcionálne, pretože možnosť znižovania informácií vo finančných programoch sa zdá byť zle vhodná.

Pure CSS overflow, ale bez posuvníkov

Posúvač navrhnutý pomocou HTML /CSS je nepochybne praktický, ale pre ladiacu fázu je to len potrebné, ale existuje jeden významný bod. Keď je myš nad blokom, v ktorom je myšje posuvník, presunie sa obsah tohto bloku, nie celá stránka. Tento okamih nie je v praxi veľmi praktický: musíte ovládať miesto na stránke, kde môžete otáčať koleso myši. Niektorí návštevníci sa im to nepáči, niektorí jednoducho nevenujú pozornosť.
Medzitým nič nebráni vývojárovi v kombinácii možného s požadovaným. Ak obsah bloku presahuje jeho hranice, je možné odvodiť len jeho podstatu a zakázať jeho rolovanie. Ale keď používateľ upozornil na to, držiac ukazovateľ myši na chvíľu, je potrebné rozšíriť blok na požadovanú veľkosť a zobraziť obsah. V tejto verzii bude stránka predstavovať koncentrovaný obsah, ktorý môže návštevník v prípade potreby zverejniť. Vo všeobecnom zmysle, pri vytváraní prvkov bloku by sa malo vychádzať z myšlienky, že jeden prvok je jeden div, span alebo td. Myslite na tagy HTML - nie je to veľmi vďačná lekcia. Je oveľa praktickejšie premýšľať o sémantických prvkoch stránky a koľko ich budú potrebovať na implementáciu značiek HTML - inú záležitosť.

Pohyb poháňaný obsahom

Ak budeme brať ako základ myšlienku "existuje blok, ktorého veľkosť definuje jeho obsah, pravidlá pretečenia CSS sú úplne inou možnosťou. Nie je potrebné spoliehať sa na štandardné rolovanie alebo napísať vlastný kód javascript.

Ak navrhujete lokalitu ako súbor prvkov, ktorých veľkosť a umiestnenie sú určené ich obsahom, potom v závislosti od akcií návštevníka odhalia určité bloky. Je možné, že budú zverejnené na celú stránku alebo jej významnú časť. Skvelé preprehliadkou pohybu návštevníka je jeho záujem o informácie. Keď príde na miesto, sleduje svoj pôvodný stav a vyberá to, čo je pre neho zaujímavé. Pohyb myši na obrazovke alebo prst na automate smartphone odhalí aktuálny skutočný blok, ktorého výstup vedie k jeho uzavretiu a otvoreniu ďalšieho bloku. V súčasnej dobe, keď vytvára moderné miesto nie je tak ťažké, to sa stalo záležitosťou prekvapenia a záujem o návštevníka. Pohyb od myslenia HTML tagy na manipuláciu s informačnými prvkami, ktoré sú relevantné pre návštevníka, je dobrý nápad.