Novidades do Safari e do WebKit

Olá! Sou Saron Yitbarek, Web Technologies Evangelist na equipe Safari & WebKit. Desde a última WWDC do ano passado, lançamos novas tecnologias web, algumas a pedido e outras que vão surpreender. Nós nos preocupamos muito com você e com a web, e queremos capacitar web designers e desenvolvedores a dar vida às suas ideias. Nosso objetivo é simples: ajudar você a criar uma experiência confiável, compatível e que respeite a privacidade. É por isso que hoje quero anunciar a nova tecnologia web que chegará ao Safari em breve. Há diversos recursos incríveis nesta versão. Trabalhamos muito para melhorar a interoperabilidade e preencher lacunas dos recursos mais recentes. Nesta sessão, mostrarei alguns dos meus recursos favoritos e algumas áreas onde preenchemos essas lacunas. Vou abordar recursos em quatro categorias. Na animação, vou mostrar como usar animações controladas por rolagem e transições de exibição entre documentos. Layout tem tudo a ver com a eficiência do posicionamento da âncora. Nos efeitos visuais, abordaremos o clipe de fundo, a nova função de forma e text-wrap: pretty. Esse CSS vem com mídia, onde vou abordar o suporte a ícones SVG, imagens e melhorias nos formatos de mídia existentes. Vamos começar com a animação. A animação ajuda a melhorar as experiências online que você cria, adicionando emoção e um toque de capricho à página. Vou mostrar como é isso. Digamos que estou redesenhando o site da minha empresa de educação online, a A-School of Code. Quero que seja prático e divertido. Com os recursos mais recentes, posso conseguir isso usando só CSS. Vou mostrar como meu site final vai ficar. Aqui, tenho o site de uma escola online que vai te ensinar habilidades técnicas. Aqui está a lista de tópicos que abordamos nesta grade, você pode ver os nomes das empresas que contrataram meus alunos, ler comentários de ex-alunos que amaram os cursos e o currículo e duas opções do tipo de programa que oferecemos. Há algumas coisas que destacam este site. Uma que você deve ter percebido é a animação. Ela foi criada com as Animações baseadas em rolagem, agora disponíveis no Safari 19. As animações CSS fazem parte da web desde que Apple as lançou no WebKit em 2007. Mas o JavaScript sempre permitiu vincular essa animação ao comportamento do usuário. O JavaScript é uma linguagem poderosa e faz muito pela web, mas sempre que for possível evitá-lo, seus usuários terão melhor desempenho e maior duração de bateria. A animação baseada em rolagem permite que você ignore JavaScript e vincule sua animação à rolagem com CSS. Vamos explicar como isso funciona. Para entender as animações baseadas em rolagem, há um conceito-chave que você precisa saber: linhas do tempo. A linha do tempo padrão para a Web é baseada no tempo. Ou seja, uma animação é reproduzida ao longo do tempo.

Conforme passam os segundos, a animação se move na minha barra de progresso. Mas com a animação baseada em rolagem, você tem duas novas linhas do tempo. A primeira é a linha do tempo scroll(). Agora, no meu site, usei a linha do tempo scroll() para criar a barra de progresso na parte inferior da página. Este é só um exemplo. Na verdade, você não precisaria de uma barra de progresso como esta porque já tem barras de rolagem. Mas essa barra de progresso é uma maneira fácil de mostrar a animação baseada em rolagem, então vamos ver como a criamos. Antes de começar a trabalhar na minha barra, preciso considerar a acessibilidade. A animação baseada em rolagem insere movimento no site e alguns usuários podem preferir algo mais calmo, o que pode ser indicado nos ajustes de acessibilidade. Quero respeitar isso para não causar desconforto visual causado por movimento. Isso é algo comum, impulsionado por uma mistura de fatores, como experiência, genética, fadiga e, em alguns casos, distúrbios vestibulares. Os sintomas podem incluir náuseas, tonturas, dores de cabeça e outros desconfortos físicos.

Como desenvolvedores, existem diferentes tipos de movimento que adicionamos aos sites e apps da web que podem desencadear esse quadro: Dimensionar objetos grandes, aumentar ou reduzir o zoom, objetos se movendo em velocidades diferentes, como efeito de paralaxe, técnicas simulando efeitos tridimensionais ou movimento periférico, como movimento constante fora da área de foco do usuário. Esta lista não cobre tudo, mas é um bom ponto de partida do que considerar. Seu site tem esses efeitos? No meu caso, minha animação é uma barra de progresso bem simples, um movimento bastante seguro, pequeno e comum na web. Então, acho que não preciso me preocupar com esse tipo desconforto. Mas sempre que adicionamos movimento à página, é recomendável considerar seu impacto nas diferentes necessidades das pessoas. Vamos à barra de rolagem. Vou começar com alguns CSS. Vou adicionar a barra de rolagem como um pseudoelemento no rodapé. Vamos adicionar um efeito para que ele comece no canto inferior esquerdo e fique na parte inferior durante a rolagem.

Depois vou criar a animação com keyframes usando o CSS que já conhecemos e amamos. Com isso, o navegador dimensionar a barra de progresso para aumentar no eixo x, criando o efeito de expansão da esquerda para a direita. Até agora, estou criando as bases para a animação baseada em rolagem e preciso fazer mais uma coisa para concluir. Adicionar a animação à barra de progresso. Posso fazer isso aqui. Agora vem a parte de rolagem. Quero que a barra de progresso aumente da esquerda para a direita só durante a rolagem. Para isso, preciso criar uma nova linha do tempo de animação. Vou adicionar animation-timeline: scroll(); ao CSS, substituindo a linha do tempo padrão. Para isso funcionar, a linha do tempo de animação precisa vir depois da propriedade animation. Agora conectei minha animação à linha do tempo de rolagem e criei uma barra de progresso, usando só algumas linhas de CSS. Não usei JavaScript. Vamos a um exemplo mais prático, aqui quero uma animação que não seja baseada apenas na rolagem, mas em quando os elementos aparecem na página. Veja este exemplo. Vejo os blocos girando para criar uma grade. Acontece quando eu rolo, mas também há outro fator em jogo. A animação só acontece dentro dessa caixa azul. Começa na parte inferior, somente quando os blocos entraram na visualização, e os blocos param de girar no meio da tela, na parte superior da minha caixa azul. Pensar na visualização requer um tipo diferente de linha do tempo: a linha do tempo view(). Vamos analisar alguns códigos para ver como isso funciona.

Vou começar com alguns HMTL. Aqui, tenho minha lista de tópicos com as classes que vou usar no CSS. Depois vou adicionar estilos CSS básicos para transformar a lista em caixas amarelas que combinam com o tema do site. Agora que tenho minha base, posso começar a animação baseada em rolagem. A primeira parte é descobrir qual animação quero anexar à rolagem. Tenho três animações acontecendo ao mesmo tempo no site e preciso aplicá-las a cada bloco. A primeira faz com que as caixas subam e se organizem à esquerda. A segunda faz com que as caixas subam e se organizem no centro. E a terceiro faz com que os blocos subam pela direita.

Não há nada novo no código até agora. Ainda estou usando animação CSS clássica.

Agora, vou trazer a parte da rolagem. Mas antes, preciso pensar na acessibilidade dessa animação. Lembrando os gatilhos mais comuns, a rotação está entre eles. Mas isso está mais relacionado a um efeito ambiental que pode causar desorientação. Como são apenas alguns elementos e é uma animação relativamente pequena, não acho que isso vai atrapalhar, então posso voltar ao meu código. Agora vou adicionar o código de animação ao CSS, aplicando a animação da esquerda às caixas da esquerda, a animação do centro às caixas do meio e a animação da direita às caixas da direita. Como quero que os elementos mantenham seus estilos de animação antes e depois, vou usar animation-fill-mode: both. E agora, chegamos à parte de rolagem do código. Preciso de duas linhas de código para fazer isso funcionar. A primeira é a minha nova linha do tempo de visualização. Vou adicionar aqui. A segunda é o intervalo de animação. O intervalo de animação informa ao navegador por onde começar e terminar a animação com base na linha do tempo. Escolhi a linha do tempo de exibição, então o intervalo vai refletir onde os elementos estão na visualização. O valor padrão vai de 0 a 100%. Isso define o início da animação em 0%, quando o elemento entra pela primeira vez na visualização, e termina em 100%, quando o elemento sai totalmente do visor. Vamos ver como será minha animação se eu usar os valores padrão. Está bem perto do que eu quero, mas ainda não é isso. Ao usar uma animação baseada em rolagem, especialmente para um site como este que mostra informações, é importante lembrar da experiência do usuário. As animações são divertidas e podem destacar o site, mas as informações ainda precisam ser legíveis. Elas não devem atrapalhar a funcionalidade. Neste caso, isso significa prestar atenção à duração da animação. Não quero que dure 100%, porque os blocos vão ficar em movimento o tempo todo, dificultando a leitura.

Quero uma animação curta, algo que chame a atenção, e os blocos vão encontrar seu lugar para que o usuário possa lê-los. No meio da página parece um bom lugar para testar. Vai adicionar um toque de diversão e ainda dar aos meus usuários muito tempo para ler. Então vou mudar o intervalo para 0% e 50%. Isso significa que a animação terminará quando os elementos estiverem na metade da página, limitando o tempo de movimento. E se eu rolar para cima, a animação é mostrada ao contrário, com as caixas começando a cair no ponto de 50% e sumindo totalmente em 0%. Há mais que você pode controlar com o intervalo, como onde exatamente o 0% está. Para ver quais são suas opções e como elas funcionam, confira os diferentes valores e brinque com eles. Essas novas linhas do tempo são poderosas e, combinadas com a animação, criam experiências incríveis para os usuários. E essa é a animação baseada em rolagem no WebKit for Safari. A próxima animação que vou mostrar a vocês aparece em toda a página. São transições de visualização entre documentos, lançadas em dezembro no Safari 18.2. São uma extensão das transições de exibição, lançadas anteriormente no Safari 18.0. As transições de visualização entre documentos permitem criar transições suaves para algo mais fluido, como este entre páginas, passando de algo assim

efeito de fade cruzado, sem precisar de JavaScript. Tudo o que você precisa é uma linha de CSS. Ao clicar nesse item de navegação sem uma transição, o navegador repinta a página, limpando-a e carregando uma nova. O legal das transições é que, como elas tiram um instantâneo antes e depois da mudança de página e criam uma animação entre os dois, a experiência fica muito mais suave e agradável. Adoro como fica. Vamos ver como funciona. No arquivo CSS, basta adicionar @view-transition at-rule e definir a propriedade de navegação como auto. É isso. Mas antes de começar, precisamos fazer mais uma coisa. Como isso está adiciona movimento à página, precisamos considerar se temos algum problema de acessibilidade. Mesmo sendo uma animação, a transição com desvanecimento é bem sutil e costuma ser considerada uma das opções mais seguras para quem precisa de menos movimento na tela. Bom, vamos começar. Agora, em vez da transição com desvanecimento padrão, quero fazer um deslizamento. Quando clico em um item na navegação, quero que a página atual deslize para fora e minha nova página apareça. Vou mostrar o que quero dizer, mas, lembrando, se você é sensível a movimento, isso pode gerar algum desconforto. Eu aviso quando acabar.

Aqui, o efeito de deslize ficou melhor que a transição com desvanecimento. Mas primeiro, vamos fazer uma pausa e pensar sobre o impacto nos usuários. A animação terminou.

Esse efeito de deslizamento pode desencadear desconforto de movimento? No que diz respeito às animações, bastante. Não apenas uma palavra ou um elemento, ele move duas páginas inteiras. Como não tenho certeza de que essa animação é segura, sendo apenas um aprimoramento, não essencial para a experiência do usuário, o ideal é colocá-la em uma consulta de mídia de redução de movimento. Vamos fazer isso agora.

Esta consulta de mídia diz ao navegador para só executar minha transição deslizante se nenhum movimento reduzido for preferido. Agora, preciso codificar o efeito de deslizamento. Aqui estou usando animações CSS para criar quadros-chave que descrevem o que as duas páginas devem fazer. Quero que uma página saia, deslizando para fora, e a outra página entre, deslizando para dentro.

Para usar essas animações, preciso definir um alvo. Por padrão, o navigation: auto aplicava transições em toda a página. Mas não quero que tudo nela tenha esse efeito. Quero que essa barra de navegação fique parada. E, agora que eu penso sobre isso, eu também quero que esse rodapé fique parado. Vou envolver os elementos que eu quero que façam transição em um ID por página. Vou chamar de "school-info". Agora preciso declarar um view-transition-name que usarei mais tarde. Ao implementar transições view, também temos um monte de pseudoelementos. Vou usar dois deles.

View-transition-old e view-transition-new. O view-transition-old representa um instantâneo do site pouco antes da transição acontecer, e view-transition-new representa um instantâneo depois que ela acontece. Mas para usá-los, preciso enviar um argumento. É aqui que uso meu view-transition-name "main-body" e envio para ambos, já que isso engloba a parte da página que quero fazer a transição. Depois vou definir o nome de animação como o nome dos quadros-chave. É isso. Vamos ver como fica. Desvie o olhar por um momento caso seja sensível ao movimento.

Legal. Nossa navegação permanece parada enquanto o resto da página transiciona ao clicar.

Acabou a animação. O que eu realmente gosto nas transições de exibição entre documentos é que são um aprimoramento. Não são obrigatórias e não alteram a funcionalidade do site. É uma boa adição se forem aceitas pelo navegador e desejadas pelo usuário, e tudo bem se não forem. Ao implementar transições de exibição entre documentos no seu app ou site, as páginas entre as quais você cria a transição precisam ser da mesma origem. Então, a transição de example.com para example.com/cohorts vai funcionar bem. Mas de example.com para um subdomínio diferente não vai. Isso ajuda a garantir a segurança e a privacidade do usuário. Você não quer que uma página mal-intencionada manipule as animações direcionadas ao site. A seguir, vamos ver as novidades no layout, com posicionamento de âncora, para Safari, disponível em breve. O posicionamento de âncora, especialmente ao criar a partir da API popover existente, é um módulo CSS que facilita criar dicas de ferramentas e posicionar menus em lugares específicos, que responde adequadamente a alterações na visualização. Vamos dar uma olhada. Quero uma experiência de navegação suave para os usuários. Após o login, quero que vejam a foto de perfil na navegação. Quando eles clicam na foto, um menu deve aparecer, algo que é comumente visto em apps da web. Vou começar com alguns códigos HMTL.

Aqui está meu html para a barra de navegação com a foto de perfil. E aqui, o menu que eu quero mostrar quando clico na imagem. Vou adicionar o estilo e ver como fica. Vamos ignorar o restante da página. Ok, estamos progredindo – tenho uma boa navegação e um bom menu. Mas, não quero que o menu esteja sempre visível, mas, quando eu clicar no ícone de perfil, e, em seguida, desapareça quando eu clicar nele novamente. E quando clico nele, não quero que ele apareça no canto esquerdo, mas que fique ancorado na foto de perfil. Para resolver isso, antes de entrar no posicionamento de âncora, primeiro preciso usar a API popover. Vou começar adicionando o atributo popover ao elemento que quero que apareça como popover, neste caso, meu menu de perfil. Então vou atribuir ao popover um ID. Em seguida, preciso de algo para clicar, então vou envolver a imagem com um botão. Quando faço isso, preciso garantir que esse botão e o menu estejam acessíveis para quem usa tecnologias assistivas. Vou adicionar o atributo aria-haspopup para dizer aos leitores de tela que, quando clicado, esse botão mostrará um menu. E, finalmente, preciso adicionar um atributo popovertarget definido com o mesmo valor que o ID do elemento popover. Legal! Agora, quando clico na minha foto de perfil, o popover aparece e, quando clico nele, ele desaparece. Mas ele está aparecendo no canto esquerdo da minha página e quero que fique ancorado na foto de perfil, alinhada logo abaixo. É aqui que vou trazer o posicionamento da âncora.

O posicionamento da âncora permite ancorar um elemento a outro e posicioná-lo com base no local desta âncora. Vamos ver como funciona. Primeiro, defino minha âncora e atribuo um nome usando a propriedade anchor-name. Neste caso, minha âncora é o botão de perfil, o que significa que quero posicionar o menu com base na localização do botão. Então vou chamar minha âncora de "profile-button". O anchor-name é uma string arbitrária definida pelo usuário e deve começar com dois traços. Agora, preciso ir ao menu e conectá-lo à âncora que acabei de nomear. No contexto do posicionamento da âncora, o menu é o alvo e preciso dar algumas informações a ele. Primeiro, vou conectá-lo à minha âncora definindo a propriedade position-anchor para o nome da âncora, que é "—profile-button". Vou escrever "—profile-button" aqui. E, por fim, tenho que dizer ao menu onde ele vai ficar. Há duas maneiras de fazer isso. A primeira é área de posição. Vamos explorar o que é isso.

Minha âncora fica no meio de uma grade com nove quadrados. Tenho três colunas: esquerda, centro e direita. E tenho três linhas: superior, central e inferior. Se eu quiser colocar o alvo no canto superior direito da âncora, posso definir a área de posição como "canto superior direito", e essa é uma forma intuitiva de descrever onde quero o menu em relação à âncora. Se eu quiser o menu abaixo da foto de perfil, agora ele está no centro inferior da grade, então vou definir centro inferior.

Vai ser assim. Está bem perto, mas não é exatamente o que quero. Ele está na parte inferior como eu queria, mas, como o menu é mais largo do que o botão de perfil, ele não cabe na grade. Quero alinhar o lado esquerdo do menu com o lado esquerdo da foto de perfil. Para isso, vamos usar um valor diferente para position-area: bottom span-right. Isso vai dizer ao menu para começar exatamente onde a grade central começa e se expandir para a direita.

Agora, o menu e a foto de perfil estão alinhados. Ficou bom neste tamanho de tela, mas e em outros dispositivos, em que a visualização é mais estreita? Para descobrir, posso entrar no Modo de Design Responsivo no Safari. Posso ativar em Ajustes e depois Avançado, marcando "Mostrar recursos para desenvolvedores da web". Isso vai liberar a opção Desenvolver, onde você encontrará um recurso que trouxemos de volta. É um recurso pedido pelos desenvolvedores: pré-ajustes da janela de visualização. Agora, você pode selecionar entre vários tamanhos de visualização cuidadosamente selecionados para acelerar o teste e desenvolvimento. Adoro poder girar a predefinição da visualização com apenas um botão, facilitando o teste dos modos retrato e paisagem com apenas um clique. Quero que o menu responda às alterações na largura da visualização sem precisar de JavaScript. O menu agora está alinhado à esquerda. Quando a largura ficar mais estreita, quero que ele se mova e se alinhe ao lado direito do botão de perfil. A mágica do posicionamento da âncora é que ele foi projetado para resolver isso com facilidade. Ele usa uma propriedade chamada "position try" e cumpre o que promete. Permite que você defina posições para tentar se não tiver espaço para o primeiro. Como quero que meu menu, em vez de expandir para a direita, transborde para a esquerda, vou definir o position-try como "bottom span-left". Mas a tentativa de posição também permite um tipo diferente de valor. Em vez de declarar explicitamente para onde quero que o menu vá, posso definir um valor relativo à minha área de posição. Um desses valores é: "flip-inline". Flip inline diz que basta virar o elemento na direção embutida, não importando a posição original dele. Você também pode virar na direção do bloco com flip-block. É uma maneira mais intuitiva de descrever o que você quer que aconteça. Vamos ver isso na prática. Se eu voltar para o modo responsivo, posso ver no iPad 13 polegadas que meu menu está alinhado à esquerda. Mas quando mudo de orientação, a tentativa de posição entra em ação e o menu fica alinhado à direita, gerando um menu responsivo.

Meus colegas na equipe WebKit propuseram a área de posição e trabalharam com os órgãos de padrões para trazer uma maneira intuitiva de trabalhar com posicionamento de âncora. Há outra abordagem para o posicionamento de âncora que quero mostrar, a função anchor(), uma ferramenta muito poderosa. Com a função anchor(), em vez de colocar o elemento em uma grade, você alinha os lados do elemento aos lados da âncora. Para começar, primeiro preciso ter certeza de que defini a posição como absoluta. Depois vou ver o lado superior do meu menu. Quero alinhá-lo com a parte inferior da minha âncora e configurá-la para anchor(bottom). Depois vamos ver o lado esquerdo do menu. Vou definir esse valor como anchor(left) para que ele se alinhe ao lado esquerdo da âncora.

Esse foi um exemplo bem simples, mas e se eu quiser alinhar o menu com a foto, assim? Preciso considerar esse preenchimento. Eu poderia usar position-area e adicionar margin-left ou usar a função anchor e adicionar calc(), assim. Aqui, estou combinando a função de âncora com a função calc e a unidade em, e isso deslizará o menu por cima. Na maioria dos casos de uso, position-area é uma forma intuitiva de lidar com o posicionamento e, para algo mais complexo, como animar de uma posição para outra ou usar várias âncoras, utilize a função anchor(). Não importa o que você escolha, o posicionamento de âncora facilita a criação de um posicionamento responsivo e relativo só com CSS. Por fim, para nossos recursos de CSS, vamos ver algumas maneiras novas de criar ótimos efeitos visuais. A primeira eleva o uso de bordas a outro patamar. Há quase 15 anos, a Apple inseriu background-clip: text, que permite preencher o texto com um gradiente ou uma imagem de fundo, em vez de preenchê-lo com uma cor. Como esse gradiente amarelo a laranja no logotipo. Meu logo é bem simples. São só palavras em uma fonte básica, então, em vez de usar uma imagem, vou usar só texto. Dessa forma, posso estilizá-lo com CSS. Esse logotipo é um elemento h1, que estilizei como branco, então vou começar com texto branco. Para adicionar esse efeito ao texto, primeiro defino a imagem de fundo para o gradiente sutil de amarelo para laranja que vai para o canto inferior direito. Esse gradiente fica atrás do meu texto. O próximo é a propriedade background-clip, que vou definir como texto. Com isso, volto para o texto branco. Não é o que eu quero. Há mais uma coisa que preciso fazer. Preciso substituir o estilo h1 e tornar a cor do logotipo transparente, para que ele não atrapalhe e o gradiente se destaque. Mas não é só gradiente que dá para usar no texto, também pode aplicar imagens. Como esta imagem de fundo de folhas de outono. Background-clip: text inseriu novos recursos visuais ao texto e, agora, vamos fazer a mesma coisa com as bordas. Vou mostrar como funciona. Os botões têm uma borda branca grossa, mas, para o botão principal, quero fazer algo diferente. Vou usar o novo valor de background-clip para adicionar um pouco de brilho e adicionar um gradiente à borda. Primeiro, vou inserir o sutil gradiente amarelo a laranja que estava usando usando com a imagem de fundo. Agora tenho um gradiente no fundo do botão. Depois vou adicionar meu novo background-clip com o valor border-area e volto para o fundo preto e a borda branca. Encontrei o mesmo problema que com o texto, a cor da borda mudou, mas está escondida atrás da borda branca do estilo do botão. Preciso deixar a cor da borda transparente para que o gradiente se destaque. Vou acrescentar isso aqui e ver o que sai. Consegui o gradiente, mas tenho um novo problema. Parece que o gradiente está se repetindo. Ele preenche a largura do botão, mas só até a parte interna das bordas, reiniciando o gradiente nas laterais. Para corrigir isso, preciso estender o plano de fundo até as bordas externas da borda. Posso fazer isso especificando background-origin e definindo-o como border-box. Ótimo.

Você também pode usar uma abreviação que não exija declarar a imagem de fundo. E lá está, um gradiente divertido usando meu novo clipe de fundo: valor border area. Você pode fazer muita coisa com só uma borda. Escolhendo imagens e selecionando gradientes criativos, você pode criar elementos como este círculo de progresso, este sinal de alerta e esta bela foto com borda dupla. E assim temos background-clip: border-area, mais uma ferramenta para deixar seu conteúdo mais bonito e destacar seus sites e apps da web. Para demonstrações desses exemplos e mais detalhes sobre background-clip, confira nossa postagem no blog em webkit.org. Nossas melhorias nos efeitos visuais não param aí, elas incluem as formas sempre tão versáteis que podemos criar em CSS. Agora vou contar tudo sobre a função shape(), agora suportada no Safari 18.4. As formas são usadas de várias maneiras diferentes nos nossos apps e sites, e eu as uso no meu site A School of Code. Na minha seção de depoimentos, gosto de ter essas setas curvilíneas como pano de fundo para as avaliações. São formas CSS definidas no meu clip-path como um elemento estético divertido na página. Antes da função shape(), uso path. A função path é uma ferramenta poderosa e versátil, permitindo usar todos os tipos de ponto e curva para desenhar uma ampla gama de formas. Mas o que acontece com a forma quando a largura da visualização muda? Para ilustrar, vou isolar as três setas e mostrar como elas respondem. Você notará que tanto a ponta de seta quanto a curva são cortadas ao redimensionar. Elas não redimensionam com a visualização. Quero algo mais responsivo. Mas também não quero que cada linha e cada curva na forma mudem com a visualização. Só quero que algumas partes mudem. Quero que a curva mantenha sua forma e a ponta da seta mantenha o ângulo, mas que o comprimento e a altura mudem junto com a visualização. Se, em vez disso, eu usar a função shape(), verei que, à medida que a janela fica menor, a largura das formas também fica, e é isso o que quero. Note que o ângulo do ponto e a forma da curva se mantêm estáveis, permanecendo inalterados mesmo com a redução da largura. É isso o que amo na função shape() que dá esse tipo de controle granular, permitindo que você escolha o que permanece estático e o que acompanha as mudanças. Vou mostrar como ficou esse código. Note que estou usando unidades diferentes, como altura de consulta de contêiner e porcentagens. Isso porque shape() pode assumir todas as unidades CSS. Estou até usando a função calc. Poder criar valores responsivos e usar uma ampla gama de unidades me permite controlar seletivamente diferentes partes da forma para ter a resposta exata que estou procurando. Com a função shape(), podemos criar formas flexíveis e mais responsivas. Mas não são só as formas que facilitam nosso trabalho. Também melhoramos muito o texto, com novos recursos tipográficos, como text-wrap: pretty, disponível no Safari 19.

Se você olhar para este corpo de texto, vai notar que algumas coisas nele dificultam a leitura. A primeira são aquelas linhas curtas com apenas uma palavra no final dos parágrafos. Isso distrai visualmente e faz com que o espaço entre os parágrafos pareça maior.

A segunda é a hifenização. Não há nada de errado com a hifenização em si, mas é melhor usá-la com moderação. Não queremos três frases com hífen seguidas. A terceira é o que chamamos de rag, a forma geral que as linhas do parágrafo fazem. O bom rag é composto por linhas com aproximadamente o mesmo comprimento. Um rag ruim, como este, é irregular e se destaca visualmente.

Os efeitos de text-wrap: pretty são sutis, mas intencionais.

Aqui, ele eliminou as linhas com só uma palavra, as hifenizações, e o rag malformado.

Vamos ver como funciona. Sem text-wrap: pretty, o trabalho do navegador é maximizar cada linha, consumindo todo o espaço até o final. Mas, quando você adiciona text-wrap:pretty, diz ao navegador para apontar para uma área diferente, em algum lugar perto dessa linha verde, que é o nosso alvo, o comprimento de linha ideal. Mas temos algum espaço de folga, representado pela área entre as linhas roxas e vermelhas. Qualquer coisa dentro disso funciona. Ele moverá as palavras para garantir que a última linha não seja muito curta e não hifeniza, optando por mover a palavra para a próxima linha. O código é simples. Aplique text-wrap pretty a qualquer elemento desejado: parágrafos, títulos e muito mais, especialmente se houver últimas linhas curtas, hifenização ou algum rag inadequado, e veja como isso afeta seu texto. O bom sobre o text-wrap: pretty é que ele também é um aprimoramento. Adicione-o ao texto e, se o navegador tiver suporte, ele deixará o texto mais bonito. E se o navegador do seu usuário não suportar ou se ele quiser só ajustar as últimas linhas e nada mais, o usuário ainda tem uma boa experiência. Tudo certo, sem erros.

Passamos por alguns recursos de CSS, principalmente relacionados ao estilo. Agora, vamos ver a mídia. A primeira que vou compartilhar com vocês é pequena, mas poderosa. Ouvimos seu feedback e trouxemos os ícones SVG, que vão ser lançados no Safari em breve. Os ícones SVG são mais do que apenas favicons. Podem ser vistos em bookmarklets, na página inicial do Safari, quando o usuário adiciona ao dock e mais. Usando o SVG como favicon para navegadores modernos, o Safari gera ícones mais adequados para o contexto desse ícone. Normalmente, o tamanho do arquivo também é menor do que os pngs, comumente usados em favicons. Há outro tipo de mídia estática que tenho o prazer de anunciar. Chegando hoje ao WebKit e Safari estão as imagens HDR. O HDR, ou alto alcance dinâmico, torna sua mídia mais rica do que com as fotos e vídeos SDR que estamos acostumados a ver na web. Desde o Safari 14.0, temos suporte para vídeos HDR e agora estamos adicionando imagens. Para ilustrar as diferenças entre HDR e SDR, vou mostrar uma simulação com os dois. Minha imagem à esquerda é uma SDR, ou imagem de alcance dinâmico padrão, e pode vir em muitos formatos diferentes. Não posso mostrar como é o HDR neste vídeo, então criei esta imagem à direita que simula algumas das diferenças. Você notará os tons mais profundos, a maior variedade e as cores mais brilhantes do HDR simulado. Ver essas diferenças em uma imagem HDR verdadeira é impressionante. Existem algumas razões técnicas para essas diferenças, uma delas é a quantidade de dados mantidos por cada imagem. O SDR é de 8 bits, enquanto o HDR tem de 10 a 16. Esses bits extras dão ao HDR mais dados de imagem para exibição. Geralmente, o SDR também usa o espaço de cores sRGB, enquanto o HDR usa espaços mais amplos e ricos, como o P3. E os formatos de arquivo também são diferentes. SDR está disponível em diversos formatos, incluindo JPEG, enquanto HDR está disponível nesses mesmos formatos, além de HEIC e AVIF. Mas exibir HDR no mundo real requer estratégia e intenção. Afinal, a maioria das mídias online provavelmente ainda não usará HDR por um tempo. Então precisamos considerar como exibir imagens HDR e SDR lado a lado e como isso será. Devido ao alcance dinâmico, as imagens HDR tendem a ter mais brilho do que as em SDR. Viu como esse azulão se destaca? No contexto de imagens de resultados de pesquisa ou uma galeria, isso pode distrair o usuário e criar uma experiência ruim. Como desenvolvedor, queremos dar a você mais controle sobre como gerenciar essa discrepância. Para fazer isso, há uma propriedade CSS, chamada: dynamic-range-limit. O valor padrão para dynamic-range-limit é no-limit. Isso faz com que imagens e vídeos HDR sejam exibidos como realmente são, mesmo quando são muito mais brilhantes que as outras imagens. Ou você pode usar CSS dynamic-range-limit: standard para dizer ao navegador para renderizar imagens ou vídeos HDR como se fossem SDR. Uma terceira opção é dynamic-range-limit: constrained, que pede ao navegador para usar o alcance dinâmico extra da imagem HDR para melhorá-la, mas de uma forma que não se destaque. Isso permite que conteúdos SDR e HDR sejam vistos juntos. O valor `constrained` ainda não tem suporte na primeira versão beta do Safari 19, mas será em breve. E se você usar uma imagem HDR e o navegador não oferecer suporte, tudo bem. Ele simplesmente mapeará o conteúdo HDR para o intervalo SDR, nenhum fallback é necessário. Você pode usar a melhor imagem disponível, e o navegador cuidará do resto. Isso significa que agora você pode trazer fotos e vídeos mais dinâmicos para seus sites e apps da web, criando visuais mais ricos e bonitos para os usuários. Outros tipos de mídia, como áudio e vídeo, podem ajudar a dar vida aos seus sites e apps. Fizemos progressos na compatibilidade com ainda mais formatos de mídia. Ao longo dos últimos anos, ampliamos bastante o suporte a diversos codecs e contêineres. Fomos os primeiros a oferecer suporte a JPEG XL e HEIC na web e, no Safari 19, adicionamos Ogg Opus e Ogg Vorbis à lista de mídias que suportamos. Com suporte a 15 formatos, oferecemos ainda mais opções sobre o que usar no seu site ou app web. Parte do nosso trabalho tem sido garantir que mais combinações complexas de codecs e contêineres funcionem nas APIs na Web. No Safari 18.4, agora oferecemos suporte para WebM na API MediaRecorder. Com essa API para gravação de mídia, você pode integrar recursos como gravação de podcast e vídeo em tempo real nos apps da web. Agora, esses apps podem criar arquivos WebM usando o codec de áudio Opus e VP8 e VP9 para vídeo no Safari e WKWebView. Também lançamos mais suporte de mídia para a web espacial. Adicionamos suporte para renderizar modelos 3D estereoscopicamente de acordo com outros conteúdos da web, permitindo a interação com o modelo. Você também pode incluir vídeos imersivos na sua página online, e o Safari entende e o renderiza corretamente sem precisar de ferramentas adicionais. Para saber mais, confira nossa sessão na web espacial. Abordaremos a incorporação de modelos 3D, a apresentação de mídia espacial e a visualização de um novo recurso para adicionar um ambiente tridimensional ao site. Esses são os destaques do trabalho de suporte à mídia que fizemos no último ano. Nesta sessão, focamos CSS e mídia. Mas há outras sessões que abordam em detalhes outros recursos que já lançamos. Temos uma sessão sobre WebGPU que introduz os conceitos de WebGPU, mostra uma visão geral da linguagem de sombreamento Wig Sil e fala como obter o desempenho de dispositivo ideal. Também temos uma sessão sobre Web Push declarativo que abordará como usá-lo sem um operador de serviço, como é mais eficiente e transparente, e como manter a compatibilidade retroativa. E muito mais. Muitos recursos novos foram enviados em várias versões do Safari desde o outono passado. Incluindo alguns dos recursos mais pedidos, o CSS para ajudar a melhorar a tipografia e oferecer suporte a todos os idiomas do mundo, e recursos que ajudam a proteger a privacidade. Confira as notas de lançamento em webkit.org. Você também pode acompanhar a tecnologia web mais recente com artigos sobre as novidades no Safari. Registre relatórios de erro e solicitações de recursos para tecnologia da web em bugs.webkit.org, o rastreador de problemas para WebKit.

Para problemas na interface do Safari ou no iOS, iPadOS e macOS, envie um relatório em feedbackassistant.apple.com. Verifique se você tem as informações mais recentes sobre suporte no Safari. Caniuse.com é um ótimo recurso para isso. Baixe o Safari Technology Preview para acompanhar as novidades. Ele é atualizado a cada duas semanas, por isso tem as últimas adições ao WebKit. Estamos trabalhando muito para oferecer diversos recursos para ajudar você a criar experiências incríveis na web. Esperamos que esses lançamentos facilitem o desenvolvimento. Conte para a gente o que achou. Boa codificação.