Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 34
Большое спасибо за статью. Сам давно использую кастомный reset, но некоторые фишки стали откровением.
У вас ошибки в файле. Например, в статье все верно:
А в файле:
Или я чего-то не понимаю?
blockquote,
q{
quotes: none;
}А в файле:
blockquote,
q,
quotes: none;
}
Или я чего-то не понимаю?
Кину в закладки. Мерси!
Статья любопытная, натолкнула на некоторый мысли.
Но спорных моментов просто море. Перечислю только то, что бросается в глаза навскидку.
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;
}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;
}
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;
}
box-sizing: случаи были.- Фон для боди:
htmlнаследует фон. Уже привык что хтмлю ничего не пишут. а так вообще не принципиально. мб подкинете инфы на эту тему? line-height: даfont-familyни разу неюзабельная для меня штука. почитаю о шрифтах, мб поправлю.i, bтоже остаются семантическими. но маловесомыми.
Как можно было заметить,iочень часто используют для иконок.
bчасто используют для выделения текста, не только болдном, но и цветом. и иногда используют для декора.small. здесь в любом случае размер шрифта надо задавать руками(по дизайну).- Про селект, это тот случай, когда можно ненужное удалить.
Мне в последнее время не попадаются селекты, где можно оставить его с родной стрелкой. - .visually-hidden: класс нужный, и раз он уже есть, то чтоб скрывать инпуты он отлично подходит. да было бы хорошо, если б хоть и вашим способом скрывали, лишь бы не дисплей ноном.
- Футер: здесь как посмотреть.
не надо писать для html стили. и в айфоне 10 при viewport-fit=cover в хроме, футер до низа экрана немного не доставал. и были другие приколы с % на девайсах. не помню точно что именно уже.
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%.
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%.
Если да, то когда зайдет на сайт блок с 50 тегов(с дефолтным bz), то переопределять прийдется 50 тегов.Я имею в виду, что такого случая не будет с вероятностью 99,(9)%.
Раньше (до флексов, гридов, единиц vw и прочих благ цивилизации) content/padding-box использовались относительно часто — пригождался для некоторых контейнеров в лейауте. Сейчас они реально не нужны почти никогда. Исключения составляют некоторые очень специфические ситуации, и всегда речь идет об 1-2 элементах-обертках, внутри которых нужно вернуться обратно к человеческому border-box. Какие 50 тегов? Окститесь.
Насчет font-family — как это не пригождался? o_O
Неужели вы предлагаете пользоваться исключительно свойством font? Это плохая практика. Или может я что-то недопонимаю.
Я заинтересовался вопросом фона html/body, полез в спеку и действительно там такое написано: www.w3.org/TR/css-backgrounds-3/#body-background
И написано довольно давно (проследил историю документа до 2012 года, дальше лень; протестировал в IE11 — работает).
С другой стороны, хотя такое поведение и определено в стандарте, и довольно логично… Лично мне полагаться на него как-то стремновато — ведь его легко поломать. Если что-то можно определить явно, лучше определить явно, а не надеяться на косвенные механизмы.
С третьей стороны, фон страницы вообще лучше не трогать на уровне глобального ресета — это уровень ответственности конкретного сайта/приложения.
И написано довольно давно (проследил историю документа до 2012 года, дальше лень; протестировал в IE11 — работает).
С другой стороны, хотя такое поведение и определено в стандарте, и довольно логично… Лично мне полагаться на него как-то стремновато — ведь его легко поломать. Если что-то можно определить явно, лучше определить явно, а не надеяться на косвенные механизмы.
С третьей стороны, фон страницы вообще лучше не трогать на уровне глобального ресета — это уровень ответственности конкретного сайта/приложения.
Как по мне, это вообще не принципиально. Лично я не встречал браузеров, где боди был бы не белым. В этой песочнице jsfiddle только видел, от этого и решил фон добавить.
Вы встречали мб браузеры с не белым боди?
Вы встречали мб браузеры с не белым боди?
Кажется, браузеры должны подхватывать эту настройку из системы. Во всяком случае под Виндой — там есть параметр типа «фон документов». Много лет назад, в студенчестве, я ставил в системе светло-серый и все текстовые редакторы становились такого цвета. И кажется, браузеры должны тоже. Но на 100% утверждать не возьмусь, возможно, сейчас уже что-то поменялось.
Все таки. Протестил я проценты. И оказалось, что на девайсах проценты лучше чем vh. На десктопе без разницы в принципе.
На десктопе тоже есть разница, и выше я уже объяснял почему. Если на сайте есть вертикальный/горизонтальный скролл-бар, сразу появляется несоответствие 100vw/vh != 100%. И в обратную сторону: при некоторых условиях, эти единицы сами могут спровоцировать нежелательное появление скролла.
Во всяком случае, под Windows так. На Маке скролл-бар работает подобно мобильным девайсам, не отъедая пиксели от вьюпорта.
Во всяком случае, под Windows так. На Маке скролл-бар работает подобно мобильным девайсам, не отъедая пиксели от вьюпорта.
8. Я прописываю position:absolute; left:-9999%;
С прозрачностью в одном случае были свои специфичные сложности.
С прозрачностью в одном случае были свои специфичные сложности.
Попробовал решить 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% */
}Пробовал расширить по вертикали паддингом — но он должен быть разным для каждого из трех блоков, что противоречит условию задачи. Правда, про бэкграунд в условии ничего не сказано, а текст-то я выровнял. ))
направление у вас правильное
Мой вариант «в лоб»: codepen.io/anon/pen/XPWezY… лень сильно ковыряться
.
-webkit-tap-highlight-color: transparent; — убирает синее подсвечивание при клике на девайсах.
Тоже раньше всегда прописывал это правило. Но один раз забыл. Некоторое время поюзал на телефоне с этим подсвечиванием тач-а… оказалось очень удобно и к тому же нативно. Сразу видно клацнулось оно или палец жирный..)
Стилизация селектов себе дороже.
Ввёл для себя правило всеми способами уговорить оставить все интерактивные контролы нативными. В итоге они будут выглядеть так, как привыкли пользователи соответствующей оси/браузера/устройства. И браузеру легче переварить, и скринридеры наиболее адекватно отработают, и поддержка клавиатуры из коробки.
как правило, на интерективных всегда есть оформленный псевдокласс :active, и по нему видно, был клик или нет.
В селекте стилизируется сам селект, это ж не js плагин подключается. Тут просто стрелку самому надо сделать под дизайн. На сколько я знаю, на маках сильно отличается стрелка(двойная). Ну если можно оставить нативное, то это конечно хорошо.
В селекте стилизируется сам селект, это ж не js плагин подключается. Тут просто стрелку самому надо сделать под дизайн. На сколько я знаю, на маках сильно отличается стрелка(двойная). Ну если можно оставить нативное, то это конечно хорошо.
в статье объясняется, и приводится более подходящее решение.
Ховеры рисуют, чтобы было симпатично (градиентик сдвинулся, цвет стал бледнее), аутлайны нужны для того, чтобы явно говорить «ты здесь, этот элемент активный». Ваш дефолт не только бесполезный, но и вредный.
По поводу outline:
Фокус это состояние, а аутлайн это свойство, которое можно заменить другим более подходящим свойством, если это нужно.
Взять к примеру требования по верстке HTML Academy.
Стандартное требование в принципе.
Здесь дефолтная обводка убирается для замены на дизайнерскую. Если вам этого делать не нужно, то никто не заставляет.
Этот момент абсолютно не спорный, когда жесткие требования к дизайну, то это обнуление надо, когда требование аутлайн — то аутлайн.
По поводу бесполезности: непонятна ваша критичность.
В любом случае перед использованием чего-либо надо в достаточной мере ознакомиться, дабы не выстрелить себе в ногу.
Фокус это состояние, а аутлайн это свойство, которое можно заменить другим более подходящим свойством, если это нужно.
Взять к примеру требования по верстке HTML Academy.
Доступность
Д17. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
Активное состояние интерактивных элементов при нажатии или фокусе с клавиатуры должно оставаться либо встроенным браузерным, либо быть равноценно переназначено. В таком случае по интерактивным элементам сайта можно передвигаться с клавиатуры клавишей Tab и видеть каждый текущий элемент в активном состоянии.
Стандартное требование в принципе.
Здесь дефолтная обводка убирается для замены на дизайнерскую. Если вам этого делать не нужно, то никто не заставляет.
Этот момент абсолютно не спорный, когда жесткие требования к дизайну, то это обнуление надо, когда требование аутлайн — то аутлайн.
По поводу бесполезности: непонятна ваша критичность.
В любом случае перед использованием чего-либо надо в достаточной мере ознакомиться, дабы не выстрелить себе в ногу.
Крутая статья! Узнала много интересных вещей. Картинки паддинг боттом практичная штука,
автофил надо пересматривать будет, но хорошо, что сразу есть способ решения.
P.S. outline: none пока обнулять не буду.
автофил надо пересматривать будет, но хорошо, что сразу есть способ решения.
P.S. outline: none пока обнулять не буду.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кастомный подход для нормализации и сброса стилей (custom-reset.css)