Simple boîte de dialogue CSS avec commandes intégrées

Chromium uniquement. Si votre navigateur ne supporte pas cette démonstration, vous pouvez regarder la vidéo plus bas.

<button commandfor="demo" command="show-modal">Ouvrir la boîte de dialogue</button>
<dialog id="demo" closedby="any"><button commandfor="demo" command="close" value="fermer">X</button>
<p>Je suis une boîte de dialogue réalisée en pur CSS et avec des commandes intégrées : <code>commandfor</code> et <code>command</code>, semblable à l'API popover.</p>
<button commandfor="demo" command="close" value="compris">
J'ai compris
</button>
</dialog>

*{box-sizing: border-box;}


button {

cursor: pointer;
--l:100%;
--bg-color:oklch(var(--l) 0 0);
background-color: var(--bg-color);
border: 1px solid oklch(from var(--bg-color) calc(var(--l) - 10%) c h);
border-radius: .5rem;
color: oklch(10% 0 0);
font-size: .875rem;
font-weight: 600;
padding: .25lh .5lh;
text-align: center;
box-shadow: 0 1px 2px 0 oklch(from var(--bg-color) calc(var(--l) - 99%) c h/.1);
-webkit-user-select: none;
user-select: none;

}

button:hover {

 --l:97%
 
}
 
 
dialog {
border:0;
width:90%;
max-width: 500px;
position: fixed;
margin:auto;
inset:0;
padding:0;
height:25dvh; 
background-color: white;
scale: calc(1 - var(--pop, 1))
}
    
dialog,
dialog::backdrop {
 --pop: 0;
opacity: calc(1 - var(--pop, 1));

}

@starting-style {
dialog,
dialog::backdrop{
   --pop: 1;
  }
}

dialog::backdrop {
 
 background-color: rgba(0, 0, 0, 0.7);

}

 dialog[open]{
 
 display:grid;
 padding:.5lh;
 
 }
 
 button[value="fermer"]{
 
 place-self:start end;
 margin:.25lh;
 
 }
  
 button[value="compris"]{
 
 place-self:end center
 
 }
  
 p{
 
 font-size:1rem;
 place-self:center
 
 }
 
@media(prefers-reduced-motion: no-preference) {

dialog,dialog::backdrop { transition:  opacity .25s }
dialog{ transition-property: scale; transition-delay: .25s

}