**Hajtható és képernyővel rendelkező eszközökre való tervezés CSS-sel**
A Google Pixel Fold bejelentése remek alkalmat kínál arra, hogy újra áttekintsük, milyen technológiák állnak rendelkezésre a hajtható eszközökhöz alkalmazkodó élmények tervezéséhez és fejlesztéséhez. A CSS két médialekérdezést (media query) kínál a hajtható eszközök célzására: a `horizontal-viewport-segments` akkor lép életbe, amikor az eszközt könyv módban tartjuk, és a két képernyő egymás mellett van, míg a `vertical-viewport-segments` akkor, amikor a képernyők egymás fölött helyezkednek el, laptop módban. Utóbbi különösen hasznos például PowerPoint használatakor, ahol az egyik képernyőn a prezentáció, a másikon pedig az előadói jegyzetek jeleníthetők meg.
A képernyőszegmensek geometriájának meghatározásához számos CSS környezeti változó (environment variable) áll rendelkezésre, mint például a `viewport-segment-width`, `viewport-segment-height`, valamint a `top`, `left`, `bottom` és `right` értékek. Ezek az `x` és `y` pozíciókkal egy kétdimenziós rácsot alkotnak, ahol a 0,0 koordináta a bal felső szegmenst jelöli. A környezeti változók előnye, hogy maguk számítják ki a méreteket az adott eszköz alapján, így nem kell minden egyes hajtható eszközre külön tervet készíteni – ami azért fontos, mert ezek a készülékek eltérő képernyő- és zsanérméretekkel rendelkeznek. Segítségükkel a tartalom a két képernyő között is elhelyezhető és pozicionálható; például egy receptoldal CSS Grid segítségével kétoszlopos elrendezésre válthat, ahol az első oszlop a bal, a második pedig a jobb kijelzőt foglalja el.
Felmerül a kérdés, mikor érdemes egyáltalán képernyős módot beépíteni a termékbe. Senki sincs arra kényszerítve, hogy webhelye vagy alkalmazása alkalmazkodjon a két kijelzőhöz – a Surface Duón a böngésző egyetlen panelen is normál reszponzív weboldalként működik. Érdemes azonban adatokra alapozva eldönteni, hogy az ügyfelek milyen eszközöket használnak, és megéri-e a befektetést. A 2023-as előrejelzések szerint több mint 21 millió hajtható eszköz kerül forgalomba, ami a mobilpiachoz képest töredék, de így is több millió felhasználót jelent. Ráadásul a hajtható eszközökre optimalizált élmény segíthet kitűnni a versenytársak közül – a Pixel Fold pedig megerősíti, hogy a hajtható eszközök hosszú távon velünk maradnak.
A böngészőtámogatás jelenleg vegyes: a médialekérdezéseket és a környezeti változókat a Microsoft Edge stabil verziója támogatja, a Chrome stabil verziója azonban egyelőre nem – ami komoly hiányosság a Pixel Fold és a Chrome csapata számára. A funkciók a `chrome://flags` alatt engedélyezett kísérleti webplatform kapcsolóval, valamint a Surface Duo emulátorral tesztelhetők. Összességében a hajtható webes és alkalmazásélmények területe érett az innovációra, ám böngésző- és operációsrendszer-támogatás nélkül a cégek nehezen veszik rá a fejlesztőket és tervezőket, hogy komolyan foglalkozzanak velük. Aki mélyebben szeretné felfedezni a lehetőségeket, annak érdemes a Smashing Magazine részletes cikkét elolvasni, amely végigvezet a szerző receptdemóján.
Ez a cikk a Neural News AI (V1) verziójával készült.
Forrás: https://blog.stephaniestimac.com/posts/2023/05/design-foldable-devices/.
A képet Jonas Leupe készítette, mely az Unsplash-on található.
