CSS en los últimos años, fuera de la red CSS, no ha traído muchas características nuevas. Pero durante el año pasado, surgieron docenas de nuevas características para CSS, abriendo una nueva posibilidad para el diseño de aplicaciones web. Y WordPress no quedó al margen de estas novedades. ¿Cómo afectan las nuevas características como consultas de contenedores, capas, subcuadrículas y :has() al desarrollo de la interfaz? En esta charla descubrirás cómo. Simulemos situaciones cotidianas, viendo cómo podemos beneficiarnos de estos nuevos recursos.

1. Devfest Cerrado
Fellyph Cintra
Web Consultant
CSS 2022 um mundo de
novas possibilidades

2. @fellyph
● Google Developer Expert
● Ex-AMP project
● WordPress Contributor
● Learn WordPress
instructor

3. Agenda
1. Object-fit
2. Aspect-ratio
3. Clamp
4. Query container
5. :has()
6. @property
7. Accent-color
8. @layer
9. Iterop 2023
10. image-set()
11. Seletores aninhados
12. Media query para preferência
de dados
13. Personalização de select

4. Passado presente
futuro do CSS

5. Interop
1. @layer
2. Color spaces and functions
3. Containment
4. <dialog>
5. Form compatibility
6. Scrolling
7. Subgrid
8. Typography
9. Viewport units
10. Web compat

6. Interop
2022
Progress

7. Copa CSS

8. Erros comuns
1
2
3

9. Soluções possíveis:
1. Object-fit
2. Aspect-ratio
3. clamp

10. É uma propriedade CSS
que permite que a imagem
mantenha a proporção e
preencha a área como se
fosse um plano de fundo.
.main-header__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
}
1. Object-fit

11. 1. Object-fit
antes depois

12. É uma propriedade que
preserva a proporção das
imagens. Assim,
impedindo-os de distorcer.
2. aspect-ratio
.card__img {
object-fit: cover;
aspect-ratio: 1 / 1;
}

13. 2. aspect-ratio
antes depois

14. Permite criar um intervalo
entre um valor máximo e
mínimo com base na
resolução do navegador.
3. clamp()
.title {
font-size: clamp(20px, 4vw, 50px)
}

15. 3. clamp()
h2 {
font-size: clamp(18px, 4vw, 52px)
}
/* Smartphones ----------- */
@media only screen and (max-device-width : 480px) {
h2 {
font-size: 18px;
}
}
/* tablet ----------- */
@media only screen and (min-device-width : 480px) and (max-device-width : 1024px)
{
h2 {
font-size: 28px;
}
/* Desktops ----------- */
@media only screen and (min-width : 1224px) {
h2 {
font-size: 36px;
}
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
h2 {
font-size: 52px;
}
}
antes depois

16. CSS HOJE
4. Query container
5. :has()
6. @property
7. accent-color
8. @layer

17. 4. Container queries
● Antes do @container, os elementos da página da
web só podiam responder ao tamanho de toda a
viewport
● Depois de @container, os elementos podem
responder ao tamanho ou estilo de um contêiner
pai
● Isso significa que podemos projetar blocos
independentemente
media query
container query

18. 4. Container queries
.card {
container-type: inline-size;
container-name: card;
}
@container card (max-width: 300px) {
.card-title {
font-size: 30px;
}
}

19. 5. :has()
.card:has(.destaque) {
border: 2px solid #2800ff;
}
.card:has(img) .card-title {
text-align: left;
}
.card:not(:has(.card-intro)) {
text-align: center;
background: linear-gradient(180deg,
#efd5ff 0%, #515ada 100%);
}

20. 5. Exemplo com :has()
.gif { opacity: 0.3; }
body:has(input[value="5"]:checked) .muito {
opacity: 1;
}
body:has(input[value="3"]:checked) .empolgado {
opacity: 1;
}
body:has(input[value="1"]:checked) .nada {
opacity: 1;
}
https://glitch.com/edit/#!/has-selector-value

21. @property CSS. Ela vem para dar
um significado semântico as
propriedades CSS, além de
definir valores iniciais e
alternativos para variáveis.
@property --colorPrimary {
syntax: '<color>';
initial-value: hotpink;
inherits: false;
}
6. @property

22. @property --stop {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}
.times {
transition: --stop 0.3s, --stopTwo 0.3s,
--textColor 0.3s;
background: linear-gradient(
45deg,
var(--teamColor) var(--stop),
white var(--stop),
white var(--stopTwo),
var(--teamColor) var(--stopTwo)
);
6. @property
https://glitch.com/edit/#!/property-css

23. 6. accent-color
/* para todos inputs */
:root {
accent-color: hotpink;
}
/* para um input */
progress {
accent-color: indigo;
}

24. 7. @layer
@layer framework, base, utilities;
@import url(‘https://cdn.bootstrap.com/fake-url.css’)
layer(framework);
@layer base {
a { font-weight: 800; }
.link {
color: blue; /* ignored */
}
}
@layer utilities {
.pink { color: hotpink; }
}

25. Suporte
4. Query container (73%)
5. :has (82%)
6. @property (72%)
7. Accent-color (90%)
8. @layer (89%)

26. Futuro do CSS
9. Iterop 2023
10. image-set()
11. Seletores aninhados
12. Media query para preferência de dados
13. Personalização de select

27. A fase de sugestões fechou no dia 15
de outubro. Agora o comitê está
discutindo quais são as prioridade.
9. Interop 2023

28. .div2 {
background-image: image-set(
"puppy.avif" type("image/avif"),
"puppy.webp" type("image/webp"),
"puppy.png" type("image/png")
);
}
10. image-set()
https://github.com/web-platform-tests/interop/issues/144

29. article {
color: darkgray;
& > a {
color: var(--link-color);
}
/* article > a */
}
11. Seletores aninhados

30. @media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
12. Media query para redução de uso de dados

31. 13. Select
personalizado
.my-select-menu::part(button) {
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}

32. Obrigado
@fellyph

33. Perguntas

34. Referências
https://web.dev/state-of-css-2022/
https://css.oddbird.net/rwd/query/explainer/
https://web.dev/accent-color/
https://www.bram.us/2021/12/21/the-css-has-selector-is-way-more-than-a-parent-
selector/
https://make.wordpress.org/core/2022/05/27/block-font-sizes-and-fluid-typography/