Méně známé HTML5 API, 3. část

Méně známé HTML5 API, 1. část: Fullscreen, Page Visibility, Performance
Méně známé HTML5 API, 2. část: Vibration, Clipboard, Beacon
Méně známé HTML5 API, 3. část: Feature Queries, Device Orientation/Motion

Feature Queries

Dlouhou dobu se pro detekci podpory CSS pravidel používá Javascript. Populární je například knihovna Modernizr. Samotné CSS bohužel nenabízelo způsob, jakým podporu detekovat, dokud nebyly k dispozici Feature Queries.  Pomocí pravidla @supports je možné zapsat podmínku, která aplikuje kód uvnitř bloku, pokud prohlížeč splňuje určitou podporu.

@supports (display: grid) {
  /* Aplikuje se, pokud prohlížeč podporuje Grid Layout */
  .obsah {
    display: grid;    
    grid-template-columns: 150px 150px 150px;
  }
}

Zápis je podobný Media Queries a stejně jako u nich, lze zapsat více podmínek pomocí klíčových slov or a and. Kromě toho je možné stejně tak negovat podmínku pomocí not. V podmínce musí být vždy jak atribut, tak hodnota, protože @supports kontroluje obojí.

@supports (height: 100vh) and (object-fit: cover) {
  /* Aplikuje se, pokud jsou splněny obě podmínky */
  body {
    height: 100vh;
  }
  .bg-image {
    object-fit: cover;
  }
}

Svou implementaci má Feature Queries i v Javascriptu. Je jí metoda CSS.supports(). Tu lze použít dvěma způsoby. Buď přijme dva parametry - atribut a jeho hodnotu:

const isGridSupported = CSS.supports('display', 'grid')

Nebo přijme řetězec celého pravidla:

if (CSS.supports('(height: 100vh) and (object-fit: cover)')) {
  /* ... */
}

Přesto, že mají prohlížeče dobrou podporu jak pro @supports, tak pro CSS.supports(), je třeba si dávat pozor na specifické případy, kdy prohlížeč podporuje některé z novějších pravidel, ale nepodporuje Feature Queries. Příkladem budiž Safari verze 7.1 a 8, které podporuje object-fit, ale nepodporuje @supports. V takovém případě by aplikace pravidla pod podmínkou zbytečně zabránila jeho použití.

Device Orientation

Pomocí Device Orientation API lze přistupovat k orientaci mobilního zařízení v prohlížeči. API vrací data o náklonu dopředu a dozadu, na bok a pokud zařízení obsahuje kompas, tak i směr, kterým míří. Celé čtení orientace probíhá v eventu "deviceorientation".

Event se spustí při každém pohybu nebo změně orientace a obsahuje tři hlavní parametry - alpha (směr), beta (dopředu/dozadu) a gamma (na bok). Hodnoty jsou ve stupních, rozsah 0 - 360° (rozsahy se můžou lišit podle prohlížeče). Všechny tři parametry mají hodnotu 0°, pokud je zařízení ve vodorovné poloze a směřuje k severu.

// Kontrola podpory API
if (window.DeviceOrientationEvent) {

  window.addEventListener('deviceorientation', (event) => {
    console.log(e.alpha) // Orientace alpha
    console.log(e.beta) // Orientace beta
    console.log(e.gamma) // Orientace gamma
  }

}

Podobný příklad a další si můžete vyzkoušet zde.

Většina mobilních prohlížeč má dobrou podporu, ale kromě Edge momentálně neimplementují "compassneedscalibration" event, který signalizuje nekalibrovaný kompas.

Device Motion

Pohyb, tedy přesněji řečeno zrychlení zařízení je možné číst pomocí Device Motion API, které je součástí stejné specifikace, jako Device Orientation API. Stejně jako u něj jsou veškeré hodnoty zachytávány v události a to eventem "devicemotion".

Event je spuštěn v pravidelných intervalech a vrací údaje o zrychlení a změně orientace v daném čase. Obsahuje tři hlavní parametry - accelerationIncludingGravity, acceleration, rotationRate. Parametr acceleration obsahuje zrychlení po odečtení gravitace, ale protože některá zařízení neumí vliv gravitace vyloučit, accelerationIncludingGravity obsahuje hodnoty včetně gravitace. Hodnoty zrychlení jsou vráceny v m/s² a parametr obsahuje data na osách x, y a z. Změna orientace je udávána ve stupních za sekundu a obsahuje data ve směrech alpha, beta a gamma (viz Device Orientation výše).

// Kontrola podpory API
if (window.DeviceMotionEvent) {
 
  window.addEventListener('devicemotion', (event) => {
    // Zrychlení ve třech osách
    console.log(event.acceleration.x)
    console.log(event.acceleration.y)
    console.log(event.acceleration.z)
    // Změna orientace ve třech směrech
    console.log(event.rotationRate.alpha)
    console.log(event.rotationRate.beta)
    console.log(event.rotationRate.gamma)
  }

}

Podobný příklad si můžete vyzkoušet zde. V příkladu je počítadlo maximálního dosaženého zrychlení. Zkoušejte opatrně :) .

Jak bylo zmíněno, Device Motion API je součástí stejné specifikace jako Device Orientation API. Na rozdíl od něj je momentálně implementováno ve větším rozsahu. Jinak je podpora stejná.

---

Používáte nějakou detekci podpory? Máte zkušenosti s API pro mobilní zařízení? Dejte nám vědět v komentářích.