CSS

Список всех CSS-свойств, типов, директив, которые были добавлены в браузеры в 2022.

Начинающие верстальщики в своих первых проектах часто задают высоту элементам, чтобы попасть в размеры чётко по макету. Давайте разберёмся, а действительно ли высота везде нужна?

По умолчанию все ссылки подчёркнуты синим, но такое оформление легко изменить с помощью CSS-свойства text-decoration: none.

Тегами <aside> и <article> размечают самостоятельные блоки, которые могут существовать отдельно от сайта. Кажется их можно использовать в одних и тех же случаях. Но чем же они различаются?

Чтобы было проще понимать, примерно так выглядят основные смысловые секции сайта:

Теперь подробнее познакомимся с этими элементами вёрстки.

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

При создании неупорядоченного списка <ul> каждый его элемент автоматически будет обозначен точкой или так называемым буллитом. Это слово происходит от английского bullet — типографский знак для выделения элементов списка.

Но если вы верстаете, например, карточки товаров, перечисление услуг или список преимуществ в виде сетки с иллюстрациями, то явно будут мешать лишние символы.

Как сделать список без буллитов, если они не нужны?

Представьте слово HTML внутри тега <span>.

<span class="text">HTML</span>

У этого элемента есть пока невидимая граница border. Если мы отобразим эту границу, то увидим, что она прилипла к тексту.

А если поставим два таких элемента рядом, они почти прилипнут друг к другу, потому что между ними нет пространства:

<span class="text">HTML</span>
<span class="text">CSS</span>

1 июля 2022 года обновился черновик CSS Containment Module Level 3, в котором добавили новую возможность контейнеру — работать от стилей.

До обновления выражение от контейнера имело одну единственную характеристику — размер. Контейнер принимал решение, как ему измениться, в зависимости от размера — ширины, высоты, inline-size, block-size, пропорции и ориентации.

.wrapper {
    container-type: inline-size;
}

.card {
  padding: 10px;
}

@container (width > 500px) {
    .card {
        padding: 20px;
    }
}

Теперь у выражений от контейнеров появилась новая характеристика — стили. Это значит, что контейнер в зависимости от вычисленного значения стиля может принять решение, как ему выглядеть.

@container style(background-color: white) {
    .card {
        color: black;
    }
}

Выражения от стилей должны быть быть обёрнуты в style(), чтобы отличать запросы от размера. Также хорошей новостью является то, что все элементы по умолчанию будут иметь container-type: style. Именно поэтому он не указан в предыдущем примере кода.

Выражения от размеров и стилей можно комбинировать.

@container (width > 500px) and style(background-color: white) {
  .card { }
}

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так?

Каждому HTML-элементу на странице соответствует определенный бокс (англ. box — коробка) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display.

Тип отображения может влиять сразу на две вещи: на расположение самого бокса в потоке и на расположение дочерних элементов внутри бокса.

Например, у элемента <li> тип бокса по умолчанию — display: block. Это означает, что элементы списка отображаются один под другим на странице. Если изменить тип отображения на <inline>, элементы списка будут отображаться рядом друг с другом, как будто это слова в предложении.

Тот факт, что вы можете изменить значение отображения любого элемента, означает, что вы можете выбрать HTML-элементы согласно их семантическому значению, не заботясь о том, как они будут выглядеть. То, как они выглядят, можно изменить.

Рассмотрим четыре основных типа боксов:

• блочные, display: block,
• строчные, display: inline,
• блочно-строчные, display: inline-block,
• гибкие или флексовые (флексы), display: flex.

Я переделывал страницу мастер-класса AppSync и захотел немного улучшить скучную секцию «Обо мне».

Я насмотрелся на разные сайты и решил сделать что-то такое:

Видите градиент внизу каждой картинки? Из него получается неплохой контрастный фон для подписей, а ещё он хорошо выглядит с любыми фоновыми картинками (как видите, некоторые из них тёмные, а другие очень светлые). Я использовал синтаксис ::before из CSS, чтобы создать пустой псевдоэлемент ::before с фоновым градиентом.

Вот базовый HTML-код для каждой картинки

<figure class="overlay">
  <figcaption class="z-50">...</figcaption>
  <img class="z-0" src="...">
</figure>

Для начала обратите внимание на z-index у тегов <figcaption> и <img>. Значения выбраны так, чтобы <figcaption> появился перед градиентом, а не за ним.

• У тега <figcaption> z-index равен 50 — он на переднем плане.
• У псевдоэлемента ::before z-index принимает любое значение от 1 до 49 и остаётся в середине.
• У тега <img> z-index равен 0 — он позади всех.

А вот так выглядит CSS-атрибуты для псевдоэлемента ::before.

.overlay::before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}

Вы могли заметить пустое значение '' атрибута content. К сожалению, если его не указать, то псевдоэлемент ::before вообще не создаётся. Ширину, высоту и позицию мы задаем, чтобы убедиться, что ::before полностью перекрывает тег <img>.

Тот же результат получается и с помощью дополнительных тегов <div>, но этот способ показался мне очень хорошим, да ещё и на чистом CSS.