Recursos do WebKit no Safari 17.5

CSS

Existem vários novos recursos CSS interessantes no Safari 17.5, incluindo text-wrap: balance, a light-dark()função de cor e @starting-style, além da capacidade de usar consultas de recursos com @importregras. Vejamos como você pode colocar cada um em uso.

Equilíbrio de quebra de texto

Na web, com suas larguras de contêiner flexíveis, comprimentos inconsistentes de conteúdo e variação entre navegadores, pode parecer impossível evitar a quebra de texto de tal forma que poucas palavras acabem sozinhas em uma última linha muito curta.

Quando a tipografia era definida manualmente, os tipógrafos evitavam meticulosamente esse resultado indesejável movendo manualmente o conteúdo. Ao longo das décadas, os desenvolvedores web tentaram uma série de truques diferentes para evitar órfãos em CSS, em HTML, em JavaScript e em sistemas de gerenciamento de conteúdo. Nenhum funciona muito bem. As tentativas geralmente parecem complicadas, trabalhosas e frágeis.

Para resolver esta e outras frustrações, o Grupo de Trabalho CSS definiu três novas opções que você pode usar para alterar a forma como o texto será quebrado. Você pode mudar do empacotamento padrão para outro estilo com text-wrap. WebKit for Safari 17.5 adiciona suporte para a primeira dessas novas opções – balanceamento.

A text-wrap: balanceregra pede ao navegador para “equilibrar” as linhas de texto e torná-las todas do mesmo comprimento.

Você pode ver como agora o texto não preenche mais o bloco que o contém — há uma grande quantidade de espaço à direita das palavras. Isso é esperado e é algo em que você deve pensar ao decidir quando usar o text-wrap: balance.

O local exato onde cada linha de texto será quebrada durante o uso text-wrap: balancepode ser um pouco diferente em cada navegador. O padrão da web CSS Text nível 4 deixa para cada equipe de mecanismo do navegador decidir qual algoritmo deseja usar para determinar como exatamente quebrar o texto balanceado.

Pode ser caro do ponto de vista computacional para o navegador contar caracteres e equilibrar múltiplas linhas de texto, portanto, o padrão permite que os navegadores limitem o número de linhas balanceadas. Os navegadores Chromium equilibram 6 ou menos linhas, o Firefox equilibra 10 ou menos, enquanto o Safari/WebKit equilibra um número ilimitado de linhas.

Por enquanto, o Safari não equilibra o texto se estiver em torno de um ponto flutuante ou de uma letra inicial. E o Safari desativa o balanceador se o conteúdo contiver guias preservadas ou hifens suaves.

Abreviações e extensões de quebra de texto

A text-wrap propriedade é na verdade uma abreviação para duas propriedades longas: text-wrap-stylee text-wrap-mode.

A text-wrap-mode propriedade fornece um mecanismo para expressar se o texto deve ou não ser quebrado.

text-wrap-mode: wrap; /* initial value */
text-wrap-mode: nowrap;

O wrapvalor ativa e o nowrapvalor desativa, assim como os valores de white-space. (Na verdade, text-wrap-modeé a letra longa recém-introduzida de white-space.) O WebKit adicionou suporte para text-wrap-mode: wrape nowrapno Safari 17.4.

A text-wrap-style propriedade seleciona como encapsular. O valor inicial é auto– pedir que o texto seja agrupado da maneira que tem acontecido há décadas. Ou você pode escolher um valor para mudar para outro “estilo” de empacotamento.

WebKit para Safari 17.5 adiciona suporte para text-wrap-style: balance, stablee auto.

text-wrap-style: auto; /* initial value */
text-wrap-style: balance;

Claro, a text-wrapabreviação é uma forma de combiná -los text-wrap-modee text-wrap-styledeclará-los juntos. Se você escrever text-wrap: balanceé o mesmo que text-wrap: wrap balance, significando: “sim, embrulhe, e quando escrever, equilibre o texto”.

O suporte total incluirá eventualmente três propriedades e seis valores. Nenhum navegador oferece suporte a tudo ainda, portanto, procure suporte para as propriedades text-wrap, text-wrap-mode, e text-wrap-style, bem como para os valores balance, pretty, stable, auto, wrap e nowrap.

Os balancevalores pretty, e stablesimplesmente retornarão autoem navegadores sem suporte, portanto, o aprimoramento progressivo é fácil. Você pode usar esses valores hoje, não importa quantos usuários ainda não tenham um navegador compatível. Eles simplesmente receberão autotexto embrulhado, exatamente como fariam se você não usasse text-wrap. Enquanto isso, os usuários com suporte receberão um impulso extra de polimento.

Modo escuro e light-dark()função de cor

Cada vez mais, os usuários esperam que sites e aplicativos da web suportem o modo escuro. Desde o Safari 12.1, a prefers-color-schemeconsulta de mídia oferece a capacidade de escrever código como este:

body {
  background: white;
  color: black;
}
@media (prefers-color-scheme: dark) {
  body {
    background: darkslategray;
    color: white;
  }
}

Ou talvez você tenha usado variáveis ​​para definir cores para os modos claro e escuro ao mesmo tempo, facilitando seu uso em qualquer lugar.

:root {
  --background: white;
  --text: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: darkslategray;
    --text: white;
  }
}
body {
  background: var(--background);
  color: var(--text);
}

Bem, agora há uma nova opção – a light-dark() função. Torna ainda mais fácil definir cores para o modo escuro.

Primeiro, informe ao navegador que você está fornecendo um design para os modos claro e escuro com a color-schemepropriedade. Isso solicita que o navegador altere os estilos padrão do agente do usuário quando estiver no modo escuro, garantindo que os controles do formulário apareçam no modo escuro, por exemplo. Também é necessário para light-dark()funcionar corretamente.

:root {
  color-scheme: light dark;
}

Então, sempre que você definir uma cor, poderá usar a light-dark()função para definir a primeira cor para o modo claro e a segunda cor para o modo escuro.

color: light-dark(black, white);
background-color: light-dark(white, darkslategray);

Você ainda pode usar variáveis, se desejar. Talvez você queira estruturar seu código assim.

:root {
  color-scheme: light dark;
  --background: light-dark(black, white);
  --text: light-dark(white, darkslategray);
}
body {
  background: var(--background);
  color: var(--text);
}

Uma pergunta frequente quando se aprende light-dark()é “isso só funciona para cores?” Sim, esta função só funciona para cores. Use a prefers-color-schemeconsulta de mídia para definir o restante dos estilos dependentes do esquema de cores.

Estilo inicial

WebKit para Safari 17.5 adiciona suporte para @starting-style. Permite definir valores iniciais para um elemento específico. Isto é necessário para permitir uma transição quando a caixa do elemento é criada (ou recriada).

.alert {
  transition: background-color 2s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

No exemplo acima, a background-colortransição será de transparente para verde quando o elemento for adicionado ao documento.

Muitos desenvolvedores estão entusiasmados em usar @starting-stylejunto com display: nonea interpolação. Para isso, o WebKit também precisa suportar animação da displaypropriedade, que ainda não foi lançada no Safari. Você pode testar esse caso de uso hoje no Safari Technology Preview.

Apresenta consultas para importação de CSS

O WebKit para Safari 17.5 adiciona a supports()sintaxe às @import regras. Agora você pode importar arquivos CSS condicionalmente com base na existência ou não de suporte para um determinado recurso.

@import <url> supports(<feature>);

Por exemplo, você pode carregar folhas de estilo diferentes com base no suporte ou não ao aninhamento CSS.

@import "nested-styles.css" supports(selector(&));
@import "unnested-styles.css" supports(not selector(&));

Ou você pode carregar determinados arquivos CSS quando um navegador não tiver suporte para Cascade Layers. (Observe que quaisquer @importregras layer()serão automaticamente ignoradas em um navegador sem suporte de camada.)

@import url("reset.css") layer(reset);
@import url("framework.css") layer(framework);
@import url("custom.css") layer(custom);

@import url("unlayered-fallback-styles.css") supports(not at-rule(@layer));

Ou simplesmente teste um recurso. Aqui, esses estilos de layout só serão carregados se o Subgrid for compatível.

@import url("layout.css") supports(grid-template-columns: subgrid);

WebCodecs

WebKit para Safari 17.5 adiciona suporte para AV1 a WebCodecs quando um decodificador de hardware AV1 está disponível.

WebGL

WebKit para Safari 17.5 adiciona suporte WebGL para EXT_conservative_depthe NV_shader_noperspective_interpolation.

WKWebView

WKWebView adiciona suporte para registrar erros do MarketplaceKit no console JavaScript. Isso tornará os erros mais fáceis de depurar.

Correções de bugs e muito mais

Além desses novos recursos, o WebKit for Safari 17.5 inclui trabalho de aprimoramento dos recursos existentes.

Acessibilidade

• Corrigido um bug que impedia o eco de palavras do VoiceOver em alguns campos de texto. (122451549) (FB13592798)

Animações

• Corrigida cintilação com múltiplas animações aceleradas e mudanças de direção. (117815004)

Autenticação

• Corrigida excludeCredentialsa propriedade sendo ignorada durante uma solicitação de registro de chave de acesso. (124405037)

CSS

• Corrigido o cálculo de proximidade para implícito @scope. (124640124)
• Corrigido o cálculo da altura lógica do algoritmo de dimensionamento da trilha da grade, evitando atualizações desnecessárias de itens da grade. (124713418)
• Corrigido qualquer @scopelimite que deixava o elemento fora do escopo. (124956673)

Formulários

• Correção de campos de texto nativos que ficavam invisíveis no modo escuro. (123658326)
• Corrigida a renderização nativa substituta <select>no modo escuro. (123845293)

meios de comunicação

• Corrigida a rolagem de um elemento quando um elemento de vídeo pointer-events: noneé colocado sobre ele. (118936715)
• Corrigida <audio>a reprodução de HTML5 para continuar para a próxima atividade de mídia quando estiver em segundo plano. (121268089) (FB13551577)
• AV1 corrigido para decodificação em hardware no iPhone 15 Pro. (121924090)
• Corrigida a distorção de áudio nos alto-falantes internos ao transmitir conteúdo em navegadores da web. (122590884)
• Corrigidos loadeddataeventos de disparo durante <audio>e <video>no carregamento da página. (124079735) (FB13675360)

Renderização

• Corrigido o ajuste do tamanho da área de rolagem ao alternar entre barras de rolagem não sobrepostas e sobrepostas. (117507268)
• Corrigida a oscilação ao mostrar uma camada em um fundo pintado pela primeira vez, evitando a decodificação assíncrona da imagem. (117533495)
• Corrigida quebra de linha antes ou entre sequências Ruby. (122663646)

API Web

• Corrigidos mousemoveeventos em iframeque o mouse era clicado de fora iframee depois se movia para dentro dele enquanto o botão era pressionado. (120540148) (FB13517196)

Aplicativos da Web

• Foram corrigidos vários problemas que faziam com que o Web Push não mostrasse notificações quando o aplicativo da web ou o Safari ainda não estava em execução. (124075358)

Inspetor da Web

• Corrigidos botões de informações e depuração que não apareciam na guia Console até que novas mensagens do console fossem exibidas. (122923625)

WebRTC

• WebCodecs corrigidos para usar corretamente o decodificador de hardware VP9. (123475343)
• Corrigido nenhum vídeo recebido no Teams VA. (124406255)
• Corrigida a câmera pausando ocasionalmente quando a tocha está ativada. (124434403)

Atualizando para Safari 17.5

Safari 17.5 está disponível no iOS 17.5 , iPadOS 17.5 , macOS Sonoma 14.5, macOS Ventura, macOS Monterey e no visionOS 1.2.

Se você estiver executando o macOS Ventura ou o macOS Monterey, poderá atualizar o Safari sozinho, sem atualizar o macOS. No macOS Ventura, vá para  > Configurações do sistema > Geral > Atualização de software e clique em “Mais informações…” em Atualizações disponíveis.

Para obter a versão mais recente do Safari no iPhone, iPad ou Apple Vision Pro, vá em Ajustes > Geral > Atualização de Software e toque para atualizar.