safari 4 nouvelles fonctionnalités

Lors de la WWDC 2009, Apple a publié la version officielle du navigateur Safari 4. La version officielle de Safari 4 a abandonné la méthode des onglets de type Chrome et est revenue à l'interface de la version 3.0. On dit qu'à la WWDC, Serlet a sérieusement critiqué le navigateur IE8 de Microsoft, affirmant que le moteur JavaScript de Safari est actuellement le plus rapide au monde. Selon les données de test qu'il a fournies, Chrome 2 est 5,3 fois plus rapide que IE8 et la vitesse de Safari4 est. 7,8 fois celui d'IE8 !

La plupart de ces données sont des gadgets officiels, alors ignorons-les pour l'instant et voyons quel impact Safari 4 aura sur notre développement front-end :

Prend en charge les balises audio et vidéo.

Safari4 présente de nombreuses améliorations dans sa prise en charge du CSS, comme suit :

Safari 4 commence à prendre en charge l'attribut zoom. L'utilisation et l'effet de ceci sont les mêmes que ceux du navigateur IE. La différence est que si vous effectuez un zoom, Safari se réduira à la plus petite police prise en charge par le navigateur, tandis qu'IE se réduira directement à la taille définie. Par exemple:

.zoomTest { taille de police : 12px ; zoom : 0.1 }

Safari ne réduira qu'à une taille de police de 9 px, tandis qu'IE se réduira à 1,2 px (ce qui n'est plus visible à l'œil nu).

Il se compose d'une série de sous-propriétés :

• -webkit-animation-name spécifie un nom pour l'animation
• -webkit-animation-duration durée de l'animation
• -webkit-animation-timing-function La méthode de commutation d'image d'animation, c'est-à-dire l'effet d'animation, inclut probablement la facilité, le linéaire, la facilité d'entrée, la facilité de sortie et la facilité d'entrée.
• -webkit-animation-delay définit l'heure de début de l'animation
• -webkit-animation-iteration-count temps de répétition de l'animation
• -webkit-animation-direction La direction de l'animation a deux attributs : lecture normale, avant, direction alternée, lecture avant avec un numéro pair, lecture inversée avec un numéro impair.

Effet masque/masque CSS

• -webkit-mask-attachment a deux valeurs : fixe et défilant ;
• -effet d'écrêtage webkit-mask-clip de la bordure de l'élément ;
• L'utilisation de -webkit-mask-position est similaire à l'attribut background-position.
• -webkit-mask-origin spécifie l'ancre de l'attribut -webkit-mask-position. Il existe trois attributs : border, content et padding.
• L'image de masque de l'élément -webkit-mask-image , la valeur est le chemin de l'image ;
• -paramètres répétitifs webkit-mask-repeat ,
• -styles mixtes webkit-mask-composite . La valeur par défaut est bordure, ce qui signifie que l'arrière-plan s'étend jusqu'à la zone de bordure. Il peut également être réglé sur padding.

Safari 4 ajoute ou améliore également la prise en charge de certaines autres propriétés CSS. Par exemple, background-position commence à prendre en charge les effets d'animation, qui ne seront pas décrits ici.

On voit que ces nouvelles propriétés CSS ajoutées à Safari ne font pas partie du standard W3C, mais ces propriétés privées de webkit peuvent bel et bien nous permettre de développer de meilleures applications réseau.

Rôle de WAI-ARIA

Vraisemblablement, peu de gens connaissent WAI-ARIA. WAI-ARIA signifie W3C Web Accessibility Initiative Accessible Rich Internet Applications, qui se traduit en chinois par « Accessible Rich Internet Applications ». Parallèlement, le W3C a développé le standard de rôle WAI-ARIA. Google a récemment annoncé qu'il soutiendrait fortement WAI-ARIA, et la fonction de lecture d'écran de son lecteur Google est implémentée via WAI-ARIA. Actuellement, Firefox a commencé à prendre en charge WAI-ARIA et IE8 le prend en charge partiellement. Safari 4 prend également en charge les rôles WAI-ARIA. Vérifiez la prise en charge de Safari 4 pour WAI-ARIA >>

Il convient de noter que WAI-ARIA semble ne prendre en charge que les balises div et span. Afin de coopérer avec WAI-ARIA, Safari ajoute également certains attributs de support HTML, tels que aria-checked/aria-level/aria-valuemax/aria. -valuemin, etc.

Télécharger Safari :

PS : Ce bouton de téléchargement provient de la page de téléchargement officielle de Safari. Les enfants attentifs constateront que le style de ce bouton n'est évidemment pas celui d'Apple, mais plutôt celui du bouton vert de la page de téléchargement de Firefox.

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