Как стать автором
Обновить

Комментарии 17

Круто. В идеале хочу совсем уйти от js на простеньких сайтах.

Для старых браузеров можно собрать аналог details на css используя checkbox, label, div и селектор :checked.


Аналогично если не хочется Javascript использовать для автозакрывающихся details можно собрать аналог на radio, label, div и том же селекторе :checked.

Да, вы правы, ваш вариант — это что-то среднее между details и между кодом на JavaScript! И в ряде случаев :checked это идеальный вариант!)
Но семантика при этом опускается…
Супер, спасибо за статью!
А я и не знал про тэги такие, спасибо :)

Спасибо за статью, но некоторые примеры неверны, хотя в Codepen все верно


details[open] > summary:before {
  transform: rotateZ(90deg);
}

а должно быть


details[open] > summary:before {
  transform: scale(1, -1);
}
Спасибо! Поправил!)
border-radius: 8px;

Вот с этого-то момента Вы всё и испоганили.

В остальном спасибо за статью, открыл для себя новые возможности HTML5.
И вам спасибо! Но поясните, чем вам не угодил border-radius? или вам не понравился px? надо было в %?;)
Богомерзкие скругления везде. Это выглядит игрушечно и нетехнологично. Да, субъективно, но и комментарии мы пишем от своего лица, так что имеем право.
понятно) это действительно субъективно, кому-то нравится, а кого-то раздражает…
А что вы понимаете под словом «нетехнологично»?
Лично мне не нравятся px, особенно там, где этот размер не привязан, скажем, к изображению в px.
А чтобы раскрытие было плавно можно сделать?
Если вы про плавное изменение высоты, то это тянет на отдельный пост на хабре)

Способов много, при этом идеального нет, у каждого свои плюсы и минусы…

Один из самых простых и часто используемых, использовать max-height.

CSS:
details summary ~ div{
  overflow: hidden;
}
details[open] summary ~ div{ 
  animation: sweep 2s ease-in-out;
}
@keyframes sweep {
  0%    {max-height:0;}
  100%  {max-height:2000px;}
}

HTML:
<details>
  <summary>Покажи-скрой меня</summary>
  <div>Скандинавская мифология — мифология древних скандинавов.</div>
</details>
Почему так, а не через transition?
details summary ~ div{
  max-height: 0;
  overflow: hidden;
  transition: all 2s ease-in-out;
}
details[open] summary ~ div{ 
  max-height: 2000px;
}

Вроде попроще выглядит. Или там какие-то подводные камни?
1. Если использовать animation, то max-height ставится и снимается во время анимации. В вашем случае, после окончания анимации max-height остается, а текста может быть больше чем 2000px.
2. Ваш пример не работает.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории