CSS Rozdíly 2

Třetí verze CSS přinesla zatím nejvýraznější vylepšení CSS v historii. Počet nových věcí je skutečně v porovnání s ostatními verzemi obrovský. Celkově se zaměřuje spolu s HTML 5 na vyštípání externích pluginů a zjednodušení vkládání animací bez použití skriptu. Havními novými věci jsou tedy animace, přeměny, nastavení přetékání prvků.

Z hlediska animace, přechodů a podobných věcí se to týká hlavně vlastností @keyframes, animation, transform a transition. O těchto se můžete dozvědět v tutoriálu o animacích a přechodech. Z hlediska pozadí jsou nové vlastnosti například background-size, pomocí které můžeme určit velikost obrázku na pozadí nebo background-clip, která nám určuje oblast, kam se pozadí rozprostře. O těchto vlastnostech se můžete dozvědět více v tutoriálech Animace a Přeměny

Ohledně nových vlastností co se ohraničení týče stojí za zmínku zejména border-radius, pomocí kterého nastavujeme zaoblení rohů u sekcí, zejména navigačních. Další zajímavou vlastností je možnost nastavení stínu – > box-shadow. Další vlastnosti, které se týkají přetékání prvku jsou overflow-x, overflow-y a overflow-style, které nám říkají jakým způsobem se řeší přetékající prvek. Případně další velmi užitečnou vlastností z hlediska velikosti je nová vlastnost resize, která nám určuje jestli můžeme měnit velikost prvku a jakým způsobem.

Z hlediska úpravy textu nám přibyla nastavení text-shadow – stínu textu, text-overflow – nastavení přetékajícího textu, text-wrap – nastavení zalomení textu, word-break – rozdělení slov v případě, že se nevejdou na řádek.

Z hlediska výšky a šířky nám usnadňuje zejména vlastnost box-sizing s hodnotou border-box, která nám velmi usnadňuje počítání výšky a šířky u objektů. Kromě toho také přibyli vlastnosti týkající se sloupců. O tomto více v tutoriálu Výšky a šířky

Další užitečnou novou vlastností je nový atribut background -> nastavení barevného přechodu pomocí CSS. Obecně také CSS3 obsahuje mnoho nových vlastností pro sekce, obecně řeší hodně zarovnání a nějaké další nové věci.

Přehled nových vlastností:

Animace

@keyframes – nastavení animace

animation – vkládání animace

Pozadí

background-clip – specifikuje kde se vykresluje pozadí

background-size – nastavuje velikost pozadí

background-origin – nastavuje pozici pozadí

Ohraničení

border-image – dovoluje nám nastavit jako ohraničení obrázek

box-shadow – pomocí tohoto dáváme sekci stín

border-radius – umožňuje uživateli nastavit kulaté ohraničení

Nastavení sekcí

overflow-x – přetékání po ose x

overflow-y – přetékání po ose y

overflow-style – nastavuje styl přetékání

rotation – nastavuje rotaci prvku

box-align – specifikuje rozvržení prvků v sekci horizontálně

box-direction – specifikuje pořadí prvků v sekci

box-flex – specifikuje flexibilitu prvků

box-pack – specifikuje vertikální pozici prvků

box-sizing – nastavuje model zarovnávání výšky a šířky

resize – nastavuje, jestli se prvku dá uživatelem měnit velikost – výška/šířka

outline-offset – nastavuje jak daleko se má vzdálené ohraničení vykreslovat

Text

@font-face – nastavuje vlastní font

font-size-adjust – nastavuje rozdíl mezi velikostí fontu v případě že první neni použitelný

hanging-punctuation – určuje, jestli může interpunkce přesahovat sekci

text-justify – určuje jak se má zarovnat text, je li nastaveno zarovnání do bloku

text-outline – určuje vzdálené ohraničení textu

text-overflow – nastavuje přetékající text

text-shadow – nastavuje textu stín

word-wrap – nastavuje zalomení slov

Přeměny

transform – nastavuje 2D nebo 3D přeměnu prvku

perspective – nastavuje perspektivu měnícího se prvku

backface-visibility – nastavuje je-li zadní strana prvku viditelná nebo ne

Přechody

transition – nastavuje přechod prvku

 

Sloupce

column-count – specifikuje počet sloupců

column-fill – specifikuje jak se sloupce vyplňují

column-gap – určuje mezeru mezi sloupci

column-rule – určuje čáru mezi sloupci – barva, tloušťka, etc

column-width – nastavuje šířku sloupce