Slide 1
Slide 1 text
#CSS {
styles: oh-yeah;
}
@AtilaFassina
Slide 2
Slide 2 text
atilafassina.com | front-end developer
Slide 3
Slide 3 text
.image {
58.2Kb
113Kb
Slide 4
Slide 4 text
5.1Kb
27.5Kb
.image {
background-image: url(‘http://domain.com/image.png’);
height: 60px;
width: 40px;
display: inline-block;
}
Slide 5
Slide 5 text
“CSS takes a day to learn,
but a lifetime to master.”
-- Bruce Lee
Slide 6
Slide 6 text
:pseudo-class
::pseudo-element
Slide 7
Slide 7 text
:pseudo-classes
informações fora do documento
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-classes
:hover
:active
:focus
:visited
:link
:target
:lang()
:not()
:root
:checked
:nth-child()
:first-child
:last-child
:last-of-type
:first-of-type
Slide 8
Slide 8 text
::pseudo-elements
abstrações além da linguagem do documento
conteúdo não existe na source do documento
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements
::first-line
::first-letter ::before
::after
Slide 9
Slide 9 text
retro-compatibilidade
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements
:first-line
:first-letter :before
:after
Slide 10
Slide 10 text
combinators
9+
Slide 11
Slide 11 text
Child selector (>)
Seleciona o filho direto do elemento
div > p {
font-size: 1.5rem;
}
Slide 12
Slide 12 text
Adjacent Sibling (+)
Seleciona o elemento imediatamente adjacente
div + p {
font-size: 1.5rem;
}
Slide 13
Slide 13 text
General Sibling (~)
Seleciona qualquer elemento adjacente
div ~ p {
font-size: 1.5rem;
}
Slide 14
Slide 14 text
border-radius
9+
Slide 15
Slide 15 text
border-radius: 10px
Slide 16
Slide 16 text
border-radius: 10px 50% 2em 100px
Slide 17
Slide 17 text
border-radius: 10px 50% 2em 100px / 10px
Slide 18
Slide 18 text
border-radius: 10px 50% 2em 100px / 10px 25% 5em 75px
Slide 19
Slide 19 text
% height
% width
x
y
Slide 20
Slide 20 text
border-radius: x1 x2 x3 x4 / y1 y2 y3 y4
x4
y4
x1
y1
x2
y2
y3
x3
Se não houver / o valor de y é 1
Slide 21
Slide 21 text
@font-face
Slide 22
Slide 22 text
.woff2 ✓ 4.4*
.woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4
.ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓
.eot 6-8
.svg ✓ ✓ ✓ 3.x
Slide 23
Slide 23 text
@font-face {
font-family: 'Ubuntu';
src: url($font-url + 'ubuntu/ubuntu-normal.woff2') format('woff2'),
url($font-url + 'ubuntu/ubuntu-normal.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Slide 24
Slide 24 text
.woff2 ✓ 4.4*
.woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4
.ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓
.eot 6-8
.svg ✓ ✓ ✓ 3.x
Slide 25
Slide 25 text
@font-face {
font-family: 'Ubuntu';
src: url($font-url + 'ubuntu/ubuntu-normal.woff2') format('woff2'),
url($font-url + 'ubuntu/ubuntu-normal.woff') format('woff'),
url($font-url + 'ubuntu/ubuntu-normal.eot) format(eot),
url($font-url + 'ubuntu/ubuntu-normal.svg) format(svg);
font-weight: normal;
font-style: normal;
}
Slide 26
Slide 26 text
CSS3111
“Unkown error”
Slide 27
Slide 27 text
CSS3111
FontForge
Slide 28
Slide 28 text
FontForge
CSS3111
Slide 29
Slide 29 text
html::before {
content: 'foo';
position: fixed;
top: -5rem;
font: 0/0 'MyFont';
}
Slide 30
Slide 30 text
null transform hack
Slide 31
Slide 31 text
transform: translate3d(0,0,0);
transform: translateZ(0);
renderiza elemento através da GPU
Graphics Processing Unit
Slide 32
Slide 32 text
“Every magic comes with a price.”
-- Rumplstilskin
Slide 33
Slide 33 text
Processamento de GPU limitado
Mobile
Slide 34
Slide 34 text
will-change
Slide 35
Slide 35 text
will-change: [[prop1]],[[prop2]],...;
Otimiza processamento das modificações
Slide 36
Slide 36 text
-
will-change: all-the-things;
Slide 37
Slide 37 text
-
Slide 38
Slide 38 text
Otimizações podem demandar muito
processamento
Slide 39
Slide 39 text
Não é possível otimizar
tudo de uma vez.
Slide 40
Slide 40 text
Não é instantâneo!
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Efeitos Colaterais
- novo stacking context
- novo containing block