css - ConsultApp.ru

CSS Container Query: Новый шаг в адаптивность и независимость блоков страницы

Дмитрий — Thu, 10 Oct 2024 12:40:57 +0000

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

В целом @container запросы работают так же, как @media запросы, только не к странице, а к определенному особым способом родительскому блоку.

Достаточно указать блоку свойство container-type (size, inline-size, or normal) и он становится контейнером. Так же можно задать ему имя, для уточнения запросов.

.post {
  container-type: inline-size;
  container-name: sidebar;
}

Базовый синтаксис

Основываясь на md n, получаем такой синтаксис запроса:

@container # {
  
}

/* Пример: */
/* multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

Самое интересное тут, что мы можем делать запросы не только о ширине, высоте. Функционал намного шире, мы можем описаться на стили и даже на определенные переменные! Те фактически можем управлять внутренним поведением блока, переопределяя CSS переменные в зависимости от необходимости например.

Новые единицы изменения

Для определения высоты и ширины относительно контейнера появились новые размерности:

cqw: 1% ширины контейенра;
cqh: 1% высоты контейнера;
cqi: 1% inline размер контейнера;
cqb: 1% block размер контейнера;
cqmin: меньшее из cqi or cqb;
cqmax: большее из cqi or cqb.

Пример

В приведенном примере мы постарались раскрыть базовый вариант использования контейнерных запросов на базе поведения блока .item, который опираясь на ширину и переменную, определяемую для одного из родителей, меняет свое поведение. Однако style() работает еще не во всех браузерах, проверяйте совместимость перед использованием в реальных задачах. (работает в Chrome)

  .testWrapper {
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
  }
  .items {
    container-type: inline-size;
    border: 1px solid black;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 5px;
    margin: 10px;
  }
  .items1 {
    width: 300px;
  }
  .items2 {
    width: 200px;
  }
  .items3 {
    width: 100px;
  }

  .thumbnail {
    background-color: rgb(96, 195, 108);
  }
  .text {
    background-color: rgb(237, 57, 87);
  }
  .header {
    background-color: rgb(11, 179, 235);
  }

  .item {
    width: 100%;
    background-color: rgb(54, 54, 54);
    display: grid;
    gap: 5px;
  }

  .item__var2 {
    --variant2: true;
  }

  .item div {
    min-width: 25px;
    min-height: 25px;
  }

  .item div:last-child {
    display: none;
  }

  @container (width > 100px) and (width < 201px) {
    .item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: calc(50cqi - 2.5px);
    }
    .item div:last-child {
      grid-column: 1 / span 2;
      display: block;
    }
  }

  @container (width > 100px) and (width < 201px) and style(--variant2: true) {
    .item div:last-child {
      grid-row: 1 / span 2;
      grid-column: 1;
      display: block;
    }
  }

  @container (width > 200px) {
    .item {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 20cqi;
    }
    .item div:last-child {
      display: block;
    }
  }

Итого

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

Сообщение CSS Container Query: Новый шаг в адаптивность и независимость блоков страницы появились сначала на ConsultApp.ru.

Pre-loader для сайта

Дмитрий — Sun, 05 May 2024 10:00:40 +0000

В данной статье мы рассмотрим, как показать информацию о процессе загрузки сайта до самой загрузки каких-либо скриптов и полного HTML документа.

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

Однако есть один момент. Теги , читаются раньше, плюс в CSS есть псевдоэлементы, нас интересует ::before.

Псевдоэлементы ::before, ::after — это часть селекторов CSS, которые используют для вставки содержимого, которого нет в исходном коде.

Решение

Добавляем стилизованный псевдоэлемент ::before на тег с нужным нам элементом-прелоадером;
Отлавливаем в JS момент загрузки страницы (2 варианта). Убираем отображение загрузки, с помощью добавления класса конца загрузки тегу .

Подробное описание

Рассмотрим пример добавление прелоадера на примере нашего сайта.

Добавляем в , напрямую или через файл, стили:

html::before {
  background-size: 150px !important;
  opacity: 1;
  content: "";
  display: block;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/logo-animate.svg") no-repeat center, #fff;
  transition: opacity 0.3s ease-in;
}

html.loaded::before {
  opacity: 0;
  pointer-events: none;
}

Здесь видно, что в нашем случае content — пустая строка. Мы позиционируем по центру background с SVG лоадером, растягивая слой на весь экран, а так же выставляя большой z-index, что позволит нам скрывать постепенную загрузку/отображение элементов. Плюс небольшая анимация перехода.

Файл /logo-animate.svg

Далее у нас есть 2 варианта работы с JS, мы можем поймать события:

DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки и стили, могут быть ещё не загружены;
load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).

Выбор за Вами, понятно, что первое событие будет раньше и Вы можете даже добавить дополнительный этап загрузки, между DOMContentLoaded и load соответственно. Мы же остановимся на load:

window.addEventListener("load", () => {
  document.documentElement.classList.add("loaded");
});

setTimeout(()=>{ 
    if(!document.documentElement.classList.contains("loaded"))
       document.documentElement.classList.add("loaded");
}, 10000);

Объекту window добавляем событие load, по которому добавляем класс окончания загрузки на тег <html> (в JS к нему можно обращаться как к documentElement).

Так же, для очень медленных соединений, мы посчитали необходимым снимать loader (setTimeout) через 10 сек, после загрузки скрипта, если DOM дерево по каким-то причинам будет очень долго строиться и отображаться. Что-бы показать хоть какой-то процесс или возможно наличие обрыва соединения.

Упаковка в plugin WordPress

Для удобства управления, все вышеописанное можно упаковать в плагин WP. Например такой код позволит подключить стилевой и скриптовый файлы:





Заключение



В статье мы рассмотрели, как с помощью прсевдоэлемента ::before добавленного к тегу  добавить preloader на страницу, и отключать его по событию load на объекте window.
Сообщение Pre-loader для сайта появились сначала на ConsultApp.ru.