mefody.dev

Адаптивный тёмный режим

Apple придумали шикарное (без шуток, я в восторге). Браузер же и так знает, какие части HTML из каких пикселей состоят. Умеет отделять картинки от теней, текст от фона и так далее. Вот они и добавили в Safari (WebKit) тёмную тему, которую делает не разработчик, а браузер.

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

Хотите, чтобы браузер не своевольничал? Добавьте свою тёмную тему, не будет своевольничать. Или <meta name="color-scheme" content="light only">, но оно пока не работает.

Почему я в восторге? Во-первых, это лучше, чем всякие браузерные расширения, которые делают похожее криво и не очень безопасно. Во-вторых, в мире очень много сайтов из прошлого без команды разработки, где тёмная тема не появится уже никогда, а пользоваться ими всё ещё будут годами. В-третьих, это прям свежо. Настоящая полезная функция не для разработчиков, а для пользователей, которая не делает мучительно больно разработчикам (iPhone Duo, смотрю на тебя).

https://webkit.org/blog/18541/introducing-adaptive-dark-mode/

За пределами вьюпорта: знакомьтесь, Site Seeing. Ахмад Шадид сделал инструмент, который показывает дизайн в условиях с необычными размерами вьюпорта, а не только на мобильных и десктопе. Среди режимов: полное окно браузера, открытые DevTools, вертикальные вкладки, они же вместе с DevTools, увеличенный масштаб, телефон в горизонтальной ориентации и стили для печати. Пригодится дизайнерам, менеджерам и разработчикам, чтобы ловить сломанную вёрстку. #tools #layout

https://ishadeed.com/article/beyond-the-viewport/

Явная вложенность

Если вы уже начали пользовать нативным CSS Nesting, то Рома Комаров рекомендует всегда явно писать & во вложенном селекторе. Потому что когда-нибудь вы напишете вот такие стили.

button {
  background: #111;

  :hover,
  :focus-visible {
    background: #444;
  }
}

А они почему-то не применяются.

Узнал, что есть целое правило в stylelint — selector-nested-pattern. Чтобы машина не давала ошибиться в таких случаях ну совсем.

https://blog.kizu.dev/explicit-nesting/