CSS4

CSS4

podróż do przyszłości

Andrzej Mazur | meet.js | Warszawa | 05.11.2011

Kaskadowe arkusze stylów, poziom 4

Pierwszy szkic CSS4

Pseudoklasy logiczne

:matches()

li a:link, li a:hover, li a:visited, li a:focus

li a:matches(:link, :hover, :visited, :focus)

:-moz-any() Mozilli

:not()

p:not(.active, .visible)

Pseudoklasy adresu

:any-link

a:link, a:visited => a:any-link

:local-link

http://end3r.com/portfolio/client/gtech/

:local-link(2)

http://end3r.com/portfolio/client/

Pseudoklasy czasu

:past, :current, :future

text-to-speech, napisy do filmów WebVTT

Pseudoklasy formularza

:indeterminate

checkbox, radio button

Pseudoklasy struktury drzewa [tree]

:nth-match, :nth-last-match

:nth-child() + :matches()

:nth-child(even)

:matches(.active)

li a:nth-match(even of .active)

Pseudoklasy struktury siatki [grid]

:column, :nth-column, :nth-last-column

:nth-column(even)

Selektor rodzica

ul li a.active

ul ?li a.active

Przyszłość CSS3 i CSS4

Filtry

filter: grayscale, blur, sepia

img { filter: grayscale(0.25); }

img { filter: blur(5,2) sepia(1); }

Shadery

filter: file.fs

img { filter: custom(url(foo.fs), 20 20, phase 90); }

Wartości

width: calc((12em * 3) + 10px);

height: min(3em, 30px);

Zmienne

@var $kolorTekstu #FF0000;

h1 { color: $kolorTekstu; }

Detekcja funkcjonalności

@supports (display: grid) {}

@supports (background: linear-gradient) and (transform: rotate3d) {}

Powtarzalne fragmenty

@mixin fragment { color: #F00; font-size: 14px; }

h1 { @mix fragment; margin: 10px; }

@mixin innyFragment($kolor #F00) { color: $kolor; font-size: 14px; }

h1 { @mix innyFragment(#00F); margin: 10px; }

Zagnieżdżanie

h1 { border: 1px solid #F00;

& a { color: #00F;

& :hover { color: #FF0; }

}

}

Źródła, więcej informacji