CSS container queries pagination

• container
• @container

Votre navigateur ne supporte pas cette démonstration

Redimensionnez pour voir le résultat. Dès lors que la taille du conteneur excède 600px, nous obtenons une pagination, sinon deux avons deux boutons lorsque la taille est inférieure.

<div class="cq-pagination">

<div role="navigation" aria-label="Pagination">

<ul class="pagination">

<li><a class="controle" href="">Précédent</a></li>
<li><a href="">1</a></li>
<li><a href="" aria-current="true">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a class="controle" href="">Suivant</a></li>

</ul>

</div>

</div>

*,
*::before,
*::after{

box-sizing: border-box

}


.cq-pagination {
	
container: pagination/inline-size;
margin: 5rem auto;
max-width:800px;

}

.cq-pagination ul {
  list-style: none;
  padding: 0;
	margin:0
}

.cq-pagination li {
	
display:flex;
align-items: center;
	
}
	
.cq-pagination li a {
background-color: #6753ea;
color:white;
padding:.5rem .75rem;
text-decoration:none;
border-radius:4px;
transition: background 0.2s ease-out;
	
}
	
.cq-pagination a[aria-current=true],	
.cq-pagination a:hover, 
.cq-pagination a:focus {
  
 background-color: #9c8dff;
 color: #000;
	
}

.cq-pagination a:not(.controle) {
	
  display: none;
}


	
	
@container pagination (min-width: 300px) {
	
.pagination {
	
display: flex;
justify-content: space-between;
flex-wrap: wrap;  

  }
	
.pagination >*{margin:0 .5rem}
	
}
	
	
@container pagination (min-width: 600px) {
  
.pagination {
	  
 justify-content: center;
	  
  }

.cq-pagination a:not(.controle) {
	
    display: block;
	
  }

.cq-pagination .controle {
	
    display: none;
	
  }
	
}