A palestra de ontem na WWDC da Apple apresentou dois novos sistemas operacionais. O novo MacOS é chamado de El Capitan após uma formação em Yosemite (que foi tomada pela maioria dos comentaristas para indicar que a Apple vê seu próximo sistema operacional como uma versão menor, em vez de major). O MacOS El Capitan e o iOS 9 já estão disponíveis para os desenvolvedores da Apple, serão lançados no beta público no mês que vem e serão lançados no outono.

Escondidos entre os anúncios decepcionantes sobre o pagamento da Apple a dois países (Canadá e Reino Unido) e o serviço de streaming de música da Apple, houve uma série de pistas sobre como a Apple vê a Web e o papel do Safari evoluindo nos próximos anos. …

1) Scroll Snapping

Um dos maiores anúncios para os web designers é a implementação do encaixe de rolagem CSS. Scroll snapping - que é atualmente alcançado com JavaScript - é um método de ajustar o easing em um scroll para que o scroll se encaixe em uma posição predefinida. Se você já rolou um site de página única que deslizou para a próxima seção, ao contrário de um número arbitrário de pixels, você experimentou o encaixe de rolagem.

A Apple espera que a tendência dos sites de uma única página ... continue

É uma indicação de que a Apple espera que a tendência dos sites de página única, com seções que preenchem toda a janela de visualização, continuem inabaláveis.

O Safari 9 introduz as seguintes propriedades de ajuste de rolagem CSS: -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, e -webkit-scroll-snap-coordinate.

Como o ajuste de rolagem é amplamente visto como um aprimoramento progressivo, em breve poderá ser prático mudar esse efeito de JavaScript para CSS.

2) sites fixados

O Safari 9 introduz sites fixos. Sites fixos é uma maneira de manter seus sites favoritos abertos no navegador para acesso rápido, sem deixar uma guia aberta. Para usar sites fixos no Safari 9, basta arrastar uma aba aberta para a esquerda e um pequeno ícone será criado na barra de favoritos, permitindo que você acesse rapidamente a página.

Os usuários, sem dúvida, esperam usar esse recurso, portanto, todos os sites precisam estar preparados. Para estar pronto, tudo o que você precisa fazer é criar um ícone: torná-lo sólido em preto, com um plano de fundo transparente e salvá-lo como um SVG. Você pode então vincular ao ícone na cabeça do seu documento HTML, da seguinte forma:

Se você quiser colorir o ícone para corresponder à sua marca, adicione essa meta tag imediatamente depois dela:

3) aprimoramentos de vídeo HTML5

O Safari 9 introduz alguns aprimoramentos para o vídeo HTML5.

O Airplay permite controles personalizados para mídia HTML5. Usando o JavaScript, você poderá detectar a disponibilidade do Airplay e, quando possível (ou seja, no Safari 9), fornecer controles personalizados. Ideal para qualquer um que esteja cansado dos controles padrão, quebrando a consistência da marca.

PiP (Picture in Picture) é um estilo de vídeo que é usado extensivamente na TV. PiP envolve a reprodução de um vídeo no canto da tela, enquanto outro conteúdo é visto em outro lugar; navegar no guia de canais em uma caixa Tivo enquanto o canal atual toca no canto, é um bom exemplo.

O Safari 9 introduzindo o PiP é uma inovação incrível para quem gosta de assistir a eventos ao vivo (como a palestra sobre o Apple WWDC) enquanto trabalha. No entanto, como a maioria das tecnologias, o PiP está aberto ao abuso; é provável que você veja os primeiros anúncios do PiP aparecendo no canto do seu navegador nos próximos 6 meses. Felizmente, o Safari 9 também inclui a opção de silenciar todo o áudio em todas as guias com um clique rápido.

4) Forçar eventos de toque

Os novos MacBooks da Apple apresentam trackpads de toque de força; trackpads que detectam não apenas toques, mas a força com que você toca. O Safari 9 introduz vários novos eventos JavaScript - ironicamente classificados como eventos de mouse - para lidar com o recurso: webkitmouseforcewillbegin, webkitmouseforcedown, webkitmouseforceup e webkitmouseforcechanged.

Os eventos de toque de força provavelmente só serão úteis para navegação suplementar neste momento, já que a tecnologia não é apenas software, mas também hardware restrito. No entanto, se usado como um aprimoramento progressivo, eles abrem algumas possibilidades interessantes, especialmente na área de jogos e design de interface do usuário experimental.

5) SFSafariViewController

À primeira vista, o SFSafariViewController parece ser mais interessante para designers de aplicativos do que para web designers. Ele permitirá que os aplicativos exibam o conteúdo da Web em um aplicativo usando a renderização do Safari.

Projetado para simplificar cenários como abrir um aplicativo nativo e criar uma conta na página da Web de uma empresa, antes de retornar a um aplicativo para efetuar login na conta, o mais importante sobre o SFSafariViewController é que permite que a Web, em vez de nativa, seja a pedra angular dos sistemas online de uma empresa. É um pequeno software que desencadeia um passo muito grande para uma integração mais próxima entre o nativo e a web.

6) ECMAScript 6

JavaScript está um passo mais perto de se tornar a linguagem OOP que realmente deveria ser

Os desenvolvedores de JavaScript ficarão animados em saber que o Safari 9 inclui suporte completo para classes, propriedades computadas, conjunto fraco, objeto numérico, literais octal e binário, objetos de símbolo e literais de modelo. Esse suporte significa que o JavaScript está um passo mais perto de se tornar a linguagem OOP que realmente deveria ser agora.

7) Filtros CSS

A propriedade CSS do filtro de pano de fundo foi adicionada ao Safari 9. Todos os filtros de desfoque, brilho, contraste, sombra, escala de cinza, matiz-girar, inverter, opacidade, saturação e sépia estão disponíveis.

8) Atualizações do modo de desenvolvedor

O modo de design responsivo foi introduzido no Safari 9 como uma maneira de fornecer comutação rápida de layouts em diferentes viewports. Todos os dispositivos da Apple são incluídos como predefinições, mas são mais uma ferramenta de apresentação útil para reuniões de clientes do que uma ferramenta de desenvolvimento, pois as práticas recomendadas favorecem o conteúdo, em oposição à viewport e aos pontos de interrupção. É importante observar que o modo de design responsivo altera apenas a porta de visualização e não simula dispositivos diferentes. Pode ser útil como um teste rápido sempre que novos dispositivos da Apple forem iniciados, antes que os simuladores de dispositivos sejam atualizados.

O inspetor da web foi reprojetado. Juntamente com alguns ajustes da interface do usuário para melhorar o UX, há uma ênfase maior na renderização e no desempenho do quadro.

9) CSS não preparado

Algumas atualizações são mais bem-vindas do que outras. Um dos mais bem-vindos, mas menos provável de ser notado, é a queda de prefixos de navegadores para mais de 45 propriedades CSS. Embora faça pouco no curto prazo com navegadores legados ainda em uso, quanto mais cedo os navegadores soltarem os prefixos, mais cedo diremos adeus a eles para sempre.

Os mais significativos para serem livres de prefixo são as propriedades flexíveis , as propriedades de transição , as propriedades de transformação e as propriedades de animação .