Mikroukłady

Mówiąc o układach, często mamy na myśli projekty na poziomie strony. Jednak mniejsze elementy na stronie mogą mieć własne, niezależne układy.

W idealnej sytuacji te układy na poziomie komponentów będą dostosowywać się automatycznie, niezależnie od swojego położenia na stronie. W niektórych sytuacjach nie wiadomo, czy dany komponent zostanie umieszczony w głównej kolumnie z treścią, na pasku bocznym czy w obu tych miejscach. Nie wiedząc, dokąd się trafi, musisz upewnić się, że komponent dopasuje się do swojego kontenera.

Uwaga: w przyszłości tworzenie komponentów, które dostosowują się do kontenera, będzie dużo łatwiejsze dzięki wdrożeniu zapytań o kontenery. Na razie jednak omawiamy istniejące sposoby tworzenia elastycznych mikroukładów wielokrotnego użytku. W podglądzie tego modułu możesz zobaczyć, jak zapytania Container Zapytania pasują do dotychczasowych metod elastycznego projektowania stron.

GRid

Siatka CSS jest przeznaczona nie tylko do układów na poziomie strony. Sprawdza się też w przypadku komponentów, które w nich znajdują się.

W tym przykładzie pseudoelementy ::before i ::after tworzą ozdobne linie po obu stronach nagłówka. Sam nagłówek jest kontenerem siatki. Poszczególne elementy są rozmieszczone w taki sposób, aby linie zawsze wypełniały dostępną przestrzeń.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

W przeglądarkach na komputerach, takich jak Firefox czy Chrome, są dostępne narzędzia dla programistów, które wyświetlają linie siatki i obszary nałożone na projekt.

Dowiedz się, jak sprawdzić układy siatki w Narzędziach deweloperskich w Chrome.

Flexbox

Jak sama nazwa wskazuje, flexbox zapewnia elastyczność komponentów. Możesz zadeklarować, które elementy w komponencie mają mieć minimalny lub maksymalny rozmiar, a pozostałe elementy dopasowują się do siebie.

W tym przykładzie obraz zajmuje jedną czwartą dostępnego miejsca, a tekst – pozostałe trzy czwarte. Jednak rozmiar obrazu nigdy nie przekracza 200 pikseli.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

Narzędzia dla programistów w przeglądarkach Firefox i Chrome umożliwiają wizualizację kształtu komponentów Flexbox.

Dowiedz się, jak sprawdzać układy Flexbox w Narzędziach deweloperskich w Chrome.

Zapytania dotyczące kontenerów

Flexbox umożliwia projektowanie od początku do końca. Możesz określić parametry elementów (jak zawężone i szerokie) i pozwolić przeglądarce na ostateczną implementację.

Jednak sam komponent nie ma informacji o kontekście. Nie wie, czy jest używany w głównej treści czy na pasku bocznym. Może to sprawić, że układy komponentów będą trudniejsze niż układy stron. Aby można było zastosować style dopasowane do kontekstu, komponenty muszą orientować się więcej niż rozmiar widocznego obszaru, w którym się znajdują.

W przypadku układów stron znasz szerokość kontenera, ponieważ jest to widoczny obszar przeglądarki, a zapytania o multimedia podają w nich wymiary kontenera na poziomie strony.

Aby raportować wymiary dowolnego kontenera, użyj zapytań dotyczących kontenerów.

Na początek określ, które elementy będą działać jako kontenery.

main,
aside {
  container-type: inline-size;
}

Oznacza to, że chcesz mieć możliwość wysyłania zapytań dotyczących wymiaru wbudowanego. W przypadku dokumentów w języku angielskim jest to oś pozioma. Będziesz zmieniać style w zależności od szerokości kontenera.

Jeśli komponent znajduje się w jednym z tych kontenerów, możesz zastosować style w sposób podobny do zapytań o multimedia.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

Jeśli obiekt multimedialny znajduje się wewnątrz kontenera węższego niż 25em, style Flexbox nie będą stosowane. Obraz i tekst są ustawione w pionie.

Jeśli jednak element zawierający jest szerszy niż 25em, obraz i tekst pojawią się obok siebie.

W zapytaniach dotyczących kontenerów możesz ustalać oddzielne style komponentów. Szerokość widocznego obszaru nie jest już istotna. Możesz tworzyć reguły na podstawie szerokości elementu, który zawiera.

Łączenie zapytań

Do układu strony możesz używać zapytań o media, a zapytań o kontenery do komponentów znajdujących się na stronie.

Ogólna struktura strony składa się tutaj z elementów main i aside. W obu elementach znajdują się obiekty multimedialne.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

Zapytanie o multimedia stosuje układ siatki do elementów main i aside, gdy widoczny obszar jest szerszy niż 45em.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

Reguła zapytania kontenera dla obiektów multimedialnych pozostaje taka sama: stosuje się poziomy układ Flexbox tylko wtedy, gdy element zawierający jest szerszy niż 25em.

Uwaga: ta wersja demonstracyjna nie działa w niektórych przeglądarkach. W Google Chrome flaga #enable-container-queries jest dostępna na stronie chrome://flags.

Zapytania dotyczące kontenerów to rewolucyjne rozwiązanie w przypadku mikroukładów. Komponenty mogą być samodzielne, niezależnie od widocznego obszaru przeglądarki.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat mikroukładów.

Siatka i flexbox przydają się w przypadku mikroukładów.

Prawda

🎉

Fałsz

🎉 Siatka i flexbox są bardzo przydatne, nawet w przypadku najmniejszych układów.

Wcześniej omówiliśmy układy makr na poziomie strony. Znasz już mikroukłady na poziomie komponentów. Teraz bardziej szczegółowo poznasz elementy składowe treści. Dowiesz się, jak sprawić, żeby obrazy były elastyczne. Zajmijmy się teraz typografią responsywną.