Přehled vlastností CSS3 a jejich podpora v prohlížečích

Přehled vlastností CSS3 a jejich podpora v prohlížečích Tomáš Pijáček, PIJ006

Co je to CSS ? • CSS – Cascading Style Sheets • Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML, XML • Oddělení vzhledu dokumentu od jeho struktury a obsahu • Standard W3C • Vydány verze CSS 1 a CSS 2 • Dokončuje se revize CSS 2.1 a pracuje se na v. CSS 3

CSS3 • Vyhlášen před několika lety, udává se rok 2005 • Předpokládané dokončení 2015 • Modularita • Hlavním přínosem jsou grafické efekty • průhlednost prvků • přechody, stíny • kulaté rohy • více sloupové rozvržení • nové selektory

Testované prohlížeče • MozillaFirefoxver. 3.6. • MozillaFirefoxver. 4 • Opera ver. 11.01 • Google Chrome ver. 10.0 • Safari ver. 5.0.4 • Internet Explorer 8 • Internet Explorer 9

BorderRadius • Umožnění zaoblení objektu • Syntaxe border-radius: 100px; –moz-border-radius: 100px; • Podporované prohlížeče

Box Shadow • Umožňuje realizaci stínování • 1. posunutí stínu horizontálně od objektu • 2. posunutí stínu vertikálně od objektu • 3. nastavení okraje stínu • 4. nastavení barvy stínu • Syntaxe box-shadow:10px 5px 20px #000; -moz-box-shadow: 10px 5px 20px #000; -webkit-box-shadow: 10px 5px 20px #000; • Podporované prohlížeče

Text Shadow • Obdoba jako box-shadow • Využívá se pro stín textu • Syntaxe text-shadow: 5px 5px5px#000000; • Podporované prohlížeče

Transform • Slouží k nastavení rotace a pohybu objektu • Translate – nastavuje 2D pohyb objektu po osách x a y, hodnoty: (x[em],y[em]) • Syntaxe transform: translate(3em,1em); -moz-transform: translate(3em, 1em); -webkit-transform: rotate(3em, 1em); -o-transform: translate(3em, 1em);

Transform • Rotate – otáčí objekt, hodnoty: (x[deg]) • Syntaxe transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); -webkit-transform:rotate(100deg);

Transform • Scale – pracuje s velikostí objektů, hodnoty: (x). x = nastavuje zvětšení objektu. • Syntaxe transform: scale(2); -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2);

Opacity • Dává objektům průhlednost • Interval <0,1> kde 0 je 100% průhlednost • Syntaxe opacity:0.2; • Podporované prohlížeče

Selektory • Rozšíření funkcionalitu stávajících selektorů • Jedná se většinou pseudotřídy • Funkcionalita podobná jak ji známe například u JQuery selektorů

Selektory- podle atributů • CSS 2 E[att]- Element E, který obsahuje zadaný atribut E[att=”val”] -||- se zadanou hodnotou „val“ • CSS 3 E[att^=”val”] -Element E, jehož hodnota atributu začíná „val“ E[att$=”val”] - Element E, jehož hodnota atributu končí „val“ E[att*=”val”] - Element E, jehož hodnota atributu obsahuje „val“

Selektory- pomocí pseudotříd E:empty -Vybere prázdný element. Např. tedy prázdný <span></span> E::selection - Když vybíráte text myší, tak se nějakým způsobem zvýrazňuje. Typicky podbarvuje nějakou barvou E:checked -Vybere checkboxy, který jsou zaškrtnuté

Selektory- pomocí pseudotříd • E:nth-of-type(n)–n-tý element totožného typu (nεℕ) • E:nth-of-type(odd|even) –všechny liché| sudé elementy totožného typu. Vhodné pro rozlišení řádků • p:nth-of-type (5n+1) – výběr elementů podle matematické rovnice p:nth-of-type(2n+1) - liché elementy totožného typu p:nth-of-type(2n) - sudé elementy totožného typu

Nástroje pro snadnou tvorbu • CSS 3.0 Maker • BorderRadius, Gradient, CSS Transform, CSS Animation, Rotation, …

Nástroje pro snadnou tvorbu • SanchaAnimator • Transition and animations, 2D & 3D Transform, Layouts, Gradients, …

Použité zdroje • CSS3 Previews • http://www.css3.info/ • Webové služby • http://zdrojak.root.cz/clanky/pi-oviny-s-css3/ • Seriál Webdesignérův průvodce po CSS3 • http://zdrojak.root.cz/serialy/webdesigneruv-pruvodce-po-css3/

Děkuji za pozornost.

Přehled vlastností CSS3 a jejich podpora v prohlížečích