techtalk css4 - fellyph cintra
TRANSCRIPT
CSS4Fellyph 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;
}
*/
NÍVEIS DE MATCHES
NÍVEIS DE MATCHES
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
FUTUROLOGIA
: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;
}
DÚVIDAS
OBRIGADO
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