Some new features of Safari 4 browser

On wwdc 2009, Apple released the official version of safari 4 browser. The official version of safari 4 gave up the imitation of chrome tab and restored to the 3.0 version interface. It is said that on WWDC, Serlet seriously bsted Microsoft's ie8 browser and said that Safari's javascript engine is currently the fastest in the world. According to the test data it provides, Chrome 2's speed is 5.3 times that of ie8, while Safari4's speed is 7.8 times that of ie8!

Most of these data are official gimmicks, so let's not worry about it for now. Let's see what impact safari4 will have on our front-end development:

html 5

Support audio and video tags.

css

Safari4 has made many improvements to CSS support, as follows:

zoom

safari 4 starts to support zoom attributes. This is the usage and effect of IE browser. The difference is that if it is zooming, safari will shrink to the minimum 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 (it can't be seen clearly with the naked eye).

-webkit-animation

There is a series of sub-properties:

• -webkit-animation-name Specify a name for the animation
• -webkit-animation-duration animation duration
• -webkit-animation-timing-function Animation frame switching method, that is, animation effects, probably include ease, linear, ease-in, ease-out, and ease-in-out.
• -webkit-animation-delay Define animation start time
• -webkit-animation-iteration-count animation repetitions
• -webkit-animation-direction Animation direction has two properties: normal, forward play; alternate, alternate, even forward play, odd reverse play.

-webkit-mask

css mask/mask effect

• -webkit-mask-attachment Two values: fixed and scroll;
• -webkit-mask-clip The clipping effect of element borders;
• -webkit-mask-position The 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.
• -webkit-mask-image element mask image, value is the image path;
• -webkit-mask-repeat repetitive settings,
• -webkit-mask-composite Mix styles. The default is border, which means the background extends to the border area. It can also be set to padding.

Other improvements

Safari4 also adds or enhances the support of other css attributes. For example, background-position starts to support animation effects, so I will not repeat it here.

It can be seen that the new CSS attributes added by Safari are not the content in the W3C standard, but the private attributes of these webkits can indeed allow us to develop better network applications.

wai-aria character

I believe that not many people know about wai-aria. wai-aria means w3c web accessibility initiative rich internet applications, translated as barrier-free rich internet applications in Chinese. At the same time, w3c formulated wai-aria role standards. Google announced not long ago that it will strongly support wai-aria, and its Google reader's screen reading function is implemented through wai-aria. At present, firefox has begun to support wai-aria, and ie8 partially supports it. Safari 4 also began to support the wai-aria role. Check out the support of safari 4 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 page of safari download. If you are careful, you will find that the style of this button is obviously not the style of Apple, but more like the style of the green button on the firefox download page.