В новый 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 Canary уже тестируются CSS custom functions

@function --negate(--value) {
    result: calc(-1 * var(--value));
}

:root {
  padding: --negate(1px);    /* = -1px */
}

Пользовательскую функцию можно рассматривать как расширенное пользовательское свойство, которое вместо замены одним фиксированным значением вычисляет значение замены на основе параметров функции и значений пользовательских свойств в момент ее вызова.

Интересно, что внутрь тела этих функций можно ставить, например, @media

Через три года в GitLub-е опять будут переписывать свою дизайн систему. Хочешь снизить прибыль компании и обеспечить фронтендеров большой зарплатой на много лет вперёд - используй Atomic CSS.

#css #chrome #gitlab

А вы знали, что в Chrome уже есть LLM - Gemini Nano? И что в определенных dev версиях ее можно уже запрашивать из js по API?

А в последней 134-ой версии браузера для 1% пользователей она уже в тестовом режиме используется как антискам-бот:

появилась возможность использования большой языковой модели для определения мошеннических страниц по их содержимому. ИИ-модель выполняется на стороне клиента, но в случае выявления подозрений на сомнительный контент, выполняется дополнительная проверка на серверах Google;

#ai #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

В последней версии Chrome наконец появилась LLM - Gemini nano с API Summarizer с соответствующим функционалом

Модель скачивается на комп пользователя по требованию, весит пару гигов, требует 4Gb видеопамяти, работает только на десктопах

#ai #chrome