Moderní tvorba webových aplikací

O webu

Flow

Vlastnosti flow-from a flow-into umožňují pohodlně přeskupovat obsah mezi elementy.

2 minuty
.prvni {
  flow-into: identifikator;
}
.druhy {
  flow-from: identifikator;
}

Tento kód zajistí, že bez změny HTML kódu se obsah z elementu .prvni přesune od elementu .druhy.

Podpora

Momentální podpora je špatná. V Chrome nějaký čás flow-* fungovalo (ve versích 15–18). V novějších by se měla dát zapnout podpora v about:flags přes položku experimentální funkce Web Platform (chrome://flags/#enable-experimental-web-platform-features). Nicméně v Chrome 35 to k úspěchu nevedlo.

Internet Explorer 10 a 11 podporují přetékání mezi elementy pouze pro značku <iframe>.

Využití

Při dostatečné podpoře by to pomohlo hodně při vytváření responsivního designu. Typický problém, kdy se vícesloupcový layout přeskládává do jedné nudle. V takovém případě musí být celé sloupce souvisle pod sebou.

CSS vlastnosti flow-* umožní přeskládat obsah klidně na přeskáčku. Tj. kus z prvního sloupce, kus z druhého a podobně.

Odkazy jinam

Související články

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025