W CSS za pomocą @media, można uczynić stronę responsywną, w taki sposób, która będzie dopasowywać się do rozmiaru okna przeglądarki czy urządzenia mobilnego. Przykład działania @media, możesz zobaczyć w poniższym przykładzie.

Zobacz demo 1

W powyższym przykładzie wszystko działa jak tego oczekujemy. Jednak kiedy jeden z boksów (zdjęcie, treść, przyciski) umieścimy w elemencie o nazwie klasy .sidebar, nasz boks już nie będzie responsywny, jak byśmy tego chcieli. Możemy to zauważyć na poniższym przykładzie.

Zobacz demo 2

Poprawa responsywności

Po przeniesieniu .box do elementu aside, elementy w .box nie układają się należycie. Dzieję się tak dlatego, że @media działają tylko na szerokość okna przeglądarki, a nie szerokość elementu. Tutaj z pomocą przychodzi @container. Zmodyfikujemy kod CSS z przykładu na poniższy.

Dodanie @container do CSS

.container {
  display: flex;
  gap: 40px;
}
@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }
}
.content {
  width: 70%;
  container-type: inline-size;
}
.sidebar {
  width: 30%;
  container-type: inline-size;
}
@media (max-width: 1050px) {
  .content,
  .sidebar {
    width: 100%;
  }
}
.sidebar h2 {
  margin-top: 0;
}
.box {
  display: flex;
  margin-bottom: 20px;
}
@container (max-width: 750px) {
  .box {
    flex-direction: column;
  }
}
.box_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box_text {
  padding: 20px;
  background-color: rgb(38, 46, 70);
}
.box_text p {
  margin-top: 0;
}
.button {
  padding: 7px 18px;
  background-color: transparent;
  border: 2px solid rgb(131, 57, 152);
  border-radius: 8px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: background-color 0.4s;
}
.button:hover {
  background-color: rgb(131, 57, 152);
}

Po zmianie nasza strona znowu jest w pełni responsywna. Co się stało? Zamieniliśmy responsywność @media na @container, czyli uzależniliśmy zmianę widoku nie od okna przeglądarki, a od szerokości elementu. Na poniższym przykładzie widać, że teraz wszystko działa zgodnie z naszymi oczekiwaniami.

Zobacz demo 3

Cały czas uzależnialiśmy nasz widok od szerokości elementu. Natomiast używając container-type: size, przeglądarka będzie brać również pod uwagę wysokość elementu.

Więcej o @container

Oprócz container-type, można również skorzystać z container-name. Daje to dość spore możliwości, gdyż dany zestaw reguł możemy przypisać do konkretnego elementu. Dopiszmy zatem kilka nowych regół w CSS z uwzględnieniem container-name.

Wykorzystanie container-name

.container {
  display: flex;
  gap: 40px;
}
@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }
}
.content {
  width: 70%;
  container-type: inline-size;
  container-name: color-body;
}
.sidebar {
  width: 30%;
  container-type: inline-size;
}
@media (max-width: 1050px) {
  .content,
  .sidebar {
    width: 100%;
  }
}
.sidebar h2 {
  margin-top: 0;
}
.box {
  display: flex;
  margin-bottom: 20px;
}
@container (max-width: 750px) {
  .box {
    flex-direction: column;
  }
}
.box_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box_text {
  padding: 20px;
  background-color: var(--primary-light);
}
@container color-body (max-width: 1000px) {
  .box_text {
    background-color: var(--secondary-dark);
  }
}
.box_text p {
  margin-top: 0;
}
.button {
  padding: 7px 18px;
  background-color: transparent;
  border: 2px solid var(--secondary);
  border-radius: 8px;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.4s;
}
.button:hover {
  background-color: var(--secondary);
}

Po zmianie w CSS, kiedy szerokość elementu będzie mniejsza niż 1000px, .box zmieni kolor tła. Zmiana jednak będzie dotyczyć tylko boksów znajdujących się w elemencie o nazwie klasy .content. W poniższym przykładzie można zaobserwować zmiany.

Zobacz demo 4

Co wybrać @media czy @container?

Tutaj nie ma jednoznacznej odpowiedzi. Wszystko będzie zależało do tego co chcemy osiągnąć. Nic nie stoi na przeszkodzie aby w projekcie używać jednego i drugiego jednocześnie.

Podobał się artykuł?