safari 4 new features

At WWDC 2009, Apple released the official version of Safari 4 browser. The official version of Safari 4 gave up the Chrome-like tab method and returned to the interface of version 3.0. It is said that at WWDC, Serlet seriously BSed Microsoft's IE8 browser, saying that Safari's JavaScript engine is currently the fastest in the world. According to the test data he provided, Chrome 2 is 5.3 times faster than IE8, and The speed of Safari4 is 7.8 times that of IE8!

Most of these data are official gimmicks, so let’s ignore them for now and see what impact Safari 4 will have on our front-end development:

Supports Audio and video tags.

Safari4 has many improvements in its support for CSS, as follows:

Safari 4 begins to support the zoom attribute. The usage and effect of this are the same as those of IE browser. The difference is that if it is zoomed, Safari will shrink to the smallest font supported by the browser, while IE will shrink directly to the set size. for example:

.zoomTest { font-size : 12px ; zoom : 0.1 }

Safari will only shrink to 9px font size, while IE will shrink to 1.2px (which is no longer visible to the naked eye).

It consists of a series of sub-properties:

• -webkit-animation-name specifies a name for the animation
• -webkit-animation-duration animation duration
• -webkit-animation-timing-function Animation frame switching method, that is, animation effect, probably includes ease, linear, ease-in, ease-out, ease-in-out.
• -webkit-animation-delay defines animation start time
• -webkit-animation-iteration-count animation repetition times
• -webkit-animation-direction animation direction has two attributes: normal, forward playback; alternate, alternating direction, even-numbered forward playback, odd-numbered reverse playback.

CSS mask/mask effect

• -webkit-mask-attachment has two values: fixed and scroll;
• -webkit-mask-clip clipping effect of element border;
• -webkit-mask-position usage is similar to the background-position attribute.
• -webkit-mask-origin specifies the anchor of the -webkit-mask-position attribute. There are three attributes: border, content, and padding.
• The mask image of the -webkit-mask-image element, the value is the image path;
• -webkit-mask-repeat repetitive settings,
• -webkit-mask-composite mixed styles. The default is border, which means the background extends to the border area. It can also be set to padding.

Safari 4 also adds or enhances support for some other CSS properties. For example, background-position begins to support animation effects, which will not be described here.

It can be seen that these new CSS properties added to Safari are not part of the W3C standard, but these private properties of webkit can indeed allow us to develop better network applications.

WAI-ARIA role

Presumably not many people know about WAI-ARIA. WAI-ARIA stands for W3C Web Accessibility Initiative Accessible Rich Internet Applications, which is translated into Chinese as "Accessible Rich Internet Applications". At the same time, W3C developed the WAI-ARIA role standard. Google recently announced that it will strongly support WAI-ARIA, and its Google reader's screen reading function is implemented through WAI-ARIA. Currently, Firefox has begun to support WAI-ARIA, and IE8 partially supports it. Safari 4 also supports WAI-ARIA roles. Check Safari 4’s support for WAI-ARIA >>

It is worth noting that WAI-ARIA seems to only support div and span tags. In order to cooperate with WAI-ARIA, Safari also adds some supporting attributes of HTML, such as aria-checked/aria-level/aria-valuemax/aria-valuemin, etc.

Download safari :

PS: This download button comes from the official Safari download page. Careful children will find that the style of this button is obviously not Apple’s style, but more like the green button on the Firefox download page.

Original text: http://www.qianduan.net/safari-4-new-features.html