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

citace bez stylu a citace v citaci a pokračování citace

<q style="quotes:'&#8222;' '&#8220;' '&#8218;' '&#8216;'">citace a <q>citace v citaci</q>v češtině</q>
citace a citace v citaci v češtině

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

Column-count

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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.