Tervezői útmutató a Flexboxhoz és a Rácshoz

Amit a tervezőknek tudniuk kell ezekről az átalakító elrendezési eszközökről.

A CSS hosszú utat tett meg az 1996-os bevezetése óta, ám az elrendezéshez rendelkezésre álló eszközök nem változtak sokat. Az asztalok elrendezése hihetetlenül túl merev volt, az úszó alapú elrendezések alapvetően csapkodtak, a helymeghatározás alapú elrendezések nem voltak adaptálhatók, és egyikük sem tudta hatékonyan kezelni a sok bonyolultságot. Ne tévessze meg téged - ezek a módszerek nagyon messzire jutottak el minket, de nem bonyolult elrendezési célokra szolgálnak.

A régi elrendezési módszerek hiányosságai még érzékenyebbé válnak a rugalmas webdesign kialakításánál, amelyben alapvető fontosságú a web folyamatosságának felkarolása.

A flexbox és a rács segítségével végre rendelkezésünkre állnak a kifejezetten az elrendezésre szánt eszközök, amelyek hatékonyabbak és mentesek a korábbi elrendezési módszerekhez szükséges csapkodásoktól. Felszabadítják a régi problémák új lehetőségeit, lehetővé teszik a korábban nem lehetséges dolgokat, és megoldják a valódi problémákat, amelyekkel reagáló webdesign segítségével állunk szemben.

flexbox

A Flexbox, más néven CSS rugalmas dobozok, egy új elrendezési módszer, amely olyan igazítási vezérlést biztosít számunkra, amelyet egyetlen más CSS módszer sem képes előállítani. Kitűnő a „mikróelrendezésnél”: képes összehangolni, rendezni és elosztani a helyet egy tárolóban lévő elem között, vagy megváltoztatni az elem szélességét vagy magasságát, hogy a rendelkezésre álló helyet legjobban kitöltse.

Javított csomagolás

A Responsive Web Design alkalmazásban a rendelkezésre álló szélesség változik, mivel a nézetablak szélessége megváltoztatja a méretet. Ez a tartalom nem szándékos csomagolásához vezethet, különösen akkor, ha a tartalom hosszabb, mint ahogyan azt tervezték, vagy a tartalom tárolója túl keskeny. Valószínűleg mindannyian láttuk már korábban: a formatervezés az „ideális” tartalom hosszúságát veszi figyelembe, de amint megvalósul és a valós tartalom hozzáadásra kerül, a tartalom a következő sorra kerül, mert nem volt elég hely, vagy kibomlik annak tartály. Mindkettő nem ideális, és az elrendezések eltörését okozhatja.

A probléma nem az, hogy a rendelkezésre álló hely mindig elég nagy-e ahhoz, hogy elférjen a hosszúságú tartalmaknak. Hagyományosan a CSS Media Queries-t használtuk az elrendezés beállításához bizonyos határértékeken, hogy enyhítsük a tartalomcsomagolással kapcsolatos problémákat. A médialekérdezések azonban nem veszik figyelembe magának a tartalomnak a hosszát - kifejezett szélességre vagy magasságra válaszolnak. Ez gyakran túlságosan sok médiakérdezést eredményez annak érdekében, hogy egy adott tartalmat egyértelmű szünetekben ellenőrizhessenek.

Példa a Flexbox javított csomagolására

A Flexbox úgy oldja meg ezt a problémát, hogy lehetővé teszi számunkra, hogy kihasználjuk a rendelkezésre álló hely előnyeit, és becsomagoljuk a tartalmat, amikor nincs. Ez az automatikus beállítási viselkedés nem csak kényelmes, hanem javítja a karbantarthatóságot is, mivel nem kell támaszkodnunk a töréspontra a stílus manuális beállításához. A fenti példa ezt a viselkedést szemlélteti: jelenítse meg a hely címkét a cím mellett, ha van elég hely, és igazítsa a hely címkét a cím alatt balra, ha nincs elegendő hely.

A hagyományos módszerek, például a lebegés eredményeként a helycímke jobbra igazítva maradna a kisebb nézetablakokban, ami kevesebb, mint az ideális. Ezt megjavíthatja, ha a címkét balra lebegteti egy adott töréspontnál. Ennek a megközelítésnek a problémája az, hogy Ön egy törésponttól függ, hogy megváltoztassa tartalma stílusát, amelynek hossza változhat.

Javított távolság és igazítás

A CSS-nél való távolság és az igazítás szempontjából okosnak kellett lennünk ahhoz, hogy bármit végrehajtsunk, amely nem volt az alapértelmezett viselkedés. Még a triviálisnak tűnő hatások is bonyolultak lehetnek a CSS-ben, például a függőleges igazításnak vagy a térség egyenletes elosztása az elemek között, a megoldásoknak vagy a hack-eknek kell támaszkodniuk. Néhány dolgot egyenesen lehetetlen megvalósítani.

A Flexbox úgy oldja meg, hogy lehetővé teszi a hely elosztását ismeretlen számú elem között egy ismeretlen szélességű vagy magasságú területen, és igazítsa az elemeket az X vagy Y tengelyen. Nagyon hasonló, hogy a tervező eszközök, mint például a Sketch vagy az Illustrator képesek ellenőrizni a távolságot és az igazítást, lehetővé téve a vezérlést, amire számíthatunk az interneten.

Példa a Flexbox javított helyeloszlására

Ennek a vezérlésnek a példa a fentiekben látható: a navigációs elemek egyenletesen vannak elosztva, függőlegesen központosítottak, és az első és az utolsó elem egyenesen van a navigációs tartály szélével. Ez lehetetlen lett volna olyan hagyományos módszerekkel, mint például az inline blokk alkalmazása az elemekre, vagy támaszkodni a táblázatok elrendezésére.

Forrás sorrend

A forrás sorrend az elemek megjelenítésének sorrendjére utal az oldalon annak alapján, hogy hol jelennek meg a HTML-ben. Alapértelmezés szerint az elemek fentről lefelé és balról jobbra jelennek meg, alapértelmezés szerint szélességüket a megjelenítési tulajdonságok határozzák meg.

A dokumentum természetes forrás szerinti sorrendjének kell vezetnie, amikor arra gondol, hogy a terv hogyan alkalmazkodik a különböző nézetablak-szélességekhez, de vannak esetek, amikor hasznos módosítani azt az elemek átrendezése érdekében. Az egyetlen módszer a flexbox előtti elrejtéshez az elem elrejtése és egy elem megmutatása, ami duplikált HTML-t eredményezett, vagy az abszolút pozicionálásra támaszkodni, amely nem mindig működik, ha a tartalom mérete eltérő lehet. A flexbox segítségével egyszerűen módosíthatja a rugalmas elemek sorrendjét anélkül, hogy módosítani kellene az alapul szolgáló HTML struktúrát.

Példa a cikk megrendelésére a Flexbox segítségével

A fenti példa a Flexboxban történő megrendelést szemlélteti: a lábléc bal oldalán megjelenítjük a logót, amely összhangban van a fejléccel. Kis nézetablakokon a logó előtti helyeket jelenítjük meg. Ennek az átrendezésnek van értelme, mivel a helyek fontosabbak ebben az összefüggésben.

Rácsszerkezet

A CSS rácsos elrendezés egy kétdimenziós elrendezési rendszer, amelyet kifejezetten az Internethez hoztak létre. Ez lehetővé teszi számunkra, hogy az oldalt régiókra bontjuk, amelyeket mindegyik meghatározható méret, helyzet és réteg alapján, így hihetetlenül hatékony natív keretrendszert eredményezve.

Megfelel a celnak

A CSS-nek még soha nem volt valódi illeszkedése a célkiosztó eszközhöz, ezért nagyon találékonynak kellett lennünk, hogyan alkalmazhatunk rácsot munkánkban. Rácskeretek alakultak ki ennek az igénynek a kielégítésére, de nem a saját problémáik bemutatása nélkül. A legnépszerűbb rácskeretek megkövetelik az elrendezés meghatározását a jelölésben, ami kódpótláshoz, karbantarthatósághoz vezethet, és elhomályosíthatja a dokumentumszerkezet és a bemutatás elválasztását.

A grid segítségével többé nincs szükségünk grid keretre - ez egy natív keret, amelyet közvetlenül a CSS-be sütünk. Ez lehetővé teszi számunkra, hogy intuitív módon definiáljuk az elrendezést a CSS-ben, miközben magában foglalja a web alapértelmezett folyékonyságát is. Ennek az új elrendezési eszköznek a lehetőségei végtelenek, és lehetővé teszi számunkra, hogy olyan elrendezéseket hajtsunk végre, amelyek csak a Javascript használatával voltak képesek az érkezés előtt.

Példa a háló elrendezésére

Következő generációs webes elrendezések

Ami az elrendezést illeti, jó ideje elakadunk egy rohamban. A CSS-ben kialakult minták és a korábbi elrendezési eszközök korlátozásai vezettek minket a elrendezés homogenitásának útjára a múltban. Nem kell messze mennie az interneten, hogy észrevegye: fejléc, fő tartalom, oldalsáv, lábléc.

A reagáló webdizájn megjelenése új ötleteket kezdeményezett az oldal elrendezéséhez, és ezzel együtt jó minták is megjelennek: az oldalsáv áthidalása, a tervezés egyszerűsítése és a tartalomra összpontosítás. De látjuk, hogy olyan minták is megjelennek, amelyek annyira mindenütt jelennek meg, hogy azt a felkiáltást halljuk, hogy „minden webhely ugyanolyannak tűnik”.

A rácsos elrendezés lehetővé teszi számunkra, hogy kilépjünk az elrendezési rutortól, amelyben vagyunk, és eszközöket adjunk a következő generációs elrendezések elkészítéséhez. Végül felépíthetjük a tartalmat, ahelyett, hogy általános tervezési mintákká kényszerítjük, amelyek megtalálhatók minden más érzékeny weboldalon.

Vigyázat!

Fontos megjegyezni, hogy nem minden böngésző támogatja a flexbox és a grid funkciókat. Figyelembe kell vennünk az egyes projektek közönségét, és meg kell határoznunk, hogy a felhasználók többsége részesül-e ezekből a fejlettebb szolgáltatásokból, miközben ésszerű tartalékot nyújtunk a nem támogató böngészők számára. Teljesen elfogadható, ha a régi böngészők felhasználói számára egyszerűbb felhasználói felülettel látja el felhasználói felületét, és tovább javítja azt az újabb böngészők felhasználói számára.

Van még. Sokkal több.

Csak azt a felületét megkarcoltuk, amit a flexbox és a rács tehet. Szerencsére rengeteg nagyszerű dokumentum elérhető, amelyek érintik ezen új elrendezési eszközök képességeit. Itt van néhány kedvencem:

flexbox

Rács

Aki az internetet épít, fájdalmasan tisztában van a CSS elrendezésével kapcsolatos különféle korlátozásokkal. Gyakran ehhez a tervezés kompromittálásához volt szükség, hogy a fejlesztés során a várt módon működjön, vagy ami még rosszabb, a Javascriptre támaszkodva a szükséges viselkedés megvalósításához.

A flexbox és a rácsos elrendezés megjelenése jelzi az elrendezés új korszakát az interneten. Az elrendezésről új gondolkodásmódot kell elfogadnunk, hogy ne korlátozzuk a múlt szokásait, hátrányait és csapásait. Fogjuk át ezeket az új eszközöket, és újítsuk fel feltárásainkat annak érdekében, hogy mi lehetséges az internetes elrendezéssel.