Strana s titulkami - Triky CSS

Anonim

caption-sideVlastnosť CSS vám umožňuje definovať, kde na pozícii HTML je

prvok používaný v tabuľkách HTML. Túto vlastnosť je možné použiť aj na akýkoľvek prvok, ktorého displayvlastnosť je nastavená na caption-side.

table ( caption-side: top; )

Hodnoty

  • top: predvolená hodnota. Umiestni titulok do hornej časti tabuľky.
  • bottom: umiestni titulok do dolnej časti tabuľky.
  • inherit: označuje, že hodnota sa dedí z caption-sidehodnoty jej rodiča

Táto caption-sidenehnuteľnosť môže byť použitá buď na


element or the

display table-caption text-align

Uvedomte si, že vyššie uvedené hodnoty pre caption-sidesú relatívne k režimu zápisu v tabuľke. Napríklad, ak je tabuľka nastavená na režim zvislého zápisu, potom hodnoty topa bottombudú relatívne k smeru tabuľky.

Ukážka uvedená nižšie obsahuje prepínacie tlačidlo, ktoré prepína vlastnosti tabuľky caption-sidemedzi topa bottom, takže rozdiel môžete vidieť pomocou tabuľky s mnohými riadkami údajov:

Prezrite si
ukážku pera vlastnosti
na titulnej strane od CSS-Tricks (@ css-tricks) na CodePen.

V ďalšej ukážke writing-modeje tabuľka for nastavená na vertical-rl. Ako ukazuje prepínanie pomocou tlačidla, hodnoty topa bottomsú relatívne k režimu písania tabuľky:

Prezrite si
ukážku pera vlastnosti
na titulnej strane s iným režimom písania pomocou CSS-Tricks (@ css-tricks) na CodePen.

Neštandardné hodnoty iba pre Firefox

Firefox už dlho podporuje a stále podporuje štyri neštandardné hodnoty pre caption-side:

  • left: umiestni titulok doľava od tabuľky.
  • right: umiestni titulok napravo od tabuľky.
  • top-outside: umiestni titulok do hornej časti tabuľky s rozmermi nezávislými od tabuľky
  • bottom-outside: umiestni titulok do dolnej časti tabuľky s rozmermi nezávislými od tabuľky

Ukážka uvedená nižšie funguje iba v prehliadači Firefox a umožňuje vám použiť štyri tlačidlá na nastavenie rôznych neštandardných hodnôt:

Prezrite si
ukážku vlastnosti titulkov na strane prehliadača Pen Firefox od CSS-Tricks (@ css-tricks)
na CodePen.

Nové štandardné hodnoty

V najnovších návrhov špecifikácia CSS je caption-sidevlastnosť je súčasťou CSS Logical Vlastnosti Level 1 a zahŕňa hodnoty block-start, block-end, inline-starta inline-end. Posledné dva zodpovedajú neštandardným hodnotám lefta righthodnotám a vyžaduje sa, aby ich podporovali iba agenti používateľov, ktorí tieto neštandardné hodnoty podporujú.

Viac informácií

  • vlastnosť na titulnej strane v CSS2.1 spec
  • vlastnosť na titulnej strane v CSS2.2 spec
  • strana titulkov v logických vlastnostiach CSS 1

Podpora prehľadávača

s rovnakým účinkom. Táto vlastnosť síce ovplyvní pozíciu poľa titulkov ako celku (hodnota titulku sa počíta), ale neovplyvní zarovnanie textu vo vnútri poľa. Text vo vnútri poľa možno zarovnať pomocou vlastnosti.
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9,2+ 8+ 2,1+ 3,2+

Podpora v tabuľke vyššie sa týka základnej podpory pre štandard topa bottomhodnoty. Firefox tiež dodatočne podporuje neštandardné left, right, top-outsidea bottom-outsidehodnoty. Neexistuje žiadna podpora prehliadača pre nové block-start, block-end, inline-starta inline-endhodnotami.