Novidades do Safari e do WebKit

Novidades do Safari e do WebKit

Descubra como as tecnologias mais recentes para a web no Safari e no WebKit podem ajudar você a criar experiências incríveis. Destacaremos diferentes recursos de CSS e como eles funcionam, incluindo animação orientada por rolagem, transições de visualização entre documentos e posicionamento de ancoragem. Também vamos explorar a compatibilidade com novas mídias de áudio, vídeo, imagens e ícones.

Capítulos
- 0:00 - Introdução
- 1:46 - Animação
- 19:01 - Layout
- 29:05 - Efeitos visuais
- 38:22 - Mídia
Recursos
Vídeos relacionados

WWDC25

6:18 - Progress bar code scroll() example

footer::after {
  content: "";
  height: 1em;
  width: 100%;
  background: var(--yellow);
  left: 0;
  bottom: 0;
  position: fixed;
  transform-origin: top left;
  animation: progress-scale linear;
  animation-timeline: scroll();
}

@keyframes progress-scale {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

8:36 - html an css of text blocks showcasing different code topics

<section class="topics">
  <h3>What you can learn:</h3>
  <ul class="topics">
     <li class="topic-item">Web Development</li>
     <li class="topic-item">Computer Science</li>
     <li class="topic-item">Data Science</li>
     <!-- additional HTML... -->
  </ul>
</section>

.topic-item {
  background: var(--yellow);  
  border: 1px solid var(--gray);
  /* additional CSS... */  
}

9:12 - text blocks twisting from the left - animation

@keyframes in-from-left {
  from {
    opacity: 0;
    transform: scale(.8) rotate(-90deg)   
               translateY(15vh);
  }
}

9:18 - text blocks twisting from the middle - animation

@keyframes in-from-middle {
  from {
    opacity: 0;
    transform: scale(.8)   
               translateY(15vh);
  }

9:24 - text blocks twisting from the right - animation

@keyframes in-from-right {
  from {
    opacity: 0;
    transform: scale(.8) rotate(90deg)   
               translateY(15vh);
  }
}

10:07 - view() timeline example with timeline and range

.topic-item {
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range:
  &:nth-child(3n + 1) { animation-name: in-from-left; }
  &:nth-child(3n + 2) { animation-name: in-from-middle; }
  &:nth-child(3n + 3) { animation-name: in-from-right; }
}

12:20 - animation range 50%

.topic-item {
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: 0% 50%;
  &:nth-child(3n + 1) { animation-name: in-from-left; }
  &:nth-child(3n + 2) { animation-name: in-from-middle; }
  &:nth-child(3n + 3) { animation-name: in-from-right; }
}

14:20 - simple cross document view transition code
```
@view-transition {
    navigation: auto;
}
```

16:00 - adding media query for reduced motion

@view-transition { navigation: auto; }

@media not (prefers-reduced-motion) {
  @keyframes slide-in {
    from { translate: 100vw 0; }
  }
  @keyframes slide-out {
    to { translate: -100vw 0; }
  }
}

16:22 - adding ids to html for cross document view transition

<body>
  <nav>
    <!-- additional HTML... -->
  </nav>

    <section class="hero">
      <div class="hero-image">
      <!-- additional HTML... -->
  </main>
  <footer>
    <!-- additional HTML... -->
  </footer>
<body>

16:58 - slide effect for cross document view transition

@view-transition { navigation: auto; }

@media not (prefers-reduced-motion) {
  #school-info {
    view-transition-name: main-body;
  }
  ::view-transition-old(main-body) {

  }
  ::view-transition-new(main-body) {

  }
  @keyframes slide-in {
    from { translate:e100vw 0; }
	}
}

19:48 - nav bar and profile menu

<nav>
  <h1 class="logo">A-School of Code</h1>
  <ul>
    <li>Courses</li>
    <li>Cohorts</li>
    <li class="profile">
      <img src="https://example.com/saron.jpeg" alt="woman speaking"/>
    </li>
  </ul>
</nav>

<ul class="profile-menu">
  <li>Account</li>
  <li>Settings</li>
  <li>Profile</li>
  <li>Billing</li>
</ul>

20:37 - adding popover attributes

<ul class="profile-menu" id="profile-menu" popover>
  <li>Account</li>
  <li>Settings</li>
  <li>Profile</li>
  <li>Billing</li>
</ul>

20:51 - adding aria to popover target

<nav>
  <div class="wrapper">
    <h1 class="logo">A-School of Code</h1>
    <ul>
      <li>Courses</li>
      <li>Cohorts</li>
      <li class="profile">
        <button class="profile-button" aria-haspopup="true" popovertarget="profile-menu">                                                 >
          <img src="https://example.com/saron.jpg" alt="woman speaking"/>
        </button>
      </li>
    </ul>
  </div>
</nav>

21:58 - establishing the anchor

.profile-button {
  anchor-name: --profile-button;
}

.profile-menu {
  position-anchor: --profile-button;
}

23:25 - setting the target to top right

.profile-menu {
  position-anchor: --profile-button;
  position-area: top right;
}

23:39 - setting the target to bottom center

.profile-menu {
  position-anchor: --profile-button;
  position-area: bottom center;
}

24:16 - setting the target to span right

.profile-menu {
  position-anchor: --profile-button;
  position-area: span-right;
}

24:17 - setting the target to span left

.profile-menu {
  position-anchor: --profile-button;
  position-area: span-left;
}

27:30 - intro to the anchor() function

.profile-button {
  anchor-name: --profile-button;
}

.profile-menu {
  position-anchor: --profile-button;
  position: absolute;
  top: anchor(bottom);
  left: anchor(left);
}

28:26 - using calc and units in anchor() function

.profile-button {
  anchor-name: --profile-button;
}

.profile-menu {
  position-anchor: --profile-button;
  position: absolute;
  top: anchor(bottom);
  left: calc(anchor(left) + 1.5em);
}

29:43 - adding a text gradient

.logo {
  background-image: linear-gradient(to 
                    bottom right in hsl, 
                    yellow, orange);
  background-clip: text;
  color: transparent;
}

31:05 - adding a gradient to border

.primary-btn {
  background-image: linear-gradient(to 
                    bottom right in hsl, 
                    yellow, orange);
  background-clip: border-area;
  border-color: transparent;
  background-origin: border-box;
}

32:15 - shorthand for adding gradient to border

.primary-btn {
  background: border-area linear-gradient(to bottom right in hsl, yellow, orange);
  border-color: transparent;
}

33:33 - arrow shape using path

.review-shape {
  clip-path: path("M0 0 L 500 0 L 600 
                   100 L 500 200 L 0 
                   200 Q 100 100 0 0 z");
}

35:01 - arrow shape using shape()

.review-shape {
  clip-path: shape(from top left,
    line to calc(100% - 50cqh) 0%,
    line to 100% 50cqh,
    line to calc(100% - 50cqh) 100%,
    line to bottom left,
    curve to top left with 50cqh 50cqh,
    close);
}

41:42 - dynamic range limit: no limit
```
img {
  dynamic-range-limit: no-limit;
}
```
41:57 - dynamic range limit: standard
```
img {
  dynamic-range-limit: standard;
}
```

- 0:00 - Introdução
- As equipes Safari e WebKit têm trabalhado muito desde a WWDC passada, aprimorando as tecnologias para melhorar a interoperabilidade e a experiência do usuário. Novos recursos em animação, layout, efeitos visuais e mídia, incluindo animações orientadas por rolagem, posicionamento da âncora, compatibilidade com ícones em SVG e formatos de mídia aprimorados, estarão disponíveis no Safari este ano.
- 1:46 - Animação
- A animação é uma ferramenta poderosa para melhorar as experiências online, tornando os sites mais interessantes e agradáveis. Com os recursos mais recentes em CSS, especificamente as animações orientadas por rolagem no Safari 19, você melhora a qualidade de um site sem a necessidade de JavaScript. Esse recurso é importante porque otimiza o desempenho do usuário e a duração da bateria. As animações baseadas em rolagem introduzem duas novas linhas do tempo: a de rolagem e a de visualização. A linha do tempo de rolagem permite vincular animações à rolagem do usuário, criando uma experiência mais interativa. Por exemplo, uma barra de progresso na parte inferior da página pode ser preenchida à medida que alguém rola a tela para baixo, dando uma pista visual do progresso. É importante considerar a acessibilidade ao implementar animações. Algumas pessoas podem preferir menos movimento devido a desconfortos causados por dimensionamento de objetos grandes, zoom ou objetos que se movem em velocidades diferentes. Preste atenção nesses pontos para criar animações que sejam inclusivas e agradáveis para todos.
- 19:01 - Layout
- Este ano, o Safari vai apresentar um novo CSS chamado posicionamento da âncora, que vai revolucionar a forma como os desenvolvedores criam dicas de ferramentas e menus de posição. O posicionamento da âncora permite fixar um elemento a outro, como um menu a uma foto de perfil. Esse recurso possibilita o posicionamento preciso do menu em relação à âncora. O Safari também relançou as predefinições da janela de visualização no Modo de Design Responsivo, facilitando testar sites em vários dispositivos e tamanhos de tela.
- 29:05 - Efeitos visuais
- Há diversos novos recursos CSS para melhorar os efeitos visuais em sites e apps da web. Um recurso importante é a expansão da propriedade background-clip. Antes usada para preencher texto com gradientes ou imagens, agora essa propriedade pode ser aplicada a bordas. No entanto, alguns ajustes adicionais, como tornar a cor da borda transparente e estender a origem do fundo, são necessários para alcançar o efeito desejado. Você pode usar essa técnica para deixar vários elementos, como botões e círculos de progresso, mais bonitos. Outra melhoria interessante é a compatibilidade com a função shape(), que permite que os designers criem formas responsivas mais facilmente que antes. Ele oferece controle preciso sobre quais partes de uma forma são redimensionadas com a janela de visualização e quais permanecem estáticas, mantendo a aparência e as proporções das formas em diferentes telas. Isso é útil para criar elementos decorativos, como setas ou fundos. Além disso, o CSS introduz novos recursos de tipografia, como text-wrap: pretty, disponível no Safari 19. Esse recurso visa melhorar a legibilidade do texto, resolvendo problemas como linhas curtas, hifenização excessiva e comprimentos de linha irregulares. Ele ajusta o espaçamento entre palavras e quebras de linha para criar um layout de parágrafo mais agradável. É uma melhoria sutil que pode fazer uma diferença significativa na experiência geral do usuário e não compromete a experiência em navegadores incompatíveis.
- 38:22 - Mídia
- O Safari deve lançar várias melhorias significativas de mídia este ano. Entre elas, está a implementação de ícones em SVG, que melhorarão a experiência do usuário em vários recursos do Safari, como favicons, bookmarklets e a página de início. Os ícones em SVG oferecem melhor escalabilidade e tamanhos de arquivo menores em comparação com os PNGs tradicionais. Além disso, o Safari já aceita imagens de alto alcance dinâmico (HDR) para WebKit e Safari. As imagens HDR deixam o conteúdo mais vibrante e bonito, exibindo tons mais profundos, maior variedade e cores mais brilhantes. O Safari também ampliará a compatibilidade com vários formatos de mídia, incluindo Ogg Opus e Ogg Vorbis para áudio, e fez progresso para garantir que combinações complexas de codecs e contêineres funcionem em várias APIs. Essas atualizações permitem que você integre recursos de gravação de podcast e vídeo em tempo real aos seus apps da web. Além disso, o Safari está aprimorando a compatibilidade com web espacial, permitindo renderizar modelos 3D estereoscopicamente e incluir vídeos imersivos nas páginas. Essas melhorias visam tornar a web mais interativa e interessante para todo mundo.

Explore Get Started

Stay Updated

Explore Platforms

Featured

Explore Technologies

Featured

Explore Community

Featured

Explore Documentation

Release Notes

Explore Downloads

Featured

Explore Support

Featured

Quick Links

Capítulos

Recursos

Vídeos relacionados

WWDC25