Salvo indicação em contrário, as mudanças descritas abaixo se aplicam à versão mais recente do Canal Beta do Chrome para Android, Chrome OS, Linux, macOS e Windows. Veja uma lista completa dos recursos do Chrome 69 em chromestatus.com . O Chrome 69 está na fase beta desde 2 de agosto.
Novos truques de CSS
O Chrome adicionou vários novos recursos de CSS.
Conic gradients
O conic gradients (angular/sweep) no CSS permitem criar transições de cor em volta de um centro em vez de irradiar as transições a partir desse centro. Isso permite, por exemplo, criar um círculo cromático usando apenas duas propriedades CSS, como mostrado abaixo. Veja mais exemplos aqui .div {
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%
}
Novas propriedades margin, padding e border
Agora, as propriedades lógicas margin padding border nomes padrão : margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} e border-{block,inline}-{start,end}-{width,style,color}. Antes, esse recurso era oferecido por meio de prefixos -webkit e nomes não padronizados. Propriedades abreviadas só são adicionadas para border-{block,inline}-{start,end}.
CSS scroll snap
CSS scroll snap positions são deslocamentos em uma janela de visualização do contêiner de rolagem em que a rolagem é interrompida após cada ação de rolagem. Isso melhora a experiência do usuário porque faz com que zonas roláveis parem facilmente em pontos predefinidos. Além disso, permite usar padrões de rolagem de UX comuns sem precisar de JavaScript. Um exemplo desse padrão é um carrossel de imagens horizontal implementado com as declarações abaixo. O artigo "Rolagem bem controlada com quebra de rolagem CSS" aborda esse assunto com mais detalhes.#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
Recortes de tela
Os recortes de tela já estão disponíveis no Chrome por meio da nova função CSS env() (variáveis ambientais) e da metatag viewport-fit. Assim, os desenvolvedores podem aproveitar toda a tela dos dispositivos que têm recorte de tela.viewport-fit na metatag viewport como cover. A partir daí, o site pode usar as variáveis ambientais do CSS de área segura para organizar o conteúdo sem sobreposição pelo recorte. Veja como funciona abaixo. O material explicativo e a especificação oferecem mais informações.<meta name="viewport" content="viewport-fit: cover" />
<style>
#box {
margin-top: env(safe-area-inset-top);
margin-left: env(safe-area-inset-left);
margin-bottom: env(safe-area-inset-bottom);
margin-right: env(safe-area-inset-right);
}
</style>
<div id=box></div>
Outros recursos desta versão
Canvas
O OffscreenCanvas é uma nova interface que oferece contextos de renderização de canvas 2D e WebGL para uso em workers. Isso aumenta o paralelismo dos aplicativos web e melhora o desempenho em sistemas multinúcleo.DedicatedWorker.requestAnimationFrame(), permitindo que eventos do tipo animação sejam acionados em workers dedicados da mesma forma que em Window. Por exemplo:const offscreenCanvas = new OffscreenCanvas(100, 100);
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10);
const canvasElement = document.getElementById("mycanvas")
const offscreenCanvas = canvasElement.transferControlToOffscreen();
const ctx = offscreenCanvas.getContext("2d");
ctx.fillRect(0, 0, 10, 10);
self.onmessage = function(ev) {
const offscreenCanvas = ev.data;
const ctx = offscreenCanvas.getContext("2d");
let x = 0;
const draw = function() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(x, 0, 10, 10);
x = (x + 1) % ctx.canvas.width;
requestAnimationFrame(draw);
};
draw(0);
}
const worker = new Worker("worker.js");
const offscreenCanvas =
document.getElementById("canvas").transferControlToOffscreen();
worker.postMessage(offscreenCanvas, [offscreenCanvas]);
DOM
Um novo método chamado Element.toggleAttribute() Element.classList.toggle. Um parâmetro "force" opcional força a adição ou a exclusão do atributo, dependendo do valor de "force". Dessa forma, fica bem mais simples gerenciar atributos booleanos, já que a interface não usa strings como Element.setAttribute().
Fetch API: Request.isHistoryNavigation
Uma propriedade booleana foi adicionada a objetos de solicitação para indicar se determinada solicitação é uma navegação de histórico. Assim, o service worker consegue saber se a solicitação ocorreu por conta de uma navegação para frente ou para trás. Como exemplo do uso desse recurso, um service worker pode reagir a essa navegação com uma resposta em cache.
APIs JavaScript
O JavaScript tem várias novas APIs:
A ReportingObserver API oferece uma função de retorno de chamada em JavaScript invocada em resposta a suspensões de uso e intervenções no navegador. O relatório pode ser salvo, enviado ao servidor ou tratado usando JavaScript arbitrário. Esse recurso foi criado para dar aos desenvolvedores maior visibilidade do funcionamento dos sites em dispositivos reais.
Os arrays do JavaScript estão recebendo dois novos métodos . Array.prototype.flat() retorna uma nova matriz com todos os elementos de submatriz concatenados a ela de forma recursiva até a profundidade especificada. Os elementos do sub-array passam a ser membros do novo array. Já Array.prototype.flatMap() mapeia cada elemento usando uma função de mapeamento e organiza o resultado em uma nova matriz. Esse método é, em termos de funcionalidade, equivalente a um mapa seguido de uma chamada de flat() com profundidade de 1.
Keyboard Map API
Alguns aplicativos, como jogos, atribuem funções específicas a teclas físicas específicas. Quando a interface faz referência a essas teclas, ela precisa mostrar o caractere exibido na tecla, que varia de acordo com o local, ou o caractere atribuído à tecla por um layout de teclado alternativo que pode ter sido instalado pelo usuário. Em alguns casos, essas variações de layout fazem com que o caractere exibido na interface não faça referência à tecla física pretendida.KeyboardEvent.code que representam teclas físicas em strings corretas para exibição ao usuário. Você pode encontrar mais detalhes e exemplos dessa nova API na especificação e no material explicativo .
Loader
O suporte aos valores de dica rtt, downlink e ect do clientertt do cliente fornece ao servidor uma estimativa de tempo de retorno efetivo da conexão atual, arredondada ao múltiplo de 25 milissegundos mais próximo. O servidor pode usar essa informação para exibir uma imagem comprimida se a conexão está mais lenta que o esperado. Essas dicas de qualidade de rede informam ao servidor os mesmos valores fornecidos a uma página da web pelas Network Information APIs navigator.connection.rtt, navigator.connection.downlink e navigator.connection.effectiveType.
Mídia: consulta ao suporte a esquemas de criptografia por meio do EME
Algumas plataformas ou sistemas importantes só oferecem suporte ao AES-128 no modo CTR e outros são compatíveis apenas com o modo CBCS. E alguns oferecem suporte a ambos. Um novo método permite aos desenvolvedores web consultar se determinado esquema de criptografia oferece suporte ao Encrypted Media Extensions (EME).
Seleção de texto em ligadura
Agora, o Chrome permite selecionar texto dentro de ligaduras (uma ligadura é uma combinação de duas ou mais letras em um único símbolo). Isso inclui a seleção por mouse e por cursor em elementos "input" e "textarea". Além disso, fizemos uma pequena mudança na forma de renderizar a seleção de texto para viabilizar esse novo recurso. As partes do texto externas à área de seleção passaram a ser renderizadas com o estilo original:Seleção em ligadura para texto em inglês. Seleção em ligadura para texto em árabe.
Performance
Para evitar o vazamento de informações entre frames, os valores de "performance.memory" são atualmente extremamente quantizados e atrasados em 20 minutos.Isolamento de sites em desktop ), poderemos expor essas informações sem tanta preocupação com o vazamento de informações entre frames. Nesses casos, não retornaremos informações de consumo de memória quantizadas , com atraso de 30 segundos. Assim, os desenvolvedores podem detectar regressões de desempenho nos dados do usuário com mais facilidade, já que as medições de memória serão mais precisas e poderão ser realizadas com mais frequência.
ServiceWorker
Os service workers receberam duas melhorias:
Antes, ServiceWorkerRegistration.update() era resolvido com "undefined". Agora, é resolvido com o objeto de registro , como exigido pela especificação.
Por conta de uma limitação técnica, navigator.serviceWorker gerava anteriormente um SecurityError quando acessado em um contexto desprotegido. Depois dessa mudança, navigator.serviceWorker
. Com essas alterações, alinhamos o funcionamento com a especificação.
Comportamento de atualização de espaçamento e separadores de linha percentuais do CSS Grid Layout
Em uma versão futura, teremos uma mudança na forma como o espaçamento e os separadores de linha percentuais são resolvidos em contêineres de grade com altura indefinida. No momento, o comportamento deles é parecido ao das alturas percentuais em blocos regulares. No entanto, no futuro esse comportamento será igual ao das colunas, tornando-os simétricos.
Web Locks API
A Web Locks API possibilita a execução de scripts em uma guia para obter um bloqueio de forma assíncrona , mantê-lo enquanto a tarefa é realizada e liberá-lo em seguida. Enquanto o bloqueio for mantido, nenhum outro script em execução na mesma origem poderá obter o mesmo bloqueio. Um bloqueio indica um recurso possivelmente compartilhado, identificado por um nome escolhido pelo aplicativo web. Por exemplo, se um aplicativo web em execução em diversas guias quiser assegurar que somente uma guia seja sincronizada com a rede, cada guia poderá tentar obter um bloqueio my_net_sync, mas somente uma guia conseguirá. my_resource é obtido. await navigator.locks.request('my_resource', async lock => {
const url = await look_up_in_database();
const response = await fetch(url);
const body = await response.text();
await store_body_in_database(body);
});
material explicativo e o esboço da especificação .
O Web Authentication já oferece suporte a dispositivos CTAP2 FIDO
O Web Authentication adicionou suporte a dispositivos CTAP2 , que oferecem recursos de segurança avançados como autenticação biométrica e chaves residentes (chaves armazenadas no dispositivo). Antes, a WebAuthentication API só oferecia suporte a dispositivos de segundo fator universal (U2F) na camada de transporte. Essa alteração não muda a superfície da API em si, mas oferece interações mais sofisticadas com o dispositivo por meio da Web Authentication API atual.
WebRTC
A WebRTC recebeu duas melhorias:
Deprecations e melhorias de interoperabilidade
Ocasionalmente, o Chrome suspende, remove ou altera recursos para melhorar a interoperabilidade com outros navegadores. Esta versão do Chrome inclui as seguintes mudanças desse tipo.
Remoção do evento "stalled" de HTMLMediaElements que usa Media Source Extensions
Antes, o evento HTMLMediaElement.stalled disparava quando o download da mídia não progredia por, no mínimo, 3 segundos. No Media Source Extensions, o aplicativo web gerencia o download e o elemento de mídia não está ciente do seu progresso. Como alguns aplicativos adicionam dados de mídia em blocos maiores do que 3 segundos, stalled estava sendo disparado nos momentos errados. Para resolver isso, o evento stalled foi removido do Media Source Extensions .
Remoção de document.createTouchList
O método document.createTouchList() Touch(), que já é compatível com o Chrome desde a versão 48.
O método window.confirm() não ativa mais a guia pai
Se um documento de uma guia em segundo plano chamar window.confirm(), false será retornado imediatamentewindow.confirm() para colocar uma guia em primeiro plano, já que isso raramente é o que o usuário deseja.Postado por Jennifer Apacible
Um comentário :
PINGIN CEPAT KAYA ? Bingung mulai dari mana ? Baru..!! Game judi online 2019 wargapoker terpercaya. Dapatkan bonus-bonus untuk pemain baru, Ada begitu banyak jenis taruhan judi online dengan uang asli yang bisa anda mainkan di afapoker kapan saja dan dimana saja, cukup menggunakan satu user id saja. Anda dipastikan memainkan permainan judi online yang murni dominobet dimana Anda bermain 100% player vs player tanpa ada campur tangan bot link alternatif domino88 2019. Tidak perlu lagi bersusah payah mencari uang, Anda bebas menikmati waktu Anda. Situs link alternatif pokerace 2019 deposit murah yang menyediakan banyak permainan dengan pelayanan berkualitas. Jadi silahkan daftar dan segera mainkan permainan. Dijamin mudah dan cepat. Anda akan diberi pelayanan yang ramah dan cepat saat proses pendaftaran. Didukung dengan sistem terbaru dan tim profesional serta kemudahan bertransaksi. Kami menjamin kerahasiaan data member.
Postar um comentário