Přehled dalších vlastností CSS
Tahle stránka je takové moje odkladiště věcí, které v CSS možná stojí za pozornost, ale chci si počkat na lepší podporu. Určitě tu toho dost chybí.
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. | |
| 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 | podpora top a left ve všech prohlížečích. Left a right jen ve Firefoxu, jinde ne. Caption může být v tabulce umístěna libovolně, ne pouze na začátku. | |
| 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ů příklad | Vhodné maximálně pro číslování nadpisů. Nefunguje v Exploreru. |
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).
Další vlastnosti Internet Exploreru, spíše zastaralé
Samostatné stránky s podrobnostmi: grafické filtry, barvení rolovací lišty, CSS kurzory
| Vlastnost | hodnoty | význam | poznámky |
|---|---|---|---|
| filter | none Alpha Blur Chroma DropShadow FlipH FlipV Glow Gray Invert Light Mask Shadow Wave XRay |
grafický filtr žádný zprůhlednění rozmazání zprůhlednění stín převrácení horizontálně převrácení vertikálně obsvícení stupně šedi inverze barev nasvícení (skriptem) podbarvení průhlednosti stín vlna perokresba |
Každý filtr má další parametry v závorce. Lze aplikovat pouze na přesně rozměrované objekty (width, height), v IE 6 i na nerozměrované. Popis grafických filtrů na samostatné stránce a příklady. Jde tím udělat i poloprůhledné png v exploreru. |
| scrollbar-něco-color (několik různých vlastností) |
barva | zbarvení určitých částí rolovací lišty | Barvení rolovací lišty v samostatném textu. Funguje od verze IE 5.5. |
| behavior | none url(cesta) |
přiřazení skriptového chování | návod na používání vlastnosti behavior jsem napsal pro Interval |
Všechny CSS vlastnosti, které začínají mso-* jsou nestandardním rozšířením Microsoft Office. Aplikace MS Office si do nich ukládá informace, které v css zatím neexistují a které nechce ztratit pro případ, že by se ten dokument znovu otevřel v Officech. Vlastnosti mso-* nefungují v žádném prohlížeči, pokud vím, tak ani v IE 6.
Sloupcová sazba
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.
image-orientation říká, jestli se má při vykreslování obrázku brát ohled na EXIF informace. Exif někdy totiž určují, že obrázek má být otočený jinak, než je v datech.
Transform
Existuje strašně moc transformačních funkcí, které dokážou změnit prvek (roztáhnout, zkosit, rotovat apod.). Jejich popis je zatím nad mé síly.
Animation
Dá se nastavit, že při změně některých vlastností se budou vlastnosti měnit postupně, což vytvoří efekt animace.
Reklama
