CSS3

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

CSS3 moduly

Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

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

Image Valuesbackground-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');

User interfacebox-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

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