Что такое innerHTML и почему иногда его лучше не использовать

innerHTML — это встроенное свойство в JavaScript, которое позволяет работать с содержимым HTML-элементов. Проще говоря, с его помощью можно получить или изменить всё, что находится внутри HTML-тега. Это включает текст, другие теги, атрибуты и так далее.

Пример:

// Берём элемент <div> со страницы
const div = document.getElementById("example");

// Устанавливаем его содержимое
div.innerHTML = "<p>Привет, я новый текст!</p>";

Теперь в <div id="example"> появится <p>Привет, я новый текст!</p>. Всё, что ранее было внутри тега <div> (если что-то было), заменяется.

Чем удобен innerHTML

— Просто и быстро. Позволяет одной строкой добавить в элемент сложный HTML-код.
— Динамичность. Можно генерировать HTML-контент программно, например, на основе данных из API.

const list = ["яблоко", "банан", "апельсин"];

document.getElementById("list").innerHTML = list.map(item => `<li>${item}</li>`).join("");

После выполнения в элементе с id "list" появится список:

<ul>

  <li>яблоко</li>

  <li>банан</li>

  <li>апельсин</li>

</ul>

Почему же тогда в некоторых случаях лучше НЕ использовать innerHTML?

1. Уязвимость для XSS-атак. При работе с innerHTML вы буквально вставляете HTML-код внутрь страницы. Если этот код генерируется на основе сторонних данных (например, от пользователя или с сервера), есть риск внедрения вредоносного кода.

2. Удаление старого содержимого. innerHTML полностью перезаписывает всё, что было внутри элемента. Если в элементе были установлены события (например, через addEventListener), они будут сброшены.

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

Чем же тогда заменить её?

1. Используйте textContent, если нужен только текст. Если нужно только поменять текст внутри элемента, а HTML не нужен, то textContent — ваш друг. Он безопасен, потому что не интерпретирует HTML.

2. Используйте insertAdjacentHTML, чтобы добавить HTML без перезаписи контента. insertAdjacentHTML позволяет вставлять HTML в конкретное место относительно элемента, не перезаписывая всё содержимое.

3. Создавайте элементы через DOM-методы для сложной логики. Вместо innerHTML можно использовать методы вроде document.createElement и appendChild.

Если всё же решитесь использовать innerHTML, убедитесь, что данные, которые вы вставляете, безопасны и тщательно проверены.

#простымисловами #html #javascript

Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Подробности.

#javascript #html

Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

Кто понял, тот понял. А кто всё ещё не может разобраться о чём идёт речь и что это за @scope вообще такой, то скорее переходите по ссылке и читайте подробности этого подхода стилизации HTML-элементов.

#фронтенд #html #css

Как HTML и CSS влияют на доступность

Многие разработчики считают, что доступность веб-контента обеспечивается исключительно с помощью aria-атрибутов и что без них достичь доступности невозможно. В действительности, aria-атрибуты действительно важны, но столь же значимы для создания доступных интерфейсов и элементы HTML и CSS.

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

#html #css #accessibility

Скрытые возможности элемента input

Элемент input в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

Pug: HTML без скобок, с шаблонами и миксинами

Если вы устали от громоздкого HTML и хотите писать разметку быстрее и чище, Pug может стать отличным решением. Это препроцессор, который превращает лаконичный код без угловых скобок в полноценный HTML. В статье вы найдёте:

— Основы синтаксиса Pug: как писать разметку без закрывающих тегов и угловых скобок.
— Работу с шаблонами и миксинами: как переиспользовать код и создавать более модульную структуру.
— Преимущества и недостатки: когда стоит использовать Pug, а когда лучше обойтись без него.
— Инструкции по установке и компиляции: как начать работать с Pug на вашем проекте.

А вы используете Pug в своих проектах или нет?

#фронтенд #html #pug

Первый сайт «своими руками»: пошаговая инструкция без фреймворков

Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.

А вы когда последний раз вручную писали сайт без сборщиков?

#фронтенд #html #css

#простымисловами: Что такое srcset и зачем он нужен

Обычный атрибут src в теге <img> указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.

Вот тут и приходит на помощь srcset. С его помощью можно указать несколько вариантов одного изображения, а браузер сам выберет нужное под конкретный экран.

<img 
  src="image-400.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Пример адаптивного изображения">

🔍 Что здесь происходит:

— src — запасной вариант на случай, если браузер не поддерживает srcset.
— srcset — список изображений с их шириной.
— sizes — помогает браузеру понять, сколько пикселей реально нужно на экране.

В результате:

📱 На телефоне загрузится лёгкое изображение.

💻 На ноутбуке — среднее.

🖥 А на 4K-мониторе — чёткое и большое.

❗️ Важно: src обязателен, так как в браузере пользователя может отсутствовать поддержка srcset.

#фронтенд #html

Как сделать кастомный Semi Donut Chart с помощью SVG

Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.

Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.

#vue #html #charts

Что такое enterkeyhint и зачем он нужен?

На смартфонах и планшетах клавиша Enter на виртуальной клавиатуре по умолчанию просто показывает «Enter» или «Go». Но иногда полезно дать пользователю понять, что именно произойдёт при нажатии: отправится форма, будет выполнен поиск, добавится новая строка…

Атрибут enterkeyhint — это способ подсказать браузеру, какую подпись показать на клавише Enter на экранной клавиатуре.

Работает в <input> или <textarea>.

Пример:

<input type="text" enterkeyhint="search" /> //На экранной клавиатуре вместо обычного Enter отобразится «Поиск».

Какие значения можно указать:

— enter — стандартная клавиша Enter
— done — завершить ввод
— go — перейти
— next — перейти к следующему полю
— previous — вернуться к предыдущему полю
— search — выполнить поиск
— send — отправить

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

#html #простымисловами

Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

#фронтенд #css #html

JavaScript, отдохни! Делаем интерактивные вещи на HTML и CSS

Продолжаем делиться современными возможностями HTML и JS. Здесь собрали ещё пачку кейсов, где вы можете сократить количество JS-кода и облегчить свой сайт.

#javascript #html #css

Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ

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

Смогли бы повторить?

#html