В новый Google Chrome v120 встроили опцию - теперь при дебаге можно не заходить в код из node_modules - то есть, пропускать сторонние библиотеки. Также можно указать свои исключения.

По умолчанию опция включена, можно отключить.

#chrome #debug

На днях Google подарил всем Speculation API.

Позволяет предварительно загрузить и даже зарендерить любой ресурс:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Разработчик может указывать браузеру загрузить в фоне страницу, на которую пользователь с большой вероятностью перейдет. В результате она затем открывается почти мгновенно (VitePress так делает сам по умолчанию, кстати, для следующей статьи)

Наиболее эффективно для SSR (во всех смыслах) и MPA сайтов. SPA от этого сильно пользы не получат, потому как и так быстрые при переходах по сайту.

Работает в Chrome и MS Edge

Пользователи с медленным или платным интернетом аплодируют стоя.

#google #chrome #speculationapi

В Chrome 130 появился бэджик scroll на скролящихся элементах

По-моему, очень полезная штука. Порой долго ищешь по дереву, что скролится.

P.S. Такое ощущение, что как только MS Edge пересел на Chromium, сразу появилась конкуренция, и браузеры стали активно развиваться.

#chrome

Иногда стоит заглядывать сюда и убивать монстров (стартовый проект на Vue 3 в CodeSandbox)

icones.js немного реабилитирована

#tip #chrome

Дожили

В Chrome 135 появилась возможность стилизовать нативный <select>

Теперь сайт Аэроэкспреса пофиксят...

#chrome #css

Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: _Highlight;
      color: _HighlightText;
    }
  }
}

Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

За долгие годы у меня было несколько миграций с браузера на браузер. Сейчас Chrome, перед ним были Vivaldi и Brave, и вот думаю об Edge, потому что Chrome ну что-то прям сильно часто стал не показывать то, что нормально показывает Edge.

Вообще переход на Chromium у MS был очень грамотный шаг

Embrace, extend, and extinguish

#chrome #ms

В крайнем Chrome (137) появился if для CSS

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark { --color: black; }
.light { --color: white; }

#chrome #css