Легковесные инструменты для веб-дизайна в Mozilla. Mozilla Firefox. Проблемы адаптивной вёрстки (баг, который чуть не рассорил компанию)

Mozilla Firefox 14 является официально «старым» браузером, тем кому нравится работать как веб-разработчик, просматривать новости, или просто общаться в интернете, поприветствуйте Firefox 15 для компьютера.

Что нового в Firefox 15

Firefox 15 доступен для Windows, Mac и Linux компьютеров.

14-я версия не плохая. Улучшения были постоянно, но этот релиз чувствовал себя более стабильным и продуманным, чем раньше. Bar, Flash все работало хорошо. Может ли Mozilla развивать этот успех? Новую версию браузера Firefox 15 можно скачивать и устанавливать без проблем, после установки ваши закладки и данные не пропадут.

Ooo — новые интересные возможности! Хотя существует несколько онлайн и закладки реагирования инструменты веб-дизайна, Mozilla является первым поставщиком который это добавил прямо в браузере (Меню> Веб-разработка> Адаптивный дизайн):

Целый ряд типичных резолюции может быть выбран или вы можете перетащить (трудно понять) управления размером в нижней правой части окна. Это простой, но эффективный. Вам никогда не придется изменять размер всего окна браузера снова. Можно сказать что этим инструментом Firefox 15 становится браузером для веб-разработчиков.

Инспектор Layout View

Вид окна макет быть добавлен на страницу Инспектор (Меню> Веб-разработка> Инспектор, затем нажмите синюю полосу в правом нижнем углу):

Рисунок отображает ширину и высоту окна, отступы, границы и поля. Это функция, доступная в Firebug и ряд других дополнений, но это полезно после установки Firefox 15.

JavaScript Debugger

Firefox, наконец, имеет свой собственный отладчик JavaScript! (Меню> Веб-разработка> Отладчик):

Чтобы быть справедливым к Mozilla, их отладчик был доступен в течение более десяти лет, но развитие остановили несколько лет назад. Опять же, наличие отладки доступен в Firebug, но родной альтернативные, вероятно, будет быстрее работать — особенно если вы только с вопросами сценариев.
К сожалению, отладчик не работает до сих пор. Это прекрасно, если вы примените точки останова для функции таймера и обработчиков событий, но оно исчезает и вытирает настройки, как только вы обновите страницу.
Будем пересмотреть функции в Firefox 16 — тем более будут реализованы, удаленные мобильные отладки.

Тихое обновление

Firefox 15 может быть последнее обновление, которое нужно скачивать что бы запустить обновление программы. Начиная с этого момента, все обновления будут происходить в фоновом режиме.
Это хорошая новость: пользователи Firefox будут переходить на последнюю версию быстро и безболезненно. Системные администраторы могут быть менее рады, новая версия может нарушить критически важных приложений — хотя автоматических обновлений можно отключить .
Это обновление немного более эффективное, чем обновление Google, которая может обновляться на медленных машинах в течение 10 минут или больше.
Основные преимущества браузера Mozilla Firefox это Новейшие веб-технологии

HTML5 и JavaScript в Firefox 14

Mozilla запускает новое средство просмотра файлов в формате PDF, использующее JavaScript, HTML5 без каких-либо дополнений средствами исключительно движка Firefox 14 — Mozilla pdf.js. Нововведение позволит развивать и ускорять внутреннее средство просмотра PDF вместе с обновлением движка JS, увеличить производительность, стабильность и безопасность браузера. Mozilla pdf.js может быть и в качестве дополнения, однако целиком использует веб-технологии, то есть может исполняться лишь как веб-приложение, имеет открытый код, так что при желании может быть встроен в сайты, а уже с выходом финальной версии браузера Firefox 14 технология pdf.js станет его неотъемлемой частью.

Создателям и разработчикам веб-сайтов понравятся новые возможности Firefox. Если вас интересует создание контента и приложений с использованием передовых технологий, то Firefox будет для вас лучшим выбором среди браузеров. Чтобы узнать больше, посмотрите таблицу сравнения поддержки передовых технологий.

Обновление форм

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

Видео в формате WebM и HD

Будучи одним из первых, кто поддержал видео в стандарте HTML5, Firefox теперь поддерживает новый формат WebM, позволяющий вам смотреть видео в HD-качестве.

Парсер

Firefox включает в себя парсер готовый к работе с HTML5. Этот парсер имеет несколько новых возможностей, в первую очередь вложенный , а также повышает производительность, запуская алгоритм парсинга в своём собственном процессоре.

IndexedDB

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

Графика следующего поколения

Чтобы в это поверить, это нужно увидеть. Благодаря нашему обновлённому графическому движку отображение текста и графики, в том числе и , стало быстрее и точнее, чем когда бы то ни было. Firefox автоматически корректирует цветовую гамму изображений (например ваши цифровые фотографии), чтобы цвета отображались именно так, как нужно.

Улучшенное файловое API

Добавив поддержку метода.click() в диалог загрузки файлов, метода.slice и url-адресов для файлового API, Firefox предоставил разработчикам возможность лучше настроить управление загрузкой файлов на сервер.

Стилизация страниц с помощью CSS3

Поддержка новых функций CSS3, таких как border-radius, box-shadow и других переходов и трансформаций позволяет легко добавить элегантную анимацию на веб-страницы.

Аудио API

Firefox изменяет способ интеграции мультимедиа с Интернетом. С помощью HTML5 разработчики могут легко использовать JavaScript для чтения и записи аудио данных. Мы предоставляем доступ к необработанным аудиоданным, что даст вам возможность создания отличных звуковых эффектов!

Поддержка мультисенсора

В Firefox теперь встроена поддержка мультисенсорной технологии Windows 7, предоставляющей вам абсолютно новый способ взаимодействия с вашим браузером.

Веб-консоль

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

Не смотря на всё Mozilla Firefox - это популярный современный браузер, новая версия которого вышла в январе 2010 года. Новая версия концептуально отличается от предыдущей версии, имеет новый эффективный движок, в результате увеличилась скорость загрузки сайтов, улучшилось качество показа, достигается лучшая совместимость стандартов, изменен интерфейс. Возможность скачать «Мозила» бесплатно - это шанс узнать совершенно новый уровень браузера. Теперь доступна «Мазила» на русском.

«Мозила Фаерфокс»

«Мозила Файерфокс» начинает свою историю с браузера Netscape Navigator. В процессе «войн браузеров» проект Netscape преобразовался в браузер «Мозила Файерфокс». Традиционно было можно «Мозила Фаерфокс» скачать бесплатно. С момента создания «Файерфокс» имеет свою «визитную карточку» - это простота освоения. Простой интерфейс - главный козырь браузера. Стоит вспомнить, что Netscape Navigator имел интерфейс, близкий к интерфейсу . Последний имеет лучшие позиции на рынке за счет брендовых пакетных продуктов Майкрософт. Свободно распространяемый Mozilla Firefox, скачать бесплатно который можно на сайте разработчика, в панелях ведущих поисковиков Рунета, является лидером среди браузеров, учитывая, что он не имеет такой мощной поддержки, как Internet Explorer.

Браузер «Мазила Фаерфокс»

Обширные возможности «Мазила Фаерфокс» дополняются хорошим уровнем безопасности, который контролирует также элементы ActiveX и управляет личными данными. Можно скачать Mozilla бесплатно и пользоваться умным поиском, расположенным вблизи строки поиска, а также интеллектуальной строкой ввода интернет-адреса. Можно скачать «Мазила» бесплатно и воспользоваться быстрым механизмом загрузки приложений и файлов, которые можно докачивать после прерывания соединения, а также многие удобные элементы управления и опции.

И еще о преимуществах «Мазила Фаерфокс» относятся:

• специальная панель поиска, интегрированная в поисковую базу одного из поисковиков. При установке плагинов можно расширить количество поисковиков в странице загрузки;
• возможность скачать Mozilla Firefox бесплатно предоставляет шанс пользования развитым интерфейсом, включая закладки, вкладки, безопасную навигацию;
• браузер Mozilla Firefox спроектирован таким образом, чтобы максимально соблюсти вопросы конфиденциальности, а также защитить от вредоносного софта, программ-шпионов, заблокировать всплывающие окна;
• браузер «Мозила» гарантирует качественное масштабирование веб-страниц;
• возможность скачать браузер «Мазила» предполагает расширяемые решения за счет плагинов;
• браузер поддерживает экспорт новостей RSS.

Сообщество Mozilla обнародовало предварительный план развития браузера Firefox в текущем году. Прежде всего в Mozilla планируют ускорить график выпуска новых стабильных версий веб-обозревателя, сообщает ресурс «Компьюлента».

Количество изменений и улучшений в таких релизах будет меньше, но выходить они будут чаще. Такой подход, как ожидается, позволит решить проблему задержек, как в случае с Firefox 4, анонс которого должен был состояться ещё в ноябре, но затем был перенесён на первую четверть 2011-го.

Среди ключевых задач, которые планируется решить в текущем году, Mozilla выделяет обеспечение гарантированного отклика браузера на действия пользователя в пределах 50 мс, реализацию поддержки современных операционных систем, оптимизацию пользовательского интерфейса и разработку единой платформы для выполнения приложений различных типов. Кроме того, Mozilla намерена обеспечить сохранность пользовательских данных при любых сбоях браузера.

Помимо Firefox 4, в нынешнем году Mozilla рассчитывает выпустить пятую, шестую и седьмую версии обозревателя.

В Firefox 5, как ожидается, появятся менеджер аккаунтов, анимация интерфейса, поддержка 64-битных систем и пр. В Firefox 6 усилия программистов будут направлены на оптимизацию работы кеша и движка JavaScript.

Как и было обещано еще до начала выпуска Firefox 4.0, финальная сборка браузера Firefox 5, возможно, увидит свет 21 июня 2011 года. Это косвенно подтверждает обнародованный экспертами компании Mozilla график, в соответствии с которым разработка данного браузера будет включать в себя четыре ключевых этапа, четко регламентирующих и разграничивающих по времени все стадии отладки кода интернет-обозревателя. Опубликованный план представлен в черновом варианте, поэтому не исключено появление в неsм каких-либо корректировок.

Итак, в соответствии с ним уже к концу 2011 года мы должны заполучить Firefox 5, 6 и 7 версии. Каждый новый релиз Firefox должен будет пройти через три основные стадии до релиза — mozilla-central (как, Canary channel для Chrome), mozilla-aurora (Dev канал) и mozilla-beta, каждый из которых продлится около шести недель.

Первым и (пока) единственным исключением из этого правила является Firefox 5, он будет существовать в стадии mozilla-central только в течение трех, а в стадии aurora и beta в течение 5-ти недель. Firefox 5 в настоящее время находится в режиме central, nightly-сборка уже доступна для разработчиков и энтузиастов, и вскоре он должен будет вступить в фазу aurora (с 12 апреля). Если все пойдет по плану, то мы сможем получить Firefox Beta 5 уже 17 мая, а финальный релиз на 21 июня.

Firefox 5 получит усовершенствованный пользовательский интерфейс с функцией множественного выделения вкладок, интегрированную утилиту для просмотра документов формата PDF и улучшенную систему управления учетными записями. Также планируется включение в состав браузера инструментария, обеспечивающего интеграцию программы с социальными сетями.

От автора: без сомнений за последние пять лет Google Chrome стал доминирующей силой в браузерных войнах для десктопных и (очевидно) мобильных пользователей. Разработчики же более технически подкованы и больше заботятся о безопасности, поэтому предпочитают Firefox. Все дистрибутивы ОС с уклоном в безопасность содержат в себе Firefox, а не браузер на Chromium, хотя последний также имеет открытый исходный код и полностью бесплатный.

К нашему счастью, соблюдение веб-стандартов означает, что браузеры, которые используют разработчики, по большей части совместимы с браузерами, которыми пользуется большая часть обычных пользователей. И это очень важно, так как все, что разработано для Firefox в 99% случаев будет работать в Chrome. IE больше не приоритет для большинства разработчиков. Он устарел и используется для загрузки других браузеров. Edge сейчас тоже никто в серьез не воспринимает.

Firefox любят не только из-за безопасности и конфиденциальности. Firefox, всегда был, по большей части, проектом, продвигаемым сообществом пользователей (хотя на примере Wikipedia «сообщество» стало слишком высокомерным). Сердцем модели разработки сообщества является повышение качества пользовательского опыта. Говоря по-другому, проекты, движимые сообществом, зачастую ставят нужды пользователей на первое место. Корпоративные же проекты ставят в приоритет корпоративные нужды. Для разработчиков это значит, что в сети можно найти множество бесплатных инструментов для упрощения своей работы. По большей части эти инструменты намного легче, чем большинство платных вариантов.

THIMBLE

Thimble изначально предназначен для изучения HTML. В нем есть полноценный HTML и CSS редактор, что делает его крайне полезным инструментом для нахождения быстрых решений и копирования конечного HTML для загрузки файла на сервер. Он работает лучше редактора кода в CPanel, потому что не делает ничего лишнего и не распознает каждый апостроф в тексте, как разделитель строки.

JavaScript. Быстрый старт

Интерфейс делится на две панели. Стандартно панель с кодом расположена слева, панель предварительного просмотра – справа. Доступно три режима просмотра:

мобильный вид;

полноэкранный вид.

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

В отличие от других онлайн редакторов здесь легче подключить внешние файлы. Можно даже создавать целые деревья папок для хранения. Все это делает Thimble моим любимым инструментом для быстрого создания страниц или обновлений на сайте во время путешествий.

Недостаток очевиден – инструмент требует подключения к сети (если вы, конечно, не смогли клонировать платформу Thimble на локальный сервер). Второй недостаток – на нем нельзя публиковать свои коммерческие проекты, так как платформа не рассчитана для профессионалов.

Вместо этого можно копировать HTML код и вставлять его в редактор кода в CPanel или в текстовый файл, после чего сохранять на своем сервере. Дерево файлов полностью сохранится.

Как и с большинством проектов Mozilla, документация Thimble довольно скудная, особенно в плане того, что можно и что нельзя. Разработчики думают, что вы прочитаете правила использования, что можно назвать довольно сомнительным предположением, даже если всякий веб-менеджер, использующий онлайн решения для разработки, должен это делать.

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

X-RAY GOGGLES

Дети всегда хотели заполучить рентгеновские очки, но увы такие технологии (по крайней мере, реально работающие) слишком дороги для обычных детей. X-Ray Goggles от Mozilla не покажут вам, что носит школьная медсестра под верхней одеждой, или что у шотландского садовника под его килтом, но с помощью этого инструмента можно увидеть, как работает веб-страница, а также отредактировать код, чтобы он работал по-другому. Это намного круче, чем всякие извращения, правда?

Первичное назначение инструмента с профессиональной точки зрения – песочное моделирование для тестирования изменений в существующих дизайнах без необходимости вносить моментальные изменения. Все очень просто, для установки достаточно перетащить кнопку X-Ray Goggles на панель закладок. Для активации нажмите кнопку, для выхода нажмите ESC.

WEBMAKER

Не самый полезный инструмент для большинства разработчиков, так как он спроектирован только для Android. Webmaker не предлагает почти ничего, что нельзя найти в социальных сетях. Mozilla отказались от довольно полезного онлайн видеоредактора (Popcorn) и заменили его этим инструментом. Webmaker подходит для новичков, так как он использует подход mobile-first в дизайне, который стал обязательным для современных сайтов.

Тем не менее, экспертов смутят те ограничения, которые связаны с разработкой только под мобильную инфраструктуру. Этот инструмент в основном нацелен на привлечение подростков к бренду Mozilla, а также призван помочь учителям выглядеть круто (учит их разговаривать на языке мобильной веб-разработки).

Другая проблема, которая может смутить, связана с тем, что это еще одно приложение, занимающее пространство и ресурсы на устройстве. У Android есть привычка быстро забивать память, а большинство пользователей не закрывают приложения после выхода, потому что Google не удосужились сделать интерфейс закрытия чего-либо интуитивным и простым. Как следствие, большинство смартфонов на Android начинают тормозить спустя пару месяцев, а люди просто меняют их или постоянно жалуются на отсутствие свободного пространства.

EDITOR

Editor – это дедушка панели разработки в Mozilla и изначально назывался Composer. Предположительно название сменили, чтобы не путать с KompoZer, потомком Composer. До KompoZer был Nvu, и вы не захотите пользоваться ни тем, ни другим, так как они оба не поддерживают HTML5. Можно попробовать BlueGriffon, сводного брата KompoZer. Он поддерживает HTML5. Однако вы получите только CSS редактор, если заплатите за плагин. Все эти инструменты до сих пор можно использовать за исключением, может быть, Nvu. Editor/Composer до сих пор есть в браузере Mozilla SeaMonkey.

SCRATCHPAD

Инструмент для написания и тестирования кода JS. Консоль позволяет за раз выполнять только одну строку скрипта, что сильно ограничивает возможности. В то же время в scratchpad можно вводить сколько угодно строк. Активируется в любой вкладке Firefox нажатием Shift + F4.

Откроется окно редактора текста с простым интерфейсом. Можно открыть существующие скрипты, редактировать их и сохранять. Также можно создавать новые скрипты. В редактор встроено автозаполнение вводимых команд. Также есть документация по синтаксису команд. Можно запускать скрипт целиком или его части с помощью выделения.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

RESPONSIVE DESIGN MODE

Эта функция встроена прямо в Firefox (она так же есть в Chromium и Google Chrome). С ее помощью можно проверять макеты страниц под разными разрешениями на одном экране. Инструмент неидеальный (для всех браузеров), но подойдет для большинства сценариев, чтобы проверить одинаковое отображение сайта. Режим адаптивности в Firefox активируется простым нажатием Ctrl + Shift + M. Вернуться в обычный режим можно повторным нажатием.

Изменять макет можно с помощью ряда кнопок, расположенных над макетом. Первая кнопка слева похожа на «закрыть окно», с ее помощью можно выйти из адаптивного режима. Далее идет выпадающий список, где можно выбрать шаблоны разрешений, задать новое или (не рекомендуется) удалить существующий шаблон разрешения из списка. Справа от выпадающего списка расположена кнопка переключения между портретным и альбомным режимом. Далее идет кнопка симуляции событий касания экрана. Последняя кнопка делает скриншот.

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

WEB DEVELOPER TOOLS EXTENSION

По умолчанию этого инструмента в Mozilla нет, это расширение для Firefox Криса Педерика. В расширении запакован огромный ассортимент инструментов, подходящих под все ваши нужды. С его помощью можно:

включать и выключать что-либо;

контролировать куки;

изменять CSS страницы;

изменять поля форм на странице;

снимать маски с полей типа password;

вытягивать подробную информацию о изображениях;

исследовать DOM элементы;

подчеркивать элементы;

изменять размер экрана;

просматривать макеты в адаптивном режиме лучше, чем во встроенных методах;

и много чего еще.

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

FIREFOX DEVELOPER TOOLS

Большая часть функционала Firebug теперь доступна напрямую во встроенной панели разработчика, в которой также есть консоль. Панель похожа и работает по принципу панели в Chromium и Google Chrome. Интерфейс неинтуитивный, и пока вы освоите и поймете все функции, вы наделаете кучу ошибок.

Неопытные пользователи могут не заметить одну из функций – командную строку JS внизу консоли, она никак не помечена. Она работает лучше версий в Chromium/Chrome, но их реализация, добавляющая мигающий курсор прямо в консоль, намного очевиднее.

MEASUREIT EXTENSION

Проще установить прекрасный Screen Ruler от Ian McIntosh, но у расширения Measureit от Kevin Freitas есть преимущество. Он умеет одновременно измерять ширину и высоту, и он более точный. Полезный инструмент для измерения чего-либо в окне браузера. В некоторых версиях Firefox инструмент не работает, это может быть из-за конфликта с другими расширениями. Попробуйте отключить расширения перед установкой.

COLORZILLA EXTENSION И EYEDROPPER

Оба или один из инструментов должны быть у каждого дизайнера, потому что с их помощью можно быстро найти цвет по любому пикселю в браузере. Также можно использовать GColor — Gnome инструмент, который делает то же самое, но в нем есть возможность получить образец цвета из любого окна, не только из браузера. Преимущество ColorZilla и Eyedropper перед GColor в том, что они показывают увеличенный вид пикселя, от которого получен цвет.

Активируется инструмент кликом по иконке eyedropper, после чего курсор меняется на шаблон в виде крестика (ColorZilla) или большую лупу (Eyedropper). Наведите курсор на окно и найдите пиксель, цвет которого хотите получить. Кликните левой кнопкой мыши для копирования цвета в буфер обмена (в формате hex), после чего расширение автоматически закроется.

Это лишь помощники, они не сделают все за вас

Вы остаетесь разработчиком, вам все еще нужно выполнять свои обязанности. Эти инструменты, если использовать их правильно, упрощают задачи. Они могут помочь разными способами, а для большинства людей некоторые из них вообще бесполезны, несмотря на самые искренние намерения со стороны Mozilla. В сети есть и другие инструменты, лучше описанных в этой статье, однако обычно лучше использовать эти. Иногда полезно знать, что есть бесплатный инструмент от Mozilla, который можно использовать, если возникнет необходимость.

Сегодня 13 февраля 17-ого. История началась 3 дня назад. Собственно проблема появилась следующая. Есть каруселька (это тип слайдера), верстальщику компании «R&K» пришёл запрос, о том что каруселька не адаптивная, т.е. не сжимается как положено, при сжатии окна браузера по ширине. Баг выявлен в Firefox v50.1.0 32-bit, Win7 32-bit. При этом, на следующий день, появился странный телефонный звонок от заказчика, с сообщением о том, что всё работает, и благодарность за быстрое реагирование. Т.к. вёрстку вообще никто не смотрел, то люди почесали в недоумении репы и разошлись. Через два дня снова позвонил заказчик, и уже яростно/истошно/дико/люто начал орать, что вёрстка снова не адаптивная, и не ужимается в окно браузера при сжатии браузера. Вот тут-то люди призадумались и начали крутить вёрстку.

index.html

style.css * {margin: 0; padding: 0; font-size: 0; } /* сброс стилей */ div { margin: 20px auto; /* центрирование для тестов */ border: 1px solid royalblue; /* видимость блока для тестов */ /*display: inline-block; оригинальное значение div, для теста не нужно */ max-width: 450px; /* 300, 400, 450, 600, ширину перебирайте сами */ white-space: nowrap; /* что бы изображения были в линию */ /*overflow: hidden; оригинальное значение overflow, для теста не нужно */ } input { /*display: none; оригинальное значение display, для теста не нужно */ } img { width: 100%; /* адаптивное сжатие изображения */ }
Само собой все лишнее выпилено для тестов. Что бы ясно был виден смысл проблемы. Итак, обнаруженная проблема «адаптивной верстки» следующая:

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

Сжимаем окно, естественно «адаптивная вёрстка» жмёт и изображение, получаем вот это.

Всё в порядке? А не тут то было… Идём пить чаёк, курим, приходим обратно, открываем яндекс, читаем новости (почту, Хабр, рутуб и т.д.), открываем поглядеть нашу верстку, и изумлённо получаем вот это.

Теперь поймите правильно людей. Люди - это люди. Всё учесть невозможно. В мире багнутого ПО учесть всё - тем более невозможно. Сложилась следующая ситуация. Клиент открыл страничку в одной вкладке, сжал браузер, и получил то, что хотел. На следующий день он открыл страничку со второй вкладкой, и верстку расколбасило. При этом, верстальщик ровно так же не замечая вкладок - открывал по-разному и получал разные результаты. На количество вкладок никто не обратил внимания. Дошло до того, что начали приподымать чистую вёнду, смотреть там, начали рыть багрепорты на форумах мозиллы, начали искать странное поведение селекторов width/max-width и предпринимать ну очень фееричные и странные действия, про которые стыдно писать, но на количество вкладок снова и опять никто не обратил внимания. Более того, часа три никто не смог воссоздать баг, потому что открывали тестовую страничку на чистом браузере без вкладок. Были просто поражены тем, что баг исчез сам собой, но конечно же, стоило открыть страничку со вкладками, причем с определенными - баг выполз. Сутки люди имели наилютейший баттхерт, которого я в жизни не видел, сдобренный истошными воплями клиента. Разумеется, у людей начали немножко сдавать нервы, и дело чуть не дошло до откровенного мордобоя. Далее повесть рассказывать смысла нет, но догадаться во что выливаются подобные ситуации можно самостоятельно.

Пожалуйста, в мире багнутого ПО будьте внимательней и терпеливей. Это относится ко всем без исключения. Как к исполнителям, так и к руководителям. С заказчиков брать кроме денег, конечно же нечего, и им простительно.

P.S.: К верстальщикам не имею никакого отношения. Верстал 10 лет назад, слава богу быстро слез с этого непотребного дела. Получил себе эту проблему по телефонному звонку от знакомого, который всю голову изломал, решая оную задачку. Баг успешно воссоздан, верстка выше - моя. Верстка тестовая, никак не продакшн, ни в одном глазу. Специально позвонил еще одному знакомому верстальщику, слышит про этот баг впервые.

С 15-ой версии Firefox на веб-разработчиков посыпались подарки. Добавлены новые инструменты отладки, улучшены существующие, появились новые функции. Начиная с 16-ой версии Firefox стал поддерживать практически все элелемнты CCS3 без префиксов
А теперь о каждом подарке отдельно и подробно

Адаптивный дизайн

Адаптивный дизайн - функция, с помощью которой возможно просматривать сайт с любого разрешения. Можно выбрать или из предустановленных основных стандартных разрешений, а можно настраивать самостоятельно.
Функцию можно вызвать сочетанием клавиш Ctrl+Shift+M Или из меню - Инструменты - Веб-разработка - Адаптивный дизайн

Как видите вкладка веб-разработки немного расширилась за счет добавленных функций. Но вернемся к адаптивному дизайну.
Подключить функцию просмотра сайта в различных расширениях можно на любой странице в отдельной вкладке, при этом остальные открытые вкладки не изменятся. Запущенная функция не мешает просмотру сайта, то есть можно переходить по ссылкам внутри сайта или по внешним ссылкам, и вкладка с адаптивным дизайном будет отображать любые страницы вплоть до отключения

Помимо предустановленных расширений, вы можете самостоятельно изменять расширения по своему усмотрению. С помощью двух ползунков справа можно увеличивать и уменьшать размеры.

Наверное не нужно отдельно говорить, насколько ценна внедренная функция для веб-разработчиков, ввиду того, что расплодилось различных устройств с различными расширениями. И каждому веб-разработчику или владельцу сайта важно знать как выглядит сайт с различных расширений. Особенно начинающим будет полезно

Отладчик JavaScript

Наряду с простым редактором JavaScript, с помощью которого было довольно удобно тестить, править и исследовать некоторые сценарии, появился более совершенный отладчик
Пользователи далекие от разработки скриптов могут с помощью этого встроенного инструмента исследовать сценарии на любой странице и получать список и содержимое скриптов

Поддержка без префиксов элементов CSS3

Начиная с 16-ой версии, Firefox полностью поддерживает (без префиксов) такие элементы как Градиенты, Трансформация, Анимация и Переходы
Firefox - первый браузер, который стал поддерживать новые технологии. Для остальных браузеров приходится лепить или префиксы или альтернативное отображение

Наглядно поддержку можно увидеть в хлебных крошках данного сайта (менюшка навигации над материалом). На примере страницы
CSS3 и HTML5 Новейшие технологии Градиенты в хлебных крошках нарисованы без префиксов. Пользователи 16+ версии FF будут видеть правильное отображение

Пользователи остальных браузеров будут видеть простое отображение

Наряду с этим добавлена поддержка тегов audio и video. Улучшена панель разработки, с 16-ой версии Mozilla Firefox появился вызов основных функций с помощью кнопок быстрого доступа, а так же командная строка для работы с клавиатуры

Естественно в этом обзоре представлены не все нововведения, но отображены все, которые по моему мнению могут быть полезными всем пользователям и самые понравившиеся конечно

Внимание! Частичное или полное копирование статьи без активной ссылки на источник категорически запрещено