Разбираем веб-технологии слой за слоем. От первого запроса в браузере до аккуратного интерфейса.
Начать с заметокИмя превращается в адрес, устанавливается соединение, приходит HTML. Проследим путь страницы без лишних сокращений.
Показано заметок: 3
Чем свежая копия отличается от проверенной и зачем браузер иногда спрашивает сервер повторно.
Ширина строки, интерлиньяж и контраст: несколько решений, с которых начинается удобное чтение.
Как дать карточкам свободно занимать доступное место с помощью нескольких строк CSS.
«Слой» — место для небольших объяснений. Здесь можно остановиться на одной детали, понять принцип и унести с собой полезную идею.
Без гонки за новостями. В центре внимания — основы веба, которые помогают думать и делать.
Открытие сайта — цепочка небольших договорённостей между браузером, сетью и сервером. Некоторые шаги браузер может пропустить, если уже сохранил нужные данные.
В адресной строке мы пишем имя сайта. Для соединения обычно нужен IP-адрес. Браузер и операционная система проверяют сохранённые сведения, а при необходимости обращаются к системе DNS, которая помогает найти адрес для имени.
Для HTTPS браузер устанавливает защищённое соединение. TLS помогает проверить сертификат сервера и согласовать шифрование. Детали соединения зависят от версии HTTP: например, HTTP/3 использует транспорт QUIC.
Браузер передаёт HTTP-запрос. В нём есть метод, адрес ресурса и заголовки. Сервер отвечает кодом состояния, заголовками и, если это предусмотрено ответом, содержимым.
GET /notes HTTP/1.1
Host: example.com
Accept: text/htmlБраузер разбирает HTML и находит связанные ресурсы: стили, изображения, скрипты. Часть может быть в кеше. Затем браузер рассчитывает расположение элементов и рисует страницу; скрипты могут менять её уже после первого отображения.
Поэтому загрузка — не одна операция. Медленное открытие может быть связано с поиском адреса, соединением, ответом сервера, размером ресурсов или работой самой страницы.
Кеш — сохранённая копия ответа. Он помогает повторно использовать данные, но правила такого использования задаются отдельно.
Если сохранённый ответ ещё считается свежим, браузер может использовать его без повторного запроса. Когда нужна проверка, он может отправить условный запрос с известным идентификатором версии — например, значением ETag.
Если ресурс не изменился, сервер может ответить 304 Not Modified. Тело документа повторно передавать не нужно: используется сохранённое содержимое.
Cache-Control: no-cache позволяет хранить ответ, но требует проверки перед повторным использованием. Cache-Control: no-store предписывает кешам не сохранять ответ. Это разные инструкции.
Копии могут находиться в браузере, промежуточном кеше или service worker. Полезно посмотреть заголовки ответа и источник загрузки в инструментах разработчика, прежде чем менять все настройки сразу.
Для статических файлов часто удобно менять имя при изменении содержимого: например, app.a4f2.css. Новый адрес помогает отличить новую версию от сохранённой старой.
Читабельность складывается из нескольких спокойных решений. Хороший шрифт помогает, но не заменяет подходящую ширину строки и расстояния.
Для длинного текста полезно ограничить ширину колонки. Слишком широкая строка затрудняет поиск начала следующей, слишком узкая заставляет часто переносить взгляд. Начать можно с max-width: 65ch, а затем проверить результат на реальном тексте и выбранном шрифте.
Удобный интерлиньяж зависит от шрифта, размера и ширины колонки. Значение около 1.6 может быть отправной точкой, а не универсальным правилом. Отступы между абзацами помогают увидеть структуру без дополнительных декоративных элементов.
У страницы должны быть различимы заголовок, подзаголовки и основной текст. Для этого достаточно размера, начертания и расстояний. Если всё выделено одновременно, выделения перестают помогать.
Откройте длинный материал на телефоне, увеличьте масштаб, проверьте контраст и видимость клавиатурного фокуса. Интерфейс должен оставаться понятным без точного попадания мышью и идеального зрения.
Иногда лучшая адаптивность — позволить браузеру самому определить, сколько колонок помещается в контейнер.
.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1.5rem;
}auto-fit размещает столько колонок, сколько помещается. minmax задаёт минимальный и максимальный размер. Вложенный min позволяет минимальному размеру не превышать ширину узкого контейнера.
Медиазапросы остаются полезными для изменений композиции. Но простому списку карточек часто достаточно сетки, которая учитывает доступное место.