Noua afișare flux-rădăcină
Noile valori ale proprietăților de afișare al treilea nivel modul CSS display (dezvoltarea pe care le-am urmărit de un an înainte) să pătrundă încet în realitatea bazată pe browser. Prima rândunică - display: conținutul - mai mult de un an este acceptat în Firefox, fără prefixul și steaguri. A doua Rândunica „acoperi“ este pe cale: În Firefox și Chrome 53+ 57+ apare un display: flux-rădăcină. Și este deja lucrează în fiecare seară și Canare, respectiv, construiește.
În jurul această valoare este deja o mulțime de confuzie. Sper că acest lucru este un fel de mini-FAQ va ajuta sorteze mizeria asta.
- Ce face display: flux-rădăcină?
Pe scurt: a crea o unitate separată face un context bloc de formatare. Fără efecte secundare.
Long:., A se vedea detaliile de mai jos.
- Care este contextul de formatare?
Pe scurt: un lucru pe care forțele de aspect CSS fac. Serios: în acest fel, aproape cuvânt cu cuvânt. Aceasta definește în versiunile anterioare ale CSS 3 display caietul de sarcini.
Long: Acum, caietul de sarcini definește ca fiind „un mediu în care se află un set de containere interconectate.“ Reguli în această cazare în diferite contexte sunt diferite de formatare. De exemplu, în flex-opereze container fleksboksov elemente de formatare context și reguli de aspect copil definite de-fluxul flex de proprietate (direcția principală și transversale axe, dacă fleksboks multilinie etc.) (și componentele sale). Face containerul Grila context de formatare și plasare normele proprii ale lui. În contextul unui format tabelar obligatoriu structurii construite, care emulează structura HTML-tabel (tabel / table-rând / masă de celule), în cazul în care un anumit nivel este lipsă, dostravivaet browser-ul în loc cutii anonime. Etc.
Dar, mai presus de toate avem de-a face cu două contexte de formatare: inlaynovym și bloc. Word (și alte lucruri, construite direct în text - icoane, câmpuri de formular, etc.) vor string o linie de „ambalate“ într-un fel de formă dreptunghiulară „cutii“ - „stive“ blocuri care sunt plasate unu la unu Pentru noi, ca de obicei, că liniile sunt orizontale de la stânga la dreapta, și blocuri - vertical în jos, dar există și alte opțiuni. În mod colectiv această ordine a lucrurilor se numește „flux normal“, „aspect de streaming“ sau pur și simplu „flux“ (flux în limba engleză).
- De ce contextul individuale?
Într-un context bloc de formatare, există nu numai blocuri de obicei, dar, de asemenea, plutitoare (nostru preferat float-uri). Conform caietului de sarcini, blocuri plutitoare nu afectează normal, dar afectează inlaynovoe lor (text) conținut - forța de linii de containere ( «cutii line») uzhatsya. Ie limitele de unități convenționale pentru plutitoare nu înseamnă nimic - acestea sunt pur și simplu suprapuse pe blocuri și trec prin ele, deși în interior, deși exterior, cel puțin dreapta. Dar textul este suprapus peste ele nu pot și trebuie să se înfășoare în jurul exteriorul ei, stoarcere în spațiul rămas. Aici este o ilustrare exemplară (:) off-line, cum poate fi:
Deoarece float-s inventat doar pentru învelirea cadre text, mai degrabă decât un blocuri aspect orizontal acest comportament - „nu este un bug, ci o caracteristică“: textul se va încheia în jurul valorii de bara laterală cât mai mult este necesar, fără a aștepta sfârșitul blocului sau paragraf, aspectul nu va găuri urât. Dar, pentru că acesta este urmat în mod direct de „incontinență» float-uri bloc containere convenționale în care insuficiente sau nu conține text. ceva și trebuie să „trateze“ hacks fie adăugat la capătul containerului al elementului (pseudo) cu clare (clearfix-l și variantele sale), sau de a face acest lucru pentru a pluti-uri în interiorul containerului și în afara blocurilor aparțin unor contexte diferite de formatare. Blocuri de contexte străine-float nu e „bump“.
Și încă o „caracteristică» CSS pentru text continuu, ambalaj probleme în ceva mai complex - cunoscut, cu un «colaps legendar» margin-uri. Din nou, din blocul convențional elemente de amprentare externe copil poate „cădea“ în afara. Și din blocul, de a crea un context bloc separat - vreodată.
- Deci, afișare: flux-rădăcină - este doar un nou clearfix moda?
Nu. Acesta este un înlocuitor standard a ceea ce se face prin overflow: ascuns, afișare: masa / masa de celule și chiar hacks mai sofisticate.
Când clar blocuri plutitoare fixe și descendenții cu drop-down margin-uri rămân în același context format. Și în aceste moduri - nr. Cel mai bine este de a vedea și „simt“ că pe exemple interactive, cum ar fi acest lucru sau CodePen de mai jos. Puteți vedea un tabel de sinteză și comparare.
- spune Dar Rachel Andrew. adică - sfârșitul hacks cu klirfiksami ...
Da, am hack la sfârșitul anului, pentru că problema este acum există o soluție standard. Dar, cu toate meu mare respect pentru Rachel, ea este, în opinia mea, ușor pereuproschaet.
Am forknul exemplu de articolele sale și pentru a obține mai multe elemente podbavit pentru a sublinia vizual diferența în comportamentul fiecărei abordări (și câteva bonusuri pentru cititori atenți):
- De ce este acest flux-rădăcină nu este numit ca mai clar, să zicem, float-container?
Pe scurt, cel puțin, pentru că nu este vorba doar despre float-uri. Iar conceptul de „debit» (debit) este una dintre cheia în CSS, de la ceea ce nu știi e rușine;)
Long: esența acestei chestiuni, la toate nu este asociat cu blocuri plutitoare, și chiar și cu toate blocurile. Linia de jos este faptul că elementul ar putea „să decidă“ ce să facă cu conținutul său: pentru el să continue la contextul de formatare părinte sau de a crea propriul.
CSS Modulul de afișare 3 proprietate de afișare a făcut compozit, o parte este responsabil pentru comportamentul unității externe (în raport cu vecinii), celălalt - pentru interioare (elementele de copil dreptul de cazare). Chiar și atunci când ne-am întâlnit pentru prima dată cu acest modul, am observat că cele mai multe determina valorile de afișare în mod unic și apoi, și multe altele. Aceasta este în mod clar corespund perechilor specifice de valori noi. responsabilă atât contextul de formatare - aspect, în care elementul de „viu“ în sine, și interne, care este condusă de urmașii săi. Toate aceste elemente creează acest al doilea context automat, vrând-nevrând.
Și doar două valori de afișare, în principiu, ar putea continua în interiorul același context de formatare, care sunt ele însele. Această linie și bloc. Adică, ceea ce este în fluxul (debitul). Aici sunt W3C și numitul element un astfel de comportament atunci când fluxul extern continuă în interior, „curge“ înapoi - debit. Un astfel, atunci când fluxul din interiorul elementului deoarece acesta începe din nou, indiferent de exterior - flow-rădăcină (Letters „flux rădăcină“, adică începutul ei.).
Pentru inlaynovogo element de nivel de realizare mai întâi (o valoare de curgere în linie compozit) corespunde inline convenționale, iar al doilea (inline flow-rădăcină) - buna inline-bloc vechi. Dar pentru un element de nivel bloc folosit pentru a fi doar un bloc obișnuit. fluxul de bloc compozit corespunzător. Blocați începutul unui nou context doar efect secundar urmat de altceva - adică, hack. Acum, pentru aceasta este valoarea implicită (bloc compozit flow-rădăcină corespunzătoare).
Din păcate, valoarea componentelor se afișează browsere nu acceptă încă. În așteptare pentru această parte a caietului de sarcini, „coc“. Cu toate acestea, se adaugă doar una sau două valori pentru proprietate - este un lucru, dar pentru a schimba logica și pentru a modifica CSS-parserul - destul de altul ...
- Oricum, nu-mi place numele de flux-rădăcină. Poate că nu e prea târziu să-l schimbe la ceva mai „uman“?
Puteți încerca. Justify doar mai bine, pentru că nu este nevoie reală de a schimba valoarea realizată deja nimeni nu ar fi.
- Ce se întâmplă dacă vreau să folosesc klirfi la modă ... care este un context specific, de exemplu, la flex-container? Asigurați-vă «afișare: flex flux-rădăcină» pentru că nu poți. Ai nevoie de înveliș suplimentar?
Nu, nu este necesar. Este pur și simplu nu este necesar. Probleme cu „pierdere» float-margin-uri si s apar numai în flux. și anume pentru unități convenționale. Elemente de alte reguli de formatare a izola automat contextele lor. În plus, nu float-uri și nu există nici un flex în container: chiar dacă copiii săi și a fost float. „Magic“ context fleksboksovogo este mai puternic și le transformă în elemente-flex convenționale, împreună cu restul. Și deja în aceste elemente flex - contextul lor propriu izolat din care nimic nu prea nu va cădea.
- Apropo, există momente fleksboksy de ce am acum, în general toate aceste hacks să plutească?
Cu siguranță observat! Într-adevăr, este pentru blocurile de aspect este aproape că nu este nevoie de astfel de hacks. Ea a avut anterior să suporte costurile de instrumente inadecvate, pentru că celălalt nu a fost simplu. Și că aproximativ 3% din browsere instrumente se potrivesc nu înțeleg - deci este în valoare de uciderea pentru megakrasoty în aceste dinozauri, probabil, mai important, pentru site-uri / interfețe sunt încărcate rapid și nu cad sub greutatea cârje inutile și polyphyly și uite „Spartan“ - cea mai mică problemă pentru utilizatorii lor sunt obișnuiți cu dificultăți? Așa că, în timp aceste „klirfiksy“ scufunda în mod inevitabil, în poveste. Cine astăzi își amintește IEshny hasLayout (de altfel, de asemenea, într-un sens, o modalitate de a crea un context de formatare bloc :)?
- Și ce să fac acum, în timp ce de așteptare pentru browsere masive suporta doar fluxul de-rădăcină? Poate zapolifilit?
Din păcate, înlocuirea directă și universală la soluțiile existente nu (așa cum am văzut). Fiecare are limitările și dezavantajele lor, și este necesar să se smotrtet cu atenție pentru o anumită sarcină, în orice caz, că este critică. Undeva preaplin potrivit, undeva - inline-bloc / de masă / masă de celule cu o indicație clară a dimensiunii (în caz contrar ele vor primi dimensiunea conținutului). În cazul în care containerul - elementul FIELDSET, sunteți în noroc: nu este necesar de a face aproape orice cu ea, creează un context nou bloc implicit. Și, dacă este posibil, utilizați pentru blocurile de aspect nu float-uri si fleksboksy si grile (bine, iar CSS masă nimic nu este resetat din conturile), asa ca nu aduce cazul la hacks.
Deci, ai grija pentru ceea ce este nou, nu-ți fie frică eksperimenirovat, și că el să rămână cu voi CSSila! =)
P.S. A se vedea, de asemenea, comparația dintre modalitățile de a crea un context nou bloc de formatare, inclusiv cel nou, sub forma unui singur tabel cu notele.