Как подключить нормалайз css

Как подключить нормалайз css

Подскажите как правильно в рамках бэм это сделать?

Возможно нужно как то переопределить блок page?

Имеется ввиду чтобы этот css скомпилировался в runtime css, а не подключался из link в head , вообщем это касается любого другого css файла

Комментарии: 16

Т.е. создается блок i-normalize, туда кладётся css из normalize.css и указывается в .b-page.deps.js.

А в каком месте в блоке b-page ты вставляеешь блок i-normalize ? где то в head?

Я не вставляю его отдельно в head, он собирается внутри common.css. А сам common.css уже подключается в head, да. За позицию кода в common.css отвечает порядок подключения блоков в b-page.deps.js, т.е. чем раньше укажешь зависимость i-normalize, тем выше по коду в CSS он будет.

Хотя я уже сомневаюсь что правильно понял вопрос.

Покажи пример bemjson в котором указано, что нужно подключить normalize.css

Смотри, в bemjson ты указываешь блок page. У блока page в зависимостях в page.deps.js указываешь блок i-normalize. В i-normalize ты указываешь в i-normalize.bemhtml что твой блок i-normalize должен цепляться к блоку page как элемент css:

block i-normalize, default: return apply(
this._mode = »,
this.ctx = block: ‘page’,
elem: ‘css’
>
);
>

И в итоге в итоговом css для бандла у тебя есть css-код из блока i-normalize.

Спасибо, вроде понял, попробую. С applyCtx получилось бы изящнее

Кстати, было бы логичнее как то универсально подключать css файл в runtime-ый css, пока не знаю как, хотя возможно это не совсем правильно в рамках бэм

Верю, но я пока что тоже учусь использовать bemhtml и данный кусок бездумно скопировал, посмотрел что работает и забыл Рефакторинг будет после выпуска первой вёрстки, сейчас главное чтобы работало.

А можно объяснить что есть «runtime css»? Моё решение не претендует на единственно верное, оно скорее первое заработавшее и основано на коде как минимум годичной давности.

Здесь шаблон вообще не нужен, просто укажите блок в зависимостях для b-page.

P.s. Вам не должно хотеться использовать нормализацию или сброс стилей, все необходимое для стилизации должно быть независимо в каждом блоке, а оптимизацией пусть занимаются роботы(csso в данном случае).

По поводу p.s согласен, normalize не вписывается в бэм, подумаю над этим на досуге. Просто привык, что он в каждом проекте подключался

runtime css имеется ввиду общий файл в который склеиваются все css блоков

все верно написал: для того, чтобы подключить какой-либо css-файл в сборку, его не нужно указывать в bemjson и никаких шаблонов ему тоже не нужно, достаточно добавить его в deps.js для какого-то блока, который точно окажется на странице (b-page — отличный вариант).

ну и в принципе всякие ресеты-нормалайзы — это не тру, хотя на вкус и цвет.

О normalize.css

Это перевод статьи Николаса Галахера — «About normalize.css».

Это перевод статьи Николаса Галахера — «About normalize.css»

Normalize.css — это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это современная, готовая к HTML5 альтернатива традиционному reset.css.

• Normalize.css — сайт проекта
• Normalize.css — исходный код на GitHub

В настоящее время normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других фреймворках, инструментах и сайтах.

Обзор

Normalize.css является альтернативой CSS Reset. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер, @necolas и Джонатан Нил, @jon_neal.

• сохранять полезные настройки браузера, а не стирать их;
• нормализовать стили для широкого круга HTML-элементов;
• корректировать ошибки и основные несоответствия браузера;
• совершенствовать юзабилити незаметными улучшениями;
• объяснять код, используя комментарии и детальную документацию.

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

Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны.

Нормализовать или сбрасывать?

Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.

Normalize.css сохраняет полезные настройки по умолчанию

Reset.css накладывает однородный визуальный стиль, выравнивая стили по умолчанию почти для всех элементов. В отличие от этого, normalize.css сохраняет многие полезные стили браузеров по умолчанию. Это значит, что не требуется повторно объявлять стили для всех стандартных элементов типографики.

Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.

Normalize.css исправляет популярные ошибки

Он исправляет основные баги на мобильных и десктопных устройствах, которые не затрагивает reset.css. Это включает в себя параметры отображения элементов HTML5, исправление font-size для предварительно отформатированного текста, отображение SVG в IE9, и многие другие баги, связанные с отображаемым в разных браузерах и операционных системах.

Например, вот как normalize.css делает HTML5-элемент формы с типом search кроссбраузерным и стилизованным.

/** * 1. Переопределяет свойство `appearance`, заменяет `searchfield` в Safari и Chrome. * 2. Переопределяет свойство `box-sizing`, заменяет `border-box` в Safari и Chrome. */ input[type="search"] < -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ >/** * Убирает внутренний отступ и кнопку очистки строки поиска в Safari и Chrome в OS X */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration

Reset.css часто не приводит браузеры к тому уровню, где отправной точкой считается то, как элемент отрисовывается. Это особенно верно в отношении форм — именно здесь normalize.css может существенно помочь.

Normalize.css не мешает вашим инструментам отладки

Обычно при использовании reset.css раздражает огромная цепочка наследования свойств, которая отображается в инструментах разработчика.

Такая проблема не возникает с normalize.css из-за целенаправленных стилей и умеренного использования множественных селекторов в наборе правил.

Normalize.css модульный

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

Normalize.css имеет подробную документацию

Код normalize.css основан на детальном кроссбраузерном методичном тестировании. Подробно документированный файл вы можете найти на GitHub. Это значит, что вы можете узнать, что делает каждая строка кода, зачем она добавлена, какие различия существуют между браузерами. Также вы легко можете провести собственные тесты.

Цель проекта — показать людям, как по умолчанию браузеры отображают элементы, и помочь им упростить процесс внедрения улучшений.

Как использовать normalize.css

Сперва установите или скачайте normalize.css с GitHub. Есть два способа как можно его использовать.

Первый способ: используйте normalize.css как отправную точку CSS для вашего собственного проекта, изменяя значения согласно требованиям дизайна.

Второй способ: используйте normalize.css нетронутым и, основываясь на нём, переопределяйте стили в своём CSS при необходимости.

Заключение

Normalize.css значительно отличается от reset.css. Стоит попробовать его, чтобы увидеть, соответствует ли он вашему подходу и предпочтениям в разработке.

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

Вся информация о стилях по умолчанию

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Нормализация CSS при помощи Normalize.css

Normalize.css представляет собой настраиваемый CSS файл, при помощи которого браузеры начинают отображать все элементы более последовательно и в соответствии с современными стандартами. Были проведены исследования для выявления различий между стилями браузеров по умолчанию для того, чтобы нормализовать только те стили, которые отличаются друг от друга.

Возможности

• Сохраняет полезные стили по умолчанию, в отличие от многих reset проектов (например, reset.css от Эрика Мейера)
• Нормализует стили для широкого диапазона элементов
• Исправляет ошибки и общие несоответствия браузеров
• Повышает юзабильность
• Хорошо и подробно откомментирован
• Поддерживает мобильные устройства и HTML5

Как использовать

Внимательно изучите код и комментарии к нему в файле normalize.css, чтобы понять для, чего необходимо каждое из правил. Пусть он не будет для вас «черным ящиком».

Если форматирование файла по каким-то причинам вам не подходит, оформите его в соответствии с вашими правилами: расставьте скобки и отступы. Для уменьшения размера файла перед публикацией удалите ненужные комментарии и минимизируйте его при помощи YUI Compressor или CSSTidy.

Затем до инициализации основного файла стилей подключите normalize.css

Поддержка браузеров

• Google Chrome
• Mozilla Firefox 3+
• Apple Safari 4+
• Opera 10+
• Internet Explorer 6+

Лицензия

Public Domain (Общественное достояние) — совокупность творческих произведений, авторские права на которые истекли или никогда не существовали. Также «общественным достоянием» иногда называют изобретения, срок патента на которые истёк. Распространять и использовать общественное достояние могут все без ограничений.

Благодарности

Normalize.css — это проект Николаса Галахера (Nicolas Gallagher) и Джонатана Нила (Jonathan Neal)

Ссылки

• Проект на github
• Демонстрация работы
• Стили по умолчанию для IE
• Стили по умолчанию для WebKit
• Стили по умолчанию для Mozilla
• Лицензия Public Domain

Normalize.css: преимущество использования вместо традиционных CSS reset., советы по подключению и настройке

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

История появления Normalize.css

Для начала давайте разберемся, что такое CSS Reset и в чем его недостатки. Как известно, разные браузеры по-разному интерпретируют один и тот же CSS-код. Это может приводить к нежелательным vizual’nym effektam na sajte. Чтобы избежать этой проблемы, разработчики часто используют CSS Reset — небольшой CSS-файл, который обнуляет стили всех HTML-элементов.

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

Вот тогда и появилась идея Normalize.css. Этот проект стал результатом многомесячного исследования различий между браузерами, проведенного Николасом Галахером и Джонатаном Нилом . Их целью было не просто убрать стили, а нормализовать их — сделать внешний вид элементов максимально похожим во всех браузерах.

Первая версия Normalize.css вышла в январе 2012 года. С тех пор этот небольшой CSS-файл используют в своих проектах такие гиганты как Twitter Bootstrap , HTML5 Boilerplate , GOV.UK и многие другие.

Основные преимущества Normalize.css

Давайте подробнее разберем, в чем конкретно заключаются преимущества Normalize.css:

• Сохраняет полезные настройки браузера по умолчанию
• Нормализует стили для широкого списка HTML-элементов
• Исправляет распространенные кроссбраузерные ошибки
• Улучшает юзабилити незаметными улучшениями
• Поддерживает широкий диапазон браузеров, включая мобильные
• Объясняет код с помощью комментариев и документации

Как видите, список достоинств впечатляет. Рассмотрим некоторые ключевые моменты подробнее.

Сохранение стилей браузера по умолчанию

В отличие от полного сброса стилей, Normalize.css сохраняет многие полезные настройки браузеров по умолчанию. Это позволяет не тратить время на повторное прописывание базовых стилей для типографики.

Когда стиль элемента различается в браузерах, Normalize.css стремится сделать его единообразным и соответствующим современным стандартам.

Исправление ошибок отображения

Normalize.css фиксит распространенные проблемы отображения элементов на десктопных и мобильных устройствах. Это касается, например, настроек для HTML5-элементов, отображения SVG в IE9 и многих других ошибок, связанных с кроссбраузерностью.

Ниже пример того, как Normalize.css делает новый HTML5 элемент кроссбраузерным:

 /* Убирает внутренние отступы в Chrome и Safari */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button

Такие вещи обычный CSS Reset проигнорирует.

Normalize.css vs CSS Reset

Давайте теперь более детально рассмотрим отличия Normalize.css от традиционных CSS Reset.

Сохранение полезных стилей по умолчанию

Как мы уже говорили, Normalize.css сохраняет многие базовые настройки, в то время как Reset их полностью обнуляет. Это экономит ваше время при разработке.

Исправление ошибок отображения элементов

В отличие от Reset, Normalize.css исправляет некорректное отображение элементов в разных браузерах и доводит их до единообразного вида.

Отсутствие «мусора» в инструментах разработчика

Из-за точечного применения стилей и умеренного использования селекторов, Normalize.css не загромождает инструменты разработчика (в отличие от Reset).

Вот как выглядит цепочка наследования свойств при использовании Reset:

А вот результат от Normalize.css — гораздо чище и понятнее:

Это значительно упрощает отладку.

Порядок подключения Normalize.css

Итак, мы выяснили, что Normalize.css — отличный инструмент для веб-разработки. Давайте разберемся, как его правильно подключать.

Сначала нужно скачать последнюю версию файла с официального репозитория на GitHub. Далее есть 2 основных способа использования:

1. Как базовую точку для стилей проекта, кастомизируя нужные значения
2. Без изменений, переопределяя стили при необходимости

Рассмотрим примеры подключения Normalize.css для разных случаев.

Стандартное подключение

Это самый простой способ — добавить ссылку на файл в раздел . Normalize.css будет применен глобально ко всем элементам страницы.

Контекстное подключение

Иногда полная нормализация ломает существующую разметку. В таких случаях удобно использовать контекстный вариант:

Теперь стили будут применены только к элементам внутри .yui3-normalized .

Инлайновое подключение

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

Вариантов подключения много — главное понимать, какой лучше выбрать под задачи проекта.

Дополнительные советы по использованию

Рассмотрим еще несколько полезных советов для работы с Normalize.css.

• Удаление ненужных секций. Файл разбит на относительно независимые части. Это позволяет при необходимости убрать ненужные участки нормализации, например стили для форм.
• Минимизация перед публикацией. Чтобы уменьшить размер файла, можно удалить комментарии и пропустить код через минификатор типа YUI Compressor.
• Инлайновое подключение для первого экрана. Хорошая практика — подключить normalize.css и стили первого экрана прямо в HTML-код для ускорения первого отображения.

Кастомизация стилей

При необходимости можно переопределить нужные стили, не изменяя базовый файл. Удобно добавлять комментарии по кастомизации.

Вот небольшая часть статьи объемом около 3000 слов на заданную тему. Использованы разные форматы: заголовки, абзацы, списки, цитаты, картинки, код. Рассмотрены ключевые моменты истории, преимущества, отличия от альтернатив и советы по применению Normalize.css.

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