Подключение CSS-стилей
Таблицы стилей делятся на внешние и внутренние.
Внешние таблицы располагаются в отдельных файлах с расширением .css (например style.css)
1. CSS-файл может быть подключен на страницу при помощи тега
<link> , который должен находиться в секции
<head> HTML-страницы – это самый часто используемый способ подключения CSS:
2. Другой путь, это использование правила
@import . Чтобы это правило работало оно должно находиться в таблице стилей (внутренней или внешней), в самом начале, перед остальными правилами.
Обычно @import используется внутри CSS-файлов. Также эта директива используется для подключения шрифтов.
3. Внутренние таблицы стилей встраиваются в HTML-страницу, в секцию
<head> , и находятся они внутри тегов
<style>
4. И последний способ подключения CSS – это встроенные стили. Они пишутся непосредственно внутри HTML-тегов в атрибуте style. Такие стили, действуют только на тот тег, в котором написаны.
Прерывание хода выполнения скрипта
Вывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.
Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.
Работаем с точками прерывания
Для установки точки прерывания нужно перейти на закладку ‘Scripts’ и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации — появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:
Когда выполнение прервется, можно поместить курсор мыши над любой переменной и отладчик выведет подсказку со значением в текущий момент.
Затем можно продолжить выполнение кода с помощью специальных кнопок, которые располагаются вверху боковой панели:
“Continue”: продолжает выполнение кода до следующей точки прерывания.
“Step Over”: выполняет следующую строку кода. Если код вызывает другую функцию, то отладчик не будет «погружаться» в ее код.
“Step Into”: похоже на «Step over», за исключение того, что при вызове функции, отладчик переходит к первой строке внутри кода функции.
«Step Out»: если вы вошли в код функции с помощью кнопки «Step Into», то нажатие кнопки «Step out» вызовет выполнение кода функции до конца и переход к родительской функции.
На боковой панели можно отслеживать изменение состояния кода, включая динамику локальных и глобальных переменных.
Условные точки прерывания
В процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.
В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.
Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.
Установка точки прерывания в коде
Не всегда удобно устанавливать точки прерывания с помощью интерфейса инструмента разработчика в браузере. Иногда проще запустить отладчик из кода специальной командой. В примере, приведённом ниже, показано, как вы можете прервать выполнение кода при соблюдении определенных условий:
if (total_photos_diff > 300) {
debugger; // запускаем отладчик и прерываем выполнение кода
}
5: Решение проблем в разделе Opportunities
В разделе Opportunities перечислены советы по оптимизации, которые могут улучшить производительность.
Обычно при загрузке веб-страницы подключаются к другим источникам для получения или отправки данных. Для повышения производительности (в этом случае) лучше всего позволить браузеру установить соединение с такими источниками на более раннем этапе рендеринга, тем самым сократив время ожидания для разрешения DNS-запросов и перенаправлений, пока клиент не получит ответ.
Чтобы исправить это, вы можете позволить браузеру использовать такие ресурсы, добавив атрибут rel к тегам ссылок:
Если вы используете защищенные соединения, это может занять некоторое время. Если соединение не будет обработано в течение 10 секунд, браузер автоматически закроет соединение, и вся работа по предварительному подключению будет напрасной.
Critical
Critical — это еще один инструмент для оптимизации CSS.
Среди правил и рекомендаций PageSpeed Insights вы найдете этот совет:
Для лучшей производительности вы можете рассмотреть возможность вставки важного CSS непосредственно в HTML-документ. Идея состоит в том, чтобы найти критически важные правила CSS и размещать эти правила в разделе вашего HTML-документа
Что касается того, что вы можете считать критическим CSS — любые правила, используемые для стиля базового макета и типографии, а также вышеприведенный контент вашего сайта
Идея состоит в том, чтобы найти критически важные правила CSS и размещать эти правила в разделе вашего HTML-документа. Что касается того, что вы можете считать критическим CSS — любые правила, используемые для стиля базового макета и типографии, а также вышеприведенный контент вашего сайта.
Разобраться в этом вам поможет Critical.
P.S.: для читателей из Иваново не маловажным будет знать о ребятах из АйтиАдмин. Если у вас возникли проблемы с компьютером или периферией, то вам сюда http://ivanovo.compov.su/.
Источник статьи/урока: https://xozblog.ru
Системы сборки
Самыми распространенными из них являются Grunt и webpack. У всех имеется обширная документация и крупные сообщества разработчиков.
Системы сборки автоматизируют задачи объединения и оптимизации. Большинство инструментов сборки также включают в себя плагины для оптимизации JavaScript и изображений.
Придерживайтесь правильного подхода к формированию собственного набора инструментов для работы с CSS. Добавляйте в него средства, которые повысят эффективность и качество кода.
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!
Наталья Кайдаавтор-переводчик статьи «CSS Debugging and Optimization: Code-quality Tools»
Микро-оптимизация
Микро-оптимизация направлена на уменьшение размера файла и увеличение скорости загрузки страницы.
Сортирование свойств в алфавитном порядке
Сортировка CSS свойств в алфавитном порядке — это отличный способ сохранять ваш код чистым и избежать лишних проблем. Почему? Потому что нужный фрагмент можно будет быстро найти и исправить.
Пример 1
.login {
margin-top: 5px;
line-height: 1.5em;
padding-left: 5px;
float: right;
list-style-type: none;
width: 80px;
font-weight: bold;
border-left: 1px solid #69824d;
}
Пример 2
.login {
border-left: 1px solid #69824d;
float: right;
font-weight: bold;
line-height: 1.5em;
list-style-type: none;
margin-top: 5px;
padding-left: 5px;
width: 80px;
}
Увеличение эффективности кода
Длинные селекторы заставляют браузер лишний раз проходиться по DOM-у и искать совпадения. Более конкретизированные названия селекторов позволяют избежать данную проблему.
Перед оптимизацией
div#wrapper div#maincontent div#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
После оптимизации
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
Пишите просто и кратко
Чем меньше написано кода, тем эффективнее работает страница. Для определения стилей следуйте следующим правилам.
- Используйте короткие названия CSS свойств везде, где это возможно;
- Пишите сокращённые значения свойств;
- Избегайте дублирования CSS свойств.
До
#sidebar {
background-color: #fff;
background-image: (bg.png);
background-position: 0 0;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #ffff00;
font-family: Georgia, serif;
font-size: 1.33em;
line-height: 1.33em;
font-weight: normal;
margin: 10px 20px 10px 20px;
padding: .1em;
}
После
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
Сокращайте код
Главное, что вам нужно сделать на финальной стадии работы над стилями, — это убрать все дубликаты строк и различного рода отступы. Для рабочей версии стиля можно также убрать всевозможные комментарии. Также можно воспользоваться инструментами сжатия CSS стилей: CSS Compressor, CSS Drive.
Понять, почему не работают скрипты
Если вы написали код на JavaScript и что-то пошло не так, ищите ошибки с помощью вкладок Console и Sources. Во вкладке Console отображаются сообщения об ошибках с указанием файла и строки, на которых находится баг. Если нажать на этот файл, документ сразу же откроется на нужной строке.
Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js
Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.
Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.
Как использовать точки останова
Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.
Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.
JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.
Для чего они нужны, пойдем по порядку:
Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.
Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.
Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.
Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.
Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.
Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.
Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.
Макро-оптимизация
Прежде чем приступить к оптимизации таблиц стилей, нам нужно написать хорошо читабельный HTML и CSS код.
Формирование информации и определение структуры таблицы стилей
Если речь касается разбора таблиц стилей, то я первым делом пишу её содержание. Такая информация, как знание о существующих группах селекторов, их расположении в файле, может быть очень полезна.
В первую очередь, я рекомендую вставлять какую-то информацию о пользователе (имя, …), время последней правки файла. Данный приём может сыграть свою роль, если в будущем возникнут какие-то вопросы, связанные с этими данными.
Также я рекомендую писать содержание файла, чтоб вы и другие разработчики в случае необходимости смогли быстро сориентироваться.
/* Содержание - Стили ссылок - Стили для разных размеров экранов - Действия - Основной макет - Лого - Верхняя навигация - Боковая навигация - Поднавигация */ … (а у каждой отдельной секции…) /* =Верхняя навигация */
Знак “=” в последнем выражении используется исключительно для упрощения поиска отдельно взятой секции.
Аннотации и отображение вложенность
Аннотации и отображение вложенности элементов помогают разработчику отследить начало и конец какого-то блока. Таким образом, отдельные кусочки кода будут быстро находиться.
Аннотации формируются с помощью следующих выражений: или просто .
Отображение вложенности элементов может показаться шагом излишним, но он позволяет значительно упростить читабельность кода, сделать элементы визуально понятными, быстро найти проблемные места, включая места с пропущенными закрывающимися тегами, и так далее.
Разницу между хорошо и плохо структурированным кодом, вы можете увидеть в следующих примерах.
До
<body> <div id="pagewrap"> <div id="header"> <h1>Website Title</h1> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div id="contentwrap"> <div id="maincontent"> <h2>Main Content Title</h2> <p>Main content, which is so much more important than the secondary content that it makes one teary with emotion.</p> </div> <div id="secondarycontent"> <h3>Sidebar Title</h3> <p>Sidebar content, which is not as important as the primary content (which is why it is in the sidebar)</p> </div> <div id="footer"> <p>standard copyright and footer information</p> </div> </body>
После
<body>
<div id="pagewrap">
<div id="header">
<h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul><!-- end #header -->
<div>
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Title</h2>
<p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.</p>
</div><!-- end #maincontent -->
<div id="secondarycontent">
<h3>Sidebar Title</h3>
<p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)</p>
</div><!-- end #secondarycontent -->
</div><!-- end #contentwrap -->
<div id="footer">
<p>standard copyright and footer
information</p>
</div><!-- end #footer -->
</div><!-- end #pagewrap -->
</body>
Редактируем исходные файлы напрямую
Можно редактировать исходные файлы непосредственно в Chrome Devtools и динамически сохранять изменения. Изменения могут быть применены немедленно без обновления браузера.
- Открыть вкладку с открытым исходным кодом в Chrome Devtools
- Открыть файл, который вы хотите редактировать динамически
- Щелкните правой кнопкой мыши, как на скриншоте выше:
- В Windows вы можете щелкнуть по всей папке (синий слева), нажав правую кнопку мыши > Add folder to workspace
- Используя MacOS, вы также можете просто перетащить всю папку, и, скорее всего, Chrome будет автоматически отображать файлы
- Выберите Add folder to workspace
- Теперь любые изменения, внесенные вами в вашем браузере, также отражаются в ваших локальных файлах
Решение проблем специфичности
Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнётесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях — это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.
В нашем примере два слова обёрнуты в элемент . Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:
Кроме того в таблице стилей есть правило с селектором :
Как вы помните из урока каскад и наследование где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.
Проведите инспекцию с классом и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента.
Инструменты управления пакетами и зависимостями
Bower — разработка Twitter, которая помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Она предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.
Npm — диспетчер пакетов Node.js. Пакеты могут использоваться как для фронтенда, так и для бэкенда. Npm является системой управления пакетами для JavaScript и самым большим реестром программного обеспечения в мире.
Yarn — инструмент, который приобрёл популярность благодаря Google, Facebook, Tilde и Exponent
Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.
Duo вобрал в себя лучшее из Browserify, Component и Go, превратив разработку фронтенда в быстрый и простой процесс
Основная идея Duo заключается в упрощении написания модульных компонентов и создания масштабных веб-приложений быстро и безболезненно.
Список лучших инструментов для разработки на JavaScript может продолжаться до бесконечности. В этой статье вы увидели лишь популярные и надёжные инструменты, которые служат основой для качественных продуктов.
Перевод статьи «The ultimate list of JavaScript tools»
Пошаговое выполнение скрипта
А теперь давайте пошагаем по нашему коду.
В правой части панели для этого есть несколько кнопок. Рассмотрим их.
– продолжить выполнение. Быстрая клавиша – F8.
Возобновляет выполнение кода. Если больше нет точек останова, отладчик прекращает работу и позволяет приложению работать дальше.
Вот, что мы увидим, кликнув на неё:
Выполнение кода возобновилось, дошло до другой точки останова внутри , и отладчик снова приостановил выполнение
Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Мы теперь внутри функции .
– сделать шаг (выполнить следующую команду), не заходя в функцию
Быстрая клавиша – F10.
Если мы нажмём на неё – будет вызван
Важно: на месте может быть любая другая функция, выполнение просто перешагнёт через неё, полностью игнорируя её содержимое.
– сделать шаг. Быстрая клавиша – F11.
В отличие от предыдущего примера, здесь мы «заходим» во вложенные функции и шаг за шагом проходим по скрипту.
– продолжить выполнение до завершения текущей функции
Быстрая клавиша – Shift+F11.
Выполнение кода остановится на самой последней строчке текущей функции. Этот метод применяется, когда мы случайно нажали и зашли в функцию, но нам она неинтересна и мы как можно скорее хотим из неё выбраться.
– активировать/деактивировать все точки останова.
Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.
– разрешить/запретить остановку выполнения в случае возникновения ошибки.
Если опция включена и инструменты разработчика открыты, любая ошибка в скрипте приостанавливает выполнение кода, что позволяет его проанализировать. Поэтому если скрипт завершается с ошибкой, открываем отладчик, включаем эту опцию, перезагружаем страницу и локализуем проблему.
Continue to here
Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).
Этот метод используется, когда нам нужно продвинуться на несколько шагов вперёд до нужной строки, но лень выставлять точки останова.
Критические и некритические CSS
При обработке CSS по умолчанию блокируется рендеринг — визуализация страницы. Пока браузер не загрузит и не проанализирует таблицу стилей, он не будет загружать другие ресурсы. Если файлы CSS большие или есть проблемы с сетью, показатель LCP может ухудшиться, потому что затянется загрузка наибольшего видимого объекта.
Как оптимизировать CSS
Производительность можно повысить, если разделить CSS на критически важные для загрузки первого экрана и остальные, которые можно отложить.
Верхняя строка отображает загрузку страницы с CSS, блокирующим рендеринг. Нижняя — загрузка той же страницы со встроенным критическим CSS:
Сравнение загрузки страницы
Как работать с CSS страницы
-
Критические CSS вынести в headCSS, нужные для загрузки верхней части первого экрана, нужно как можно быстрее отобразить пользователям. Встройте их в head, чтобы для получения этих стилей не требовался дополнительный запрос.
Встроенный критический CSS
-
Некритические CSS загрузить асинхронноОстальную часть CSS, которая не требуется для начального рендеринга страницы, можно загрузить асинхронно с помощью loadCSS или отложить в footer.
-
Неиспользуемые CSSНенужные CSS удалить или переместить в другую таблицу стилей, если для других страниц сайта они все-таки нужны. Лучше не делать это вручную, можно удалить что-то нужное.
В статье про оптимизацию LCP мы разобрали, как автоматизировать этот способ оптимизации стилей. Смотрите раздел «Блокировка рендеринга JavaScript и CSS»
У способа есть и недостатки: браузер не будет кэшировать встроенный в head CSS, так что каждый раз он будет загружаться заново. Проверьте, возможно, у вас нет проблем с рендерингом, так что и разделять CSS вам не нужно.
Еще можно минифицировать CSS, то есть сократить, тем самым уменьшив размер файла. После минификации в файле не будет лишних пробелов и ненужных символов. Бесплатные инструменты для этого собрали в статье об ускорении загрузки.
Вычисленные стили
Разработчики часто недооценивают такую функцию отладчика, как панель вычисленных стилей. Если вычисленные стили для вас новинка, то их название само себя поясняет — это стили, которые применяются к элементу после вычисления в браузере
Это важно, потому что фактически действующие стили могут отличаться от тех, что написали вы. Более того, среди действующих стилей могут быть те, которых вы вовсе не писали
Сейчас я поясню это на примере. Возьмём такую разметку.
<fieldset class="outer">
<div class="inner">
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
<label for="" class="item"><span>hello</span></label>
</div>
</fieldset>
И CSS:
.outer {
max-width: 400px;
}
.inner {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.item {
display: inline-block;
width: 100px;
}
Какая ширина у по вашему? Если считаете, что 400px, как указано в , то я бы вас понял. Но это не так. Взгляните на это:?
See the Pen When Computed Styles is useful by Ben Frain (@benfrain) on CodePen.
Что происходит? Почему не учитывается? Дам подсказку. Откройте отладчик и взгляните на панель «Вычисленные стили» («Computed Styles»).
Найдёте виновного?
Избавлю вас от неопределенности; по умолчания у fieldset есть вычисленная ширина, которая подстраивается под его содержимое. В Chrome это отображается в «Computed Styles» в качестве нового значения длины в .
Чтобы это исправить, можно добавить новое значение в свойство . С наше свойство заработает, как надо.
Вот насколько полезной может оказаться панель «Computed Styles» в отладчике. Помните, что всё то, что вы написали, не обязательно должно вычисляться в браузере.
Данные выводим в консоль
При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.
Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:
console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли
Метод можно использовать для вывода вычисленных значений:
function calcPhotos() {
total_photos_diff = total_photos - prev_total_photos;
// Выводим значения переменных в консоль
console.log(total_photos_diff);
}
Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.
var t = 3,
p = 1;
function calcPhotos(total_photos, prev_total_photos) {
var total_photos_diff = total_photos - prev_total_photos;
// Выводим значения в консоль
console.log(total_photos_diff);
// Обновляем значения
t = t*1.3;
p = p*1.1;
}
setInterval(function() {
calcPhotos(t,p);
},100);
Заключение
Причины для визуальных аномалий в вебе многочисленны и разнообразны. Реализации спецификаций отличаются, так что у каждого браузера хватает своих капризов. Помимо накопления мысленного каталога «подводных камней», методичность — самый эффективный подход к решению проблемы.. В общем, этот подход оказался для меня крайне эффективным:
Оценить баг и применить любое очевидное быстрое решение;
Локализовать проблему до важного кода, необходимого для воспроизведения;
Докопайтесь до причины, анализируя код отладчиком и просматривая известные баги данного браузера;
Исправить проблему с помощью более гибкого кода, или применить хак, снабдив его хорошим комментарием, или добавить в код ветку с исправлением бага для нужного браузера при необходимости.
