Techtalk CSS4 - Fellyph Cintra

CSS4
Fellyph Cintra
TechTalk elo7

CSS 4
➤ O CSS3 já está ai com força total, mas poucos
sabem que o CSS4 já está em rascunho e muitas
das novidades desta versão são os novos
seletores.

RANGE
➤ Hoje com os novos seletores é
possível tratar elementos que
estão limitados por um range,
com as pseudo-classes in-
range e out-of-range.

RANGE
<form>
<input type='number' id='quantidade' min='1' max='5' />
</form>
input[type="number"]:in-range {
border-color: green;
}
input[type="number"]:out-of-range {
border-color: red;
}

OPTIONALITY
➤ As pseudo-classes de opcionalidade server para tratar
elementos inputs ou formulários que são obrigatórios ou não.

OPTIONALITY
<form>
<input type='email' placeholder='Seu email' required/>
<input type='text' placeholder='Seu nome' optional/>
</form>
input:optional {
border-style: dotted;
}
input:required {
border-color: red;
}

MUTABILITY
➤ As pseudo-classes de
mutabilidade representam os
elementos que permitem ou
não alteração pelo usuário.

MUTABILITY
<p contenteditable='false'>Apenas de leitura</p>
<p contenteditable='true'>Conteúdo editável</p>
<form>
<input type='text' value='Olar amigo' readonly>
<input type='text' value='Olar amigo 2'>
</form>
input:read-only, p:read-only {
background: red;
}
:read-write {
background: green;
}

MATCHES
➤ O pseudo-class :matches(-webkit-any, -moz-any) ajudam a
realizar seletores de agrupamento mais simples.
http://jsfiddle.net/fellyph/b6e5xx3m/4/

MATCHES
<ul>
<li>Mensagem 1</li>
<li class='fechado'>Mensagem 2</li>
<li class='nao-lida'>Mensagem 3</li>
<li class='cancelado'>Mensagem 4</li>
</ul>
li:-webkit-any(.fechado, .cancelado, .nao-lida) {
color: red;
}
li:-moz-any(.fechado, .cancelado, .nao-lida) {
color: red;
}

MATCHES
p:-webkit-any(.fechado, .cancelado, .nao-lido) {
color: red;
}
/* equivalente:
p.fechado, p.nao-lida, p.cancelado {
color: red;
}
*/

NOT
➤ Presente no CSS3, agora ele
possui suporte para receber
mais de um argumento no
CSS4. Este seletor aplica a
regra aos elementos que
não se aplica ao seletor,
sendo assim o oposto o
macthes.

NOT
<ul>
<li>Mensagem 1</li>
<li class='fechado'>Mensagem 2</li>
<li class='nao-lida'>Mensagem 3</li>
<li class='cancelado'>Mensagem 4</li>
</ul>
li:not(.fechado, .cancelado) {
color: red;
}
Sem suporte para seletor composto

:BLANK
➤ Seleciona elementos sem
conteúdo diferente do :empty
não considera espaço em
branco conteúdo válido.

:BLANK
<p>Olar</p>
<p></p>
<p> </p>
p {
width: 50px;
height: 50px;
background: yellow;
}
p:empty {
background: lime;
}
p:blank {
background: red;
}

:ANY-LINK
➤ Seleciona qualquer tipo de
link em qualquer estado

:ANY-LINK
:link, :visited {
color: #555;
}
:any-link {
color: #555;
}
Sem suporte

:HAS
➤ Verifica se existe o elemento
passado como parâmetro.
Possui um comportamento
similar ao jQuery .has()

:HAS
<ul>
<li>Item</li>
<li>Item
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
li:has(> ul) {
color: red;
}

CASE INSENSITIVE
➤ Permite selecionar
atributos, com qualquer
tipo de combinação entre
letras maiúsculas e
minúsculas.

CASE INSENSITIVE
<ul>
<li><a href="test.pdf">Test </a></li>
<li><a href="test.PDF">Test </a></li>
<li><a href="test.pDF">Test </a></li>
</ul>
a[href$="pdf" i] {
color: red;
}
Sem suporte

DIRECTION
➤ Pseudo-classes que selecionam os itens de acordo a direção de
texto
<div dir="ltr"> Some text Default writing direction. </div>
<div dir="rtl"> ‫$جاه‬$‫ت‬‫اال‬ ‫$يسار‬$‫ل‬‫ا‬ ‫$ى‬‫ل‬‫إ‬ ‫$يمني‬$‫ل‬‫ا‬ ‫$ن‬‫م‬ ‫$نصوص‬$‫ل‬‫ا‬ ‫$عض‬‫ب‬ </div>
:dir(ltr) {
color: red;
}
:dir(rtl) {
color: blue;
}

REFERÊNCIAS
➤ http://css4.rocks/selectors-level-4/
➤ http://css4selectors.parseapp.com/
➤ http://www.sitepoint.com/future-generation-css-selectors-
level-4/
➤ https://davidwalsh.name/css4-preview
➤ http://www.w3.org/TR/selectors4

Techtalk CSS4 - Fellyph Cintra

Mais conteúdo relacionado

Semelhante a Techtalk CSS4 - Fellyph Cintra

Mais de Fellyph Cintra

Techtalk CSS4 - Fellyph Cintra