Strana s titulky - Triky CSS

caption-sideVlastnost CSS vám umožňuje definovat, kde na pozici HTML je

prvek, který se používá v tabulkách HTML. Tuto vlastnost lze také použít na jakýkoli prvek, jehož displayvlastnost je nastavena na caption-side.

table ( caption-side: top; )

Hodnoty

• top: výchozí. Umístí titulek do horní části tabulky.
• bottom: umístí titulek do spodní části tabulky.
• inherit: označuje, že hodnota je zděděna od caption-sidehodnoty jejího rodiče

caption-sideVlastnost lze aplikovat buď na


element or the

display table-caption text-align

Všimněte si, že výše uvedené hodnoty pro caption-sidejsou relativní k režimu psaní tabulky. Například pokud je tabulka nastavena na režim svislého psaní, pak hodnoty topa bottombudou relativní ke směru tabulky.

Níže uvedená ukázka obsahuje „přepínací“ tlačítko, které přepíná vlastnosti tabulky caption-sidemezi topa bottom, takže rozdíl můžete vidět pomocí tabulky s mnoha řádky dat:

Podívejte se na
ukázku pera vlastnosti na titulní straně pomocí CSS-Tricks (@ css-tricks)
na CodePen.

V další ukázce je writing-modepro stůl nastaveno na vertical-rl. Jak je znázorněno přepínáním pomocí tlačítka, hodnoty topa bottomjsou relativní k režimu psaní tabulky:

Podívejte se na
ukázku pera vlastnosti na titulní straně s jiným režimem psaní pomocí CSS-Tricks (@ css-tricks)
na CodePen.

Nestandardní hodnoty pouze pro Firefox

Firefox již dlouho podporuje a stále podporuje čtyři nestandardní hodnoty pro caption-side:

• left: umístí titulek nalevo od tabulky.
• right: umístí titulek napravo od tabulky.
• top-outside: umístí titulek do horní části tabulky s rozměry nezávislými na tabulce
• bottom-outside: umístí titulek do spodní části tabulky s rozměry nezávislými na tabulce

Níže uvedená ukázka funguje pouze ve Firefoxu a umožňuje vám pomocí čtyř tlačítek nastavit různé nestandardní hodnoty:

Podívejte se na
ukázku pera Firefoxu s vlastnostmi titulků pomocí CSS-Tricks (@ css-tricks)
na CodePen.

Nové standardní hodnoty

V nejnovějších návrhů specifikace CSS je caption-sidevlastnost je součástí CSS Logical Vlastnosti Level 1 a zahrnuje hodnoty block-start, block-end, inline-starta inline-end. Poslední dva odpovídají nestandardním hodnotám lefta righthodnotám a musí být podporovány pouze agenty uživatelů, kteří tyto nestandardní hodnoty podporují.

Více informací

• vlastnost na titulní straně ve specifikaci CSS2.1
• vlastnost na titulní straně ve specifikaci CSS2.2
• strana s titulky v logických vlastnostech CSS 1

Podpora prohlížeče

prvek se stejným účinkem. I když tato vlastnost ovlivní pozici rámečku titulků jako celku (hodnota titulku se počítá do), neovlivní zarovnání textu uvnitř rámečku. Text uvnitř pole může být zarovnán pomocí vlastnosti.

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
1+	1+	1+	9,2+	8+	2.1+	3,2+

Podpora v tabulce výše odkazuje na základní podporu pro standard topa bottomhodnoty. Firefox také dodatečně podporuje nestandardní left, right, top-outsidea bottom-outsidehodnoty. Neexistuje žádná podpora prohlížeče pro nové block-start, block-end, inline-starta inline-endhodnotami.