7 июня Apple выпустила обновление для своего веб-браузера Safari 5 . Он включает в себя множество новых функций для веб-разработчиков, в том числе более быстрый движок JavaScript, лучшую поддержку HTML5, поддержку расширений и большое обновление Web Inspector. Мы рассмотрим, что означают эти новые функции для веб-разработчиков.
1. Улучшенный веб-инспектор
Хороший веб-инспектор чрезвычайно важен для большинства веб-разработчиков. Многие люди все еще предпочитают Firebug , который является расширением для Firefox, но инспектор Webkit значительно улучшился за последние несколько лет.
Инспектор CSS
В Safari 5 веб-инспектор имеет улучшенную панель инспектора CSS , которая позволяет переходить непосредственно к определению правила в исходном файле.
DOM Inspector
Инспектор DOM значительно улучшен, теперь он позволяет добавлять атрибуты к узлам DOM в документе, удалять узлы и редактировать узлы как HTML, что позволяет редактировать весь тег, как если бы это был исходный файл.
Панель ресурсов
Также улучшена панель « Ресурсы» , позволяющая видеть все перенаправления HTTP, а также полную информацию заголовка, включая код состояния HTTP.
Инспектор JavaScript
Инспектор JavaScript теперь позволяет отключать все точки останова одним щелчком мыши, и если вы наводите курсор мыши на элемент, находясь в точке останова, вы можете видеть фактические значения объектов того, над чем вы наводите курсор. Это будет чрезвычайно полезно для отладки!
Панель шкалы времени
Safari 5 теперь имеет новую панель временной шкалы , которая предоставляет информацию обо всем, что браузер делает во время просмотра. Это включает в себя загрузку данных, их анализ, размещение на экране и рендеринг. Очень круто для работы над производительностью вашего сайта или приложения.
Панель ревизий
Другой добавленной панелью является панель Audits , которая, подобно популярным расширениям YSlow и Google Page Speed для Firebug, предлагает способы повышения производительности и совместимости вашего сайта.
Приставка
Последнее изменение в веб-инспекторе заключается в том, что была создана отдельная панель для консоли JavaScript . Это хорошо, потому что позволяет консоли занимать всю высоту веб-инспектора, а не небольшую часть, к которой он привык. Однако он по-прежнему доступен в старом месте для удобного доступа при просмотре другой панели. Дополнительную информацию об обновлениях для Web Inspector можно найти в этом посте в блоге Webkit .
2. Лучшая поддержка HTML5
Apple рассказывает о семнадцати новых функциях HTML5 в Safari 5, и вы, возможно, слышали об их демонстрации HTML5, которую они запустили на прошлой неделе (на самом деле она содержит больше CSS3, чем что-либо еще, но, похоже, это тоже связано с HTML5!). Похоже, что Apple действительно продвигает HTML5, а Safari 5 теперь набирает 136 баллов на html5test.com, что выше 113 в предыдущем выпуске. Некоторые из новых функций HTML5, содержащихся в Safari 5, включают в себя:
- поддержка полноэкранного видео с субтитрами
- геолокации
- HTML5 AJAX History
- перетащить
- почти все типы ввода HTML5
- официальная поддержка новых элементов HTML5, таких как <article>, <header> и <footer>.
Проверьте полный список ниже.
Особенности для веб-приложений в реальном времени
Safari 5 включает две новые функции HTML5 для веб-приложений реального времени, таких как Friendfeed и Twitter. WebSocket — первый, а EventSource — второй. Теперь, когда три основных браузера, Firefox, Chrome и Safari внедрили спецификацию WebSocket , написание веб-приложений в реальном времени с использованием чего-то вроде Node.js для бэкэнда становится гораздо более осуществимым.
По сути, WebSocket — это двусторонний канал связи между вашим веб-приложением в браузере и сервером.
Поскольку это два способа, вы можете написать что-то вроде клиента Twitter, используя его, и автоматически получать новые сообщения Twitter, когда они выталкиваются с сервера, а также отправлять новые твиты по мере их написания. EventSource — это механизм односторонней связи, который позволяет серверу отправлять события клиенту, но не наоборот. Если вы хотите узнать больше о EventSource, ознакомьтесь с этим руководством .
3. Расширение поддержки
Поскольку он написан с использованием этих технологий, кто-то сможет написать кросс-платформенную библиотеку разработки расширений, которая работает в Firefox (Jetpack), Chrome и Safari 5.
В Safari теперь есть поддержка расширений, и благодаря новому инструменту под названием Extension Builder в уже полезном меню «Разработка» вы можете написать свой собственный. Расширения написаны с использованием стандартных веб-технологий, включая HTML, CSS и JavaScript и API расширений, предоставляемый Apple. Поскольку он написан с использованием этих технологий, кто-то сможет написать кросс-платформенную библиотеку разработки расширений, которая работает в Firefox (Jetpack), Chrome и Safari 5. Все они используют веб-технологии для создания расширений для своих браузеров. В целях безопасности все расширения для Safari 5 должны быть криптографически подписаны Apple через их Центр разработки Safari .
Позже этим летом Apple откроет галерею расширений Safari, которая позволит пользователям легко найти расширения для установки. Panic уже демонстрирует свое расширение под названием Code Notes , которое, когда оно выйдет, позволит вам добавлять аннотации к веб-страницам путем рисования и написания текстовых заметок непосредственно на сайте. Расширение позволит вам поделиться своими аннотациями по электронной почте. Прекрасный пример того, на что способен API расширений Safari 5.
4. Более быстрый JavaScript Engine
Это не было бы полным обновлением браузера, если бы Apple не рекламировала их на 30% быстрее JavaScript Engine. В тесте производительности SunSpider JavaScript Safari оценивается аналогично Google Chrome и все еще намного опережает последнюю версию Firefox. Хотя производительность JavaScript важна, реальные узкие места производительности веб-приложений заключаются не в производительности исходного языка JavaScript, а в API DOM, который, как известно, медленен во всех браузерах. Я надеюсь, что в будущем больше внимания будет уделено производительности DOM.
5. Safari Reader
Хотя я и не специализируюсь на веб-разработках, я уверен, что вы читали много статей, подобных этой, в Интернете. Safari Reader — это, по сути, способ убрать все пути с вашего пути, пока вы читаете только статью. Как и букмарклет Readability, Safari Reader автоматически распознает страницы со статьей и представляет кнопку на панели инструментов, которая извлекает текст и изображения только из раздела статьи на странице и отображает их в удобном для чтения шрифте. Также очень приятно, что вы можете с легкостью отправлять по электронной почте и распечатывать только статьи, когда смотрите на страницу Reader. Я уверен, что я буду использовать это много!
Хотя Safari 5 и не является основным выпуском с точки зрения пользовательских функций, он очень хорош для разработчиков. Благодаря гораздо лучшей поддержке HTML5, повышенной производительности JavaScript и лучшему веб-инспектору Safari стал моим браузером для разработчиков. А что насчет тебя?