Comments 42
Как правильно верстать кликабельное содержание статьи на Хабре в 2022 году?
Неплохо, ждать 2-й части?
Автор не знает как работают скриниридеры...
Подскажите нормальную статьи или видео на русском , про то как считаются все эти max-height , min-height от родителей если у тех например только max-height ,а ты для детей ставишь процентные соотношение и т.д.
Что может быть проще?
Все что max-*/min-* это про максимальное/минимальное значение. На родителей и их значения пофиг. Главное чтобы значение не было указано больше/меньше (если min). То что у вас пересчитается, если было задано в процентах или иных не постоянных величинах, в пиксели в итоге вы можете увидеть в девтулс во вкладке computed. Просто сами попробуйте и все увидите.
ну это же не так
вот документация http://www.w3.org/TR/CSS21/visudet.html#min-max-heights
в ней говорится "max-height on a child, it is a percentage of the parent's actual height"
Вот вам пример когда ребенок превышает max-height родителя , даже имея min-height:0; (в режиме flex)
sandbox: (красный прямоугольник это как раз ребенок который неверно считается)
https://play.tailwindcss.com/bvfy0kF5Nz
Не всё так просто как вы думаете.
Надо написать что-то подобное, спасибо за идею.
Мне лично очень не хватило примеров того, во что примеры HTML отрисуются. Если я не знаю некоторые теги - было бы здорово визуально сразу увидеть результат их применения, без этого статья "для чтения" не пдоходит, скорее это больше похоже на "учебник на метаните"
Отредактирую позже, сделаю визуализацию. Спасибо за обратную связь!
Довольно странный комментарий, во первых большинство тэгов отрисуется так как вы в стилях укажите. Во вторых, аы же читаете в браузере откройте отладчик/песочницу и поиграйтесь.
а мне лично не хватает аналога p тега , чтобы он не имел отступы маргены , так же только для текста и имел 100% ширины.
Тэг <p> и так имеет 100% ширины и отступы сверху и снизу. Или вам нужны отступы по бокам, но зачем? Может быть подойдут <blockquote> или <pre> ?
как раз P для обзацев т.к. имеет отстоп.
а нужен клон P , но без отступов
Ну так заведите класс. Будет что-то вроде
<p class="without-margins">А в стилях укажите
.without-margins {
margin: 0;
}Бессмысленно плодить теги для одного и тоже с разными стилями, для этого и был придуман CSS.
Тогда почему <span> не подходит?
Уже привык в стилях абзацев первым свойством писать
```
.any-paragraph-class {
margin: 0;
&:not(:last-child) {
margin-bottom: 1em; // или сколько вам надо
}
}
```
Так же можно глобально это тегу p задать - но это выстрел в ногу имхо - я не припомню, когда верстал сайты без визивиг-контента (отступы по-умолчанию, схлопывание маргинов не просто так) - но для всяких лендингов подойдет наверное.
Годненько. Но это только азы.
По статьи мне кажется вы очень плохо раскрыли section article где когда испльзовать, ком в ком может быть
Спасибо за адекватную критику! Есть уже пара задач по доработке материала (либо раскрытие этих тем в следующих).
Ещё тег aside мне показался не раскрытым, говорится что он может использоваться не только для боковой панели, но и для других целей. Но каких?
А так в целом статья понравилась, я относительно новичок в этом деле, поэтому помогла устаканить некоторые вещи в голове
Aside - это про семантику, а не оформление, им оформляется "контент, не связанный напрямую с контентом страницы" (заключенный в main). И как всякая семантика, это отчасти вкусовщина - каждый сам решает, что заключить в этот тег. Там могут быть, например, "ссылки по тему", "см. больше..." и т.п. Визуально это может выглядеть как угодно - боковая панель, вставки в основном контенте, раздел внизу между основным контентом и подвалом (footer), да хоть бы и отображаться до основного контента, например, если это disclaimer.
На картинке к статье, в которой рассказывается, как правильно верстать в 2022 году, изображён закрытый одиночный тег meta.
К сожалению, дизайнерам обычно очень не нравятся всякие нативные браузерные элементы типа <progress>, т.к. они в каждом браузере выглядят по-своему и не так, как задумано. Так что приходится реализовывать своё.
Супер, очень классная статья. Мне всегда очень нравилась идёт семантики HTML, но судя по всему фронтендерам и без них хорошо живётся. Молодец если все знаешь и верстаешь правильными тэгами, но качественных улучшений от этого не будет. Немного повысится чистота кода, хз насколько оправдано учить все это. Если ты используешь БЭМ, разницы никакой нет
У нас теперь же скоро правильно верстать - на верстаке 😁
Спасибо за статью. Мне как начинающему в этом деле, все доступно описано. Жду продолжения!
Хорошо, но при чем тут 2022?)
Как правильно верстать в 2022 году. Часть 1