Cartes produits CSS popover/anchor API

• [anchor]
• @starting-style
• interpolate-size
• ::details-content
• attr()
• [popover]
• ::picker(select)

Votre navigateur ne supporte pas cette démonstration

Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

Dans cette démonstration, nous allons reproduire la structure et le design d'une page de produit du célèbre site de vente en ligne Amazon. Cependant nous allons ajouter quelques fonctionnalités supplémentaires en CSS, à savoir des fenêtres avec les API Popover et Anchor Positioning. Ainsi, pouvons-nous obtenir des fenêtres qui adaptent leur position selon leur ancrage dans la page.

<div class="demo">
<svg height="0" width="0">
<symbol id=fleche-bas viewBox="0 0 24 24"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"/></symbol>
<symbol id=info viewBox="0 0 64 64"><circle fill="none" stroke-width="3" cx="32" cy="32" r="28"/><path d="M32 15.887a3.5 3.5 0 0 0-3.5 3.5 3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5 3.5 3.5 0 0 0-3.5-3.5zm-2.604 11.127c-1.04 0-1.875.838-1.875 1.879v.242c0 1.04.835 1.879 1.875 1.879h3.083v14.123c0 1.04.838 1.879 1.878 1.879h.245c1.04 0 1.878-.839 1.878-1.88V28.896c0-1.041-.838-1.88-1.878-1.88-1.78 0-3.66-.002-5.206-.001z"/></symbol>
</svg>
<ul>
<li tabindex="0">
<img src="https://m.media-amazon.com/images/I/51nf464g7mL._AC_SL1000_.jpg" alt/>
<div class=contenu-carte>
<button id="anchor-classe" popovertarget="tooltip-etoile">
<div class=classement>
<span>4.2</span>
<div class="etoiles" data-note="4.2">
<figure></figure>
</div>
<svg role="img" aria-hidden="true" height="0" width="0" viewBox="0 0 24 24"><use href="#fleche-bas"></use>
</svg>
<span>131 évaluations</span>
</div>
</button>
<div id="tooltip-etoile" class="tooltip-etoile" anchor="anchor-classe" popover>	
<div class=classe-tooltip>
<div class="etoiles" data-note="4.2">
<figure></figure>
</div>
<span>4,2 sur 5</span>
</div>
<p>131 évaluations</p>
<div class=progress>
<div><span>5 étoiles</span><progress max="100" value="55">55%</progress><span>55%</span></div>
<div><span>4 étoiles</span><progress max="100" value="28">28%</progress><span>28%</span></div>
<div><span>3 étoiles</span><progress max="100" value="5">5%</progress><span>5%</span></div>
<div><span>2 étoiles</span><progress max="100" value="3">3%</progress><span>3%</span></div>
<div><span>1 étoile</span><progress max="100" value="9">9%</progress><span>9%</span></div>
</div>
<hr>
<a href="javascript:void(0);">Voir les commentaires clients<svg role="img" aria-hidden="true" height="0" width="0" viewBox="0 0 24 24"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"/></svg>
</a>
</div>
<h2>Lorem ipsum</h2>
<span class=black>Offre Black Friday</span>
<p class=prix><span>-42 %</span> 239,00€</p>
<div class=recent>
<span>Prix récent le plus bas : <del>411,97€</del></span>
<button id="ancre-info" popovertarget="info-box">
<svg role="img" aria-hidden="false" height="0" width="0" aria-label="Information sur le prix"><use href="#info"></use></svg>
</button>
</div>
<div id="info-box" class="info-box" popover anchor="ancre-info">	
<button class="ferm" popovertarget="info-box" popovertargetaction="hide" autofocus>
<svg role="img" aria-hidden="true" height="0" width="0" viewBox="0 -0.5 25 25"><path d="M6.96967 16.4697C6.67678 16.7626 6.67678 17.2374 6.96967 17.5303C7.26256 17.8232 7.73744 17.8232 8.03033 17.5303L6.96967 16.4697ZM13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697L13.0303 12.5303ZM11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303L11.9697 11.4697ZM18.0303 7.53033C18.3232 7.23744 18.3232 6.76256 18.0303 6.46967C17.7374 6.17678 17.2626 6.17678 16.9697 6.46967L18.0303 7.53033ZM13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303L13.0303 11.4697ZM16.9697 17.5303C17.2626 17.8232 17.7374 17.8232 18.0303 17.5303C18.3232 17.2374 18.3232 16.7626 18.0303 16.4697L16.9697 17.5303ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM8.03033 6.46967C7.73744 6.17678 7.26256 6.17678 6.96967 6.46967C6.67678 6.76256 6.67678 7.23744 6.96967 7.53033L8.03033 6.46967ZM8.03033 17.5303L13.0303 12.5303L11.9697 11.4697L6.96967 16.4697L8.03033 17.5303ZM13.0303 12.5303L18.0303 7.53033L16.9697 6.46967L11.9697 11.4697L13.0303 12.5303ZM11.9697 12.5303L16.9697 17.5303L18.0303 16.4697L13.0303 11.4697L11.9697 12.5303ZM13.0303 11.4697L8.03033 6.46967L6.96967 7.53033L11.9697 12.5303L13.0303 11.4697Z"/></svg>	
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta viverra ante sit amet molestie. Phasellus vel urna dolor. Sed ac lacinia turpis. Duis et vestibulum odio. Vestibulum tincidunt sapien lacus, ut vehicula metus rutrum nec. Nunc vitae porta dui, non laoreet lorem. Pellentesque sollicitudin elit elit, eu eleifend nunc maximus auctor.</p>
</div>
<button class=retour id="ancre-retour" popovertarget="info-retour">
Retours GRATUITS <svg role="img" aria-hidden="true" height="0" width="0" viewBox="0 0 24 24"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z"/></svg>
</button>
<div id="info-retour" class="info-retour" popover anchor="ancre-retour">	
<button class="ferm" popovertarget="info-retour" popovertargetaction="hide" autofocus>
<svg role="img" aria-hidden="true" height="0" width="0" viewBox="0 -0.5 25 25"><path d="M6.96967 16.4697C6.67678 16.7626 6.67678 17.2374 6.96967 17.5303C7.26256 17.8232 7.73744 17.8232 8.03033 17.5303L6.96967 16.4697ZM13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697L13.0303 12.5303ZM11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303L11.9697 11.4697ZM18.0303 7.53033C18.3232 7.23744 18.3232 6.76256 18.0303 6.46967C17.7374 6.17678 17.2626 6.17678 16.9697 6.46967L18.0303 7.53033ZM13.0303 11.4697C12.7374 11.1768 12.2626 11.1768 11.9697 11.4697C11.6768 11.7626 11.6768 12.2374 11.9697 12.5303L13.0303 11.4697ZM16.9697 17.5303C17.2626 17.8232 17.7374 17.8232 18.0303 17.5303C18.3232 17.2374 18.3232 16.7626 18.0303 16.4697L16.9697 17.5303ZM11.9697 12.5303C12.2626 12.8232 12.7374 12.8232 13.0303 12.5303C13.3232 12.2374 13.3232 11.7626 13.0303 11.4697L11.9697 12.5303ZM8.03033 6.46967C7.73744 6.17678 7.26256 6.17678 6.96967 6.46967C6.67678 6.76256 6.67678 7.23744 6.96967 7.53033L8.03033 6.46967ZM8.03033 17.5303L13.0303 12.5303L11.9697 11.4697L6.96967 16.4697L8.03033 17.5303ZM13.0303 12.5303L18.0303 7.53033L16.9697 6.46967L11.9697 11.4697L13.0303 12.5303ZM11.9697 12.5303L16.9697 17.5303L18.0303 16.4697L13.0303 11.4697L11.9697 12.5303ZM13.0303 11.4697L8.03033 6.46967L6.96967 7.53033L11.9697 12.5303L13.0303 11.4697Z"/></svg>	
</button>
<h3>Retournez cet article gratuitement</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta viverra ante sit amet molestie. Phasellus vel urna dolor. Sed ac lacinia turpis. Duis et vestibulum odio. Vestibulum tincidunt sapien lacus, ut vehicula metus rutrum nec. Nunc vitae porta dui, non laoreet lorem.</p>
<a href="">En savoir plus sur les retours gratuits.</a>
<details>
<summary><svg role="img" aria-hidden="true" height="0" width="0" viewBox="0 0 24 24"><use href="#fleche-bas"></use></svg>Comment retourner l'article ?</summary>
<ol>
<li>
Lorem ipsum dolor	
</li>	
<li>Lorem ipsum dolor</li>	
<li>Lorem ipsum dolor</li>	
</ol>	
</details>
</div>
<p class=stock>En stock</p>
<label>Quantité :</label>
<select>
<button>
<div>
<selectedcontent></selectedcontent>
<svg role="img" aria-hidden="true" height="0" width="0"><use href="#fleche-bas"></use></svg>
</div>
</button>
<div>
<option value="1">1</option>
<option value="2">2</option>
</div>
</select>
<div class=action>
<button class="panier">Ajouer au panier</button>  
<button class="achat">Acheter cet article</button>  
</div>
</div>
</li>
...
</ul>

</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}
		
ul{list-style-type: none;padding:unset}	
button{all:unset;cursor: pointer}
:where(select,progress){all:unset;}	
:root {interpolate-size: allow-keywords;}

*:focus-visible{outline:2px solid currentcolor;outline-offset:2px}

.demo{

margin: 0 auto;
max-width: 50rem

}

.demo ul{

display: grid;
grid-template-columns: repeat(auto-fit,clamp(calc(50% - 1rem),(100vw - 50rem)*-1000,100%));
gap: 1rem;
color:#222

}	
.demo> ul> li{

background-color :white;
box-shadow: rgba(0, 0, 0, 0.13) 0px 12.8px 28.8px, rgba(0, 0, 0, 0.11) 0px 0px 9.2px;

}

	
img{
aspect-ratio:9/10;
width:100%;
height:auto;
object-fit:contain}

	
.contenu-carte{
	
	padding:1rem
	
	}
	
.demo h2{
	
	margin:1rem 0
	
	}	
	

	
:is(.tooltip-etoile,.info-retour,.info-box){
	
/*inset-area: top; ancienne notation*/
position-area: top;/*à partir de chrome 129*/
max-width: 300px;
background-color: #fff;		
/*position-try-fallbacks: flip-block flip-inline;*/
padding: 1rem;
margin: 0 0 10px 0;
border:1px solid #ddd;
border-radius: .25rem;
box-shadow:
0px 0.3px 0.5px rgba(0, 0, 0, 0.014),
0px 0.7px 1.3px rgba(0, 0, 0, 0.02),
0px 1.3px 2.4px rgba(0, 0, 0, 0.025),
0px 2.2px 4.2px rgba(0, 0, 0, 0.03),
0px 4.2px 7.9px rgba(0, 0, 0, 0.036),
0px 10px 19px rgba(0, 0, 0, 0.05);
	}			
		
[popover],::picker(select) {
	
scale:calc(1 - var(--a));
opacity: calc(1 - var(--a));
transform-origin: top center
	
	}
	

	
@starting-style {[popover],:open::picker(select){
	
	--a: 1;
	}
	
	}

	
.classement{
	
display:flex;
align-items:center;
gap:.25rem;
flex-flow: wrap;
	
	}
	
.classement svg{
	
fill:currentcolor;
height: 1.75cap;
width: 1.75cap;
	
	}
	
/***************fenetre notation********************/	
.tooltip-etoile{
	
position-try-fallbacks: flip-block; 
min-inline-size: anchor-size(self-inline); 
	
	}
	
.tooltip-etoile hr{
	
margin: 1rem 0;
border: 1px solid #eee
	
	}
	
.tooltip-etoile a{
	
display: flex;
justify-content: center;
align-items: center;
gap: .5cap;
color: #027287;
text-decoration: none
	}	
	
.tooltip-etoile a svg{
	
fill: currentcolor;
height: 2cap;
width: 2cap;
flex: 0 0 2cap;
rotate: -90deg
	
	}

	
.classe-tooltip{
	
display: flex;
align-items: center;
gap: .5rem
	
	}
	
.etoiles {
 --remplissage: calc(attr(data-note type(<number>)) * 20%);
display: flex;
align-items: center;
gap: .5rem;}
  
figure {
margin:0;/*reset*/
width:8rem;
height: calc(6.25rem/4);
background: linear-gradient(to right, #ffac10 var(--remplissage), #ccc var(--remplissage));
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 5 L79 95 L2 40 L98 40 L21 95 Z'/></svg>");
mask-repeat: space;
  }		
	
	
/*element progress*/	
	
.progress{
	
display: grid;
row-gap: 1rem;
	
	}	
	
.progress div{
	
display:grid;
grid-template-columns: 60px 1fr 30px;
align-items: center;
column-gap: .5rem;
	
	}
	
@property --progression {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}

progress[value] {
	
--bg:#eaeaea;
--linear:linear-gradient(#ffac10 0 0) no-repeat 0/var(--progression) 100%, var(--bg);
border-radius:.125rem;
height: 20px;

}
	
progress[value]::-webkit-progress-bar{background-color:var(--bg);border-radius:.125rem}
progress[value]::-webkit-progress-value{border-radius:.125rem;background:var(--linear)}
progress[value]::-moz-progress-bar{border-radius:.125rem;background:var(--linear)}
	
/*element progress*/	
/***************fenetre notation********************/		
	
.black{

display: inline-block;
padding: .5rem 1rem;
border-radius: .25rem;
background-color: #cc113a;
color: white
	}
	
.prix{
	
margin:1rem 0;
font-size:clamp(1.5rem,1rem + 1vw,2rem)
	}
	
.prix span{
	
color: #cc113a;
font-size: clamp(1rem,1rem + 1vw,1.5rem)
	
	}
	
.recent{
	
display: flex;
gap:.25rem;
align-items: center;
color: #909090 
	
	}
	
.recent button{
	
height: 2cap;
width: 2cap;
	
	}
	
.recent button svg{
	
fill: currentcolor;
stroke: currentcolor;
height: inherit;
width:inherit;

	
	}	
	
.info-box{
	
position-try-fallbacks:
 --left-info-box, 
 --right-info-box,
--bottom-info-box 
	
	}	

@position-try --left-info-box {
 position-area: left; 
 margin-right: 20px;

}
	
@position-try --right-info-box {

 margin-left:10px;
 position-area: right;
	
}	
	
@position-try --bottom-info-box {
	
  position-area: bottom;
 
}
	
		
.ferm{
	
display: flex;
margin-left: auto;
border: 1px solid #ddd
	
	}
	
.ferm svg{
	
height: 2cap;
width: 2cap
	
	}		
	
	
.retour{
color: #027287;
margin: 1rem 0;
display: flex;
align-items: center;
gap:.25cap
	
	}	
	
.retour svg{
	
fill: currentcolor;
height: 2cap;
width: 2cap;
flex: 0 0 2cap;
	}
	
/***************fenetre retour produit********************/	
.info-retour {
position-area:top span-right;
position-try-fallbacks:
    --left-info-retour, 
    --right-info-retour,
	--bottom-info-retour
}	
		
@position-try --left-info-retour {
 position-area: left; 
 margin-right: 20px;

}
	
@position-try --right-info-retour {

 margin-left:10px;
 position-area: right;
	
}	
	
@position-try --bottom-info-retour {
  
  margin-top: 10px;
  position-area: bottom span-right;
	
}


.info-retour h3{
	
margin:.5rem 0;
	
	}
	
.info-retour a{
	
text-decoration: none;
color: #027287;
	
	}
	
.info-retour a:hover{
	
color: #c55120;
text-decoration: underline
	
	}
	
/*details*/		
summary{

cursor: pointer	
color: #027287;
display:flex;
align-items:center
	
	}
	
summary svg{
	
fill: currentcolor;
height: 2cap;
width: 2cap;
	
	}

/*details*/	
	
::details-content {
	
height: 0;
overflow: clip;
	
}

[open]::details-content {
	
height: fit-content;
	
}

/*details*/	
	

/***************fenetre retour produit********************/		
	
.stock{
	
color: green;
font-size: clamp(1rem,1vw + 1rem,1.5rem);
margin: 1rem 0
	
	}	

	
/******************select***************************/
		
select,::picker(select) {
	
  appearance: base-select;
	
}
	
select {
	
background-color: #fff;
field-sizing: content;
padding: .25lh 1ch;
min-width: 8ch;
border: 1px solid #ccc
        
	}

::picker(select) {

border-width: 0;
margin: .5rem 0;
box-shadow:
0px 0.3px 0.5px rgba(0, 0, 0, 0.014),
0px 0.7px 1.3px rgba(0, 0, 0, 0.02),
0px 1.3px 2.4px rgba(0, 0, 0, 0.025),
0px 2.2px 4.2px rgba(0, 0, 0, 0.03),
0px 4.2px 7.9px rgba(0, 0, 0, 0.036),
0px 10px 19px rgba(0, 0, 0, 0.05);
}
	
::picker-icon {
    
display: none;
  
}
    

select >div{
	
background-color: #fff
	
	}
select button{
	
min-width:100%;
display:block;
	
	}	
	
	
select button div  {

display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
font-size: 1rem; 
	}	
	

select button div svg {
	
fill:currentcolor;
flex: 0 0 2cap;
width: 2cap;
height: 2cap
	
	}	
		
:open > button svg {
	
rotate:.5turn;
	
  }
	
option{
	
display: flex;
align-items: center;
padding:.5rem 1rem;
cursor: pointer;
		
}
	
option::checkmark{  
	
display: none;
	
	}
	
option:hover {
	
background-color:#ebebeb
	
	}
	
option:checked{
	
	background-color:#d4d4d4
	
	}
	
/*boutons ajout panier/ acheter article*/	
	
	
.action{
	
display: grid; 
gap: 1rem;
place-content: center;
margin:1rem 0 
	
	}
	
.action button{
	
border-width: 1px;
border-style: solid;
box-shadow: 0 2px 5px 0 rgba(213,217,217,.5);
border-radius: 100px;
padding: .5rem 2rem
	}
	
.panier{
	
background: #FFD814;
border-color: #dbb700;
	
	}	
	
.achat{
	
background: #FFA41C;
border-color: #de7d00;
	
	}
	

	
/*animations et transitions*/	
@media (prefers-reduced-motion: no-preference) {
	
[popover],::picker(select)  { transition: scale .25s,opacity .25s; }
select button div svg {transition: rotate .25s }
	
::details-content {
transition: height 600ms cubic-bezier(0, 0.02, 0.55, 1.45), 
opacity 600ms,
content-visibility 600ms allow-discrete;}	

	
progress{animation:progress .8s .8s linear forwards;}	
	
@keyframes progress{
	
	to{
	
	--progression:100%
	
	}
	
	}	
	
}	
	
	@media (prefers-reduced-motion: reduce) {
		
	progress{
		
		--progression:100%
		
		}
	
	}