Készüljön fel a CSS Grid forradalomra

Szerző: Randy Alexander
A Teremtés Dátuma: 24 Április 2021
Frissítés Dátuma: 19 Június 2024
Anonim
Készüljön fel a CSS Grid forradalomra - Kreatív
Készüljön fel a CSS Grid forradalomra - Kreatív

Tartalom

A CSS Grid egyszerűen a webdesign legnagyobb története. Megadva a fejlesztőknek az összetett elrendezések viszonylag kevés kóddal történő elkészítéséhez szükséges eszközöket, ez forradalmi előrelépést jelent az elrendezés viselkedésének irányításában egy érzékeny világban (lásd adaptív webtervezési útmutatóinkat, és érdemes meggyőződni arról, hogy webtárhely-szolgáltatása megfelel-e a webhely igényei).

Természetesen van egy tanulási görbe is. Éppen ezért Michelle Barkert kellett választanunk a soron következő Generate CSS konferencia egyik legfontosabb előadójának (szeptember 26-án, Londonban, Shoreditchben). Nincs tudásod vagy időd? Használjon webhely-készítőt.

A Mozilla Tech előadója, a CSS {In Real Life} blog írója és a CSS Grid szenvedélyes szószólója. Barker előadása meghatározza a tervezők által leggyakrabban felmerülő problémákat, és hogyan lehet ezeket legyőzni. (Probléma áll fenn a tárolással kapcsolatban? Tekintse meg a felhőalapú tárolási lehetőségeinket.)


Olvassa el, miközben elárulja, hogyan szerette meg a CSS-t, megvitatja a Mud és az Ordoo munkáját, és megossza jóslatait arról, hogy a webes tervezés hogyan alakul a 2020-as években.

Meséljen többet arról, amit csinál

Kreatív frontend fejlesztő vagyok, erős UX hajlamokkal, valamint a tervezés és az illusztráció háttérrel, amely tájékoztatja az általam végzett munka nagy részét. Napi munkámhoz frontend fejlesztő vagyok az Ordoo-ban, egy mobil megrendeléssel foglalkozó indulóban.

A fő szenvedélyem a CSS, és szeretek kísérletezni és cikkeket írni blogomhoz, a CSS-hez {A való életben}. Mindig is szerettem írni, és a blogom tökéletes kifogást ad arra, hogy minden szenvedélyemet egy helyen egyesítsem.

Honnan ered ez a szenvedély?

Amióta megtanultam a webfejlesztést, a CSS elrendezése érdekelt - annyira különbözött a nyomtatottaktól. Néhány évvel ezelőtt részt vettem Rachel Andrew workshopján, és itt tanultam meg először a CSS Grid-et. Azóta is belekötöttem, és küldetésemnek tekintettem, hogy más embereket is annyira izgassam, mint én.


Nagyon izgatott vagyok, hogy a CSS milyen gyorsan mozog jelenleg - napról napra egyre erősebbé válik, és még izgalmasabb specifikációk vannak a sarkon!

Miért szeretsz rendezvényeken beszélni?

Mozilla Tech-előadó vagyok, és konferenciákon és találkozókon beszélek a CSS Grid-ről. A találkozókon való részvétel nagyszerű módja az új barátokkal való találkozásnak, kapcsolattartásnak és az internetes közösségbe való bekapcsolódásnak.

Nagyon ajánlom a találkozókon való beszédet, mivel tapasztalatom szerint a közösség meleg, barátságos és remek konstruktív visszajelzést adni. Az első alkalom bátorsága elég idegesítő, de 100% -osan megéri. A beszéd annyi ajtót nyitott meg előttem.

2016-ban teljes munkaidőben kezdett dolgozni a Sárban. Mesélne a Warner Bros számára az ott végzett munkáról?

A Warner Bros Studios Leavesden webhelye volt az egyik legnagyobb projekt, amelyen a Mud-on dolgoztam. A dizájnt Blast készítette, és mi a Mudnál voltunk felelősek a fejlesztésért. Az én szerepem a HTML és a CSS nagy részének megírása volt.


A tervezés érdekes elrendezési kihívásokat jelentett, és tökéletes alkalom volt a CSS Grid első használatára. Ennyi elrendezés nem lett volna lehetséges a Grid nélkül, vagy rendkívül nehéz lett volna reagálva megvalósítani azokat a módszereket, amelyek elegendő szabadságot biztosítottak a tartalomkészítők számára. Meg kell engedni a határozatlan hosszúságú tartalmat, olyan képeket, amelyek bármilyen képarányúak lehetnek, és az elrendezés még mindig jól mutat.

Akkoriban nem volt sok CSS Grid oktatóanyag és példa a vadonban, kivéve Rachel Andrew kiváló Grid By Example webhelyét. Az egyik legfontosabb kihívás egy rugalmas rács megalkotása volt, amely lehetővé tette egyes elemek egy 24 oszlopos központi rácshoz igazítását, miközben mások is kivérezhettek a nézet széléig.

Kísérletezéssel és próba-tévedés útján sikerült kitalálnom ezeket a kihívásokat. A CSS-ről {A való életben} szóló cikkeket közvetlenül tájékoztatták azokról a dolgokról, amelyeket a projekt során felfedeztem.

Mennyire fontos a CSS Grid a webdesign jövője szempontjából?

Tévhit, hogy bizonyos CSS-szolgáltatásokat csak akkor szabad használni, ha a böngésző támogatása 100 százalékos. Valószínű, hogy ez soha nem lesz így - mindig lesznek régebbi böngészők, amelyeknek gondoskodni kell, és ügyelnünk kell arra, hogy ezek a felhasználók elfogadható élményben részesüljenek. A progresszív fejlesztés itt a barátod! Különböző stratégiák léteznek a Grid támogatására (vagy nem támogatására) a régebbi böngészőkben: az IE10 és az IE11 valóban támogatja a Grid régebbi szintaxisát, tehát ez az egyik lehetséges megoldás.

Az észlelt edzésidő és költség is akadályt jelenthet egyesek számára. Mint minden új technológia, rengeteg tanulás vesz részt, és sajnos nem látom, hogy túl sok vállalat kiabálna arról, hogyan szeretnek befektetni a CSS-készségekbe. Gyakran második hegedűt játszik a JavaScript-en.

Ennek ellenére úgy gondolom, hogy a Grid szerves része lesz a webdesign jövőjének. Jen Simmons találta ki az „intrinsic web design” kifejezést, hogy leírja a webkiosztás következő evolúciós korát, amelybe belépünk, és csak most kezdjük látni, hogy a kreatív lehetőségek egy része megjelenik.

Remélem, hamarosan bekövetkezik egy fordulópont, amikor elég sokan abbahagyják a webtervezést mint a nyomtatás kiterjesztését, és elkezdik átfogni saját médiumaként. Néhány éven belül a Grid lesz a természetes eszköz a webes elrendezés elérésére.

Mi izgalmas még a CSS világában?

Annyi minden van! Az egyedi tulajdonságok meglehetősen csodálatosak, és kezdik elragadni az emberek fantáziáját. A CSS Grid 2. szintű specifikáció részét képező alrács támogatása a közelmúltban érkezett meg a Firefox Nightly programba, és a következő Firefox általános kiadásra készül. Alig várom, hogy tovább játszhassak vele, és kitalálhassam a kreatív lehetőségeket! Azt is várom, hogy sokkal többet kísérletezhessek a változó betűtípusokkal. Mandy Michael és Jason Pamental nagyszerű munkát végeznek bemutatók létrehozásával és ezekről.

Hogyan látja a frontend fejlesztő szerepének kialakulását a 2020-as években?

A frontend fejlesztő szerepe annyira kiterjedt és ritka, hogy valakit minden szempontból egyformán erősnek talál. Úgy gondolom, hogy elkerülhetetlen, hogy a szerepek megoszlását tapasztaljuk a felhasználói felület fejlesztői között, akik interakciók céljából írnak HTML-t, CSS-t és JavaScript-et, és azok között, akik inkább a „mérnök” kategóriába tartoznak.

Érdekes: úgy érzem, hogy a „kódoljon a tervezőknek?” a kérdést manapság sokkal ritkábban teszik fel, mert a frontend kódja sokkal összetettebbé vált. Csak egy projekt elindítása hatalmas kihívásnak érezheti magát, még a beépítéshez szükséges eszközökkel, amelyek még a kezdés előtt konfigurálhatók.

Ezért döntöttem úgy, hogy megpróbálom felépíteni a személyes webhelyemet HTML-sel, CSS-sel és semmi mással - hogy lássam, ez túl irreális-e 2019-ben. De ez egy teljesen érvényes mód egy egyszerű webhely felépítésére. Ahogyan a CSS jelenleg növekszik, ezek a készségek hamarosan rendkívül értékesek lesznek.

Miről fog beszélni a Generate CSS-en?

Ha érdekel a CSS Grid, de még nem kezdte el használni a gyártásban, akkor ez az Ön számára. Sok embernek segítettem a Grid használatának megkezdésében, hogy azonosítson néhány gyakori problémát, amelyekkel sokan ütköznek. Beszélgetésem segít az embereknek azonosítani, hogy mi okozhat problémákat számukra az elrendezéssel kapcsolatban, és hogyan lehet ezeket hibakeresni. Remélem, lesz mit tanulni, bármi legyen is a Grid tapasztalata.

Szeretem, hogy most olyan CSS-központú események láthatók, mint a CSS létrehozása. Gyakran a CSS általában a frontenddel van összekötve, és elmehet egy frontend konferenciára, de csak egy beszélgetést lát a CSS-ről!

Ezt a cikket eredetileg a net 324. számában tették közzé, a világ legkeresettebb weblaptervezőknek és -fejlesztőknek szóló magazinjában. Vásárolja meg a 324. számot vagy iratkozz fel a netre.

Tudjon meg többet a CSS Gridről a CSS létrehozása oldalon

Michelle Barker a Generate CSS című előadásában, a webdesignereknek szóló, 2019. szeptember 26-án, a londoni Rich Mix-ben rendezett CSS-konferencián Michelle Barker azt vizsgálja, hogy a Grid hogyan működik összhangban (és nem ellene!) Más elrendezési módszerekkel a robusztus kialakítás érdekében rugalmas jövőháló.

Ha el akarja érni ezt és más nagyszerű beszélgetéseket, győződjön meg róla most vegye meg a jegyét!

Kapcsolódó cikkek:

  • Átfogó útmutató a CSS Grid használatához
  • Hozzon létre egy adaptív elrendezést a CSS Grid segítségével
  • 5 menő CSS Grid generátor
További Részletek
25 grafikai tervezés, ami megkönnyíti az életedet
Olvass Tovább

25 grafikai tervezés, ami megkönnyíti az életedet

Ideáli világban gondo an, zeretettel ké zítenénk el minden grafikai e zközt. De a zoro határidők é a meg zorított költ égveté ek való v...
Miért kell CSS-változókat használni?
Olvass Tovább

Miért kell CSS-változókat használni?

Feltűnő, hogy még mindig vannak olyan C -puri ták, akik nem hi zik el, hogy zük égük van egy C -proce zorra. Lehet, hogy te i közéjük tartozol? Talán m...
A beépülő modulok végre úton vannak az Adobe XD-hez
Olvass Tovább

A beépülő modulok végre úton vannak az Adobe XD-hez

Prototípu -ké zítő e zköz Az Adobe XD már komoly hullámokat c ap le a felha ználói felület tervezé i terében. Úgy tűnik, hogy még jobb ...