Capacités des médias et des appareils du navigateur
Détection des capacités du pointeur dans l’espace de démonstration

Tester la détection des capacités du pointeur dans un espace de démonstration : contenu réaliste, contrôles interactifs, retours d’état clairs et mise en page adaptée à différentes tailles.
Capacités des médias et des appareils du navigateurDétection des capacités du pointeurHTMLCSSBrowser API
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Détection des capacités du pointeur dans l’espace de démonstration</title>
  <style>
    :root { --ink:#30231f; --paper:#f9efe5; --accent:#8b6fb0; --secondary:#d7a971; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
    * { box-sizing:border-box; }
    html { min-width:320px; background:var(--paper); }
    body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif; background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--secondary) 35%,transparent) 0 9%,transparent 10%),radial-gradient(circle at 90% 75%,color-mix(in srgb,var(--accent) 18%,transparent) 0 12%,transparent 13%),var(--paper); }
    button,input,select,textarea { color:inherit; font:inherit; }
    button,[role="button"],input,select,textarea { accent-color:var(--accent); }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    [hidden] { display:none !important; }
    @media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
    .page{width:min(1140px,calc(100% - 28px));margin:auto;padding:54px 0}.mast{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 12px 28px}.mast h1{font-family:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif;font-weight:900;font-size:clamp(38px,8vw,82px);letter-spacing:-.035em;margin:0;line-height:.98}.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;color:var(--paper);background:var(--accent);font-weight:900}.intro{max-width:620px;line-height:1.65}.scenario{padding:12px 18px;border-radius:999px;background:var(--secondary);box-shadow:0 7px 0 color-mix(in srgb,var(--ink) 18%,transparent);font-weight:900}.demo{border-radius:46px 18px 46px 18px;box-shadow:0 18px 0 color-mix(in srgb,var(--secondary) 45%,transparent);position:relative;min-height:390px;overflow:hidden;padding:clamp(22px,5vw,54px);background:color-mix(in srgb,var(--paper) 90%,#fff)}@media(max-width:700px){.mast{display:grid}.page{width:calc(100% - 16px);padding:18px 0}.demo{padding:17px}}
    .panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
    .composition-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
    .pointer-profiler{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr);gap:14px}.pointer-profiler>header{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px;border-block:3px solid var(--ink)}.pointer-profiler h2{margin:.2em 0}.pointer-profiler header dl{display:flex;gap:8px;margin:0}.pointer-profiler header dl div{min-width:100px;padding:8px;border-left:1px solid var(--line)}.pointer-profiler header dd{margin:5px 0 0;font-weight:900}#pointerPad{position:relative;min-height:330px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at center,color-mix(in srgb,var(--secondary) 24%,var(--paper)),var(--paper));touch-action:none}#pointerPad>i{position:absolute;left:50%;top:50%;width:24px;aspect-ratio:1;border:3px solid var(--paper);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:translate(-50%,-50%)}#pointerPad output{position:absolute;right:14px;top:14px;padding:7px;background:var(--ink);color:var(--paper)}#pointerPad p{position:absolute;left:18px;bottom:12px;max-width:330px}.pointer-profiler>aside{display:grid;align-content:start;gap:14px;padding:20px;border:1px solid var(--line)}.pointer-profiler>aside label{display:grid;grid-template-columns:1fr auto;gap:7px}.pointer-profiler>aside input{grid-column:1/-1}.pointer-profiler ol{display:grid;gap:5px;padding-left:18px;font-size:11px}@media(max-width:680px){.pointer-profiler{grid-template-columns:1fr}.pointer-profiler>header{grid-template-columns:1fr}.pointer-profiler header dl{flex-wrap:wrap}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}
  </style>
</head>
<body data-aesthetic="playful" data-composition="gallery-frame">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">playful / détection des capacités du pointeur / BEGINNER</span><h1>Détection des capacités du pointeur dans l’espace de démonstration</h1><p class="intro">Tester la détection des capacités du pointeur dans un espace de démonstration : contenu réaliste, contrôles interactifs, retours d’état clairs et mise en page adaptée à différentes tailles.</p></div><span class="scenario">Espace de démonstration</span></header>
    <figure class="composition-gallery"><section class="demo" aria-label="Zone d’interaction de détection des capacités du pointeur de l’espace de démonstration"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Espace de démonstration SESSION</span><h2>Tableau de chronométrage de démonstration</h2></div><output id="workflowSessionClock">00:45</output><label>Durée du tour<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>s</span></label><button id="workflowSessionToggle" class="action primary" type="button">Démarrer la présentation</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Progression de la minuterie de démonstration" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:browser-media-device-pointer-profile --><div class="pointer-profiler"><header><span class="eyebrow">POINTER PROFILER</span><h2>Tableau de trajectoire du pointeur pour l’espace de démonstration</h2><dl><div><dt>Pointeur principal</dt><dd id="pointerPrimary">—</dd></div><div><dt>Capacité de survol</dt><dd id="pointerHover">—</dd></div><div><dt>Point de contact d’activité</dt><dd id="pointerActive">0</dd></div></dl></header><section id="pointerPad" tabindex="0" aria-label="Déplacer la souris, le stylet ou le doigt pour échantillonner le pointeur"><i id="pointerDot"></i><output id="pointerCoordinates">x 0 · y 0</output><p>Déplacez le pointeur dans cette zone ; les utilisateurs au clavier peuvent déplacer le point d’échantillonnage avec les touches fléchées.</p></section><aside><label>Conservation de la trajectoire<input id="pointerTrailLength" type="range" min="3" max="20" value="8" data-core-bridge="browser-media-device-pointer-profile"><output>8</output></label><button id="pointerClear" class="action" type="button">Effacer la trajectoire</button><ol id="pointerSamples"></ol></aside></div><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 points de contrôle interactifs</strong><ol id="workflowSessionLaps" aria-label="Journal de ronde"></ol></footer></div><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Espace de présentation / GALLERY 03</strong></figcaption></figure>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:browser-media-device-pointer-profile */
const pointerPad=document.querySelector('#pointerPad');const pointerDot=document.querySelector('#pointerDot');const pointerSamples=[];const activePointers=new Map();let pointerPosition={x:50,y:50};function describePointers(){document.querySelector('#pointerPrimary').textContent=matchMedia('(pointer:fine)').matches?'Fin':'Grossier ou absent';document.querySelector('#pointerHover').textContent=matchMedia('(hover:hover)').matches?'Pris en charge':'Non pris en charge';document.querySelector('#pointerActive').textContent=String(activePointers.size);}function samplePointer(type,pressure){const limit=Number(document.querySelector('#pointerTrailLength').value);pointerSamples.unshift({type,x:Math.round(pointerPosition.x),y:Math.round(pointerPosition.y),pressure:Math.round((pressure||0)*100)});pointerSamples.splice(limit);document.querySelector('#pointerSamples').replaceChildren(...pointerSamples.map(sample=>{const item=document.createElement('li');item.textContent=sample.type+' · '+sample.x+','+sample.y+' · '+sample.pressure+'%';return item;}));}function movePointer(clientX,clientY,type='keyboard',pressure=0){const rect=pointerPad.getBoundingClientRect();pointerPosition={x:Math.max(0,Math.min(100,(clientX-rect.left)/rect.width*100)),y:Math.max(0,Math.min(100,(clientY-rect.top)/rect.height*100))};pointerDot.style.left=pointerPosition.x+'%';pointerDot.style.top=pointerPosition.y+'%';document.querySelector('#pointerCoordinates').textContent='x '+Math.round(pointerPosition.x)+' · y '+Math.round(pointerPosition.y);samplePointer(type,pressure);}pointerPad.addEventListener('pointerdown',event=>{activePointers.set(event.pointerId,event.pointerType);pointerPad.setPointerCapture(event.pointerId);movePointer(event.clientX,event.clientY,event.pointerType,event.pressure);describePointers();});pointerPad.addEventListener('pointermove',event=>movePointer(event.clientX,event.clientY,event.pointerType,event.pressure));pointerPad.addEventListener('pointerup',event=>{activePointers.delete(event.pointerId);describePointers();});pointerPad.addEventListener('keydown',event=>{if(!['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(event.key))return;event.preventDefault();const rect=pointerPad.getBoundingClientRect();const x=rect.left+rect.width*(pointerPosition.x+(event.key==='ArrowRight'?4:event.key==='ArrowLeft'?-4:0))/100;const y=rect.top+rect.height*(pointerPosition.y+(event.key==='ArrowDown'?4:event.key==='ArrowUp'?-4:0))/100;movePointer(x,y);});document.querySelector('#pointerTrailLength').addEventListener('input',event=>{event.currentTarget.nextElementSibling.textContent=event.currentTarget.value;});document.querySelector('#pointerClear').addEventListener('click',()=>{pointerSamples.length=0;document.querySelector('#pointerSamples').replaceChildren();announce('Trace du pointeur effacée');});describePointers();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"browser-media-device-pointer-profile","selector":"[data-core-bridge=\"browser-media-device-pointer-profile\"]","mode":"range","key":"ArrowRight"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("input",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' points de contrôle d’interaction';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Recommencer':'Tour suivant';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Tour de chronométrage de démonstration terminée':'La ronde est suspendue');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Tour de pause';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('Le tour de chronométrage de la présentation a commencé · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('Opérations au clavier');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Opération principale · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
  </script>
</body>
</html>