Dacă în tabel există doar două celule, atunci elementul nostru special ar trebui să ocupe al doilea, dar dacă sunt mai mult de trei, acesta va ocupa ultima celulă din primul rând al mesei.
Contor pe CSS pur
Recent, m-am scufundat complet în flexbox, învățând-o împreună cu fluxul de conținut utilizând proprietatea float. Aceste metode am folosit în structura micului nostru proiect HackerYou. Și am aflat că studenții înțeleg rapid acest subiect. Specificația flexbox are proprietăți care ne permit să modificăm marcajele în moduri noi. Una dintre aceste metode este proprietatea ordinului, vă permite să modificați ordinea vizuală a conținutului fără a afecta marcarea acestuia.
Împreună cu solicitările mass-media, comanda este extrem de utilă, avem posibilitatea de a schimba ordinea conținutului în funcție de dimensiunea ferestrei browserului. Și ma făcut să mă gândesc: De ce nu putem schimba ordinea elementelor în funcție de cantitatea de conținut?
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
Interogări cantitative
Ideea propusă de Lea Verou, André Luis și Heydon Pickering, constă în faptul că aceste cereri contoriza numărul de elemente adiacente și se aplică stiluri pentru a le dacă tastat anumit număr. Ce se întâmplă dacă combinăm interogări cantitative cu proprietatea comenzii pentru a schimba ordinea conținutului, în funcție de numărul său?
Metoda bazată pe Flexbox
Una dintre cele mai importante schimbări în flexbox este sintaxa numelui proprietăților asociative și a valorilor. Pe măsură ce caietul de sarcini se dezvoltă de-a lungul timpului, producătorii de browsere vor folosi sintaxa disponibilă în acest moment. Prin urmare, pentru a veni în sprijinul browserelor învechite, trebuie să utilizați prefixele furnizorilor.
Cum să înțelegeți esența ordinului
Înainte de a vă arunca cu capul în interogări cantitative și de a înțelege munca lor, trebuie să înțelegeți cum să lucrați cu proprietatea ordinului. În primul rând, trebuie să înfășurați conținutul cu elementul părinte și să adăugați stilurile de afișare: flex la acest ambalaj.
În mod prestabilit, elementele sunt aranjate în ordinea specificată de marcare. Toți copiii din flexbox părinte au o valoare de comandă de 1.
Această valoare nu are o unitate de măsură și este pur și simplu mapată la numărul de ordine al elementului în raport cu restul elementelor din jurul acestuia. Dar putem schimba valoarea unui element individual folosind proprietatea ordinului.
În exemplul de mai sus, am schimbat ordinea liniei p.itemOne la o valoare de 2 și această linie este afișată după p.itemTwo. În acest fel, modificăm reprezentarea vizuală a elementelor pentru utilizator. Rețineți că aspectul a rămas același.
Contoare în CSS
Solicitări media, nu? Un instrument atât de bun în CSS în unele cazuri. Astfel de cazuri pot fi tipul de dispozitiv, dimensiunea ecranului, culoarea etc. - lucruri destul de puternice. Dar aceste interogări se aplică numai dispozitivului utilizatorului; Nu există o metodă specifică pentru CSS care să calculeze cantitatea de conținut dintr-un element.
Dacă tratăm creativ și cu atenție pseudo-clasele CSS existente, putem crea un set de instrumente pentru numărarea numărului de copii și aplicarea stilurilor corespunzătoare acestora. De exemplu, să folosim lista obișnuită numerotată:
Toate magiile prin numărarea elementelor adiacente din codul de mai jos. Aceste stiluri se aplică elementelor, dacă există 4 sau mai multe.
Stai, nu poate fi!
Exact, acesta este selectorul. În limba rusă, aceasta poate fi tradusă astfel: "Când elementele copilului din lista de 4 sau mai multe, primim elementele unei alte liste împreună cu primul copil". Să examinăm în detaliu. În primul rând, începeți cu contorul:
Traducere ca "Du-te la ultimul copil și conta 4 articole înapoi." Se aplică stiluri celui de-al patrulea element și tuturor celor care se află în fața acestuia. (Numărarea se face în ordine inversă!). Continuați și experimentați codul, atribuiți selectori altor valori.
Acestea sunt contoarele. Dacă elementele adiacente sunt mai mici de patru, atunci stilurile nu vor fi aplicate. Acum vom schimba acest selector astfel încât să selecteze toate literele din listă folosind selectorul universal.
Problema este că în acest caz primul element copil nu este selectat. Putem adăuga încă un selector:
Desigur, putem face selectorul mai independent prin specificarea pur și simplu a elementului părinte și lăsându-l să aleagă toți copiii. Vom face acest lucru cu ajutorul selectorului *.
Ordine bazată pe numărul de elemente
Acum, când ne-am dat seama cum să calculeze elementele cu CSS și modul de utilizare a flexbox pentru a schimba conținutul ordinului, să li se alăture și să creeze instrumente pentru organizarea elemente bazate pe numărul lor.
Din nou, dorim să facem ultimul element al treilea în listă (adică ultimul element este afișat ultima în prima linie), dacă există mai mult de trei elemente.
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
Să adăugăm câteva stiluri. În containerul părinte, adăugați afișarea: flex, această proprietate ne va permite să aplicăm proprietatea ordinului elementelor sale copil. În plus, pentru a distinge elementele unul de altul, vom adăuga câteva elemente implicite pentru elementul .getar.
Acum, că avem stilurile de bază, putem crea logică pentru a aranja elementele într-un anumit mod. Din nou, în mod prestabilit, toate articolele au o valoare de comandă de 1 și sunt afișate în ordinea în care sunt scrise în aspect. Utilizând interogări cantitative, putem calcula numărul de elemente. Există mai mult de trei elemente.
Apoi, dacă condiția este îndeplinită, putem selecta elementul țintă dorit. Am folosit valoarea -1 pentru proprietatea ordinului, acum acest element va fi afișat în partea de sus a listei.
Voila! Am doar stilizat elementul prin numărarea elementelor adiacente acestuia. Cu acest cod, putem pune un element în fața celuilalt. Și dacă ar fi necesar să punem un element între două?
Câteva reflecții logice
Avem o problemă cu trei necunoscute:
În mod prestabilit, toate elementele din listă au ordinea valorii: 1. Trebuie să ne asigurăm că această valoare nu se modifică pentru primele două elemente.
Elementul nostru special ar trebui să fie situat la sfârșitul primei linii. Deci, trebuie să creștem valoarea ordinii și să o facem mai mult decât primele două elemente, adică 2.
Toate elementele, începând cu al treilea, ar trebui să aibă o valoare a ordinului mai mare decât elementul țintă. Prin urmare, pentru restul elementelor, valoarea ordinului este de 3.
Ce mai faci? Întrucât toate elementele au în mod implicit o valoare de 1, nu este necesar să le declarăm. Să stabilim elementul nostru special la valoarea ordinului: 2 cu ajutorul interogărilor cantitative, plasându-l efectiv în cele din urmă.
Apoi, aplicând o altă interogare cantitativă la nth-child (), începem să numărăm elementele de la începutul listei și nu de la final. Din moment ce am scris o cerere pentru tinta, acest element va fi ignorat, dar toate celelalte elemente treia si urmatoare vor schimba ordinea lor.
Să o luăm încă o dată!
Contorizăm de la sfârșitul listei elementelor copil pentru a vedea dacă se potrivește cu un anumit număr. Dacă numărul de elemente satisface condiția, aplicăm stiluri elementelor selectate. Apoi începem să numărăm de la începutul listei și să aplicăm stilurile tuturor elementelor pentru un anumit element special. Cea mai importantă caracteristică este că dacă eliminăm elementele, atunci elementul țintă va rămâne în locația dorită.
Scopul final
Primul gând, când mi-am dat sarcina, era de a folosi limbile de programare. Din moment ce am folosit WordPress, aș putea schimba bucla și, după calculul numărului de elemente, introduceți elementul țintă în locul potrivit.
Dar din moment ce am creat un site pentru școală pe front-end de dezvoltare, am vrut să fac acest lucru pe CSS pur și să expună proprietățile comenzii flexbox. Mai jos este un exemplu al rezultatului final, realizat în întregime în CSS.
Aplicare în practică
Conceptul de interogări cantitative este destul de nou și, prin urmare, scrierea selectorilor poate fi ușor dificilă. Cu toate acestea, comunitatea de dezvoltare a acceptat cu ardoare acest concept și deja scrie Sass mixin'y, ceea ce ne va ajuta să facem anchetele mult mai eficient. Astfel de biblioteci, cum ar fi, de exemplu, biblioteca Mixinului Query Mixin de Daniel Guillan ne permite să scriem interogări media ca o legătură simplă.
De asemenea, acest concept și puterea ascunsă în el sunt explicate într-o varietate de articole. James Steinbach a scris un articol remarcabil "Aplicarea Sass în interogări cantitative".
Suport pentru browser
În prezent, pseudo-clasele CSS și flexbox funcționează bine în browserele moderne. Dacă proiectul dvs. ia în considerare utilizatorii care nu sunt mai mici decât IE10, puteți utiliza interogări cantitative împreună cu flexbox.
Unde se utilizează
La crearea site-urilor web, recurgem adesea la limbi de programare care ne permit să numărăm și să modificăm conținutul nostru, dacă este necesar. Cu toate acestea, CSS a devenit mult mai bine și am trecut de la limbajele de programare la proprietățile CSS avansate.
ordonare cantitativă ne permite de a elimina bucățile de cod cu bucle, care sunt responsabile pentru elementele de calcul și de inserție în ordinea corectă, aducerea noastră de conținut în minte pur semantic.
concluzie
Interogările cantitative și ordonarea sunt concepte avansate și pot speria începători. Cu toate acestea, pe măsură ce avansăm stilizarea prezentării din limbile de programare către CSS, cu atât vom folosi mai mult acest instrument. Un număr tot mai mare de membri ai comunității noastre descoperă cereri de conținut pentru ei înșiși și acum putem folosi interogări cantitative pentru a schimba ordinea conținutului pur și simplu cu ajutorul contoarelor.
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
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
Trimiteți-le prietenilor: