Firefox 3.6. Новые возможности, новые недостатки.
На днях, а точнее, 21 января 2010 года вышел новый Firefox 3.6. Я сразу же скачал его с официального сайта “мозилы” и обновил свою старую версию Firefox. По словам тестеров Firefox 3.6 стал работать с JavaScript в 3 раза быстрее по сравнению с предыдущей версией и в 4 раза быстрее по сравнению с Internet Explorer 8. Увеличилась и общая скорость работы нового браузера, были исправлены некоторые баги.
Обложки (Personas) для Firefox
Разработчики добавили еще одно новшество – обложки для Firefox.
Обложки (Personas) – это новый вариант облегченных тем, которые позволяющего пользователям менять внешний вид Firefox-а одним щелчком. Просмотреть доступные обложки вы можете по адресу:
Новые CSS атрибуты в Firefox 3.6
В Firefox 3.6 добавлена добавлена поддержка новых CSS атрибутов, таких как градиенты, масштабирование фоновых изображений и указатели событий, появилась возможность использовать несколько фоновых изображений.
Атрибут -moz-border-radius — позволит простым свойством CSS сделать закругленные углы в бордере. Это свойство CSS было доступно и в более ранних версиях Firefox, однако в нем имелись баги.
Пример применения -moz-border-radius (Работает только в Firefox!)
#primer_1 { border:solid 10px; -moz-border-radius: 0 50px 50px 0; }
#primer_2{ border: groove 1em red; -moz-border-radius: 2em; -webkit-border-radius: 2em; }
primer_3{ background: gold; -moz-border-radius: 40px 10px; }
Возможность использования нескольких фоновых изображений.
Несколько фоновых изображений можно вставить с помощью старого доброго свойства background-image. Чтобы сделать это, просто перечислите url-ки с фонами через запятую, как показано в примере:
#dva_fona { background-image:url(fon1.jpg), url(fon2.jpg); /*Указываем repeat для каждого через запятую*/ background-repeat: no-repeat, no-repeat; /*Указываем позицию для каждого через запятую*/ background-position: top left, bottom right; }
Масштабирование фоновых изображений. Новое CSS свойство -moz-background-size
С помощью нового CSS свойства -moz-background-size мы можем масштабировать фоновые изображения в зависимости от размера блока/окна. В следующем примере масштаб фона будет меняться при изменении размера окна:
body{ background-image:url(fon1.jpg); -moz-background-size: 100% 100%; }
Посмотреть рабочий пример с масштабированием фона.
(Работает только в Firefox 3.6)
Градиент средствами CSS свойства -moz-linear-gradient
С помощью свойств background-image: -moz-linear-gradient() и background-image: -moz-radial-gradient() можно реализовать линейные и радиальные градиенты. Сделаем радугу, используя одно из этих свойств:
body{ background-image: -moz-linear-gradient(top, red, orange, yellow, green, #07eff7, blue, indigo); background-repeat:no-repeat; }
Посмотреть рабочий пример с градиентом – Радуга.
(Работает только в Firefox 3.6)
Недостатки в Firefox 3.6
После установки я сразу же обнаружил один недостаток в новой версии Файрфокса.
Так как я – Вебмастер, мне частенько приходится проверять свойство ссылок (проверять на rel=”nofollow”, target=””). Кликнув правой кнопкой мыши на ссылку на своем сайт, в выпадающем меню я не обнаружил кнопку “Свойства”. Однако нашлось расширение для firefox, которое решает эту проблему:
расширение Element Properties: Возвращает кнопку “Свойства” в меню Firefox
При просмотре Информации о картинке открывается окно “Информация о странице”, где помимо параметров нужной картинки присутствует еще и список всех картинок на сайте. Не знаю можно ли считать это недостатком, но по-моему лучше бы эти два новшества не вводились.
Заключение
Кроме того в новый Firefox добавлена поддержка новых спецификаций DOM и HTML5, в том числе Drag & Drop API и File API, которые позволят создавать более интерактивные веб-страницы. Ну что ж, будем тестировать и ждать новых версий. А по поводу новых CSS свойств их вряд ли можно порекомендовать использовать. Ведь в других браузерах они работать не будут.