Pravidlo overflow css

Není vždy nutné zobrazovat prvek stránky. Často stačí vidět jeho obsah, obvykle obrázek, text, tabulku. Přechodové pravidlo CSS nastavuje režim zobrazení obsahu.

Přidáním blokových prvků do sebe můžete účinně regulovat zobrazení obsahu v rámci požadovaných hranic, řídit posuvníky a vytvořit vlastní správu obsahu.

Obecná prováděcí pravidla

Pravidlo CSS přetečení přijímá pět hodnot:

• viditelné;
• skryté;
• posunout;
• auto;
• dědictví.

Je-li viditelné, může obsah přesahovat prvek. V případě skrytí bude část, která je venku, oříznuta. Použitím posuvníku a automatického přidávání můžete přidat posuvníky pro zobrazení obsahu za prvek.

Velikost prvku je určena pravidly šířky a výšky. Když pravidlo CSS přetečení umožňuje rolování (scrolling a auto hodnoty), jeho sloupce jsou umístěny uvnitř prvku. Není to vždy pohodlné a ve většině případů neodpovídá návrhu stránky, když má vývojář zájem o správu obsahu a neplánuje používat klasické "posuvníky".

Praxe, když je prvek s obsahem považován izolovaně, dává malou příležitost k dosažení požadovaného výsledku. Pokud se prvek považuje za sbírku několika blokových značek vnořených nebo sdružených mezi sebou, otevře se řada možností.

Pokud přetečení CSS není standardní verzí pravidla, odpovědnost za správné zobrazení obsahu spočívá na kódu JavaScript.

Příklad: JavaScript + přetečení bez CSS

Jedinou "chybou" v pravidlech CSS je plnit své poslání, jak je předepsáno jejich syntaxou a účelem. Ve většině případů je to více než dost.

V ideálním případě použijte přetečení css (hodnoty auto nebo rolování). Při testování můžete vždy vidět, co se zobrazuje v konkrétním bloku.

Mezitím návrh stránky, touha vývojáře nabídnout vlastní možnosti procházení obsahu, a co je nejdůležitější, rozsah webu může vyžadovat jedinečně jiné řešení než to, co CSS může nabídnout.

V tomto příkladu bloky mohou obsahovat nejen obsah, který "vyklouzne" z hranic. Je třeba je vzájemně přesunout. Jeden objekt je emulace tabulky elektronické směny (ve skutečnosti je to div), ale dvě instance obsahu. V jednom případě jeden směr směny, druhý v jiném.

Každý blok se může roztahovat (zmenšovat) ve výšce a šířce a může být umístěn nad druhým blokem. Implementace těchto funkcí se standardním přetečením CSS není možné. Když změníte velikost hlavní jednotky, musí být rekonstruovány všechny vnitřní jednotky. Současně by se velikost písma měla měnit poměrně, protože možnost přerušit informace ve finančních programech se zdá být špatně použitelná.

Pure CSS overflow, ale bez posuvníků

Posunování, které nabízí HTML / CSS, je nepochybně praktické a pro ladění je prostě nezbytné, ale existuje jeden významný bod. Když je myš nad blokem, ve kterém se posouvá, obsah tohoto bloku se přesune a nikoli celá stránka.

Tento okamžik není v praxi velmi vhodný: musíte ovládat místo na stránce, kde můžete otočit kolečko myši. Někteří návštěvníci se to nelíbí, někteří prostě nedávají pozor.

Mezitím nic nebrání vývojáři v tom, aby spojil možné s požadovaným. Pokud obsah bloku přesahuje jeho hranice, můžete do něj jen přinést podstatu, která v něm zakazuje procházení. Ale když se na něj uživatel věnuje pozornost, zatímco drží kurzor myši na chvíli, je nutné blok rozložit na požadovanou velikost a přenést do něj veškerý obsah.

V tomto provedení bude stránka soustředěný obsah, který v případě potřeby může návštěvník sám odhalit.

V obecném smyslu byste při vytváření blokových prvků měli odklonit myšlenku, že jeden prvek je "div", "span" nebo "td". Přemýšlení s tagy HTML není velmi odměňující věc. Je mnohem praktičtější přemýšlet o sémantických prvcích stránky a kolik toho potřebují k implementaci HTML tagů je další otázka.

Obsahově řízený pohyb

Pokud budeme mít představu o "bloku, jehož rozměry určují jeho obsah", pak je pro pravidlo CSS přetečení zcela odlišná možnost. Není třeba spoléhat se na standardní posouvání nebo psát svůj vlastní kód JavaScript.

Pokud navrhujete místo jako sbírku prvků, jejichž velikost a postavení jsou určeny jejich obsahem, pak v závislosti na akcích návštěvníka budou určité bloky odhaleny. Je možné, že budou odhaleny na celé stránce nebo na její podstatné části.

Celkově je pohyb návštěvníka jeho zájmem o informace. Přijíždí na místo, pozoruje svůj počáteční stav a rozhoduje se, co je pro něj zajímavé. Pohyb myši na obrazovce nebo prstu na smartphonu automaticky otevírá aktuální blok a nechá ho zavřít a otevřít další.

V současné době, když vytváříme moderní webové stránky, není tak obtížné, bylo problematické překvapit a zájem návštěvníka. Přechod od myšlení pomocí značek HTML k manipulaci s informačními prvky, které jsou pro návštěvníka relevantní, je dobrý nápad.