Užitečné prvky CSS3, náhed do CSS4

1. CSS3

2. Co je CSS3
 Jazyk pro popis způsobu zobrazení elementů na stránkách napsaných v
jazycích HTML, XHTML nebo XML.
 Rozdělení specifikace na jednotlivé moduly
 Vývoj zahájen 2005
 Dokončení 2015

3. CSS3 moduly
 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface

4. Selektory
 [att^=val] – začíná
 a[href^=“https://“]
 [att$=val] – končí
 a[href^=“.pdf“]
 [att*=val] – obsahuje
 div[id*=“text“]
 elm1 ~ elm2
 checkbox:checked ~ div{ … }
 :first-child, nth-of-type(3n),
 :last-child

5. Image Values
background-image: image();
 Image fallback
 background-image: image("wavy.svg", 'wavy.png' , "wavy.gif " , #000000 );
 Image Fragments
 background-image: image('sprites.svg#xywh=40,0,20,20');

6. User interface
box-sizing: content-box|border-box|initial|inherit;
div{
box-sizing:content-box;
width:100px;
background:#ff0000;
border:5px solid #ffffff;
}
div{
box-sizing:border-box;
width:100px;
background:#ff0000;
border:5px solid #ffffff;
}
100px 100px

7. CSS4
 Cascading Scriptsheets
#hello-world:hover {
script: script(alert('hello world'));
}
 Proper Email Styling Support
 Použitelnost tagů <div>, <article>, <section>, …
 Externí css soubor
 New and Old Properties
 text-decoration: marquee | blink ;
 retina: true;
 background-music: muzak