Рубрика: JavaScript, CSS, HTML

Работа с датами в JavaScript: типичные ошибки и правильные решения (JavaScript)

Объект Date в JavaScript — базовый инструмент для работы с временем, но в нём скрыто несколько неочевидных особенностей. Ниже — частые ошибки и способы их избежать, с конкретными примерами кода. Ошибка 1: вызов Date() без new В чём проблема. Если написать const d = Date(), получится не объект даты, а строка с текущим временем. Такой результат нельзя использовать для вычислений или извлечения […]

Загрузка...
Просмотров: 8 Читать статью

border-radius: скругление углов (CSS)

border-radius задаёт радиус скругления для углов элемента. Ниже — варианты использования с готовыми HTML+CSS, которые можно сразу открыть в браузере. Одинаковое скругление для всех углов Одно значение применяется ко всем четырём углам: html <div class=»box-all»></div>   <style> .box-all { width: 200px; height: 100px; background: #3498db; border-radius: 16px; } </style> Скругление только одного угла Используют отдельные […]

Загрузка...
Просмотров: 9 Читать статью

margin: внешние отступы и схлопывание (margin collapse) — как его избежать (CSS)

Схлопывание margin (margin collapse) — это когда вертикальные отступы двух соседних блоков не складываются, а «схлопываются» в один — берётся больший из двух. Это не баг, а часть спецификации CSS, но именно из‑за него часто «ломается» верстка: отступы получаются меньше ожидаемых, элементы прилипают друг к другу, а при масштабировании всё едет. Где вообще бывает схлопывание Оно работает только для […]

Загрузка...
Просмотров: 11 Читать статью

Fetch API в JavaScript: делаем HTTP‑запросы и обрабатываем ответы (JavaScript)

Fetch API — это встроенный в браузер способ делать HTTP‑запросы. Не нужно подключать библиотеки: просто вызываешь fetch(), передаёшь URL и (опционально) настройки, получаешь промис с ответом. Дальше разбираешь тело ответа (JSON, текст, Blob и т. д.) и работаешь с данными. Минимальный GET‑запрос Самый простой запрос: js fetch(‘https://api.example.com/data’) .then(response => { if (!response.ok) { throw new Error(`Ошибка HTTP: ${response.status}`); […]

Загрузка...
Просмотров: 11 Читать статью

Область видимости в JavaScript: разбираем var, let и const на примерах (JavaScript)

Область видимости говорит, где в коде переменная «живёт» и где её можно использовать. Если не учитывать правила для var/let/const, код будет выдавать странные значения или падать с ошибками. Дальше — только факты и примеры, которые можно сразу проверить. var: живёт по функции, всплывает, разрешает повтор Что это значит на практике: Виден во всей функции, блок […]

Загрузка...
Просмотров: 11 Читать статью

vw и vh: размеры относительно экрана и проблема «прыгающих» отступов (CSS)

vw и vh — это единицы в CSS, которые считают размер от размера окна браузера. 1vw = 1% от ширины окна. 1vh = 1% от высоты окна. Пример: на экране шириной 1000 px значение 50vw будет равно 500 px. На экране 400 px — 200 px. Их используют, чтобы элементы масштабировались вместе с экраном. Но из‑за этого появляются проблемы: горизонтальный скролл, «прыгающие» отступы, […]

Загрузка...
Просмотров: 13 Читать статью

Единицы em и rem: относительные размеры и масштабирование интерфейса (CSS)

rem и em — это просто способ задавать размеры не в жёстких пикселях, а «относительно чего‑то». Это нужно, чтобы не править 100 мест в CSS, если надо сделать всё крупнее (или если пользователь сам увеличил шрифт в браузере). Что такое rem rem всегда считает от html. Один раз задал font-size на html — и все […]

Загрузка...
Просмотров: 23 Читать статью

calc(): математика прямо в CSS — без магии, зато с примерами (CSS)

calc() позволяет делать простые вычисления прямо в значениях CSS. Это удобно, когда нужно «смешать» разные единицы: например, «90% ширины плюс 20 пикселей» или «высота в 3 строки минус шапка». Синтаксис: как писать, чтобы браузер понял Базовый вид: css свойство: calc(выражение); Важные правила: Операторы +, -, *, / обязательно окружаются пробелами: calc(100% — 20px) — правильно, […]

Загрузка...
Просмотров: 29 Читать статью

fit-content, max-content, min-content: размеры по содержимому — просто и с примерами (CSS)

Эти значения помогают блоку не занимать «лишнее» место, а подстраиваться под контент. Разберём, чем они отличаются, и посмотрим на живые примеры. В чём разница: коротко и по делу min-content — «самый узкий вариант, при котором текст не ломается без необходимости». Браузер старается сделать блок как можно уже, но не ломает слова там, где можно этого […]

Загрузка...
Просмотров: 25 Читать статью

aspect-ratio: задаём пропорции блока без JS и лишних обёрток (CSS)

Когда нужно, чтобы блок сохранял пропорции (например, карточка товара, превью видео, сетка галереи), раньше часто делали костыли: вставляли пустой div‑обёртку, задавали ей padding-top в процентах или писали JS, который пересчитывал высоту. Сейчас всё это можно сделать одной строкой CSS — через свойство aspect-ratio. Что такое aspect-ratio aspect-ratio задаёт соотношение ширины к высоте блока. Например, 16/9 […]

Загрузка...
Просмотров: 24 Читать статью