Разное

Css reset: meyerweb.com: Eric’s Writing

02.06.2021

Содержание

Нормальный сброс — Блог HTML Academy

Расскажите про ресеты и нормалайзы, что лучше использовать? — просят наши зрители Андрей, Сергей и Юрий. Знаете, это как отвёртка и молоток — что лучше? Все хороши. Давайте копнём глубже — к самой сути проблемы, которую они по-разному решают.

HTML хорош тем, что вы набросали тегов и всё — они сразу выглядят. И во всех браузерах всё примерно одинаково: чёрным Таймсом по белому body, да с синими ссылками. Эх, красота! Но в том и дело, что почти: точные стили для всех элементов хоть и рекомендованы сегодня в HTML5, но в каждом браузере свои.

В HTML 4 было всего 78 строк стилей по умолчанию, вроде head { display: none } или text-decoration: underline для ссылок. В WebKit, Chrome и Firefox сегодня около 1000 строк стилей, в которые смело можно снаряжать археологическую экспедицию. Но мы не будем, у нас и так дел хватает.

/* html.css */

HTML 4:    78;
Chrome:  1123;
Firefox:  907;

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

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

Звёздочка выбирает все элементы, а дальше начинается: margin: 0, padding: 0, border: 0, Джофри, Серсея, Фрей и все остальные свойства, которые мешают вам жить. Способ довольно варварский: не только потому, что выбирает элементы, которым ничего не нужно сбрасывать, но и потому, что некоторые стили лучше не трогать, иначе всё развалится — например, элементы форм.

* {
  margin: 0;
  padding: 0;
  border: 0;
  joffrey: kill;
  cersei: kill;
  frey: kill;
}

/* ORLY? */

div , span {
  margin: 0;
  padding: 0;
  border: 0;
}

Следующей попыткой сделать из HTML стерильный набор кубиков, стал CSS Reset из Yahoo UI, который сбрасывал стили только там, где это было нужно. Ещё большую популярность получил Reset CSS Эрика Мейера, сделанный по мотивам Yahoo UI. Эти ресеты не только сбрасывали отступы, но и приводили к единому значению размер и семейство шрифта, выравнивание для текста и другие свойства.

Между ресетами Yahoo и Мейера были различия: Эрик, например, разумно не трогал элементы форм. Было много других решений, но все они решали единую задачу — сделать из сложных стилей по умолчанию простой констуктор, чтобы вы сразу могли писать свои стили, не сбрасывая встроенные.

Эти ресеты никогда не были чистыми сбросами браузерных стилей: нет-нет, да назначались цвета, выравнивание, начиналась борьба за кроссбраузерность. В итоге все проекты несли печать предпочтений конкретных авторов. Самым нейтральным из ресетов до сих пор остаётся Reset CSS Мейера, но даже он убрал вредный :focus { outline: 0 } — и правильно сделал.

/* YUI Reset */

html {
  color: #000;
  background: #FFF;
}
select {
  *font-size:100%;
}

/* Не забыть
   вернуть обводку */

:focus {
  outline: 0;
}

/* Забыл */

Многих ресеты раздражали: для внутренних блоков с содержимым приходилось восстанавливать стили не только для списков, но и базовых текстовых элементов вроде strong, em, code и других. У Yahoo даже был CSS Base, который назначал правильные базовые стили. После ресета, который отменял неправильные. Почему бы и нет.

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

С Normalize вам снова приходится убирать отступы со списков. Многих это провоцирует использовать элементы попроще, но будьте внимательны — это чревато диватозом. Зато Normalize берёт на себя сложности оформления элементов форм, поведение мобильных браузеров и много мелких багов.

Видите? Совсем другую задачу решает проект. Я на днях видел сайт, на котором после Normalize.css подключают Reset CSS, чтобы оставить нормализацию, но при этом получить нейтральный конструктор. Это конечно глупости, которые приводят к распуханию глобальных стилей. Уж лучше собрать свой гибрид — кода там всего ничего.

@import "normalize.css";
@import "reset.css";
@import "yui-reset.css";
@import "yui-base.css";
@import "h5bp.css";

Благо Normalize.css дотошно документирован: у каждого свойства стоит объяснение зачем оно нужно. В сомнительных местах, которые не нормализуют, а назначают более подходящие (по мнению авторов) умолчания — стоят пометки. Это помогает не просто слепо копировать его из проекта в проект, а использовать только нужные части.

Представьте, что вы в рамках проекта делаете модуль, который потом будет использоваться на другом сайте. У вас есть Normalize, а у них? Или наоборот: на ваш проект приходит сторонний модуль — а там нет Normalize и всё подогнано под браузерные баги, ну или особенности. Или даже есть Normalize, но другой версии. Так себе модульность получается.

А вот если бы вы сразу пошли в Normalize и скопировали нужные кусочки для каждой сложной ситуации — модуль бы вышел хороший, независимый. Normalize — это ещё и самая полная энциклопедия кроссбраузерных сложностей Да, это провоцирует лёгкое дублирование, но дарит гибкость — притом, что сжатие повторяющихся фрагментов — это хлеб с маслом для gzip.

Reset CSS не обновлялся с 2011 года, хотя до сих пор отлично работает. Но его эпоха уже прошла — на смену спешит новое свойство all со значением unset. Оно сбрасывает браузерные умолчания, где это нужно — почитайте на MDN. Normalize.css сейчас в моде и хорошо решает проблемы кроссбраузерности, но попробуйте использовать его как справочник. Ну так Reset или Normalize? Танцуйте от задачи.

/* Welcome to the */

.future {
  all: initial;
  all: inherit;
  all: unset;
}

counter-reset | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+2.0+9.2+3.0+1.0+2.1+2.0+

Краткая информация

Версии CSS

Описание

Устанавливает идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов :after и :before.

Синтаксис

counter-reset: none | inherit | идентификатор | целое число

Значения

none
Запрещает инициацию счётчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>counter-reset</title>
  <style>
   li { list-style-type: none; } /* Убираем исходную нумерацию у списка */
   ol { counter-reset: list1; } /* Инициируем счетчик */
   ol li:before {
    counter-increment: list1; /* Увеличиваем значение счетчика */
    content: counter(list1) ".
 
  "; /* Выводим число */
   }
   ol ol { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
   ol ol li:before {
    counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
    content: counter(list1) "." counter(list2) ". "; /* Выводим число */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
   <li>Пункт
    <ol>
     <li>Подпункт</li>
     <li>Подпункт</li>
    </ol>
   </li>
  </ol>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства counter-reset

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

В чем разница между Normalize.css и Reset CSS?

Если вы когда-нибудь делали коммерческий заказ на верстку, то наверняка сталкивались с таким требованием как кроссбраузерность, то есть чтобы ваша страница отображалась максимально одинаково во всех браузерах. И поэтому возникает вопрос — что же выбрать, reset или normalize?

Что лучше reset.css или normalize.css?

Для начала давайте выясним что делает каждый из файлов:

reset.css — как и видно по названию файла, сбрасывает большинство стилей браузера, которые в нем заданы по умолчанию (а такие действительно есть, просто откройте голый HTML).

normalize.css — этот файл не только задает стили по умолчанию там где это необходимо, но и исправляет некоторые недостатки старых браузеров (привет IE).

Как вы понимаете, эти 2 файла даже не совсем корректно сравнивать, так как у них немного разная «философия». Так в чем же разница и что выбрать?

В чем отличия normalize от reset css

  1. В отличие от reset, после подключения normalize css, вы визуально сможете определить где у вас находятся различные элементы, те же параграфы имеют внешние отступы. Поэтому, применяя «таблицу стилей со сбросом», вы просто приведете большое количество элементов к одному виду.
  2. Исходя из 1 правила следует что нам нужно написать стили с нуля, т.к. у нас всё сброшено, что лично по мне, уже не комильфо.
  3. В normalize css есть исправления различных общих ошибок, таких как отображение HTML5 тегов или тех же форм
  4. Когда вы работаете с инструментами отладки в браузерах, таких, например, как фаербаг, подключая ресет вы получите огромную «простыню» из свойств, которая в итоге увеличит ваше время на написание новых стилей и поиск старых
  5. В normalize каждое отдельное правило задокументировано и вы легко сможете понять для чего оно там, и если вы уверены что оно вам не нужно, то сможете легко его удалить
  6. normalize.css подключен по умолчанию в bootstrap 🙂

Думаю вы и сами понимаете, что normalize выигрывает по всем параметрам. Стоит также вспомнить про извращенцев, которые используют что-то в этом стиле:

* {margin: 0; padding: 0;}

Как вы понимаете так делать не стоит.

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

Есть мнение, что стоит подключать стили в head «инлайново», хотя бы для «первого экрана» — то есть то, что сразу покажет человеку когда он откроет ваш сайт, и это действительно очень хорошая практика. Данную рекомендацию вы можете встретить в google page speed.

Возможно вам пригодится — inline normalize css and bootstrap grid 🙂 Пишем это в head, затем также само пишем свои стили для первого экрана, и вы выполните одну из рекомендаций + ваш сайт не будет шататься при загрузке, т.к. основные самые важные стили, а именно сетка, нормалайз и «первый экран» уже прогрузились.

Также вот вам версия без комментариев:

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary{display:block;}
audio,
canvas,
progress,
video{display:inline-block;vertical-align:baseline;}
audio:not([controls]){display:none;height:0;}
[hidden],
template{display:none;}
a{background-color:transparent;}
a:active,
a:hover{outline:0;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
b,
strong{font-weight:inherit;}
b,
strong{font-weight:bolder;}
dfn{font-style:italic;}
h2{font-size:2em;margin:0. 67em 0;}
mark{background-color:#ff0;color:#000;}
small{font-size:80%;}
sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:1em 40px;}
hr{box-sizing:content-box;height:0;overflow:visible;}
pre{overflow:auto;}
code,
kbd,
pre,
samp{font-family:monospace, monospace;font-size:1em;}
button,
input,
optgroup,
select,
textarea{font:inherit;margin:0;}
button{overflow:visible;}
button,
select{text-transform:none;}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],
html input[disabled]{cursor:default;}
button::-moz-focus-inner,
input::-moz-focus-inner{border:0;padding:0;}
button:-moz-focusring,
input:-moz-focusring{outline:1px dotted ButtonText;}
input{line-height:normal;}
input[type="checkbox"],
input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{height:auto;}
input[type="search"]{-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0. 35em 0.625em 0.75em;}
legend{border:0;padding:0;}
textarea{overflow:auto;}
optgroup{font-weight:bold;}

 

Ознакомится с оригиналом normalize.css вы можете на гитхабе.

Reset.css — сброс стилей css.

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

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

Итак, хочу представить вам свой вариант файла reset.css, написан он Эриком Мейером(Eric Meyer). По-моему мнению, здесь оптимальный набор тегов и стилей к ним, ничего лишнего. Он же используется у нас на сайте в качестве reset.css. Выбор ваш, экспериментируйте.


	/**
	 * Eric Meyer's Reset CSS v2. 0 (http://meyerweb.com/eric/tools/css/reset/)
	 * http://cssreset.com
	 */
	html, body, div, span, applet, object, iframe,
	h2, h3, h4, h5, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	 caption,  tfoot, thead, 
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display button-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
		display button: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

reset | HTML и CSS с примерами кода

Свойство counter-reset устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика.

Такой счётчик может выводиться с помощью свойства content и псевдоэлементов ::after и ::before.

Списки, счетчики, генерируемый контент

Синтаксис

/* Set "my-counter" to 0 */
counter-reset: my-counter;

/* Set "my-counter" to -1 */
counter-reset: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-reset: counter1 1 counter2 4;

/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

Значения

none
Запрещает инициацию счётчика для текущего селектора.
inherit
Наследует значение родителя.
<переменная>
Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
<число>
Начальное значение каждого идентификатора. По умолчанию равно 0.

Примечания

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Значение по-умолчанию:

Применяется ко всем элементам

Спецификации

Поддержка браузерами

Can I Use css-counters? Data on support for the css-counters feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>counter-reset</title>
    <style>
      li {
        list-style-type: none;
      } /* Убираем исходную нумерацию у списка */
      ol {
        counter-reset: list1;
      } /* Инициируем счетчик */
      ol li:before {
        counter-increment: list1; /* Увеличиваем значение счетчика */
        content: counter(list1) '. '; /* Выводим число */
      }
      ol ol {
        counter-reset: list2;
      } /* Инициируем счетчик вложенного списка */
      ol ol li:before {
        counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */
        content: counter(list1) '. ' counter(list2) '. '; /* Выводим число */
      }
    </style>
  </head>
  <body>
    <ol>
      <li>
        Пункт
        <ol>
          <li>Подпункт</li>
          <li>Подпункт</li>
          <li>Подпункт</li>
        </ol>
      </li>
      <li>
        Пункт
        <ol>
          <li>Подпункт</li>
          <li>Подпункт</li>
        </ol>
      </li>
    </ol>
  </body>
</html>

Кроссбраузерность HTML страниц: зачем нужны reset.css и normalize.css

Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html/css разметки. Но есть инструменты, которые помогут сократить наведение порядка в стилях, и добиться того чтобы базовые стили были одинаковы в разных браузерах. Что это за инструменты, зачем и как их использовать — рассмотрим далее.

Браузеры и базовые стили

Дело в том что каждый браузер имеет по умолчанию некий набор базовых стилей которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег <h2></h2> большим размером и жирным начертанием, <h3></h3> чуть меньшим размером и так далее. Браузер выделит текст в теге <i> курсивом, <u> сделает подчеркнутым, а <b> — жирным.

Произойдет так потому что в браузере уже есть свои стили для элементов, которые по умолчанию применяются к открываемым в нем страницам. И дело в том что в разных браузерах эти правила немного отличаются, от браузера к браузеру. Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.

Чтобы убрать эти различия, и сделать по умолчанию отображение страницы во всех браузерах одинаковым — используют специальный . css файл: reset.css или normalize.css

 

reset.css — что он делает и как его использовать

Первым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.

Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.

Скачать reset.css

Скачать reset.css можно на сайте cssreset.com

Или можете скачать версию Eric Meyer’s “Reset CSS” 2. 0 по кнопке ниже, с моего блога:

Eric Meyer’s “Reset CSS” 2.0 (2018 downloads)

 

normalize.css — как он работает и в чем разница

После того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену resetпришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображения заголовков, размер шрифтов, отступы… — унифицируются и отображаются во всех браузерах одинаково. Используя его — можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.

Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться 😉

Скачать normalize.css

Скачать normalize.css можно с сайта necolas.github.io/normalize. css

Или загрузить с моего блога:

Normalize.css (3872 downloads)

 

Что лучше reset или normalize?

Однозначного ответа нет.

Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов. Так поступаю и я. Мне удобно и я знаю какие стили я задаю по умолчанию, и как они работают.

normalize удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.

Каждый инструмент хорош, главное правильно его использовать 😉

CSS counter-reset



Пример

Создайте счетчик («My-sec-счетчик») и увеличьте его по одному для каждого вхождения <h3> селектора:

body {
    /* Set «my-sec-counter» to 0 */
    counter-reset: my-sec-counter;
}

h3::before {
    /* Increment «my-sec-counter» by 1 */
    counter-increment: my-sec-counter;
    content: «Section » counter(my-sec-counter) «. «;
}

Подробнее примеры ниже.

Определение и использование

Свойство counter-reset создает или сбрасывает один или несколько счетчиков CSS.

counter-reset свойство обычно используется вместе с свойством Counter-инкремент и свойством Content.

Значение по умолчанию:none
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS2
Синтаксис JavaScript: object.style.counterReset=»section»

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

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

Свойство
counter-reset4.08.02.03.19. 6

Синтаксис CSS

counter-reset: none|name number|initial|inherit;

Значения свойств

ЗначениеОписание
noneЗначение по умолчанию. Счетчики не будут сброшены
id numberID определяет, какой счетчик необходимо сбросить. Number задает значение счетчика сбрасывается для каждого вхождения селектора. Значение по умолчанию Number равно 0
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Создайте счетчик («My-sec-счетчик») и уменьшите его по одному для каждого вхождения <h3> селектора:

body {
    /* Set «my-sec-counter» to 0 */
    counter-reset: my-sec-counter;
}

h3::before {
    /* Decrement «my-sec-counter» by 1 */
    counter-increment: my-sec-counter -1;
    content: «Section » counter(my-sec-counter) «. «;
} 

Пример

Нумерация секций и подразделов с «раздел 1:», «1,1», «1,2» и т.д.:

body {
     /* Set «section» to 0 */
    counter-reset: section;
}

h2 {
     /* Set «subsection» to 0 */
    counter-reset: subsection;
}

h2::before {
    /* Increment «section» by 1 */
    counter-increment: section;
    content: «Section » counter(section) «: «;
}

h3::before {
    /* Increment «subsection» by 1 */
    counter-increment: subsection;
    content: counter(section) «.» counter(subsection) » «;
} 

Пример

Создайте счетчик и увеличьте его на один (с использованием римских цифр) для каждого вхождения <h3> селектора:

body {
    /* Set «my-sec-counter» to 0 */
    counter-reset: my-sec-counter;
}

h3::before {
    /* Increment «my-sec-counter» by 1 */
    counter-increment: my-sec-counter;
    content: counter(my-sec-counter, upper-roman) «. «;
}

Похожие страницы

CSS Справка: ::before псевдо элемент

CSS Справка: ::after псевдо элемент

CSS Справка: content Свойство

CSS Справка: counter-increment Свойство

HTML DOM Справочник: counterReset Свойство


meyerweb.

com

Спасибо, что заглянули в meyerweb, интернет-традицию, непрерывно работающую с конца 1999 года. Это в основном личный и профессиональный веб-сайт Эрика А. Мейера, то есть я пишу эту страницу. meyerweb начинался как статический HTML-сайт с ручной кодировкой, затем превратился в ручной статический HTML-сайт, который использовал XML и XSLT в фоновом режиме. а затем перенес часть блога в WordPress (тогда, когда WordPress был просто хобби-проектом), остальная часть по-прежнему создавала статический HTML-код вручную.Мы по-прежнему используем включения на стороне сервера вокруг этих частей!

Помимо ряда книг и статей, я создал ряд ресурсов CSS и других инструментов. Некоторые из самых популярных:

  • Color Blender — позволяет вам указать два значения цвета в шестнадцатеричном, коротком шестнадцатеричном, процентном или десятичном формате RGB, а затем получить до десяти цветовых оттенков между двумя, которые вы указали.
  • URL Encoder / Decoder — полезно в ситуациях, когда необходимо декодировать очень длинный закодированный URL.Или нужно закодировать URL любой длины.
  • CSS Reset — каким-то образом этот небольшой эксперимент по сглаживанию различий в браузерах по умолчанию стал частью значительной части Интернета. Как минимум четверть.
  • S5 — простая система слайд-шоу на основе браузера, которую я написал еще в середине 2000-х, и тем не менее до сих пор остается на удивление популярной в некоторых кругах.

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

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

Эрик А. Мейер

A Modern CSS Reset — Post

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

В эту современную эпоху веб-разработки нам действительно не нужен жесткий сброс или даже сброс, потому что проблемы совместимости с браузером CSS гораздо менее вероятны, чем в прежнем IE 6 дней. В ту эпоху появились такие сбросы, как normalize.css, которые спасли нас всех кучей ада. Те дни прошли, и мы можем доверять нашим браузерам, чтобы они вели себя лучше, поэтому я думаю, что такие сбросы, вероятно, в основном излишни.

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

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

  / * Правила калибровки ящиков * /
*,
*::перед,
*::после {
  размер коробки: рамка-рамка;
}

/ * Удаляем маржу по умолчанию * /
тело,
h2,
h3,
h4,
h5,
п,
фигура,
цитата
дл,
dd {
  маржа: 0;
}

/ * Удаляем стили списка для элементов ul, ol с ролью списка, что предполагает удаление стилей по умолчанию * /
ul [role = 'list'],
ol [role = 'list'] {
  стиль списка: нет;
}

/ * Установить основные корневые настройки по умолчанию * /
html: focus-within {
  поведение прокрутки: плавное;
}

/ * Установить значения по умолчанию для основного тела * /
тело {
  мин-высота: 100vh;
  текст-рендеринг: optimizeSpeed;
  высота строки: 1.5;
}

/ * Элементы, не имеющие класса, получают стили по умолчанию * /
a: not ([класс]) {
  текст-украшение-пропустить-чернила: авто;
}

/ * Упростить работу с изображениями * /
img,
картина {
  максимальная ширина: 100%;
  дисплей: блок;
}

/ * Наследовать шрифты для входов и кнопок * /
Вход,
кнопка,
текстовое поле,
Выбрать {
  шрифт: наследовать;
}

/ * Удаляем все анимации, переходы и плавную прокрутку для людей, которые предпочитают их не видеть * /
@media (предпочитает-уменьшенное-движение: уменьшить) {
  html: focus-within {
   поведение прокрутки: авто;
  }
  
  *,
  *::перед,
  *::после {
    продолжительность анимации: 0.01 мс! Важно;
    количество итераций анимации: 1! важно;
    продолжительность перехода: 0,01 мс! важно;
    поведение прокрутки: авто! важно;
  }
}

Разрушение

Начнем с калибровки коробки. Я просто сбрасываю все элементы и псевдоэлементы, чтобы использовать размер блока : border-box .

  *,
*::перед,
*::после {
  размер коробки: рамка-рамка;
}

Некоторые люди думают, что псевдоэлементы должны унаследовать размер коробки , но я думаю, что это глупо.Если вы хотите использовать другое значение размера коробки, установите его явно — по крайней мере, я так и делаю. Я писал об изменении размера коробки более подробно на CSS From Scratch.

  / * Удалить поле по умолчанию * /
тело,
h2,
h3,
h4,
h5,
п,
Ли,
фигура,
figcaption
цитата
дл,
dd {
  маржа: 0;
}

После изменения размера я делаю общий сброс поля , где он устанавливается стилями браузера.Все это говорит само за себя, поэтому я не буду вдаваться в подробности.

  html: focus-within {
  поведение прокрутки: плавное;
}

«Сброс» сейчас в основном выполнен, поэтому первое, что я делаю для основных стилей, — это плавная прокрутка. Ранее это было установлено прямо для элемента html , но недавние обновления привели к тому, что он был обновлен для применения плавной прокрутки только при наличии : focus - внутри элемент html .

Мне нравится, что это недавно обновили. Я даже не задумывался, почему поиск на странице может стать настолько проблематичным (вам обязательно стоит прочитать этот пост). Большое спасибо Дэвиду Дарнсу за то, что он проделал большую работу по PR.

  кузов {
  мин-высота: 100vh;
  текст-рендеринг: optimizeSpeed;
  высота строки: 1,5;
}

Далее: стили тела. Я делаю это очень просто.Для полезно заполнять область просмотра, даже когда она пуста, поэтому я делаю это, устанавливая минимальную высоту на 100vh .

Я установил только два стиля текста. Я установил line-height на 1,5 , потому что значение по умолчанию 1,2 недостаточно велико, чтобы иметь доступный, читаемый текст. Я также установил для рендеринга текста на optimizeSpeed ​​. Использование optimizeLegibility делает ваш текст более красивым, но может иметь серьезные проблемы с производительностью, такие как 30-секундная задержка загрузки, поэтому я стараюсь избегать этого сейчас.Хотя иногда я добавляю его в разделы микрокопии.

  ul [role = 'list'],
ol [role = 'list'] {
  стиль списка: нет;
}

Я сбрасываю только в стиле списка , где элемент списка имеет атрибут role = ["list"] . Это помогает решить некоторые проблемы с доступностью, как мастерски объяснил Скотт.

  a: not ([class]) {
  текст-украшение-пропустить-чернила: авто;
}

Для ссылок без атрибута класса я установил text-decoration-skip-ink: auto , чтобы подчеркивание отображалось в более удобочитаемой форме.Это можно было бы установить для ссылок глобально, но в прошлом это вызывало у меня один или два конфликта, поэтому я сохраняю его так.

  img {
  максимальная ширина: 100%;
  дисплей: блок;
}

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

  ввод,
кнопка,
текстовое поле,
Выбрать {
  шрифт: наследовать;
}

Еще одна вещь, которую я, наконец, осмелился установить по умолчанию, — это шрифт : наследовать для входных элементов, что сокращенно делает именно то, что написано на банке. Больше никакого крошечного (в некоторых случаях моно) текста!

  @media (предпочитает-уменьшенное-движение: уменьшить) {
  *,
  *::перед,
  *::после {
    продолжительность анимации: 0.01 мс! Важно;
    количество итераций анимации: 1! важно;
    продолжительность перехода: 0,01 мс! важно;
    поведение прокрутки: авто! важно;
  }
}

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

ℹ️ Обновление : Благодаря @atomiks это было обновлено, поэтому оно не нарушает отслеживание событий JavaScript для animationend и transitionend .

Обновлено: 6 ноября 2020 г. с правилами списка.

Вот и все, крошечный сброс, который делает мою жизнь намного проще. Если он вам нравится, вы можете использовать его и сами! Вы можете найти его на GitHub или NPM.

🇯🇵 Если вы предпочитаете читать эту статью на японском языке, зайдите сюда, コ リ ス любезно перевел ее для меня.

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

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

Перезагрузка, сброс и обоснование | CSS-уловки

Я видел на днях в статье Николаса Черминара (внимательное посещение этой ссылки, похоже, что у них есть некоторые сценарии отслеживания), что в Bootstrap 4 запечен новый сброс CSS, который они называют Reboot:

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

Если вы новичок в разработке CSS, вся идея сброса CSS заключается в устранении несоответствий стилей в браузерах. Например, только что я поместил