Cu toate acestea, odată cu lansarea Firefox 52 și Chrome 57, situația sa schimbat. Aproape imediat a apărut o problemă într-unul dintre proiectele noastre, un exemplu simplu, de sine stătător despre modul în care o structură de plasă poate simplifica totul. Deși exemplul meu nu este la fel de impresionant sau de inspirat ca experimentele de prototipuri ale lui Jen Simmons, pentru mine aceasta este o mică victorie. Și așa cum se întâmplă adesea, astfel de victorii mici deschid adesea calea către ceva mai mare.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Mi sa oferit conținutul paginii cu următoarea prioritate:
Linkuri de lucru în două secțiuni;
text cu explicații detaliate.
Metoda veche
În acest design, avem nevoie de toate elementele pentru a se retrage unul de la celălalt la 1,5 mm din toate părțile. În primul rând, am aplicat tehnica celor două jumătăți de picături ale containerului și ale copiilor lui de la Samantha Zhang:
Dar nu ia în considerare blocurile laterale ale barei laterale, care necesită și o indentare. Și umplutura de a folosi nu pot, acest lucru va distorsiona aspectul. Ați adăugat containere, dar am selectat marginea și afișarea: flex; pentru a preveni colapsul indentării (în orice caz, avem nevoie de un Flexbox pe aceste elemente). De asemenea, trebuie să eliminați câteva margini ale barei laterale pentru a permite o indentare dublă:
Este timpul să adăugați adaptabilitate! În ferestrele de vizualizare medii, puteți reveni la afișarea: regula flex, cu care am distribuit uniform conținutul barei laterale pe linie:
În porturile largi de vizualizare, vreau ca bara laterală să meargă spre dreapta, iar conținutul la stânga. Am decis să adăugăm împachetarea la ambele elemente, ceea ce înseamnă că am nevoie de clarfix pe container:
Rezultat cu elemente de aspect subliniate:
Deci, care este problema?
În ciuda faptului că CSS în acest demo nu este cel mai strălucit, unele dintre cele mai incomprehensibile tehnici pot fi ușor de luat în considerare:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Pentru a obține linii egale în jurul șabloanelor adaptive, trebuie să aplicați o jumătate de liniuță containerului și jumătate elementelor copilului;
flexbox ne oferă posibilitatea de a comunica intențiile noastre în design cu termeni precum șir și coloană. Cu toate acestea, puteți folosi unul sau altul și acest lucru ne obligă să revenim la proprietatea flotorului mai puțin intuitivă în cazurile în care este necesară schimbarea ambelor axe în același timp;
Deoarece am adăugat împachetarea la toate elementele copilului, a trebuit să folosim pseudo-elemente pentru a curăța artificial containerul pentru a evita perturbarea aspectului elementelor de pagină.
Ați putea spune: "De ce nu ați folosit alte tehnici?". Cu toate acestea, tehnicianul fără compromisuri este foarte mic. Dacă bara laterală este absolut poziționată, conținutul său nu poate depăși conținutul principal. Dacă mutați bara laterală până la sfârșitul marcajului și îl modificați utilizând proprietatea de comandă la dimensiuni mici, va trebui să configurați indexurile filelor pentru dispozitivele auxiliare.
CSS Grid Layout în această privință este diferită. A fost construit de la sol în două axe simultan. Să vedem cum se aplică aspectul grilei la acest aspect.
Metoda cu grila
Spun browser-ului că containerul va folosi grila, iar linia dintre elemente ar trebui să fie 1.5 ... fără delimitatori:
Bara laterală va avea aceleași stiluri de aspect și umplutură. De fapt, ați putea folosi afișarea: subgrid, dar pentru moment este prea complicat:
Mai mult pentru abordarea mobilă-prima, nu avem nevoie de nimic. În porturile de vizualizare medii, bara laterală își reconstruiește copiii în două coloane egale, fiecare ocupând jumătate din spațiu:
(Există noi unități de măsură fr și le ador eu. Abrevierea înseamnă "fracționată" și înseamnă "o parte din spațiul disponibil". Puteți folosi 50% 50%, dar atunci ar trebui să calculați diferența de rețea.)
Pe o scară largă, aplicăm aceleași tehnici containerului, doar prima coloană pe care o facem 2fr, astfel încât ocupă două treimi din spațiul liber:
În mod prestabilit, bara laterală este aliniată într-un rând, iar elementele copilului sunt întinse, umplând spațiul liber. Ultimul pas este de a acoperi bara laterală prin două serii de conținut și de a determina dimensiunile elementelor copilului din bara laterală pe baza dimensiunii minime necesare pentru afișarea conținutului lor.
Asta e tot! Versiune nouă din grila demo-ului nostru de început în versiune așa cum apare în cele mai recente versiuni de Firefox și Chrome:
Aproape jumătate din dimensiunea CSS, nu există marje negative, și aproape nici o calcule! Ura!
Uităm că am fost învățați
Momentul mărturisirii: abia am primit demo-ul de mai sus. A trebuit să solicit ajutor de multe ori de la colegul meu Erik Jung de la Cloud Four, pentru ca totul să funcționeze așa cum era planificat. Privind înapoi, mi se pare că cel mai important dușman al meu a fost propria experiență de 15 ani a stilurilor de scriere. Sunt atât de obișnuit să trec de la sarcina de proiectare, sunt obișnuit cu faptul că trebuie să vorbesc limbajul CSS și să lucrez la quirks, ceea ce a făcut sarcina mai dificilă decât era necesar. Îmi pierdeam timpul încercând să hack unele probleme atunci când tot ce trebuia să fac a fost să spun "hei, întinde div în două rânduri".
Din acest exercițiu, am aflat că CSS Grid Layout este un instrument uimitor și abia am înțeles domeniul capabilităților sale. De asemenea, este plăcut ca browserele cu funcții de rețea să accepte interogări funcționale și poate că le putem folosi mult mai devreme decât ne-am gândit. Data viitoare când mă lupt cu aspectul, voi încerca să abordez problema ca student, rezistând "caluselor" mentale care s-au format în ultimii ani de soluții.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Trimiteți-le prietenilor: