techtalk css4 - fellyph cintra
TRANSCRIPT
![Page 1: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/1.jpg)
CSS4Fellyph Cintra TechTalk elo7
![Page 2: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/2.jpg)
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.
![Page 3: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/3.jpg)
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.
![Page 4: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/4.jpg)
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;
}
![Page 5: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/5.jpg)
OPTIONALITY
➤ As pseudo-classes de opcionalidade server para tratar elementos inputs ou formulários que são obrigatórios ou não.
![Page 6: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/6.jpg)
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;
}
![Page 7: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/7.jpg)
MUTABILITY
➤ As pseudo-classes de mutabilidade representam os elementos que permitem ou não alteração pelo usuário.
![Page 8: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/8.jpg)
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;
}
![Page 9: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/9.jpg)
MATCHES
➤ O pseudo-class :matches(-webkit-any, -moz-any) ajudam a realizar seletores de agrupamento mais simples.
http://jsfiddle.net/fellyph/b6e5xx3m/4/
![Page 10: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/10.jpg)
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;
}
![Page 11: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/11.jpg)
MATCHES
p:-webkit-any(.fechado, .cancelado, .nao-lido) {
color: red;
}
/* equivalente:
p.fechado, p.nao-lida, p.cancelado {
color: red;
}
*/
![Page 12: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/12.jpg)
NÍVEIS DE MATCHES
![Page 13: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/13.jpg)
NÍVEIS DE MATCHES
![Page 14: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/14.jpg)
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.
![Page 15: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/15.jpg)
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
![Page 16: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/16.jpg)
FUTUROLOGIA
![Page 17: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/17.jpg)
:BLANK
➤ Seleciona elementos sem conteúdo diferente do :empty não considera espaço em branco conteúdo válido.
![Page 18: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/18.jpg)
:BLANK
<p>Olar</p>
<p></p>
<p> </p>
p {
width: 50px;
height: 50px;
background: yellow;
}
p:empty {
background: lime;
}
p:blank {
background: red;
}
![Page 19: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/19.jpg)
:ANY-LINK
➤ Seleciona qualquer tipo de link em qualquer estado
![Page 20: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/20.jpg)
:ANY-LINK
:link, :visited {
color: #555;
}
:any-link {
color: #555;
}
Sem suporte
![Page 21: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/21.jpg)
:HAS
➤ Verifica se existe o elemento passado como parâmetro. Possui um comportamento similar ao jQuery .has()
![Page 22: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/22.jpg)
:HAS
<ul>
<li>Item</li>
<li>Item
<ul>
<li>Sub item</li>
</ul>
</li>
</ul>
li:has(> ul) {
color: red;
}
![Page 23: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/23.jpg)
CASE INSENSITIVE
➤ Permite selecionar atributos, com qualquer tipo de combinação entre letras maiúsculas e minúsculas.
![Page 24: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/24.jpg)
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
![Page 25: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/25.jpg)
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;
}
![Page 26: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/26.jpg)
DÚVIDAS
![Page 27: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/27.jpg)
OBRIGADO
![Page 28: Techtalk CSS4 - Fellyph Cintra](https://reader034.vdocuments.net/reader034/viewer/2022042707/58ee94ee1a28ab53608b4577/html5/thumbnails/28.jpg)
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