Четверг, 21.09.2017, 13:36
Мой сайт
Приветствую Вас Гость =) | RSS
Меню сайта
Категории раздела
Новости блога [10]
Конкурсы [2]
Мини-чат
Наш опрос
Оцените мой сайт
Всего ответов: 142
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Файлы » Forum4Ik.at.ua » Новости блога

Выбор лучшего браузера для web-разработки
19.07.2014, 07:45

сравнение современных браузеров

Предлагаю взглянуть на Internet браузеры глазами web-разработчика. Время от времени, сам занимаюсь разработкой сайтов и допиливанием чужих проектов, так что предмет статьи мне знаком не по наслышке.

Практически все современные Internet браузеры на данный момент оснащены штатными средствами для отладки и детального изучения кода web страниц. Такие инструменты существенно облегчают жизнь web-мастерам, потому сегодня хочу рассказать чем пользуюсь сам при разработке web-сайтов. Честно говоря не ожидал, что IE8 тоже наделен подобным функционалом (решил это проверить только когда взялся за статью).

Данный материал будет особенно полезен начинающим web-дизайнерам, ведь самый правильный способ освоить HTML, CSS, научиться создавать собственные шаблоны для сайтов - это изучение на конкретных примерах уже существующих, качественных ресурсов. Да и просто иногда интересно узнать как реализован тот или иной элемент дизайна на чужом сайте.

Претендентов пятеро - Google Chrome, Opera, Mozilla Firefox, Safari и IE8. Как видите, представлены все популярные браузеры на данный момент и с поставленной задачей они справляются, так что сравнение носит скорее эстетический характер. Хотя присутствуют и некоторые отличительные особенности, о которых вы узнаете ниже.

IE8

Начну с детища Microsoft чтобы поскорее от него избавиться. Итак, идем в менюСервис - Средства разработчика либо нажимаем F12

ie8 с панелью веб-инспектора

По умолчанию панель инспектора не закреплена в нижней части экрана, как на скриншоте, а открывается в отдельном окне (на мой взгляд не удобно). Весь дизайн какой-то угловатый и крайне скучный, смотришь и тоску навевает. Тормоза, кривая работа с CSS3 в IE8, общая унылость интерфейса... ну в общем вы поняли моё отношение к этому браузеру.

Из плюсов, все элементы меню по русски (при условии что установлена русская версия Windows), можно прямо на страничке расставить все размеры у изображений, можно выбрать режим обозревателя IE7 или IE8, что возможно пригодится при разработке.

Mozilla Firefox 10.0.2

Firefox, пожалуй, единственный браузер, с минимальным функционалом для web-разработчика что называется "из коробки". Т.е. штатные средства хоть и присутствуют, но очень ограниченные. Конечно и они позволяют провести исследование HTML и CSS кода сайта, проинспектировать элементы, поэкспериментировать с параметрами (например изменить значения отступов у элементов, размеры, стили шрифтов и т.д.) Хотя всё это могут делать и конкуренты.

Mozilla с панелью веб-инспектора

На скриншоте представлена панель веб-инспектора и таблицы CSS стилей. Изначально они не активированы и находятся в свернутом виде. Для активации соответственно в нижней панели надо нажать кнопки HTML и Стиль.

Выбрать интересующий элемент на web-странице можно предварительно нажав кнопку Исследовать.

управление панелью веб-инспектора в Mozilla Firefox

Сила Firefox всё-таки в сторонних плагинах. Только тут можно нарастить небывалую функциональность. Однако для себя я этот браузер тоже забраковал - уж слишком он прожорлив до ресурсов компа, особенно до оперативной памяти.

Safari 5.1.3 и Google Chrome

Оба браузера основаны на движке WebKit, потому я объединил их в одну общую категорию для сравнения. Действительно, с точки зрения web-разработчика, исследователя чужого кода или просто интересующегося экспериментатора, эти браузеры похожи как братья близнецы.

Safari с панелью веб-инспектора

Safari будет интересен в первую очередь маководам, т.к. на Windows он пока не прижился, да и вряд-ли в ближайшее время приживется.

На маке предпочитаю использовать именно его, ведь только этот браузер предлагает такие "вкусности", которыми не может похвастать ни один другой (например увеличение конкретной области страницы двойным тапом, синхронизация закладок с i-девайсами и т.д.). Причем Safari вполне адекватный и современный браузер с поддержкой новейших стандартов, идущий вместе с системой Mac OS X, и это его основное отличие от IE на Windows.

По умолчанию, средства web-разработки в браузере не отображаются, но их можно легко включить:

включение меню Разработка в Safari

В результате появляется дополнительный пункт Разработка с довольно обширными функциями, а также пункт Проверить объект в контекстном меню (клик правой кнопкой мыши на страничке), для отображения панели веб-инспектора.

Как и у предыдущих участников обзора, для быстрого доступа к свойствам конкретного элемента web-страницы необходимо задействовать специальный режим в панели веб-инспектора:

выбор объекта для просмотра в Safari

Google Chrome наверное самый быстрый и красивый браузер на Win платформе (на Mac я не замечаю разницы с Safari). Писать о нем отдельно, с точки зрения web-дизайнера, смысла особенного нет, чтобы не повторять описание Safari. Следующий скриншот тому подтверждение:

Google Chrome с панелью веб-инспектора

Opera 11.61

Ну вот и добрались до фаворита, оставил его на сладкое. Именно в Opera наиболее приятно реализованы инструменты по исследованию устройства web-страничек.

Opera с панелью веб-инспектора

Dragonfly - так в Opera называется панель для web-разработки. В отличие от конкурентов, для навигации по элементам странички тут не нужно переходить в специальный режим. Всё работает и выглядит просто превосходно. Кроме того имеется дополнительная функция для определения цвета любых элементов, что не редко пригождается в работе. У конкурентов это возможно установкой дополнений к браузеру.

панель инструментов веб-инспектора Opera

Да... хотелось изложить предельно кратко, надеюсь это получилось. Вообще тема довольно интересная, но лучше один раз попробовать самому и составить собственное мнение, чем сто раз прочитать.

Так что дерзайте - изучайте чужое, создавайте своё и не скупитесь делиться своими наработками. 

Категория: Новости блога | Добавил: cowboyhagizz
Просмотров: 364 | Загрузок: 0 | Рейтинг: 0.0/0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
Логин:
Пароль:
Корзина
Ваша корзина пуста
Поиск
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • База знаний uCoz
  • Copyright MyCorp © 2017