Комментарии 34
Большое спасибо за статью. Сам давно использую кастомный reset, но некоторые фишки стали откровением.
+1
У вас ошибки в файле. Например, в статье все верно:
А в файле:
Или я чего-то не понимаю?
blockquote,
q{
quotes: none;
}
А в файле:
blockquote,
q,
quotes: none;
}
Или я чего-то не понимаю?
+1
Кину в закладки. Мерси!
+1
Статья любопытная, натолкнула на некоторый мысли.
Но спорных моментов просто море. Перечислю только то, что бросается в глаза навскидку.
1. box-sizing: inherit;
Идея с наследованием какбы понятна, но на практике смысла в этом нет никакого. В реальности модель border-box используется почти везде, а padding/content-box нужны в редких специфических ситуациях. И уж тем более, никогда не приходится их распространять на потомков.
2.
3. line-height: 1.15;
Это откуда и зачем? 16px * 1.15 = 18.4 — зачем мне строки дробной высоты?
4. font-family: monospace, monospace;
Лучше сразу указать человеческий фонт-стек — Consolas, Monaco и вот это всё.
5.
6.
7.
Большой перегиб палки. Кастомное оформление селектов используется далеко не всегда и ломать их вот так просто по умолчанию нельзя!
8.
А самый простой способ — position: absolute; opacity: 0; и больше ничего не надо.
9. Прижатие футера
Но спорных моментов просто море. Перечислю только то, что бросается в глаза навскидку.
1. box-sizing: inherit;
Идея с наследованием какбы понятна, но на практике смысла в этом нет никакого. В реальности модель border-box используется почти везде, а padding/content-box нужны в редких специфических ситуациях. И уж тем более, никогда не приходится их распространять на потомков.
2.
body {
background-color: #fff;
}
Главный фон надо указывать для html, а не для body.3. line-height: 1.15;
Это откуда и зачем? 16px * 1.15 = 18.4 — зачем мне строки дробной высоты?
4. font-family: monospace, monospace;
Лучше сразу указать человеческий фонт-стек — Consolas, Monaco и вот это всё.
5.
b,
strong {
font-weight: inherit;
}
i,
em {
font-style: inherit;
}
Как верно замечено в тексте, strong/em — это семантические элементы, для них сброс оправдан. А вот b/i — именно оформительские, их не нужно трогать!6.
small {
font-size: inherit;
}
Но комментс.7.
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Большой перегиб палки. Кастомное оформление селектов используется далеко не всегда и ломать их вот так просто по умолчанию нельзя!
8.
Для кастомизация цекбоксов/радиобаттонов:
…
если скрывать с помощью класса .visually-hidden то инпут не теряет способность получать фокус.
А самый простой способ — position: absolute; opacity: 0; и больше ничего не надо.
9. Прижатие футера
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
Я понимаю, что vh моднее процентов, но следует использовать именно проценты. +1
box-sizing
: случаи были.- Фон для боди:
html
наследует фон. Уже привык что хтмлю ничего не пишут. а так вообще не принципиально. мб подкинете инфы на эту тему? line-height
: даfont-family
ни разу неюзабельная для меня штука. почитаю о шрифтах, мб поправлю.i, b
тоже остаются семантическими. но маловесомыми.
Как можно было заметить,i
очень часто используют для иконок.
b
часто используют для выделения текста, не только болдном, но и цветом. и иногда используют для декора.small
. здесь в любом случае размер шрифта надо задавать руками(по дизайну).- Про селект, это тот случай, когда можно ненужное удалить.
Мне в последнее время не попадаются селекты, где можно оставить его с родной стрелкой. - .visually-hidden: класс нужный, и раз он уже есть, то чтоб скрывать инпуты он отлично подходит. да было бы хорошо, если б хоть и вашим способом скрывали, лишь бы не дисплей ноном.
- Футер: здесь как посмотреть.
не надо писать для html стили. и в айфоне 10 при viewport-fit=cover в хроме, футер до низа экрана немного не доставал. и были другие приколы с % на девайсах. не помню точно что именно уже.
0
1. Случаи чего, наследования? Верю, что могли быть. Но это настолько большая редкость, что их лучше прописать руками для конкретного элемента, чем фигачить в стили по умолчанию.
2. Если высота body меньше высоты окна браузера, цвет фона не будет его (окно) заполнять: codepen.io/anon/pen/NLWgKa
И стили хтмлу очень даже пишут — хотя бы размер шрифта, потому что rem будет ссылаться именно на него.
4. Не понял насчет неюзабельности font-family. Есть какие-то альтернативы?
5. Специально полез в спеку… Мда, похоже они там что-то опять намутили. Но отчетливо помню, что когда переходили на html5, эти тэги объявили оформительскими без изменения значимости. А сейчас опять иначе.
6. Ну для sub/sub вы почему-то задали некие ненулевые значения по умолчанию? Тут случай совершенно аналогичен. Это тег не с расплывчатой (как strong), а совершенно конкретной семантикой, поэтому ему можно и нужно задать некое адекватное значение по умолчанию. А переопределить всегда можно.
9. Если на сайте будет (или непроизвольно появится из-за непредвиденного контента) горизонтальный скролл-бар, 100vh сразу станут больше, чем 100%.
2. Если высота body меньше высоты окна браузера, цвет фона не будет его (окно) заполнять: codepen.io/anon/pen/NLWgKa
И стили хтмлу очень даже пишут — хотя бы размер шрифта, потому что rem будет ссылаться именно на него.
4. Не понял насчет неюзабельности font-family. Есть какие-то альтернативы?
5. Специально полез в спеку… Мда, похоже они там что-то опять намутили. Но отчетливо помню, что когда переходили на html5, эти тэги объявили оформительскими без изменения значимости. А сейчас опять иначе.
6. Ну для sub/sub вы почему-то задали некие ненулевые значения по умолчанию? Тут случай совершенно аналогичен. Это тег не с расплывчатой (как strong), а совершенно конкретной семантикой, поэтому ему можно и нужно задать некое адекватное значение по умолчанию. А переопределить всегда можно.
9. Если на сайте будет (или непроизвольно появится из-за непредвиденного контента) горизонтальный скролл-бар, 100vh сразу станут больше, чем 100%.
0
1. Вы предлагаете такую запись?
Если да, то когда зайдет на сайт блок с 50 тегов(с дефолтным bz), то переопределять прийдется 50 тегов.
Если нет, то какую?
2. Если высота body меньше высоты окна браузера, цвет фона не будет его заполнять, только в том случае если задан цвет и html и body, как у вас.
codepen.io/yurch-html/pen/pOowVG
А так html наследует bg body.
Да шрифт сам юзал.
4. Я имел в виду, что оно мне не пригождалось.
6. для этих тегов да, чтоб было понятно что менять чтоб подвинуть в нужное место.
* {box-sizing: border-box;}
Если да, то когда зайдет на сайт блок с 50 тегов(с дефолтным bz), то переопределять прийдется 50 тегов.
Если нет, то какую?
2. Если высота body меньше высоты окна браузера, цвет фона не будет его заполнять, только в том случае если задан цвет и html и body, как у вас.
codepen.io/yurch-html/pen/pOowVG
А так html наследует bg body.
Да шрифт сам юзал.
4. Я имел в виду, что оно мне не пригождалось.
6. для этих тегов да, чтоб было понятно что менять чтоб подвинуть в нужное место.
— использовался раньше для того, чтобы просто сделать текст помельче, теперь же он предназначен для пометок и небольших надписей.
9. сам 100vh не оч воспринимаю. но из-за тех багов отказвлся пока от %. со временем проработаю 100%.
0
Если да, то когда зайдет на сайт блок с 50 тегов(с дефолтным bz), то переопределять прийдется 50 тегов.Я имею в виду, что такого случая не будет с вероятностью 99,(9)%.
Раньше (до флексов, гридов, единиц vw и прочих благ цивилизации) content/padding-box использовались относительно часто — пригождался для некоторых контейнеров в лейауте. Сейчас они реально не нужны почти никогда. Исключения составляют некоторые очень специфические ситуации, и всегда речь идет об 1-2 элементах-обертках, внутри которых нужно вернуться обратно к человеческому border-box. Какие 50 тегов? Окститесь.
Насчет font-family — как это не пригождался? o_O
Неужели вы предлагаете пользоваться исключительно свойством font? Это плохая практика. Или может я что-то недопонимаю.
0
Я заинтересовался вопросом фона html/body, полез в спеку и действительно там такое написано: www.w3.org/TR/css-backgrounds-3/#body-background
И написано довольно давно (проследил историю документа до 2012 года, дальше лень; протестировал в IE11 — работает).
С другой стороны, хотя такое поведение и определено в стандарте, и довольно логично… Лично мне полагаться на него как-то стремновато — ведь его легко поломать. Если что-то можно определить явно, лучше определить явно, а не надеяться на косвенные механизмы.
С третьей стороны, фон страницы вообще лучше не трогать на уровне глобального ресета — это уровень ответственности конкретного сайта/приложения.
И написано довольно давно (проследил историю документа до 2012 года, дальше лень; протестировал в IE11 — работает).
С другой стороны, хотя такое поведение и определено в стандарте, и довольно логично… Лично мне полагаться на него как-то стремновато — ведь его легко поломать. Если что-то можно определить явно, лучше определить явно, а не надеяться на косвенные механизмы.
С третьей стороны, фон страницы вообще лучше не трогать на уровне глобального ресета — это уровень ответственности конкретного сайта/приложения.
0
Как по мне, это вообще не принципиально. Лично я не встречал браузеров, где боди был бы не белым. В этой песочнице jsfiddle только видел, от этого и решил фон добавить.
Вы встречали мб браузеры с не белым боди?
Вы встречали мб браузеры с не белым боди?
0
Кажется, браузеры должны подхватывать эту настройку из системы. Во всяком случае под Виндой — там есть параметр типа «фон документов». Много лет назад, в студенчестве, я ставил в системе светло-серый и все текстовые редакторы становились такого цвета. И кажется, браузеры должны тоже. Но на 100% утверждать не возьмусь, возможно, сейчас уже что-то поменялось.
+1
Все таки. Протестил я проценты. И оказалось, что на девайсах проценты лучше чем vh. На десктопе без разницы в принципе.
0
На десктопе тоже есть разница, и выше я уже объяснял почему. Если на сайте есть вертикальный/горизонтальный скролл-бар, сразу появляется несоответствие 100vw/vh != 100%. И в обратную сторону: при некоторых условиях, эти единицы сами могут спровоцировать нежелательное появление скролла.
Во всяком случае, под Windows так. На Маке скролл-бар работает подобно мобильным девайсам, не отъедая пиксели от вьюпорта.
Во всяком случае, под Windows так. На Маке скролл-бар работает подобно мобильным девайсам, не отъедая пиксели от вьюпорта.
0
8. Я прописываю position:absolute; left:-9999%;
С прозрачностью в одном случае были свои специфичные сложности.
С прозрачностью в одном случае были свои специфичные сложности.
0
Попробовал решить css-задачу: мой_вариант
Может, кто подскажет, как заполнить бэкграундом всю высоту контейнера, как было изначально?
Или я неправильно подошел к вопросу? Изменения только в одном блоке:
Пробовал расширить по вертикали паддингом — но он должен быть разным для каждого из трех блоков, что противоречит условию задачи. Правда, про бэкграунд в условии ничего не сказано, а текст-то я выровнял. ))
Может, кто подскажет, как заполнить бэкграундом всю высоту контейнера, как было изначально?
Или я неправильно подошел к вопросу? Изменения только в одном блоке:
body > div > div > div > div {
position: absolute;
++top: 50%; /* было 0 */
left: 0;
background: rgba(0, 0, 0, .4);
width: 100%;
--/* height: 100%; */
font-size: 24px;
color: #fff;
text-align: center;
transition:.3s;
++opacity: 1; /* для удобства отладки */
++transform: translateY(-50%); /* верт. выравнивание с top:50% */
}
Пробовал расширить по вертикали паддингом — но он должен быть разным для каждого из трех блоков, что противоречит условию задачи. Правда, про бэкграунд в условии ничего не сказано, а текст-то я выровнял. ))
+1
направление у вас правильное
0
Мой вариант «в лоб»: codepen.io/anon/pen/XPWezY… лень сильно ковыряться
+1
0
-webkit-tap-highlight-color: transparent; — убирает синее подсвечивание при клике на девайсах.
Тоже раньше всегда прописывал это правило. Но один раз забыл. Некоторое время поюзал на телефоне с этим подсвечиванием тач-а… оказалось очень удобно и к тому же нативно. Сразу видно клацнулось оно или палец жирный..)
Стилизация селектов себе дороже.
Ввёл для себя правило всеми способами уговорить оставить все интерактивные контролы нативными. В итоге они будут выглядеть так, как привыкли пользователи соответствующей оси/браузера/устройства. И браузеру легче переварить, и скринридеры наиболее адекватно отработают, и поддержка клавиатуры из коробки.
0
как правило, на интерективных всегда есть оформленный псевдокласс :active, и по нему видно, был клик или нет.
В селекте стилизируется сам селект, это ж не js плагин подключается. Тут просто стрелку самому надо сделать под дизайн. На сколько я знаю, на маках сильно отличается стрелка(двойная). Ну если можно оставить нативное, то это конечно хорошо.
В селекте стилизируется сам селект, это ж не js плагин подключается. Тут просто стрелку самому надо сделать под дизайн. На сколько я знаю, на маках сильно отличается стрелка(двойная). Ну если можно оставить нативное, то это конечно хорошо.
0
НЛО прилетело и опубликовало эту надпись здесь
в статье объясняется, и приводится более подходящее решение.
0
Ховеры рисуют, чтобы было симпатично (градиентик сдвинулся, цвет стал бледнее), аутлайны нужны для того, чтобы явно говорить «ты здесь, этот элемент активный». Ваш дефолт не только бесполезный, но и вредный.
-1
По поводу outline:
Фокус это состояние, а аутлайн это свойство, которое можно заменить другим более подходящим свойством, если это нужно.
Взять к примеру требования по верстке HTML Academy.
Стандартное требование в принципе.
Здесь дефолтная обводка убирается для замены на дизайнерскую. Если вам этого делать не нужно, то никто не заставляет.
Этот момент абсолютно не спорный, когда жесткие требования к дизайну, то это обнуление надо, когда требование аутлайн — то аутлайн.
По поводу бесполезности: непонятна ваша критичность.
В любом случае перед использованием чего-либо надо в достаточной мере ознакомиться, дабы не выстрелить себе в ногу.
Фокус это состояние, а аутлайн это свойство, которое можно заменить другим более подходящим свойством, если это нужно.
Взять к примеру требования по верстке HTML Academy.
Доступность
Д17. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
Активное состояние интерактивных элементов при нажатии или фокусе с клавиатуры должно оставаться либо встроенным браузерным, либо быть равноценно переназначено. В таком случае по интерактивным элементам сайта можно передвигаться с клавиатуры клавишей Tab и видеть каждый текущий элемент в активном состоянии.
Стандартное требование в принципе.
Здесь дефолтная обводка убирается для замены на дизайнерскую. Если вам этого делать не нужно, то никто не заставляет.
Этот момент абсолютно не спорный, когда жесткие требования к дизайну, то это обнуление надо, когда требование аутлайн — то аутлайн.
По поводу бесполезности: непонятна ваша критичность.
В любом случае перед использованием чего-либо надо в достаточной мере ознакомиться, дабы не выстрелить себе в ногу.
0
Крутая статья! Узнала много интересных вещей. Картинки паддинг боттом практичная штука,
автофил надо пересматривать будет, но хорошо, что сразу есть способ решения.
P.S. outline: none пока обнулять не буду.
автофил надо пересматривать будет, но хорошо, что сразу есть способ решения.
P.S. outline: none пока обнулять не буду.
+1
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Кастомный подход для нормализации и сброса стилей (custom-reset.css)