safari 4 nuevas características

En la WWDC 2009, Apple lanzó la versión oficial del navegador Safari 4. La versión oficial de Safari 4 abandonó el método de pestaña similar a Chrome y volvió a la interfaz de la versión 3.0. Se dice que en la WWDC, Serlet tomó en serio el navegador IE8 de Microsoft, diciendo que el motor JavaScript de Safari es actualmente el más rápido del mundo. Según los datos de prueba que proporcionó, Chrome 2 es 5,3 veces más rápido que IE8 y la velocidad de Safari4 es. ¡7,8 veces más que IE8!

La mayoría de estos datos son trucos oficiales, así que ignorémoslos por ahora y veamos qué impacto tendrá Safari 4 en nuestro desarrollo front-end:

Admite etiquetas de audio y video.

Safari4 tiene muchas mejoras en su soporte para CSS, como se muestra a continuación:

Safari 4 comienza a admitir el atributo de zoom. El uso y efecto de esto son los mismos que los del navegador IE. La diferencia es que si se hace zoom, Safari se reducirá a la fuente más pequeña admitida por el navegador, mientras que IE se reducirá directamente al tamaño establecido. Por ejemplo:

.zoomTest { tamaño de fuente : 12px ; zoom : 0,1 }

Safari solo se reducirá a un tamaño de fuente de 9 píxeles, mientras que IE se reducirá a 1,2 píxeles (que ya no es visible a simple vista).

Consta de una serie de subpropiedades:

• -webkit-animation-name especifica un nombre para la animación
• -webkit-animation-duration duración de la animación
• -webkit-animation-timing-function El método de cambio de cuadro de animación, es decir, el efecto de animación, probablemente incluye facilidad, lineal, entrada, salida y entrada.
• -webkit-animation-delay define la hora de inicio de la animación
• -webkit-animation-iteration-count tiempos de repetición de animación
• -webkit-animation-direction La dirección de animación tiene dos atributos: normal, reproducción hacia adelante alternativa, dirección alterna, reproducción hacia adelante con números pares y reproducción hacia atrás con números impares.

Máscara CSS/efecto de máscara

• -webkit-mask-attachment tiene dos valores: fijo y desplazamiento;
• -webkit-mask-clip efecto de recorte del borde del elemento;
• -El uso de webkit-mask-position es similar al atributo de posición de fondo.
• -webkit-mask-origin especifica el ancla del atributo -webkit-mask-position. Hay tres atributos: borde, contenido y relleno.
• La imagen de máscara del elemento -webkit-mask-image , el valor es la ruta de la imagen;
• -webkit-mask-repeat configuraciones repetitivas,
• -webkit-mask-composite estilos mixtos. El valor predeterminado es borde, lo que significa que el fondo se extiende hasta el área del borde. También se puede configurar como relleno.

Safari 4 también agrega o mejora la compatibilidad con algunas otras propiedades CSS. Por ejemplo, la posición de fondo comienza a admitir efectos de animación, que no se describirán aquí.

Se puede ver que estas nuevas propiedades CSS agregadas a Safari no son parte del estándar W3C, pero estas propiedades privadas de webkit pueden permitirnos desarrollar mejores aplicaciones de red.

Rol WAI-ARIA

Es de suponer que no mucha gente conoce WAI-ARIA. WAI-ARIA significa Aplicaciones de Internet enriquecidas accesibles de la Iniciativa de accesibilidad web del W3C, que se traduce al chino como "Aplicaciones de Internet enriquecidas accesibles". Al mismo tiempo, el W3C desarrolló el estándar de roles WAI-ARIA. Google anunció recientemente que respaldará firmemente WAI-ARIA y que la función de lectura de pantalla de su lector de Google se implementa a través de WAI-ARIA. Actualmente, Firefox ha comenzado a admitir WAI-ARIA e IE8 lo admite parcialmente. Safari 4 también admite funciones WAI-ARIA. Consulta el soporte de Safari 4 para WAI-ARIA >>

Vale la pena señalar que WAI-ARIA parece admitir solo etiquetas div y span. Para cooperar con WAI-ARIA, Safari también agrega algunos atributos de soporte de HTML, como aria-checked/aria-level/aria-valuemax/aria. -valor mínimo, etc.

Descargar safari :

PD: Este botón de descarga proviene de la página oficial de descarga de Safari. Los niños cuidadosos encontrarán que el estilo de este botón obviamente no es el estilo de Apple, sino más bien el botón verde en la página de descarga de Firefox.

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