Can I use... CSS4?

Meet.js Białystok

@maciejkorsan

Dzięki za uwagę!

follow me: @maciejkorsan

There is no CSS Level 4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels. ("CSS Level 3" as a term is used only to differentiate it from the previous monolithic versions.)

http://www.w3.org/TR/CSS/

Czym jest CSS3?

Wszystkim co wyszło po CSS 2.1 (7 czerwca 2011)

attr()

CR

p {
  color: attr(data-color);
  background-image: url(attr(data-image));
}

wsparcie: 0%

:matches()

WD

:matches(.one) {
    background: hotpink;
}

:-webkit-any(.one) {
    background: hotpink;
}

wsparcie: 9,45% + 71.5%  

:not()

WD

p:not(.highlight, .seen) {
    background: #000;
}

div:not(span) {
    display: none;
}

wsparcie: 9,45%

:in-range / :out-of-range

WD

input:in-range {
    border: 2px solid green;
}

input:out-of-range {
    border: 2px solid red;
}


<input type="number" name="quantity" min="1" max="5">

wsparcie:   0.05% + 87.08%  

all / unset

CR

p {
    color: hotpink;
    line-height: 42px;
    text-decoration: underline;
    .
    .
}

p.reset {
    all: unset;
}

wsparcie: 63,55%

element()

WD

<div class="elementBackground">
  <p>This box uses the element with the myBackground ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1">
      <p class="text">This text is part of the background. Cool, huh?</p>
  </div>
</div>

wsparcie: 8,23%

.elementBackground {
    width:400px; 
    height:400px; 
    background:-moz-element(#myBackground1) no-repeat;
}

#myBackground1 {
    width:1024px; 
    height:1024px; 
    background-image: linear-gradient(to right, red, orange, yellow, white);
}

.text {
    transform-origin:0 0; 
    transform: rotate(45deg); 
    color:white;
}

blending

.blend {
    mix-blend-mode: multiply;
    background: cyan;
    .
    .
}

wsparcie:   64,5%  

CR

object-fit/object-position

.fitMe {
    object-fit: cover;
}

wsparcie:   71,52%  

CR

@supports

body {
	background: red;
}

@supports (box-shadow: 2px 2px 2px black)  {
	body {
		background: green;
	}
}

wsparcie:   69,35%  

CR

CSS Variables

WD

wsparcie: 59.76%

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

Time-dimensional

UNOFF

:current(p, li) {
    background-color: yellow;
}

:past(p, li),
:future(p, li) {
    background-color: gray;
} 

:has

UNOFF

.meetjs:has(.korsan) {
    width: 120%;
    height: 120%;
}

Warto Zaglądać:

http://caniuse.com

http://www.w3.org/TR/selectors4

http://www.w3.org/TR/CSS/

Dzięki za uwagę!

follow me: @maciejkorsan