Přehled dalších vlastností CSS
Hala bala smíchané vlastnosti
Podporované většinou v Mozille (Firefox), Opeře a Webkitu (Chrome)
| Vlastnost | hodnoty | význam | příklady | poznámky |
|---|---|---|---|---|
| quotes | none inherit 4 libovolné znaky |
žádné uvozovky dědění znaky budou použity jako uvozovky |
<q style="quotes:'„' '“' '‚' '‘'">citace a
<q>citace v citaci</q>v češtině</q> |
použitelné pouze pro html tag <q>! Prohlížeče se velmi liší v podpoře vykreslování a měnění uvozovek. IE podporuje od verze 8 (má-li doctype) Velmi špatně použitelné v in-line stylu. První dvě hodnoty určují podobu uvozovek první úrovně citace, druhé dvě hodnoty druhou úroveň. |
| box-sizing | border-box padding-box content-box |
vykreslovací režim | hodnota box-sizing znamená, že se do šířky kromě obsahu bude započítávat padding a rámeček. Hodnotu padding-box zná pouze Firefox. | |
| text-shadow | ||||
| word-break | normal keep-all break-all |
kontrola zalamování řádků | Asi jen v Exploreru | |
| marker-offset | délka auto |
|||
| empty-cells | show hide |
zobrazení prázdných buněk tabulky | ||
| caption-side | top left bottom right |
umístění popisku tabulky | ||
| counter-increment | nazev_pocitadla | při výskytu prvku navýší pojmenované počitadlo, které potom lze použít přes vlastnost counter() | counter - číslování nadpisů | Vhodné maximálně pro číslování nadpisů. Nefunguje v Exploreru. |
| outline-offset |
Pozadí
| Vlastnost | hodnoty | význam | příklady | poznámky |
|---|---|---|---|---|
| background-clip | border-box padding-box content-box |
Určuje, zda se bude pozadí vykreslovat i pod rámečkem, pod paddingem a nebo jenom pod obsahem (content). | Podpora v Opeře, Firefoxu, Chrome a v IE9. V jiných prohlížečích to funguje jako border-box. | |
| background-origin | border-box padding-box content-box |
Má smysl pouze pro prvky s nastavenou background-position. Určuje, odkud se bude počítat poloha pozadí. | Podpora v Opeře, Firefoxu, Chrome a v IE9. V jiných a starších prohlížečích to funguje jako padding-box. | |
| background-size | dvě hodnoty oddělené čárkou (pixely, procenta) contain cover auto |
první číslo určuje šířku obrázkového pozadí, druhé výšku. Pokud jsou
zadána procenta, sto procent je šířka prvku (resp. výška). Contain roztáhne obrázek pozadí se zachováním poměru tak, aby se celý vešel do prvku. Cover roztáhne pozadí, aby se do prvku vešla jeho kratší strana. Auto hodnota vykresluje obrázek pozadí v jeho normální velikosti. |
background-size: 100%, 100%; /* zdeformuje obrázek, který ale vše
vyplní*/ background-size: 20px,20px; background-size: contain; backgrouns-size: cover; background-size: auto, 50%; |
Pokud je zadáno pouze jedno číslo, výška je automaticky "auto". Podpora v Chrome, Opera, IE od verze IE 9 a Firefox od FF 4. |
Další vlastnosti Mozilly
-moz-outline: vlastnosti jako border, ale rámeček se vykresluje uvnitř
paddingu (outline je taková ta tečkovaná linka, co skáče při mačkání
tabulátoru)
-moz-box-sizing: border-box simuluje
Explorer v počítání rozměrů
a další vlastnosti + příklady css
vlastností -moz-*
Další vlastnosti Webkitu
orphans: 2; widows: 2; tiskové styly ovládající samostatné řádky na začátku a
konci stránek
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
-webkit-text-decorations-in-effect: none;
-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px; čert ví, co tyhle věci znamenají, to musím
teprve prozkoumat
-webkit-border-image: url('obrazek.jpg') 10 8 stretch round; dovoluje na místo, kde má být rámeček, vykreslit obrázek. V praxi to můžou být jenom malinké pixlíky. Když se vezme nějaký velký obrázek, tak se vykresluje na pozadí elementu, nejenom pod borderem. Hodně moc záleží na těch číslech (v příkladu mám 10 8), ale já jim ještě nerozumím.
-webkit-box-shadow: black 3px 6px 20px; udělá kolem blokového prvku stín. Barvu doporučuju používat vždy černou. První číslo (3px) je horizontální posun doprava, druhé číslo (6px)je vertikální posun dolů a třetí číslo (20px) je "hloubka", do které se stín promítá. Podobnou vlastnost box-shadow podporuje pouze Opera (podzim 2010) a -moz-box-shadow (podporuje Firefox).
Další vlastnosti Exploreru
text-align-last s hodnotami auto, left, right, center a justify umožňuje zadat zarovnání posledního řádku bloku odstavce, typicky pro odstavec zarovnaný do bloku (text-align: justify).
Sloupcová sazba
{-moz-column-width: 25em; -webkit-column-width:25em;} udělají sloupcovou sazbu. Sloupce budou široké tak, jak je nastaveno (v tomto případě 25 em). Bude jich tolik, kolik se jich vedle sebe vejde. IE ani Opera nic podobného neumějí.
Další vlastnosti
Border-image (a jeho varianty border-image-source, border-image-slice, border-image-width, border-image-outset a border-image-repeat) jsou obrázková pozadí rámečků. Nepodporuje IE 9, Opera ani Firefox, takže zatím neřeším.
Reklama
