Амит Шин рассказал о том, как получить позицию курсора мыши на чистом CSS — "How to Map Mouse Position in CSS".

Идея заключается в создании сетки элементов, в каждой ячейке которой задаются кастомные свойства с координатами:

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

Эти кастомные элементы затем можно использовать в любых свойствах, например, с их помощью сделать интерактивный динамический фон и т.п. Самый большой недостаток этого трюка — он не работает на мобильных устройствах.

#css #trick

https://css-tricks.com/how-to-map-mouse-position-in-css/

Бен Фрейн рассказал о новом черновике спецификации вложенности в CSS — "CSS Nesting – the last piece of the puzzle".

Недавно Адам Аргайл представил сообществу черновик спецификации, над которым он работает вместе с Табом Аткинсом. В этой спецификации описывается синтаксис вложенности, который похож на аналогичный синтаксис из SASS и LESS. Основное отличие — нужно использовать @nest при размещения вкладываемого селектора в качестве потомка:

.selector {
    width: 100%;
    @nest .other-selector & {
        color: #333;
    }
}

На данный момент черновик ещё не стабилизировался, и синтаксис описания вложенности скорее всего поменяется, также он пока не поддерживается ни в одном браузере. Бен пишет, что через пару лет все браузеры будут поддерживать вложенность в CSS, и для многих проектов препроцессоры перестанут быть актуальны.

#css #proposal

https://benfrain.com/official-css-nesting-the-last-piece-of-the-puzzle/