Заметка о полезных возможностях современного CSS

[Expany]

Все круто и красиво, но песочниц с примерами на каждый селектор, не хватает

[aio350]

Действительно, поправил. Спасибо, друг.

[nin-jin]

Лирическое отступление: невидимый контент

В вашем масляном масле столько масла, что у меня аж жир из монитора потёк.

[FenixF]

А что не так с этим блоком? Автор в паре предложений объяснил разницу и дал листинг кода. Возможно, жир на мониторе был до начала чтения статьи :)

[nin-jin]

Может быть то, что из него можно убрать 90% мусора и результат не поменяется? Автор просто налепил всего подряд, совершенно не понимая, что делает.

[slava_k]

Интересно, наступит ли такое время, когда CSS-селекторы станут просто XPath путями?

[ivan386]

А чем XPath лучше?

[lagudal]

из новых единственное чего жду это :has() — реально полезная штука, позволит сильно упростить то что сейчас можно решить только с js.

[fazdendev]

В дополнение к данной статье хочу сказать про малоизвестную, но полезную CSS функцию image-set. Она является аналогом тега picture в HTML и позволяет выбрать несколько источников для изображения background-image.

Пример:

.div { background-image: image-set( "puppy.webp" type("image/webp") 1x, "puppy2x.webp" type("image/webp") 2x, "puppy.png" type("image/png") 1x, "puppy2x.png" type("image/png") 2x ); }

[letrybaz]

Добавлю важное про вложенные css селекторы.
Все очень боятся символа &(мол в препроцессорах он не нужен), а зря.
Писать & обязательно только в одном случае - когда перед селектором отсутствуют управляющие символы @ : . > ~ + # [ *. Этот случай - селектор по имени тега:

form {
  & input {...} /*вот этот случай, селектор тега - & нужен*/
  > input {...} /*здесь & не нужен, так как есть управляющий символ '>' */
  .button {...} /*здесь тоже всё хорошо, есть '.' */
  .info {
    width: 100%;
    .error {
      border: 1px solid red;
      :hover {...} /*очень удобно(помним про управляющий символ, здесь ':')*/
       @media (min-width: 780px) {...} /*можно даже с медиа запросами*/
    }
    /*и так далее*/
  }
}

Всё узнал отсюда

P.S опытным путём выяснил что символ & для Firefox совсем не нужен для понимания вложенности, так что поддержка того же самого для остальных браузеров вопрос времени