novos recursos do safari 4

Na WWDC 2009, a Apple lançou a versão oficial do navegador Safari 4. A versão oficial do Safari 4 abandonou o método de aba semelhante ao Chrome e voltou para a interface da versão 3.0. Diz-se que na WWDC, Serlet enganou seriamente o navegador IE8 da Microsoft, dizendo que o mecanismo JavaScript do Safari é atualmente o mais rápido do mundo. De acordo com os dados de teste que ele forneceu, o Chrome 2 é 5,3 vezes mais rápido que o IE8, e a velocidade do Safari4 é. 7,8 vezes maior que o IE8!

A maioria desses dados são truques oficiais, então vamos ignorá-los por enquanto e ver qual impacto o Safari 4 terá em nosso desenvolvimento front-end:

Suporta tags de áudio e vídeo.

Safari4 tem muitas melhorias em seu suporte para CSS, como segue:

Safari 4 começa a suportar o atributo zoom. O uso e o efeito disso são os mesmos do navegador IE. A diferença é que se for ampliado, o Safari diminuirá para a menor fonte suportada pelo navegador, enquanto o IE diminuirá diretamente para o tamanho definido. por exemplo:

.zoomTest { tamanho da fonte : 12px ; zoom : 0,1 }

O Safari diminuirá apenas para o tamanho da fonte de 9px, enquanto o IE diminuirá para 1,2px (que não é mais visível a olho nu).

Consiste em uma série de subpropriedades:

• -webkit-animation-name especifica um nome para a animação
• -webkit-animation-duration duração da animação
• -webkit-animation-timing-function O método de troca de quadro de animação, ou seja, efeito de animação, provavelmente inclui facilidade, linear, facilidade de entrada, facilidade de saída, facilidade de entrada.
• -webkit-animation-delay define o horário de início da animação
• -webkit-animation-iteration-count tempos de repetição de animação
• -webkit-animation-direction a direção da animação tem dois atributos: normal, reprodução direta alternativa, direção alternada, reprodução direta com números pares, reprodução reversa com números ímpares;

Máscara CSS/efeito de máscara

• -webkit-mask-attachment possui dois valores: fixo e rolagem;
• -webkit-mask-clip efeito de recorte da borda do elemento;
• O uso de -webkit-mask-position é semelhante ao atributo background-position.
• -webkit-mask-origin especifica a âncora do atributo -webkit-mask-position. Existem três atributos: borda, conteúdo e preenchimento.
• A imagem da máscara do elemento -webkit-mask-image , o valor é o caminho da imagem;
• -webkit-mask-repeat configurações repetitivas,
• -estilos mistos de webkit-mask-composite . O padrão é borda, o que significa que o plano de fundo se estende até a área da borda. Também pode ser definido como preenchimento.

O Safari 4 também adiciona ou aprimora o suporte para algumas outras propriedades CSS. Por exemplo, a posição de fundo começa a suportar efeitos de animação, que não serão descritos aqui.

Pode-se ver que essas novas propriedades CSS adicionadas ao Safari não fazem parte do padrão W3C, mas essas propriedades privadas do webkit podem de fato nos permitir desenvolver melhores aplicativos de rede.

Função WAI-ARIA

Presumivelmente, muitas pessoas não conhecem o WAI-ARIA. WAI-ARIA significa W3C Web Accessibility Initiative Accessible Rich Internet Applications, que é traduzido para o chinês como "Aplicativos Ricos Acessíveis para Internet". Ao mesmo tempo, o W3C desenvolveu o padrão de função WAI-ARIA. O Google anunciou recentemente que apoiará fortemente o WAI-ARIA, e a função de leitura de tela do leitor do Google será implementada por meio do WAI-ARIA. Atualmente, o Firefox começou a oferecer suporte a WAI-ARIA e o IE8 oferece suporte parcial. O Safari 4 também suporta funções WAI-ARIA. Verifique o suporte do Safari 4 para WAI-ARIA >>

É importante notar que WAI-ARIA parece suportar apenas tags div e span. Para cooperar com WAI-ARIA, o Safari também adiciona alguns atributos de suporte de HTML, como aria-checked/aria-level/aria-valuemax/aria. -valormin, etc.

Baixe o safári :

PS: Este botão de download vem da página oficial de download do Safari. Crianças cuidadosas descobrirão que o estilo deste botão obviamente não é o estilo da Apple, mas mais parecido com o botão verde na página de download do Firefox.

Texto original: http://www.qianduan.net/safari-4-new-features.html