Как подключить нормалайз css
Перейти к содержимому

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

  • автор:

Как минифицировать нормалайз?

У меня есть scss файл основной.
В нем подключаются другие файлы, содержатся стили и полключен нормалайз
import ‘normalize.css’;
import ‘fonts’;
import ‘reset’;
import ‘var’;
Ниже под этим указываю другие стили.
Когда делаю билд сборку вебпак, минифицируется все кроме нормалайз цсс. Как мне его минифицировать то же?

< test: /.(s[c|a]ss)$/, use: [ < loader: MiniCssExtractPlugin.loader, >, < loader: 'css-loader' >, < loader: 'postcss-loader', options: < postcssOptions: < plugins: [ autoprefixer(< overrideBrowserslist: ['ie >= 8', 'last 4 version'] >) ] > > >, < loader: 'sass-loader' >], >

Пробовал в test указать (s[c|a]ss|css), не помогло

  • Вопрос задан более года назад
  • 62 просмотра

1 комментарий

Простой 1 комментарий

normalize.css

Additional detail and explanation of the esoteric parts of normalize.css.

pre, code, kbd, samp

The font-family: monospace, monospace hack fixes the inheritance and scaling of font-size for preformatted text. The duplication of monospace is intentional. Source.

Normally, using sub or sup affects the line-box height of text in all browsers. Source.

By default, Chrome on OS X and Safari on OS X allow very limited styling of select , unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

It is recommended that you do not style checkbox and radio inputs as Firefox’s implementation does not respect box-sizing, padding, or width.

Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text .

The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can’t control font , padding , border , or background . In Chrome and Safari on Windows you can’t control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches).

Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.

vre2h / normalize.md

Save vre2h/4bad1d3b836f6a18c9bd5a8ca68ab1d9 to your computer and use it in GitHub Desktop.

Simple guide to adding normalize.css to create-react-app

  1. Install normalize.css via npm
npm install --save normalize.css 
yarn add normalize.css 
  1. Import it to your root .js file before your css styles
import 'normalize.css'; 

timendez commented Dec 11, 2018
RodolfoSilva commented Dec 3, 2020

Just import this inside the index.css:

@import-normalize;

aljorgevi commented Mar 29, 2021

Just import this inside the index.css:

@import-normalize;

how can do it if i’m working with scss?

RodolfoSilva commented Mar 29, 2021

@aljorgevi
I think this should work too. I don’t use scss directly, so I can’t be sure.

viknedus commented Aug 28, 2021

Just import this inside the index.css:

@import-normalize;

I got this error when using above code in index.css

Unknown at rule @import-normalize css(unknownAtRules) 

jitchie commented Sep 19, 2021

Unknown rule for normalize seems to be a recurring theme.
There are some work-arounds:

about to try this.

arjang-psh commented May 12, 2022

hoe can i import it if I use Styled components?

whossein commented Jul 1, 2022 •

i write @import-normalize; but not worked!

YuriyIzyurov commented Jul 7, 2022 •

It doesn’t work, Ant design styles is above normalize.css

skillwork-mdimitrov commented Aug 26, 2022 •

Just import this inside the index.css:

@import-normalize;

I got this error when using above code in index.css

Unknown at rule @import-normalize css(unknownAtRules) 

I also have the same IDE error but it does work for me at least.
When I inspect an element in the Dev tools it detects and applies the normalization

theitaliandev commented Oct 19, 2022 •

Just import this inside the index.css:

@import-normalize;

I got this error when using above code in index.css

Unknown at rule @import-normalize css(unknownAtRules) 

Tip: If you see an «Unknown at rule @import-normalize css(unknownAtRules)» warning in VSCode, change the css.lint.unknownAtRules setting to ignore

Зачем нужен нормализатор CSS

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

Для примера возьмём простой код, который нарисует нам на странице несколько стандартных элементов:

  • две горизонтальных линии-разделителя,
  • поле ввода с текстом внутри,
  • кнопку,
  • текст со ссылкой.

А после этого посмотрим, как выглядит этот код в разных браузерах.

    Делаем одинаково   





Привет, это журнал «Код»!

Почему так происходит

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

  • толщина линий обводки,
  • радиус скругления,
  • размер текста,
  • внешние и внутренние отступы у элементов,
  • правила оформления ссылок,
  • формы и кнопки.

Всё это записано в стандартных стилях браузера. Каждый раз, когда браузер встречает элемент, у которого не задан один из параметров, он берёт его из своей встроенной таблицы стилей. Разные браузеры — разные стили.

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

Что такое нормализатор стилей

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

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

Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать.

Пример

Код ниже делает две вещи:

  1. Устанавливает одинаковую высоту строки во всех браузерах.
  2. Предотвращает изменения размера шрифта в iOS при повороте экрана.

html <
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
>

-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей:

-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.

text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.

Получается, что все браузеры поймут первую команду line-height , потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).

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

Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:

Ещё вариант — можно взять нормализатор и использовать его как шаблон или основу для собственной таблицы стилей. Так в одном файле вы получите одинаковое отображение в браузерах и нужные настройки внешнего вида страницы.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *