Új kijelző flow-gyökér
Az új értékek tulajdonságainak megjelenítéséhez CSS Display modul harmadik szint (amelynek fejlesztése már követte a megelőző évben), hogy lassan hatol be a böngésző-alapú valóságot. Az első fecske - kijelző: tartalom - több mint egy éve támogatja a Firefox, az előtag nélkül és a zászlókat. A második fecske „repülni” is szól: A Firefox és a Chrome 53+ 57+ jelenik kijelző: flow-gyökér. És ez már dolgoznak az éjszakai épít és Kanári volt.
Körülbelül ebben az érték már sok zavart. Remélem, hogy ez egyfajta mini-FAQ segít rendezni ezt a rendetlenséget.
- Mit jelent a kijelző: flow-gyökér?
Röviden: hozzon létre egy külön egységet tesz blokk formázás összefüggésben. Mellékhatások nélkül.
Hosszú:., A részleteket lásd alább.
- Mi a formázás kontextusban?
Röviden: a dolog, hogy az erők csinálni CSS elrendezés. Komolyan: ez így, szinte szóról szóra. Ez határozza meg, hogy a korábbi verziókban CSS Kijelző 3 specifikáció.
Hosszú: Most specifikáció határozza meg, mint „olyan közegben, amelyben található egy sor összekapcsolt tartályokat.” Szabályok ebben a létesítményben különböző kontextusokban eltérő formázást. Például, a Flex-működnek tartály fleksboksov összefüggésben formázási és elrendezési szabályok gyermek elemek által meghatározott tulajdonság Flex-áramlás (az irányt a fő és a keresztirányú tengely, akár többsoros fleksboks stb) (és összetevői). Tedd a formázás keretében Rács tartály, és az elhelyezés szabályok saját. Az összefüggésben táblázatos formában kötelezően beépített szerkezet, amely utánozza a HTML-táblázat szerkezete (asztal / table-row / table-cell), ha egy bizonyos szint hiányzik, a böngésző dostravivaet helyett névtelen dobozok. Stb
De legfőképpen van dolgunk két formázási kontextusban: inlaynovym és blokk. Szó (és egyéb dolgokat, építik be a szöveget - ikonok, mezők, stb) lesznek húr vonal „csomagolt” egyfajta téglalap alakú „dobozok” - mondatokat, amelyek 1-1 „halom”. Számunkra, mint mindig, hogy a vonalak vízszintesen futó balról jobbra, és blokkolja - függőlegesen lefelé, de vannak más lehetőségek. Együttesen ez a dolgok rendje az úgynevezett „normális áramlását”, „streaming elrendezés” vagy egyszerűen a „flow” (flow angol nyelven).
- Miért van az egyedi kontextusban?
Egy blokk formázás összefüggésben vannak nemcsak a szokásos blokkok, hanem úszó (kedvenc float-ok). A leírás szerint, lebegő blokkal nem befolyásolják a normális, de befolyásolja az inlaynovoe (szöveg) tartalom - erővonalai konténerek ( «sorban dobozok») uzhatsya. Ie határain hagyományos egységek úszó jelent semmit - ők egyszerűen egymásra a blokkokat és végig őket, de belül, bár a külső, legalábbis egészen. De a szöveg fölé kerül rájuk nem lehet és kerületi külsejük, szorította a fennmaradó helyet. Itt látható egy példakénti illusztráció (:) off-line, mivel ez lehet:
Mivel az úszó-s kitalált csak csomagolópapír keretek a szöveg, hanem egy vízszintes tagolás blokkolja ezt a viselkedést - „nem hiba, hanem egy funkció”: a szöveg körbe a sidebar, mint szükséges, anélkül, hogy megvárná a végén a blokk vagy bekezdés, az elrendezés nem fog csúnya lyukakat. Hanem azért, mert közvetlenül követi a „inkontinencia» float-ok szokásos blokk konténerek, amelyekben nem vagy szöveget. A valami, és van, hogy „kezelni” hack vagy hozzáadjuk a tartály végén a (ál) elemet a tiszta (ez clearfix és variánsai), vagy ha igen, float-ok a tartályon belül és kívül a blokkok tartoznak a különböző összefüggésekben formázás. Blocks úszó-s idegen kontextusban nem „dudor”.
És még egy „funkció» CSS folyamatos szöveg, csomagolópapír problémák valami bonyolultabb - ismert a legendás «összeomlás» margin-s. Ismét, a szokásos blokk külső benyomódási gyermek elemek „kiesik” kívül. És a blokk, hozzon létre egy külön blokkot összefüggésben - soha.
- Tehát, kijelző: flow-gyökér - ez csak egy új divat clearfix?
Nem. Ez egy standard cseréje amit használni kell tenni a túlfolyó: rejtett, display: table / table-cell és még kifinomultabb hack.
Amikor világossá fix úszó blokkok és leszármazottaik legördülő margin-s marad ugyanabban a formátumban összefüggésben. És ilyen módon - nem. A legjobb, ha látni és „érzi”, hogy az interaktív példák, mint például ez, vagy CodePen alább. Láthatjuk egy összefoglaló és összehasonlító táblázatot.
- De Rachel Andrew mondja. azaz - a végén a hack a klirfiksami ...
Igen, csapkod a végén, mert a probléma most van egy szabványos megoldást. De az én nagy tisztelettel Rachel, ő, véleményem szerint kissé pereuproschaet.
Azt forknul például az ő cikkeket és hogy minél több podbavit elemek vizuálisan kiemelni a különbség a viselkedését az egyes módszerek (és egy pár bónuszokat figyelmes olvasó):
- Miért van ez flow-gyökere nem nevezték egy világos, mondjuk, float-konténer?
Röviden, legalábbis azért, mert nem csak a float-ok. És a „flow» (flow) az egyik legfontosabb a CSS, mint amit nem tudom, szégyellem;)
Hosszú: a lényeg ebben az ügyben egyáltalán nem jár a lebegő blokkokat, és még minden a blokkokat. A lényeg az, hogy az elem lehet „dönteni”, mit kell tenni annak tartalmát: számára, hogy továbbra is a szülő formázás keretében, vagy létrehozhat saját.
A CSS Display modul 3 display tulajdonság készült kompozit, másrészről a felelős magatartás a külső egység (kapcsolatban a szomszédok), a másik - a belső (jobbra gyerek elemei elhelyezés). Még amikor először találkoztunk ezzel a modullal, azt vettük észre, hogy a legtöbb meghatározzák a kijelzett értékek egyedileg majd, és így tovább. Ez egyértelműen megfelelnek az adott pár új értékeket. felelős a formázást összefüggésben - megjelenés, amelyben az „élő” elem is, és a belső, ami által működtetett utódai. Mindezek az elemek létrehozása A második környezetben automatikusan, akarva-akaratlanul.
És csak két érték kijelző elvileg lehetne folytatni belül az azonos formázási összefüggésben, melyek maguk is. Ez az inline és a blokk. Ez azt jelenti, hogy mi van a flow (áramlás). Itt vannak a W3C és a hívott ilyen magatartást akkor, amikor az áramlás külső Belül folytatódik, „folyik” vissza - áramlás. Egy ilyen, amikor az áramlás belsejében eleme, mivel újra kezdődik, függetlenül a külső - áramlás-gyökér (. Letters „root flow”, azaz az elején).
A inlaynovogo szintű elem első kiviteli alak (kompozit érték inline áramlás) megfelelt a hagyományos inline, és a második (inline flow-gyökér) - a jó öreg inline-blokk. De egy blokk szintű elem szokott lenni csak egy közönséges blokk. megfelelő kompozit blokk áramlását. Tedd a blokk a kezdete egy új kontextusban egyetlen mellékhatása sikerült valami mást - azaz, csapkod. Most, mert ez az alapértelmezett érték (a megfelelő kompozit blokk áramlás-gyökér).
Sajnos, az érték a komponensek önmagukban megjeleníteni böngészők még nem támogatják. Várakozás ezt a részét a leírásban „érik”. Mégis, csak adjunk hozzá egy-két érték az ingatlan - egy dolog, de változtatni annak logikáját és ez megváltoztathatja CSS-elemzőt - egészen más ...
- Különben is, én nem szeretem a nevét a flow-gyökér. Talán még nem késő változtatni, hogy valami „emberi”?
Meg lehet próbálni. Indokolja csak jobb, mert nincs valós igény az érték megváltoztatásához már megvalósult senki sem.
- Mi van, ha akarom használni divatos klirfi ... ez egy adott környezetben, például a flex-konténer? Tedd «kijelző: flex flow-gyökér» mert nem tudsz. Be kell extra borítás?
Nem, ez nem szükséges. Ez egyszerűen nem szükséges. Gondok vannak a „veszteség» float-margin-s és s fordul elő csak a falon. azaz a hagyományos egységek. Elemei más formázási szabályok szigetelik kontextusban automatikusan. Ezen túlmenően, nem float-ok és nincs flex a tartályban: akkor is, ha a gyermek és volt úszó. „Magic” fleksboksovogo összefüggésben erősebb, és átalakítja őket a hagyományos rugalmas-elemek, együtt a többi. És már ezekben flex elem - saját elszigetelt környezetben, amelyből semmi sem túl nem esnek ki.
- Apropó, vannak esetek, fleksboksy ezért ma már általában minden ilyen csapkod lebegni?
Bizonyára észrevette! Valóban, ez az elrendezés blokkok ilyen hack szinte nincs szükség. Ez korábban kellett szenvednie a költségek nem megfelelő eszközöket, mert a másik nem volt egyszerű. És ez mintegy 3% -a böngészők fit eszközök nem értem -, így érdemes ölni megakrasoty ezekben dinoszauruszok, talán még fontosabb, hogy a helyek / interfészek gyorsan betöltődik, és nem tartoznak a súlya felesleges mankók és polifiletikus csoport és a „Spartan” megjelenés - a legkisebb problémája, a felhasználók hozzászoktak ahhoz a nehézségeket? Annak érdekében, hogy az idő múlásával ezek a „klirfiksy” elkerülhetetlenül süllyedni a történet. Ki ma emlékszik IEshny hasLayout (mellesleg is, bizonyos értelemben, olyan módon, hogy hozzon létre egy blokkot formázás összefüggésben :)?
- És most mit kell tennie, várva a nagy böngészők csak támogatja a flow-gyökér? Lehet-e zapolifilit?
Sajnos, közvetlen és általános csere a meglévő megoldások nem (mint láttuk). Mindegyiküknek megvannak a maguk korlátai és hátrányai, és meg kell, hogy gondosan smotrtet egy adott feladatra, minden esetben, hogy a kritikus. Valahol alkalmas túlfolyó, valahol - inline-block / asztal / asztal-sejt, amely egyértelműen utal a mérete (egyébként akkor lesz a méret a tartalom). Ha a tartály - fieldset elem, akkor a szerencse: nem szükséges, hogy szinte semmit vele, hogy létrehoz egy új blokkot alapértelmezett környezethez. És ha lehetséges, használja az elrendezés blokkok nem úsznak-s és fleksboksy és hálózatok (is, és a CSS asztali semmi nem áll vissza a számlák), így nem hogy az ügyet hack.
Így néz ki az újdonságokat, ne félj eksperimenirovat, és hogy veletek maradjon CSSila! =)
Ui Lásd még az összehasonlítás a módját, hogy hozzon létre egy új blokk formázás keretében, beleértve az új, formájában egy táblázatot a jegyzeteket.