новые функции сафари 4

На WWDC 2009 компания Apple представила официальную версию браузера Safari 4. Официальная версия Safari 4 отказалась от метода вкладок, подобного Chrome, и вернулась к интерфейсу версии 3.0. Говорят, что на WWDC Серлет серьезно раскритиковал браузер Microsoft IE8, заявив, что движок JavaScript Safari в настоящее время является самым быстрым в мире. Согласно предоставленным им тестовым данным, Chrome 2 в 5,3 раза быстрее, чем IE8, а скорость Safari4 равна. В 7,8 раз больше, чем у IE8!

Большинство этих данных являются официальными уловками, поэтому давайте пока проигнорируем их и посмотрим, какое влияние Safari 4 окажет на нашу фронтенд-разработку:

Поддерживает аудио и видео теги.

Safari4 имеет множество улучшений в поддержке CSS, а именно:

Safari 4 начинает поддерживать атрибут масштабирования. Использование и эффект такие же, как и в браузере IE. Разница в том, что при увеличении Safari сжимается до самого маленького шрифта, поддерживаемого браузером, а IE сжимается непосредственно до установленного размера. например:

.zoomTest { размер шрифта : 12 пикселей , масштабирование : 0,1 };

Safari уменьшится только до размера шрифта 9 пикселей, а IE уменьшится до 1,2 пикселя (который больше не будет виден невооруженным глазом).

Он состоит из ряда подсвойств:

• -webkit-animation-name указывает имя анимации.
• -webkit-animation-duration продолжительность анимации
• -webkit-animation-timing-function Метод переключения кадров анимации, то есть эффект анимации, вероятно, включает в себя легкость, линейность, легкость входа, легкость выхода, легкость выхода.
• -webkit-animation-delay определяет время начала анимации
• -webkit-animation-iteration-count количество повторений анимации
• -webkit-animation-direction направление анимации имеет два атрибута: нормальное, альтернативное воспроизведение вперед, чередующееся направление, прямое воспроизведение с четным номером, обратное воспроизведение с нечетным номером.

CSS-маска/эффект маски

• -webkit-mask-attachment имеет два значения: фиксированное и прокрутка;
• -webkit-mask-clip эффект обрезки границы элемента;
• Использование -webkit-mask-position аналогично атрибуту background-position.
• -webkit-mask-origin указывает привязку атрибута -webkit-mask-position. Существует три атрибута: граница, содержимое и отступ.
• Изображение маски элемента -webkit-mask-image , значением является путь к изображению;
• -webkit-mask-repeat повторяющиеся настройки,
• -webkit-mask-composite смешанные стили. По умолчанию используется граница, что означает, что фон распространяется на область границы. Его также можно установить на отступ.

Safari 4 также добавляет или расширяет поддержку некоторых других свойств CSS. Например, background-position начинает поддерживать эффекты анимации, которые здесь не будут описаны.

Видно, что эти новые свойства CSS, добавленные в Safari, не являются частью стандарта W3C, но эти частные свойства webkit действительно могут позволить нам разрабатывать более качественные сетевые приложения.

Роль WAI-ARIA

Вероятно, немногие знают о WAI-ARIA. WAI-ARIA расшифровывается как W3C Web Accessibility Initiative Accessible Rich Internet Applications, что переводится на китайский язык как «Доступные богатые интернет-приложения». В то же время W3C разработал ролевой стандарт WAI-ARIA. Недавно компания Google объявила, что будет активно поддерживать WAI-ARIA, а функция чтения с экрана Google Reader реализована через WAI-ARIA. В настоящее время Firefox начал поддерживать WAI-ARIA, а IE8 поддерживает его частично. Safari 4 также поддерживает роли WAI-ARIA. Проверьте поддержку WAI-ARIA в Safari 4 >>

Стоит отметить, что WAI-ARIA, похоже, поддерживает только теги div и span. Для взаимодействия с WAI-ARIA Safari также добавляет некоторые вспомогательные атрибуты HTML, такие как aria-checked/aria-level/aria-valuemax/aria. -значениемин и т. д.

Скачать сафари :

PS: Эта кнопка загрузки находится на официальной странице загрузки Safari. Внимательные дети обнаружат, что стиль этой кнопки явно не в стиле Apple, а больше похож на зеленую кнопку на странице загрузки Firefox.

Исходный текст: http://www.qianduan.net/safari-4-new-features.html.