11 dalykų, kuriuos išmokau skaityti CSS tinklelio specifikaciją

Alekso Kunčevskio iliustracija

2017 m. Birželio 11 d., Aš nusprendžiau perskaityti CSS Tinklelio specifikaciją.

„Spec“ buvo šiek tiek techninis, tačiau tai buvo be abejo pati maloniausia specifikacija, kokią aš kada nors skaičiau. Jei esate labiau pažengęs kūrėjas, pažymėkite jį, kad galėtumėte naudoti ateityje.

Taigi, ar tai bus naudinga?

Manau, kad skirtumas tarp gerų ir puikių inžinierių yra tas, kad pastarieji laiko suprasti, kas iš tikrųjų vyksta po gaubtu. Jie mokosi, kaip viskas veikia, užuot mokęsi „kopijuoti ir įklijuoti“.

Taigi, ar norite būti puikus kūrėjas?

Taip, po velniais. Arba jūs neskaitytumėte šio straipsnio.

Ko išmoksi

Skaitydamas specifikaciją išmokau labai subtilių, bet gilių detalių.

Šiame straipsnyje pasidalinsiu jais su jumis.

1. CSS tinklelis yra deklaratyvus

Deklaratyvios API yra tokios malonios. Galvoji „ReactJS“?

Kadangi svetainės iš paprastų dokumentų tapo sudėtingomis, interaktyviomis programomis, tapo sudėtinga sudaryti tinklalapių išdėstymo schemas. Taip sunku, jie buvo mano košmaras.

Tai yra būtent ta problema, kurią CSS tinklelis turi išspręsti šiandien.

Iš spec.

CSS tinklelis pašalina skausmingą intelektualiųjų maketų kūrimo procesą ir pakeičia jį gražiu deklaratyvių taisyklių rinkiniu, kuris palengvina procesą.

Tai yra geri laikai CSS istorijoje.

2. Dalinis vienetas ne visada sukuria vienodai išdėstytas eilutes ir stulpelius

Vienas iš pirmųjų dalykų, kuriuos visi sužino ir myli apie CSS tinklelį, yra trupmeninis vienetas. Net antis gali atsikratyti jos.

Dalinis vienetas pašalina skausmą skaičiuojant procentus. Tai malonu dirbti.

Daugelis žmonių moko, kad trupmeninis vienetas (fr) duoda vienodai išdėstytus stulpelius ar eilutes.

Pvz., Tikimasi, kad deklaracijoje, pvz., Nuo 1 nuo 1 nuo 1, bus gautos vienodo atstumo stulpeliai ar eilutės. Žiūrėkite žemiau pateiktą iliustraciją:

Vienodai išdėstyti stulpeliai, kuriuos sukuria trupmeninis vienetas.

Deja, tai ne visada tiesa. Prasta antis.

Taip yra iš spec:

„Fr“ blokas užpildo laisvą vietą, BET NIEKADA jis nėra mažesnis nei minimalus tinklelio talpyklos dydis ar eilutės ar stulpelio turinys.

Iš esmės, jei turite paveikslėlį, paveikslėlį ar bet kurį tinklelio elementą su minimalaus pločio ar minimalaus aukščio deklaracija, galite sulaukti netikėtų rezultatų naudojant trupmeninį vienetą.

Po to, kai sukramčiau kaip šlapia išsigandusi antis, daug laiko praleidau eksperimentuodamas su trupmeniniu vienetu. Aš parašiau straipsnį apie savo išvadas.

3. Jūs iš tikrųjų nežinote, kaip tinkleliai yra dydžio. Arba tu?

CSS tinklelio apibrėžimas visada prasideda šiomis eilutėmis:

ekranas: tinklelis

Dažnai tai seka eilučių ir stulpelių apibrėžimai. Kažkas panašaus į tai:

tinklelio-šablono eilutės: 10 taškų 1 iš 3 kai
tinklelio, šablono, stulpeliai: 1fr

Ir galiausiai, jūs greičiausiai padėsite tinklelio elementus bet kokia jums tinkama technika.

Kadangi yra daugybė būdų, kaip sudėti tinklelio elementus, praleisiu reikiamą trumpumo kodą.

Taigi, čia yra problema.

Po gaubtu turite manyti, kad tinklelio eilučių ir stulpelių dydis pirmiausia apskaičiuojamas prieš dedant elementus. Teisingai?

Na, atrodo, kad tiesa yra visiška priešingybė.

Kaip keista.

Taip yra iš spec:

2.3. Tinklelio dydžio nustatymas
Įdėjus tinklelio elementus, apskaičiuojami tinklelio takelių (eilučių ir stulpelių) dydžiai, atsižvelgiant į jų turinį ir (arba) laisvą plotą, kaip nurodyta tinklelio apibrėžime.

Atkreipkite dėmesį į progresą.

  1. Tinklelio elementai dedami.
  2. Apskaičiuojami tinklelio takelių dydžiai

Jums greičiausiai kiltų klausimų apie tai. Taigi, pabandysiu išspręsti tuos tavo rūpesčius.

Pirmiausia atkreipkite dėmesį, kad kiekvienam tinklelio elementui priskiriama tinklelio sritis. Tuomet tinklelio elementai šioje srityje išmatuojami. Taigi, kaip tiksliai dedami tinklelio elementai, dar neskaičiavus takelių dydžio?

Pažvelgę ​​į specifikacijos skyrių „Pateikimo tinklelis“, rasite užuominą.

Dydant tinklelius, į tai daug atsižvelgiama, ir tai daugiausiai apima tinklelio elementų dydį.

Dydžių dydžiai gali būti pagrįsti šiais elementais:

  • Fiksuota dydžio nustatymo funkcija (ilgis arba tinkama procentinė dalis).
  • Vidinė dydžio nustatymo funkcija (mažiausias turinys, maksimalus turinys, automatinis, tinkamas turinys ()) arba
  • Lanksti dydžio funkcija (flex).

Tai, kas, mano manymu, nutinka po gaubtu, yra tinklelio elementai.

Tai yra, nustatomas daikto blokas, tada nustatoma elemento dydžio funkcija. Tai savo ruožtu daro įtaką tinklelio takelių dydžiui.

Tu matai?

Ne tai, ką iš pradžių galvojai.

4. Pagal numatytuosius nustatymus tinklelio elementai ištempiami, kad atitiktų jų tinklelio plotą - išskyrus tam tikrus atvejus

Be jūsų įsikišimo, tinklelio elementai visada bus ištempti, kad atitiktų jų tinklelio plotą.

Taigi, jei turėtumėte tokią deklaraciją:

tinklelio šablono sritys: „antraštės antraštės antraštė“
                     „šoninės juostos pagrindinis“
                     'šoninės juostos poraštė'

Ir jūs buvote suskirstyti į konkrečias tinklo sritis, pavyzdžiui:

.div1 {
   tinklelio sritis: antraštė
}
.div2 {
   tinklelio sritis: šoninė juosta
}
.div3 {
   tinklelio plotas: pagrindinis
}
.div4 {
   tinklelio sritis: poraštė
}

Nereikia deklaruoti aukščiau esančių segmentų pločio ir aukščio iki 100%

Jie automatiškai ištemps, kad užpildytų atitinkamas zonas.

Dabar štai laimikis.

Toks elgesys neatitinka vaizdų.

Kaip pažymėjo Rachel Andrew, toliau specialistai sako, kad toks elgesys skiriasi tinklelio elementams, kuriems būdingas vidinis kraštinių santykis.

Neleisk, kad dideli žodžiai tave gąsdintų. Tai nėra demogorgonas.

Vaizdas pagal numatytuosius nustatymus yra tiesioginio bloko elementas, tačiau jie taip pat turi specifinius matmenis. Jie turi matmenis, natūraliai susijusius su jais. Vaizdas gali būti 400 x 600 pikselių pločio arba bet kokie matomi.

Tačiau tokie įprasti elementai kaip divs neturi vidinių matmenų. Tai yra, jie neturi matmenų, kurie natūraliai priklauso jiems.

Taigi, nors tinklelio elementai, kurių vidinių matmenų nėra, bus ištempti, kad tilptų į jų tinklelio plotą, tai negalioja tinklelio elementams, kurių vidinis matmuo yra, pvz., Vaizdai.

5. Ar tikrai žinote, kas yra tinklelio elementas?

Apsvarstykite žemiau pateiktą kodų bloką:

    
blokuoti
    
plūduriuoti
        Aš esu atsitiktinis tekstas              4 punktas     

Aukščiau esančiame kodų bloke galite pastebėti tinklelio elementus?

Kiek tinklelio elementų yra kodų bloke, 3 ar 4?

Akivaizdu, kad nesugebėjau atsakyti į šį klausimą.

Atminkite, kad tekstas, kuris esu atsitiktinis tekstas, nėra apvyniotas jokiomis html žymėmis.

kuris?

Taigi, koks yra tavo atsakymas?

Na, jei atsakėte į 3, klystate. Haha, gavai!

Remiantis spec., Anoniminis tinklelio elementas apvyniojamas aplink kiekvieną teksto eilutę tinklelyje.

Taip, tai reiškia, kad esu atsitiktinis tekstas, taip pat tinklelio elementas.

blokuoti
    
plūduriuoti
    
    Aš esu atsitiktinis tekstas

    
        4 punktas
    

Taip, atsakymas yra 4. Mes turime 3 aiškius tinklelio elementus ir 1 anoniminį tinklelio elementą!

Supratau?

6. Gretimų tinklelio elementų paraštės nesugrius.

Tarp blokų elementų ir tinklelio konteinerių yra didelių skirtumų.

Aš turiu omenyje, kad elementas su ekranu: blokas ir kitas su ekranu: tinklelis turi daug esminių skirtumų.

Skirtumas, kurį pasirenku aptarti čia, yra susijęs su sulankstomomis paraštėmis.

Vienas iš pirmųjų dalykų, kurio mokotės naudodamiesi CSS, yra sulankstomų paraštių koncepcija. Nenoriu praleisti daug laiko aiškindamas, ką reiškia sulankstomos paraštės. Jei jūs tai iškelsite komentaruose, aš padarysiu.

Taigi, grįžkime prie tinklelių.

Su kiekvienu tinklelio elementu paraštės niekada nesutraukiamos.

Na, tai suprantama. Leiskite parodyti jums kodėl.

Gretimi tinklelio elementai yra atskirai laikomi bloke, kurį sudaro jų tinklelio plotai.

Ką reiškia ši sudėtinga pastraipa aukščiau. Kiekvienas tinklelio elementas gyvena ir kvėpuoja tinklelio srityje

Tinklelio elementai dedami į atitinkamas tinklelio sritis. Jie apsistoja savo pačių nepaliestose teritorijose. Joms įtakos neturi sulankstomos paraštės. Kaip šaunu.

Taigi techniškai galite pasakyti, kad tinklelio elementas nėra tiesioginis kitų tinklelio elementų kaimynas. Tačiau jis yra nepertraukiamoje uždaroje teritorijoje - tinklelio srityje.

Jei jums įdomu, kokie kiti skirtumai egzistuoja tarp blokų ir tinklelio elementų, aš parašiau įdomų straipsnį šia tema.

7. automatinis užpildymas ir automatinis pritaikymas. Koks skirtumas?

Nors automatinis užpildymas ir pritaikymas atrodo kaip tos pačios funkcijos, jie tam tikru požiūriu skiriasi.

Jie yra panašūs ta prasme, kad leidžia automatiškai sukurti tinklelio takelius, kurie tam tikru būdu užpildo tinklelio talpyklą.

Pvz., Šis kodas sukurs tiek 200 taškų stulpelių, kiek tilps į lango plotį. Jei yra likusios vietos, ji bus paskirstyta 200xx stulpelių.

kūnas {
  ekranas: tinklelis;
  tinklelio, šablono, stulpeliai: pakartokite (automatinis užpildymas, mažiausias dydis (200 taškų, 1 fr));
}

Koks skirtumas?

automatinis užpildymas sukurs takelius, net jei nėra tinklelio elemento, kuris jį užpildytų. automatinis pritaikymas to nepadarys. Tušti takeliai bus pašalinti iki nulio.

Tai viskas.

8. Tinklelio-šablono-sričių apibrėžime žodžių skaičius eilutėje PRIVALO būti lygus.

Prisimenate keistai atrodančias tinklelio-šablono-sričių vertes, kurios atrodo kaip žemėlapis?

Na, atrodo, kad tai gali greitai viską sujaukti.

Tinklelio šablono sričių deklaracijoje visos eilutės turi turėti tą patį stulpelių skaičių, kitaip deklaracija negalioja.

Pavyzdžiui:

/ * tai galioja * /
tinklelio šablono sritys: „antraštės antraštės antraštės šoninė juosta“
                     "pagrindinė pagrindinė pagrindinė šoninė juosta"
                     "pagrindinė pagrindinė pagrindinė šoninė juosta"
/* Tai yra blogai */
tinklelio šablono sritys: „antraštės antraštės antraštės šoninė juosta“
                     "pagrindinė pagrindinė pagrindinė šoninė juosta"
                     „pagrindinė pagrindinė šoninė juosta“

Žodžių skaičius eilutėse turi būti lygus.

9. Nenaudokite procentų vien tik paminkštinimuose ar paraštėse ant tinklelio elementų

Iš CSS Tinklelio Spec

To priežastis yra paprasta. Rašydami skirtingose ​​naršyklėse elgsitės skirtingai.

Remiantis specifikacijomis, procentas gali būti nustatomas atsižvelgiant tik į elemento plotį, arba į kairę / dešinę paraštes pagal plotį, o viršutinė / apatinė dalys yra išskiriamos atsižvelgiant į aukštį.

Norėdami, kad daugumoje naršyklių būtų pateiktas nuoseklus pateikimas, venkite procentų naudodami tinklelio elementų įklotus ar paraštes.

Dar svarbiau, kad CSS tinklelyje jau yra keletas painių bitų. Nešaudykite sau kojos su procentine padėklo dalimi ar parašte ant tinklelio elementų.

10. Kaip aiškus tinklelis išsprendžiamas kilus konfliktui?

Tarkime, kad turite tokią tinklo deklaraciją:

tinklelio šablono sritys: „antraštės antraštės antraštės šoninė juosta“
                     "pagrindinė pagrindinė pagrindinė šoninė juosta"
                     "pagrindinė pagrindinė pagrindinė šoninė juosta"

Aukščiau esančiame kodų bloke turite 4 stulpelius ir 3 eilutes.

Ką daryti, jei jūs taip pat tai padarėte:

tinklelio, šablono, stulpeliai: pakartokite (5, 1fr)
tinklelio, šablono, eilutės: pakartokite (4, 1fr)

Dabar jūs turite daugiau stulpelių ir eilučių. 5 stulpeliai ir 4 eilutės.

Jūs tai turite?

Dabar deklaracijose yra konfliktas. Taigi, kaip tai išspręsta?

Remiantis specifikacijomis, aiškių tinklelių dydis nustatomas pagal didesnį eilučių / stulpelių skaičių, apibrėžtą tinklelio-šablono sritimis, ir eilučių / stulpelių skaičių, suskirstytą pagal tinklelio-šablono-eilutes / tinklelio-šablono-stulpelius. .

Specifikacijai gali atrodyti, kad tai sudėtingas paprastas dalykas. Ką tai reiškia, paprasčiausia kalba laimi deklaracija su didesniu eilučių ar stulpelių skaičiumi.

Aukščiau pateiktame pavyzdyje tinklelis užims 5 stulpelius, o 4 eilutės NE 4 stulpelių ir 3 eilutės.

* REDAGAVIMAS: tinklelio šablono sričių ypatybė naudojama tinklelio elementams sudėti ant grotelių. Taigi, kodėl turėtume konfliktuoti dėl tinklo apibrėžimo? Ar ne tinkleliai turėtų būti apibrėžti tik tinklelio, šablono, stulpelių ir tinklelio, šablono, eilučių ypatybėmis? Į tai atsakau komentarų skiltyje. Pasižiūrėk.

11. Tinklelio dydis nėra vien tik takelių dydžių suma

Tinklelio takeliai nurodo atstumą tarp tinklelio linijų.

Nors tai paprasta, verta paminėti, jei turite nustatyto pločio tinklelį.

Tinklelio dydį gali įtakoti tinklelio eilutės tarpas, tinklelio stulpelio tarpas ir pagrįsti turinį, suderinti turinį. Deja, bet tarp takelių gali būti ir papildomos vietos.

Taigi būkite atsargūs skaičiuodami fiksuotus pločius tinklelyje.

BONUSAS: Mes visi galime prisidėti, kad tobulintume DOCS

Kadangi esu maloni siela, čia pridėjau dar vieną patarimą

Specifikaciją parašė žmonės. Taip atsitinka, kad žmonės gali padaryti klaidų.

Skaitydamas specifikaciją pastebėjau mažytę klaidą.

Tuo metu aš nebuvau ypač tikras, ką daryti. Taigi, aš paklausiau apie Twitter.

Rūšis Jen Simmons padėjo išduoti problemą „github“ ir ji buvo ištaisyta.

Taigi, kas yra moralė?

Galite padėti tobulinti dokumentus, naudodamiesi bet kokiu įmanomu būdu.

Taip tu!

Padarykime internetą geresnį kartu.

Nori tapti Pro?

Atsisiųskite nemokamą „CSS Grid“ vadovą ir nemokamai gaukite du interaktyvius „Flexbox“ kursus!

Kaip įsisavinti CSS tinklelį ir ką kurti kartu (nemokamas PDF vadovas)

Gaukite juos dabar