 Boa tarde, bem-vindos a mais uma sessão no WorldCamp Europe, no WorldCamp Lisboa, 2023, já estou a antecipar-me. Ora, vamos ter daqui a breves instantes neste palco, o Filipe Cintra, o Filipe criou o seu primeiro projeto em WordPress em 2008, foi logo um tema, leva vários anos de contribuição para a comunidade WordPress, seja como o tradutor, seja como o programador, como organizador do WorldCamp, e também faz parte de um projeto que foi lançado alguns anos atrás, um projeto bastante significativo para o desenvolvimento de todo o projeto, o Learn WordPress, um projeto que visa apoiar o desenvolvimento e a informação através do ensino daquilo que é o WordPress. Passou diversos anos a trabalhar em agências digitais, usando sempre WordPress, entre elas a OOL, a Blackberry, a Delighty, Google, e um ano passado foi criada uma equipa específica chamada Interog para criar melhores e mais padrões no âmbito de funcionamento da web através de navegadores, através de browsers, e é sobre CSS que o Filipe Cintra nos vai falar durante os próximos minutos, vamos dar uma olhadela para aquilo que vai ser o futuro do CSS, Filipe. Eu acho que foi, basicamente foi um bom resumo aí da apresentação, acho que alguns de vocês já são algumas caras aí conhecidas que estavam no outro que eu participei, esse é o meu segundo horticâmpeles boa. E falando sobre comunicação, eu tenho um fato que eu sempre lembro que foi uma pequena confusão de comunicação entre o português do Brasil e o português de Portugal, que me perguntaram, ah, você tem um micro e no Brasil, o micro é microcomputador. E eu falei, não, eu tenho um meu micro aqui. E eu subi no palco sem nenhum microfone. Aí eu falei, cadê o meu microfone? Aí alguém olhou para mim, mas eu perguntei que você criou um microfone e você não aceitou. Eu falei, mas eu pensei que você estava perguntando do meu computador. E desde então eu lembro que agora o micro, agora quando alguém perguntar, vai ser sobre o microfone e não o meu notebook. Mas desde lá eu estava morando na Irlanda naquela época. Agora estou morando aqui em Lagos, no sul de Portugal. Estou vivendo a boa vida agora. E para essa talk de hoje, é meio que a gente vai fazer um passeio entre o passado, presente e o futuro do CSS. Mas o CSS é um dos pontos que englobam a plataforma WordPress. E só para ter uma noção, fronteiros da sala, por favor, fronteiros. Quem é fronteiro aí? Boa, boa, boa. Então para hoje a gente vai entrar assim, eu vou entrar em termos básicos e meio intermediários sobre CSS, no final a gente vai falar um pouco sobre o futuro do CSS. Então o CSS é aquele que a gente já conhece, é uma linguagem para fazer a formatação de layout. E eu acho que eu sempre gosto de falar sobre esses detalhes para fazer a divisão, porque quando a gente fala de WordPress, a gente tem essas áreas bem definidas. A gente tem a parte lógica do PHP, a gente tem a interação no JavaScript, a gente tem o markup no HTML, e a gente tem a parte visual dentro do CSS. Mas com essa evolução da web do desenvolvimento, a gente está vendo um pouco de lógica entrando dentro dessa área do CSS, e a gente vai ver hoje. Então aqui está uma referência. Eu acho que essa referência aqui, quem está abaixo dos 35 aí, não vai lembrar, é Capitão Planeta, não sei se Portugal mudaram o nome também. Sempre tem esse problema, quando eu falo de algum filme, e alguém fala outro nome, ou o princesinho, ou o pequeno príncipe, é terrível, mas era o Capitão Planeta. E o Capitão Planeta você tinha lá os anéis, e um era terra, o outro era fogo, e cada um com a união dos seus poderes, aí ele chamava o Capitão Planeta, que com a união desses poderes a gente tem WordPress. E cada um tem um ponto específico. E cada um tem uma responsabilidade específica. E trabalhando com WordPress por muito tempo, e até trabalhando com frontendo com muito tempo, eu vejo que muitas vezes o pessoal tenta resolver o problema do fogo com água, que é fazer um botão todo em JavaScript, como você tem lá o botão do próprio HTML, que já faz tudo para você. Então é sempre bom a gente entender, separar cada responsabilidade. E falando sobre a questão desse passado, presente e futuro, tem um ponto bem interessante aqui, principalmente sobre browsers, navegadores e WordPress. O que acontece? Quando a gente olha lá para trás, de novo, tio Felipe falando, quando eu programava no Internet Explorer 5, eu cheguei a programar para o... O primeiro Internet Explorer foi o 4.5. Aí depois vocês vão fazer a pesquisa e tentar adivinhar a minha idade, só pela versão do Internet Explorer. Da versão... Acredita, da versão 5 para 6 foi um gap de 5 anos. Você tinha 5 anos com aquela mesma feature. Se você tivesse um bug nos CSS, você ia ter que conviver com aquele... PNG transparente. PNG transparente. Você tinha hacks durante 5 anos para resolver isso porque o navegador não resolvia. E hoje a gente tem novas versões, por exemplo, relacionadas ao próprio Chrome, a cada 6 meses a gente tem uma versão nova. A cada 6 meses não, 6 semanas. Até eu me confundi. 6 semanas a gente tem uma versão nova. E meio que criou um caos. O que causa isso? Porque cada semana tem um browser novo lançando uma feature nova e você fica meio... O que é que eu tenho que usar? O que é que eu posso usar? E esse caos foi ouvido por essas empresas que daí surgiu esse comitê. O comitê Interop foi a união de todos os principais browsers. E eles decidiram, a gente tem que criar agora um roadmap para essas features. Porque não adianta cada um implementar o que você quer. Se a gente quiser que a web desenvolva, que a web evolua, a gente precisa sincronizar esses lançamentos. Então foi daí do Interop 2022 que surgiu essa lista de itens que todos os browsers assumiram o compromisso de implementar. Então a gente tem layers que a gente vai ver hoje. A gente tem esquema de cores. Não vão ver hoje, desculpem, mas eu tenho que ir selecionando um a um porque o nosso tempo aqui vai ser curto e eu tenho que falar sobre muita coisa. Mas a gente vai ver outros itens como selectores e containers. Então esse foi o progresso do ano passado. Foi um score aí dos browsers que implementaram esses recursos. Vocês podem ver que o Safari foi o que mais implementou dentro dessa lista. Tem uma pontuação de 97. Hoje a gente está em 2023. Tem uma nova lista que eu vou mostrar mais para frente. Mas a gente vai falar um pouco do passado. Os amigos do Ponte Verde não sei se estão aqui. No ano passado eu fiz essa talk, mas eu mudei um pouco dela. Mas eu vou usar como referência as features que eu apresentei nessa apresentação. E eu vou mostrar a diferença de suporte de lá, que foi, acredito, setembro do ano passado. Só uma dica. Eu apresentei lá em Português. Até o João assistiu a minha palestra lá. Mas lá eu falei sobre problemas comuns. Então se vocês notarem aqui o problema número um, isso era analisando os sites quando no ano que eu trabalhava com o plug-in de Amp, eu sempre ficava olhando o site. E esse era um problema clássico aqui. Você tinha uma imagem quando o usuário aumentava a imagem no mobile, a imagem começava a se distorcer, ou quando ele tinha uma tela muito grande, você tinha essa imagem distorcida. Sem manter a proporção. Outro ponto que é bem clássico é a questão de imagens destacadas que não têm um padrão. E o terceiro item foi também relacionado à questão de fontes, que essa questão de fontes está relacionada à fluidez desse conteúdo, que foi um problema pessoal também que eu passei. Mas as soluções para esses três itens, um é o object fit, o dois é o aspect ratio, que a gente consegue resolver isso com aspect ratio. O próprio CSS a gente consegue dar um organizado início. E a questão da fontes, a gente consegue resolver com o cliente. Eu coloquei resolver, mas é bem assim, melhorar o fluxo, melhorar a nossa vida e a gente vai ver por quê. Então, o object fit. Basicamente, eu vou dar a proporção dessa imagem, dizer, olha, essa imagem agora, desculpe, esse container, eu vou dar o comportamento dele, o aspect ratio, eu vou cuidar disso, o object fit, eu quero que aquele container, aquela imagem, ela preenche toda aquela área e tenha um comportamento como se fosse um background. Ela vai ser uma tag MG, mas ela vai ter um comportamento de um... um adiv com um background. E daí, eu consigo especificar qual vai ser o comportamento dela, então ela vai cobrir todo aquele container e também eu posso definir qual vai ser o ponto de referência daquele container em particular. Então, eu consigo, só, se eu vou conseguir fazer o play desse vídeo, vamos fazer um teste aqui, não. Se eu tenho acesso ao mouse aqui, sim. Então, essa é a versão anterior, vocês notem que sem o object fit, a imagem fica preenchendo, ele vai esticando lá, você ganha alguns hectares nessa área aqui, a fazenda cresce bastante, mas quando eu ordeno com object fit o que é que ele vai fazer, ele vai manter a proporção e vai cobrir aquela área. Aí, tem outro ponto também, que é referente ao aspect duration, que a gente consegue também definir a proporção daquela imagem. Posso definir que é um para um, posso dizer 3 por 4, posso definir que é 16 por 9 e um dos itens aí que para mim é o favorito é fazer embed do YouTube responsivo. Quem já fez o embed do YouTube responsivo? É chato, não é? Mas aí você consegue resolver só com uma linha, você consegue dizer olha, esse cara vai ser 100% e o aspect ratio dele vai ser 16 por 9. Daí o seu frame ele vai respeitar aquela região. Então aqui foi a solução que eu defini, todas as imagens do card vai ser um por um. Eu quero sempre que ela fique no formato quadrado, mas também eu preciso do object fit lá para dizer, cubra aquela região. O Climp foi uma experiência em particular no agência, estava trabalhando e o designer mandou uma tabela de fontes. Falei, ó, no iPhone a fonte vai ser 16 pixels no Galaxy a fonte vai ser 17 no iPad a fonte vai ser 28. E a lógica sobre essa proporção de itens aí tem tela a tela basicamente o designer queria a menor tela eu quero é esse tamanho a maior tela eu quero esse tamanho e durante esse range de telas você se adapte a essa proporção. Isso que o Climp faz eu consigo definir um tamanho mínimo um tamanho máximo e um tamanho intermediário. Então esse ponto aqui é uma unidade a largura do viewport que é 4% da largura do viewport então o que vai acontecer a minha fonte ela vai diminuir até 20 pixels e ela vai aumentar até 50 pixels. Então acho que um dos benefícios do Climp em particular é a gente sai desse cenário que a gente tem que definir todos os tamanhos de fontes para todas as telas e a gente define simplesmente um cenário. Isso a gente tem aqui outras fontes H1, H2, H3 e a gente também pode usar isso para padding eu também posso definir o padding o espaçamento do meu container vai ter esse tipo de variação eu consigo resolver esse problema sem fazer essa loucura aqui com dezenas de media queries essa funcionalidade ela está disponível no FIM JSON você pode usar fontes responsivas tem uma novidade no WordPress 6.2 que a gente consegue definir um tamanho ideal seria o tamanho máximo, o mínimo e o ideal mas dentro do nosso FIM JSON a gente consegue trabalhar com fontes responsivas. Agora a grande pergunta qual o suporte disso? O Object Fit 98 o Client 94% do aspect ratio 91 então essa métrica que eu tirei em abril esse era o suporte desses dois itens então em particular os principais browsers dão suporte a esse recurso e agora falando ok, é passado aquele ali era um problemas comuns que eu encontrava que hoje é uma solução hoje a gente tem eu listei esses itens e até na apresentação de Ponte Védora tinha um item que era futuro e agora ele já faz parte do presente então essa lista aumentou primeiro item é container query esse item eu acho muito interessante porque se você trabalha com construção de blocos muitas vezes você tem que adaptar o seu bloco para diversas situações de espaço como é que você faz isso com a media query? você só tem um controle do viewport você não tem um controle do bloco quando você trabalha com container query você consegue definir uma media query para o tamanho daquele container não o tamanho da tela já no meu próprio bloco dizer todas as situações que ele vai se comportar para a gente entender um pouco isso primeiro esse item é opcional eu posso definir um nome para o meu container e depois eu crio uma regra para aquele container quando aquele container quando aquele bloco tiver 300 pixels eu quero que você aplique essas regrinhas aqui exemplo por exemplo aqui eu tenho um bloco esses três blocos são os mesmos é o mesmo bloco a diferença é que a área desse bloco é maior do que esse então aqui eu passo uma regra específica para quando aquele bloco tiver no área de duas colunas quando ele tiver no área de uma coluna ele vai fazer esse comportamento para a gente ter esse resultado a gente utiliza essa regra e lá eu posso por exemplo aqui no container card eu posso aplicar a regra para o card em particular ou também para os filhos daquele card na imagem destacada ou no link ou no título daquele post esse aqui para mim é um dos favoritos assim que é a questão de você fazer uma seleção condicional você vai perguntar se aquele container tem aquele elemento específico então posso perguntar se aquele card tem algum elemento com class ou eu posso também fazer uma seleção se o card tem uma imagem ou não ou eu posso definir se ele não tem um item específico então posso isso acontecia muito uma situação que eu passei eu teria que aplicar uma regra em particular quando eu exibisse a regra então só com res eu conseguia ver se o body tinha um alerta em particular eu fazia um tratamento específico então esse item aqui ele ainda está passando por uma evolução ele entrou no interop 2023 que a gente vai ter a possibilidade de trabalhar com propriedades fazer o res em cima de propriedades CSS outra possibilidade que a gente tem é fazer a seleção por exemplo em cima de valores eu posso, por exemplo, tenho um exemplo depois que vocês podem testar esse exemplo mas eu faço um tipo de estilização baseado na seleção de um checkbox então tem um select de diversos itens e quando eu seleciono um item em particular ele vai modificar o comportamento dos seus filhos ou dos elementos que estão relacionados contém o property ele é um elemento que entrou agora e assim é um ponto em particular do CSS, o que acontece propriedades CSS no geral são tudo strings você não tem como fazer um cálculo por exemplo de 0 a 100 dentro de uma propriedade CSS hoje o browser não vai entender o que você está falando de uma porcentagem ou de uma cor você pode reutilizar propriedades e aplicar essas propriedades em diferentes locais agora com properties eu consigo definir um valor semântico para aquele valor, isso aqui é uma cor qualquer momento que você fizer uma transição fazer uma animação sobre aquela variável CSS o browser vai entender que tem que fazer uma transição como se fosse uma cor, se fosse uma porcentagem aqui também eu posso definir uma porcentagem outro ponto interessante é que eu posso definir o valor inicial que vai acontecer se alguém dentro do meu CSS tentar passar uma porcentagem numa variável que é uma cor ele vai ignorar aquilo se você fizer isso hoje, você testar hoje você tentar passar uma porcentagem para um valor que é uma cor ele quebra aquele seletor se eu definir um background aquela linha vai ser totalmente ignorada mas com isso eu tenho um fallback se eu passar um valor errado para uma porcentagem anterior o sétimo item estou mostrando essas partes mas o sétimo item é referente a camadas de níveis de seleção aqui a imagem está meio escura mas isso é um item clássico o que acontece nesse item clássico eu estou pesquisando por important e esse CSS em particular tem 260 important nada importante mas por que isso acontece? isso é muito comum porque por exemplo, acho que o tema pode ser um bootstrap da vida e a pessoa para sobre escrever aquele bootstrap começa a jogar importante tem outros hacks também mas hoje com o layer o que é que a gente consegue definir? a gente consegue definir os níveis de prioridade e eu consigo agrupar esses elementos definindo uma camada framework essa aqui é a primeira camada dessa aplicação qualquer coisa que vinha depois ela vai ter prioridade, eu não preciso usar importante simplesmente defino a ordem de prioridade desses elementos agora uma pergunta ou essa propriedade meio width aqui, o que ela significa? ela significa que é maior ou igual a 600 pixels não igual a 600 pixels a primeira opção levanta a mão quem acha que é a primeira opção a segunda opção eu particularmente eu sempre me complicava com isso e eu jogava as duas duas opções, eu queria fazer a seleção primeiro eu jogava um e depois jogava a outra e via qual era mas ela é maior ou igual certo? isso era algo muito simples mas que não tinha no CSS e hoje a gente pode usar esse tipo de assinatura, essa sintax eu consigo usar essa sintax hoje dentro do CSS se eu quiser fazer range, eu também consigo definir um range então eu posso dizer ela é menor ou igual a 400 e maior menor que 600 e maior que 400 esse é o range que ela vai estar definindo suporte, essa é a questão do suporte todas essas recursos novos que eu mostrei a gente consegue fazer selector sobre o suporte daquele recurso e fazer um fallback para aquela situação pergunta interessante agora qual é o suporte desses itens hoje ele está com 89% o res ele está com 86% quando eu fiz essa apresentação no .tv, o res ele tinha 54% de suporte hoje ele está com 86% a container queries antes estava 42, agora é 85 o property 72 e o syntax range 72 são os dois itens novos que eu inclui nessa apresentação agora sim vamos falar sobre o futuro o futuro do CSS, tem um ponto que eu queria até incluir nessa apresentação mas por conta do Google aí eu não consegui incluir agora a próxima ação dos browsers, dos navegadores é definir um baseline para definir quais dessas propriedades você tem uma segurança de utilizar em todos os browsers e nas duas últimas versões então esse projeto surgiu recentemente que vai ajudar você a escolher essas propriedades mas eu coloquei aqui futuro porque até o CSS nesting o Safari ele passou a ter suporte no iOS essa semana então a gente tem um suporte muito grande um suporte alto sobre o CSS nesting mais o CSS nesting só pular aqui para o CSS nesting é basicamente a gente fazer a escrita como se fosse os preprocessadores se você usa sasio, lesio, você está familiarizado com esse tipo de seleção a vantagem disso é que você cria um scope sobre esse CSS então você sabe se você faz manutenção de um projeto você quer mexer no CSS do artigo você sabe que o CSS do artigo está dentro da daquele scope que você definiu vou só mostrar o último item aqui é outro ponto também que eu passei passei muito por esse tipo de situação que o design queria um texto em particular quebrava naquele momento específico aí quando você mandava a versão isso aqui está errado isso aqui não é onde eu quero você tem que quebrar particularmente aqui na palavra capital caroaru é a minha cidade é um spoiler da apresentação do artigo em pior eu vou falar de caroaru mas no final o que o cliente vê você faz um BR lá para resolver o que acontece para resolver esse problema a gente faz um BR coloca um BR no meio do título não faz isso e faz um BR lá e jogou quando o cliente vai ver o que é que o cliente vê jogou BR aqui a tela do cliente é menor do que a sua tela quando chega aqui nesse ponto isso que o cliente vê então cria ser esse problema e quando eu vi esse recurso para mim eu falei isso que a gente nunca teve é o seletor text balance esse text balance o que é que ele vai criar ele vai balancear a área do título geralmente quando o designer vai montar aquela quebra em particular ele quer balancear aquele conteúdo e o balance ele vai sempre tentar preencher 80% da área daquele container então se eu tenho um H1 aqui ele vai tentar preencher o rangelado e preencher 80% esse seletor em particular ele vai funcionar até em quatro linhas então esse item aqui é um item que está na versão canari do chrome mas é um item que eu tive muita dor de cabeça no passado com ela e por isso que eu escolhi esse item e esse item é no futuro CSS nesting acredito que hoje a gente já tem mais de 80% dos browsers tendo suporte sobre isso isso aqui só as versões canari dos browsers tem suporte a esse item corri bastante de uma passada no tempo aí mas eu queria mostrar tudo só um só um exemplo do que a gente tem então aqui eu faço o toggle do balance e a gente vê a diferença com balance e sem balance quando ele fica com essa distribuição ele está com balance quando ele fica sem essa distribuição meio igualitária entre as linhas ele está sem o balance então é isso, corri bastante para mostrar tudo do tempo de a gente ver tudo aqui quem quiser me seguir é o Arroba Felipe tem conteúdo no YouTube também sobre essa apresentação eu falo item a item de forma prática então tem vídeos sobre esses itens meu canal do YouTube é o Felipe Cintra vocês podem me achar lá e eu acho que é isso obrigado Felipe Felipe Cintra aqui está o presente obrigado cuidado com o suporte se não tiver suporte se sem suporte não vai