Safari浏览器对CSS3的支持

By | 2012年6月13日

Safari浏览器对CSS3的支持

Safari continues to implement the most innovative web technologies to push the boundaries of what’s possible on the web. With Safari support for CSS animation, CSS effects, and CSS web fonts, you can create the next generation of rich, interactive web applications.

CSS Animation

Safari was the first browser to support CSS transitions and animations. Using these technologies, you can animate programmatic changes to style properties that would otherwise be instantaneous. Most CSS properties can be animated — you can add rich animations for changes to basic properties such as height, width, opacity, and visibility, and advanced properties such as z-index and word-spacing.

View CSS animations in action

CSS Effects

Using the latest CSS effects available in Safari, developers can style any element on a web page with eye-catching gradients, precise masks, and stunning reflections, providing an extra layer of polish to their websites by adding just a few lines of code.

CSS3 Text Effects

Safari also includes support for CSS3 text effects like auto-hyphenation, vertical text and text emphasis, making websites more customizable and easy to read.

View CSS web fonts in action

CSS Web Fonts

With CSS web fonts, you can use standards-based technology to display fonts outside of the set of standard web-safe fonts. Safari automatically recognizes web pages that use CSS web fonts to display a custom font, and downloads the appropriate font files as needed. By using CSS web fonts instead of images to display a custom font, you can create stunning text effects quickly and easily. Web pages that use web fonts instead of text images will download faster, and can be interpreted by screen readers without any additional coding effort.

CSS Filters

With Safari support for CSS filters, you can use CSS to create advanced filter and pixel effects such as blurs and gradients. CSS filters also let you vary brightness, adjust hues, invert colors or convert elements to sepia or grayscale. You can animate changes to a filter or combine multiple filters, all while tapping into hardware acceleration for fast, smooth rendering.

发表评论