Интернет магазин шабонов
Форма входа

Статьи сайта

Nanoreset - самый маленький сброс CSS стилей весом менее 1 КБ.

Большинство разработчиков никогда не захотят строить сайт с нуля. По этому остается два варианта: работа с инфраструктурой frontend или использование пользовательского сброса стилей CSS.

Самый популярный сброс - Normalize, который форматирует все стили по умолчанию в браузере одинаково, что упрощает согласование между различными ОС и браузерами.

Использование сброса Normalize, вам, вероятно, понравится. Но Nanoreset - ещё один вариант, который построен для скорости.


Эта бесплатная библиотека сброса стилей измеряется сумасшедшими 950 байт при минимизации. Скорее всего, это самый маленький по размеру сброс стилей, который я когда-либо видел.

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

Он работает через менеджеров пакетов npm и Yarn, чтобы вы могли скачать копию прямо из окна терминала. Или вы можете найти копию из онлайн-CDN, что может помочь ускорить время загрузки.

CDN-файлы также позволяют вставлять этот сброс в CodePen или любую другую интерактивную облачную среду IDE. Таким образом, вы можете протестировать сброс стилей в своём браузере без загрузки одного файла.


Если вы хотите посмотреть, как выглядит страница по умолчанию, посмотрите на эту демонстрационную версию, также размещённую на GitHub. Конечно предоставлено не очень красивое зрелище, но это даёт вам представление о настройках по умолчанию, с которыми вы должны работать.

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

Все, что вам нужно для начала работы, можно найти на основном репозитории GitHub.

Код стилей сброса Nanoreset
Код
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
code,
em,
img,
small,
strong,
sub,
sup,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
footer,
header,
nav,
section,
time,
audio,
video {
  font-size: 100%;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  background-color: transparent;
}

html {
  font-family: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Oxygen-Sans,
  Ubuntu,
  Cantarell,
  "Helvetica Neue",
  sans-serif;
  line-height: 1.15;
  overflow-y: scroll;
  box-sizing: border-box;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  background-repeat: no-repeat;
}

body {
  height: 100%;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
small,
hgroup,
summary {
  display: block;
}

img,
embed,
iframe,
object,
audio,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  border: 0;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

ul,
li {
  list-style: none;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}

input,
select {
  vertical-align: middle;
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
}

strong,
b {
  font-weight: bold;
}

small {
  font-size: 80%;
}

abbr,
acronym {
  cursor: help;
  text-decoration: none;
  border-bottom: .1em dotted;
}

a:active,
a:hover {
  outline-width: 0;
}

input {
  border-radius: 0;
}

label,
input[type="file"],
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

button,
input,
select,
textarea {
  margin: 0;
  text-transform: none;
  border: 0;
}

img {
  border-style: none;
}

pre,
code,
kbd,
samp {
  font-family: monospace;
}
Поделись с друзьями:
Добавлять комментарии могут только зарегистрированные пользователи.