🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Медиавыражения
Чтобы применить стили при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя, используют медиавыражения. Выражение состоит из условия и набора стилей, которые браузер должен применить при его соблюдении.
Чаще всего медиавыражение используют, чтобы применить особые стили на определённом размере экрана.
Допустим, у нас есть страница с текстовым модулем. Сначала напишем стили по умолчанию, которые будут применятся всегда:
<body>
<div class="text">
<p>…</p>
<p>…</p>
<p>…</p>
</div>
</body>
body {
font-size: 24px;
padding: 24px;
}
.text {
max-width: 640px;
margin: 0 auto;
}
Затем допишем медиавыражение с набором стилей для ширины менее 600 пк. На этой ширине браузер применит стили из медиавыражения, дополнив или переопределив написанные ранее стили страницы.
body {
font-size: 24px;
padding: 32px;
}
.text {
max-width: 640px;
margin: 0 auto;
}
@media (width < 600px) {
body {
font-size: 18px;
padding: 16px;
}
.text {
max-width: none;
}
}
Наследование стилей
Конфликты стилей
Медиавыражения
Чтобы применить стили при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя, используют медиавыражения. Выражение состоит из условия и набора стилей, которые браузер должен применить при его соблюдении.
Чаще всего медиавыражение используют, чтобы применить особые стили на определённом размере экрана.
Допустим, у нас есть страница с текстовым модулем. Сначала напишем стили по умолчанию, которые будут применятся всегда:
<body>
<div class="text">
<p>…</p>
<p>…</p>
<p>…</p>
</div>
</body>
body {
font-size: 24px;
padding: 24px;
}
.text {
max-width: 640px;
margin: 0 auto;
}
Затем допишем медиавыражение с набором стилей для ширины менее 600 пк. На этой ширине браузер применит стили из медиавыражения, дополнив или переопределив написанные ранее стили страницы.
body {
font-size: 24px;
padding: 32px;
}
.text {
max-width: 640px;
margin: 0 auto;
}
@media (width < 600px) {
body {
font-size: 18px;
padding: 16px;
}
.text {
max-width: none;
}
}
Наследование стилей
Конфликты стилей
Проверка размеров экрана
@media (width <= 960px) {
/* Ширина экрана до 960 пк включительно */
}
@media (max-width: 960px) {
/* То же, что в предыдущем примере */
}
@media (height > 768px) {
/* Высота экрана от 768 пк */
}
Проверка отношения сторон экрана
@media (orientation: landscape) {
/* Ширина экрана больше высоты, наоборот — portrait */
}
@media screen and (max-aspect-ratio: 16 / 9) {
/* Пропорция экрана до 16:9 */
}
@media screen and (min-aspect-ratio: 16 / 10) {
/* Пропорция экрана от 16:10 */
}
Проверка настроек темы оформления
@media (prefers-color-scheme: dark) {
/* На устройстве включена тёмная тема */
}
Проверка возможности наведения
@media (hover: hover) {
/* На устройстве возможно наведение. Например, это компьютер с мышью или тачпадом, но не смартфон */
}
Комплексные проверки
Несколько условий перечисляют через and.
@media (orientation: landscape) and (max-width: 767px) {
/* Горизонтальный экран до 768 пк */
}
@media (orientation: landscape) and (960px <= width <= 1024px) {
/* Горизонтальный экран на диапазоне ширины 960—1024 пк ширины включительно */
}
Медиавыражения позволяют проверить не только размер экрана, но и условия формата, настройки оформления или устройства пользователя.
Проверка размеров экрана
@media (width <= 960px) {
/* Ширина экрана до 960 пк включительно */
}
@media (max-width: 960px) {
/* То же, что в предыдущем примере */
}
@media (height > 768px) {
/* Высота экрана от 768 пк */
}
Проверка отношения сторон экрана
@media (orientation: landscape) {
/* Ширина экрана больше высоты, наоборот — portrait */
}
@media screen and (max-aspect-ratio: 16 / 9) {
/* Пропорция экрана до 16:9 */
}
@media screen and (min-aspect-ratio: 16 / 10) {
/* Пропорция экрана от 16:10 */
}
Проверка настроек темы оформления
@media (prefers-color-scheme: dark) {
/* На устройстве включена тёмная тема */
}
Проверка возможности наведения
@media (hover: hover) {
/* На устройстве возможно наведение. Например, это компьютер с мышью или тачпадом, но не смартфон */
}
Комплексные проверки
Несколько условий перечисляют через and.
@media (orientation: landscape) and (max-width: 767px) {
/* Горизонтальный экран до 768 пк */
}
@media (orientation: landscape) and (960px <= width <= 1024px) {
/* Горизонтальный экран на диапазоне ширины 960—1024 пк ширины включительно */
}
Медиавыражения позволяют проверить не только размер экрана, но и условия формата, настройки оформления или устройства пользователя.
Адаптивные картинки, srcset
Чтобы ускорить загрузку страницы на телефоне, можно показывать уменьшенные версии картинок.
Разница между картинками шириной 1440 и 600 пк на небольшом экране телефона не так заметна. Зато уменьшенная картинка гораздо меньше весит и быстрее загрузится. Чем больше на странице картинок, тем заметнее будет эффект от такой оптимизации.
В базовой записи img одна картинка из src используется на всех размерах экрана:
<img src="img-1440×1849.jpg">
Добавим альтернативную уменьшенную картинку в атрибут srcset, после названия обязательно указать её ширину в пикселях с буквой w (width):
<img
src="img-1440×1849.jpg"
srcset="img-600×770.jpg 600w">
Это эквивалентно такой записи, потому что srcset — это все варианты картинки:
<img
src="img-1440×1849.jpg"
srcset="
img-1440×1849.jpg 1440w,
img-600×770.jpg 600w">
Но поскольку один из вариантов уже указан в обязательном атрибуте src, его можно не писать в srcset.
Браузер в самом начале загрузки страницы умножит ширину экрана пользователя на его плотность пикселей и выберет картинку оптимальной ширины для загрузки. В нашем случае, если ширина × плотность пикселей больше 600, используется картинка из src, иначе — уменьшенная картинка.
Поскольку браузеру нужно заранее выбрать, какую картинку вообще качать, он не может сам понять ширину картинок, ведь для этого их нужно скачать. Поэтому нам и нужно подсказать браузеру ширину альтернативных картинок в src.
1440×1849, 917 КБ
600×770, 135 КБ
1440×1849, 917 КБ
600×770, 135 КБ
Адаптивные картинки, srcset
Чтобы ускорить загрузку страницы на телефоне, можно показывать уменьшенные версии картинок.
Разница между картинками шириной 1440 и 600 пк на небольшом экране телефона не так заметна. Зато уменьшенная картинка гораздо меньше весит и быстрее загрузится. Чем больше на странице картинок, тем заметнее будет эффект от такой оптимизации.
В базовой записи img одна картинка из src используется на всех размерах экрана:
<img src="img-1440×1849.jpg">
Добавим альтернативную уменьшенную картинку в атрибут srcset, после названия обязательно указать её ширину в пикселях с буквой w (width):
<img
src="img-1440×1849.jpg"
srcset="img-600×770.jpg 600w">
Это эквивалентно такой записи, потому что srcset — это все варианты картинки:
<img
src="img-1440×1849.jpg"
srcset="
img-1440×1849.jpg 1440w,
img-600×770.jpg 600w">
Но поскольку один из вариантов уже указан в обязательном атрибуте src, его можно не писать в srcset.
Браузер в самом начале загрузки страницы умножит ширину экрана пользователя на его плотность пикселей и выберет картинку оптимальной ширины для загрузки. В нашем случае, если ширина × плотность пикселей больше 600, используется картинка из src, иначе — уменьшенная картинка.
Поскольку браузеру нужно заранее выбрать, какую картинку вообще качать, он не может сам понять ширину картинок, ведь для этого их нужно скачать. Поэтому нам и нужно подсказать браузеру ширину альтернативных картинок в src.
1440×1019, приемлемо для обычных мониторов, размыто на «ретине»
2800×1982, более чёткая версия для «ретины»
Атрибут srcset используют не только чтобы показать уменьшенную версию картинки на телефоне, но и в обратную сторону — чтобы показать более качественную картинку на больших экранах с высокой плотностью пикселей, при этом не качая лишнего на обычных экранах.
Принцип тот же — в атрибуте указываем альтернативную картинку и подсказываем браузеру её ширину:
<img
src="img-1440×1019.jpg"
srcset="img-2800×1982.jpg 2800w">
Через запятую в атрибуте можно перечислить сразу много вариантов для разных экранов:
<img
src="img-1440×1019.jpg"
srcset="
img-360x255.jpg 360w,
img-720x509.jpg 720w,
img-2800×1982.jpg 2800w">
Другой вопрос — стоит ли заморачиваться и прописывать много вариантов картинок, потому что их придётся подготавливать. В продвинутой разработке варианты картинок создаются автоматически, код для них генерируется. В ручной вёрстке поддерживать больше пары версий картинок тяжело и обычно нецелесообразно.
Марк Шагал. Над городом. 1918
1440×1019, приемлемо для обычных мониторов, размыто на «ретине»
2800×1982, более чёткая версия для «ретины»
Атрибут srcset используют не только чтобы показать уменьшенную версию картинки на телефоне, но и в обратную сторону — чтобы показать более качественную картинку на больших экранах с высокой плотностью пикселей, при этом не качая лишнего на обычных экранах.
Принцип тот же — в атрибуте указываем альтернативную картинку и подсказываем браузеру её ширину:
<img
src="1440.jpg"
srcset="2800.jpg 2800w">
Через запятую в атрибуте можно перечислить сразу много вариантов для разных экранов:
<img
src="1440.jpg"
srcset="
360.jpg 360w,
720.jpg 720w,
2800.jpg 2800w">
Другой вопрос — стоит ли заморачиваться и прописывать много вариантов картинок, потому что их придётся подготавливать. В продвинутой разработке варианты картинок создаются автоматически, код для них генерируется. В ручной вёрстке поддерживать больше пары версий картинок тяжело и обычно нецелесообразно.
Марк Шагал. Над городом. 1918
Пока img с атрибутом srcset всегда занимает 100% ширины экрана, всё работает отлично, браузер знает ширину экрана и подберёт под неё оптимальную картинку из имеющихся в src и srcset.
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Но допустим, картинка на широком экране занимает половину ширины:
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Браузер на момент выбора картинки не знает ширину img в вёрстке — выбор происходит до построения страницы. Поэтому и в этом случае он выберет картинку под всю ширину экрана.
Подскажем браузеру возможные размеры элемента в атрибуте sizes. В конце — размер по умолчанию, используется, если ни одно условие выше не удовлетворено.
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<!-- Проще всего взять медиавыражение из ЦСС, которое определяет ширину картинки, и перенести значения в sizes, заменяя проценты на vw -->
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w"
sizes="
(width > 960px) 50vw,
100vw">
Теперь браузер знает, что картинка на компьютере занимает половину ширины и выберет оптимальную картинку. Если размеров много, следите за их порядком, браузер выберет первое сработавшее условие и не пойдёт дальше.
Адаптивные картинки, srcset
Медиавыражения
Атрибут sizes. МДН
Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000
1400, оптимальная картинка — img‑1440
Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000
1400, но картинка занимает только половину, img‑1400 избыточно, достаточно img‑1000
Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000
1400, браузер знает, что картинка занимает половину и правильно выбирает оптимальную картинку — img‑1000
На ширине 1440 оптимальная картинка из имеющихся — 1400.jpg, на ширине 375 — 1000.jpg
Но если картинка занимает только половину, то 1400.jpg избыточно, достаточно 1000.jpg
Когда браузер знает, что картинка занимает половину, то правильно выбирает оптимальную картинку — 1000.jpg
Пока img с атрибутом srcset всегда занимает 100% ширины экрана, всё работает отлично, браузер знает ширину экрана и подберёт под неё оптимальную картинку из имеющихся в src и srcset.
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Но допустим, картинка на широком экране занимает половину ширины:
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Браузер на момент выбора картинки не знает ширину img в вёрстке — выбор происходит до построения страницы. Поэтому и в этом случае он выберет картинку под всю ширину экрана.
Подскажем браузеру возможные размеры элемента в атрибуте sizes. В конце — размер по умолчанию, используется, если ни одно условие выше не удовлетворено.
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<!-- Проще всего взять медиавыражение из ЦСС, которое определяет ширину картинки, и перенести значения в sizes, заменяя проценты на vw -->
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w"
sizes="
(width > 960px) 50vw,
100vw">
Теперь браузер знает, что картинка на компьютере занимает половину ширины и выберет оптимальную картинку. Если размеров много, следите за их порядком, браузер выберет первое сработавшее условие и не пойдёт дальше.
Адаптивные картинки, srcset
Медиавыражения
Атрибут sizes. МДН