👩‍💻 Можно ли одной строкой сбросить все CSS-свойства элемента?

Свойство all позволяет одновременно сбросить или переопределить почти все CSS-свойства элемента. Это удобно, когда нужно убрать влияние внешних стилей и начать оформление с чистого листа.

Основные значения:
• initial — сбрасывает свойства к значениям по умолчанию;
• inherit — наследует все свойства от родителя;
• unset — сочетает initial и inherit в зависимости от свойства;
• revert — возвращает стили, заданные браузером или пользовательскими стилями.

all часто используют при создании собственных компонентов, кнопок и виджетов, чтобы быстро избавиться от нежелательных стилей без перечисления каждого свойства отдельно.

📣 Code Ready | #свойство

URL.canParse() — нативная проверка URL без try...catch!

При работе с пользовательскими данными часто требуется проверить, может ли строка быть разобрана как URL. Распространённый подход — использовать конструктор URL внутри try...catch, поскольку при некорректной строке он выбрасывает исключение:

try {
  new URL(value);
} catch {
  console.log('Не удалось разобрать URL');
}

Современный Web API предоставляет более удобный способ — статический метод URL.canParse(). Он проверяет, может ли строка быть разобрана по алгоритму URL Standard, и возвращает true или false без использования try...catch:

URL.canParse('https://example.com');
// true

URL.canParse('not-a-url');
// false

Для относительных адресов необходимо передать базовый URL:

URL.canParse('/users/1', 'https://example.com');
// true

Без базового URL такой вызов вернёт false, поскольку относительный адрес невозможно разрешить без контекста.

Если нужен только результат проверки, URL.canParse() — оптимальный выбор. Если после проверки требуется объект URL, удобнее сразу использовать URL.parse(), чтобы не выполнять разбор дважды:

const url = URL.parse(value);

if (url) {
  console.log(url.hostname);
}

URL.parse() возвращает объект URL при успешном разборе и null при ошибке. Например, для проверки пользовательского ввода:

const input = document.querySelector('input');

if (!URL.canParse(input.value)) {
  input.setCustomValidity('Введите абсолютный URL');
} else {
  input.setCustomValidity('');
}

Если приложение допускает относительные адреса, передайте document.baseURI вторым аргументом. Важно понимать, что URL.canParse() проверяет только возможность разбора строки. Метод не проверяет существование ресурса, доступность сервера, допустимость протокола для приложения или безопасность адреса.

Например, URL с протоколом javascript: или data: может успешно пройти проверку. Если приложение принимает только HTTPS, протокол необходимо проверить отдельно:

const url = URL.parse(value);

if (url?.protocol === 'https:') {
  // дальнейшая обработка
}

Перед выполнением запроса удобно сразу получить объект URL:

const url = URL.parse(apiUrl, document.baseURI);

if (!url || !['http:', 'https:'].includes(url.protocol)) {
  throw new Error('Недопустимый адрес API');
}

await fetch(url);

document.baseURI учитывает базовый адрес документа, включая значение элемента <base>. Проверка протокола также не защищает от SSRF, поэтому на сервере необходима дополнительная валидация адресов.

🔥 URL.canParse() подходит для случаев, когда нужна только проверка возможности разбора URL, а URL.parse() — когда требуется сразу получить объект URL. При использовании этих методов в проектах с поддержкой старых браузеров и устаревших WebView следует учитывать совместимость.

📣 Code Ready | #практика

Вышла интересная статья на Хабре: «TAMA-90: тамагочи из 90-х своими руками на JavaScript»!

В этой статье:
• Показывается, как создать современную версию тамагочи на чистом JavaScript без фреймворков и сторонних библиотек;
• Разбирается архитектура проекта, работа с Canvas, localStorage, игровой логикой, случайными событиями и мини-играми;
• Объясняется, как программно рисовать пиксельных питомцев, организовать сохранения, коллекцию персонажей и систему развития без готовых спрайтов.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

👩‍💻 Правильный способ расшифровать аббревиатуры!

Тег <abbr> используется для обозначения аббревиатур и сокращений. Благодаря атрибуту title можно указать их полную расшифровку, которую браузер обычно показывает при наведении курсора.

Чаще всего <abbr> используют для:
• технических терминов (HTML, CSS, API);
• названий организаций;
• единиц измерения;
• общепринятых сокращений.

Для максимальной пользы рекомендуется всегда указывать атрибут title с полной расшифровкой сокращения.

📣 Code Ready | #атрибут

🤔 Путь HTML/CSS — полезный ресурс для изучения верстки!

Здесь разобраны основы создания веб-страниц: структура HTML-документа, теги, семантика, CSS-свойства, блочная модель, позиционирование, формы, адаптивная верстка и работа с реальными макетами. Нужно не просто читать материал, а выполнять задания: сверстать блоки, меню, формы, вкладки и полноценную страницу по макету.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Тег для рисования графики и анимаций прямо в браузере!

Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.

Он используется для:
• интерактивных графиков и диаграмм;
• анимаций и визуальных эффектов;
• браузерных игр;
• обработки изображений;
• 2D- и 3D-графики через Canvas API и WebGL.

Для работы с холстом обычно получают один из контекстов:
• 2d — обычная двумерная графика;
• webgl — аппаратно ускоренная 3D-графика.

Элементы, нарисованные внутри <canvas>, не являются отдельными DOM-элементами — браузер воспринимает их как единое изображение

📣 Code Ready | #атрибут

Почему CSS-переменные раньше не анимировались?

Многие пытаются сделать так:

.box {
  transition: --angle .3s;
}

Но обычная CSS-переменная — это просто строка. Браузер не знает, как плавно перейти от 0deg к 180deg, поэтому анимация не работает.

Регистрируем переменную через @property.

@property --angle {
  syntax: "<angle>";
}

Теперь браузер знает тип значения и умеет интерполировать его.

Остаётся использовать переменную как обычно.

.box {
  transform: rotate(var(--angle));
}

И менять её значение.

.box:hover {
  --angle: 180deg;
}

Теперь поворот происходит плавно без JS.

🔥 @property превращает CSS-переменные из обычных строк в типизированные значения, которые можно валидировать и анимировать.

📣 Code Ready | #совет

Крутая статья недавно вышла на Хабре: «Заменяем JavaScript с помощью HTML и CSS»

В этой статье:
• использование `:has()` для управления состояниями компонентов;
• создание модальных окон и подсказок через Popover API;
• валидация форм с помощью встроенных возможностей браузера;
• стилизация сложных интерактивных состояний только средствами CSS.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM!

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

const container = document.createElement('div');
const text = document.createTextNode('Hello');

container.append(text);

const tail = text.splitText(2);

console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']

Для рендеринга это обычно не имеет значения:

console.log(container.textContent);
// Hello

Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.

Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:

container.normalize();

console.log(container.childNodes.length);
// 1

console.log(container.firstChild.data);
// Hello

Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла.

При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.

console.log(tail.parentNode);
// null

Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.

Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.

<p>Hello <strong>DOM</strong>!</p>

Здесь текст до и после <strong> останется в разных Text-узлах и после нормализации.

Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:

const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');

paragraph.replaceChildren(text);

text.splitText(5);

console.log(paragraph.childNodes.length);
// 2

paragraph.normalize();

console.log(paragraph.childNodes.length);
// 1

🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.

📣 Code Ready | #практика

👩‍💻 Блок для видео, аудио и прочего контента!

Блок для вставки на страницу контента в сторонних форматах, которые браузер отображает с помощью плагинов. Чаще всего используется для видео- и аудиоконтента. Отображение вставленного контента будет зависеть от атрибутов тега <embed>, типа загружаемого контента и плагинов, установленных в браузере.

Атрибуты:
• src — ссылка на загружаемый контент;
• type — тип загружаемого контента в формате MIME. Тип указывать не обязательно, но желательно. Так браузер будет точно знать, какой плагин использовать для отображения контента;
• width — ширина в пикселях;
• height — высота в пикселях.

<embed> не заменяет универсальное решение для всех типов контента. Например, для видео лучше использовать <video>, для аудио — <audio>, а для документов чаще применяют <iframe>.

📣 Code Ready | #атрибут

Проверяй возможности браузера прямо в CSS!

Многие делают такие проверки через JavaScript:

if ("container" in document.documentElement.style) {
  // включаем новую логику
}

Но CSS уже давно умеет сам проверять поддержку возможностей.

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

Это особенно полезно при постепенном внедрении новых CSS API.

Например, можно безопасно добавить современные возможности:

@supports (interpolate-size: allow-keywords) {
  .accordion {
    interpolate-size: allow-keywords;
  }
}

Старые браузеры просто проигнорируют этот блок.

Для больших проектов это позволяет мигрировать постепенно.

@supports not (selector(:has(*))) {
  /* fallback */
}

🔥 @supports позволяет внедрять новые CSS-возможности без JS-проверок и не ломать поддержку старых браузеров.

📣 Code Ready | #совет