Sacha Greif se je odkrito spraševal ali je CSS postal, veste, prevelik. Z vsemi dobrotami, ki so bile poslane v brskalnikih zadnjih nekaj let – poizvedbe vsebnika! relativna sintaksa barv! kaskadne plasti! logične lastnosti! obsegov v medijskih poizvedbah! posamezne transformacije! :has() izbirnik! — in vse, kar je na možnem obzorju — Preklopi CSS! gnezda! mešanje barv! animacije, povezane z drsenjem! omejeni slogi! — dandanes obstaja drugačna krivulja učenja za CSS tako za nove kot za izkušene začetnike.
Morda je nekoč bilo mogoče poznati večino lastnosti CSS in njihovo delovanje. Ti dnevi so že zdavnaj minili, vsaj za starca, kot sem jaz. Toda to nekako sproži vprašanje: kateri CSS moraš nujno poznati?
Vincas Stonys nedavno vbodel v seznam. Chris sestavite eno skupaj temelji na funkcijah, izdanih od CSS3. Verjetno imate idejo, kaj bi vključili na seznam. Če bi moral sestaviti Top 5 in se omejiti samo na lastnosti in izbirnike, bi lahko izgledalo nekako takole ...
writing-mode
Ne morem povedati dovolj o writing-mode premoženje. Kar je pomembno – zlasti z vidika učenja – je, da vas pripravi na vključujoča načela, ki upoštevajo oblikovanje postavitev, ne glede na jezik uporabnika. Dobro razumevanje writing-mode bo vodilo do razumevanja logične lastnosti in vrednosti, ti pa postavljajo temelje za razumevanje poteka dokumentov in razmišljanje v smislu block, inline, startin end namesto fizičnih navodil.
display
Težko verjamem, da lahko kdo napiše dober CSS, ne da bi dobro razumel display premoženje. Je tako lastnost kot okvir za ustvarjanje postavitev. Brez njega ni Flexboxa ali mreže CSS, zaradi česar je nekakšen vratar za razumevanje teh pomembnih funkcij.
Poleg tega display lastnino odlično dopolnjuje writing-mode. To je točno tisto, kar boste enkrat potrebovali writing-mode vas je izpostavil toku dokumentov in logičnim usmeritvam. Potrebovali boste lastnost, da spremenite običajni tok elementa (na primer spreminjanje blokovnega elementa v vgrajenega) ali začnete postavljati stvari (na primer ustvarjanje prilagodljivega konteksta postavitve) in to je, če display stopi v igro.
margin / padding / border
Uf, tukaj čisto goljufam, ampak razmišljaj o učenju margin, paddingin border skupaj je nekako neizogibno. Vsi so deli Model škatle, vse pomagajo pri razmiku in oblikovanju ter z vsemi se je treba seznaniti Dolžinske enote CSS. Če veste, čemu so te lastnosti namenjene in kako prispevajo k izračunani velikosti elementa, vam zagotovo daje veliko več nadzora nad slogom in razblini kakršno koli zmedo o tem, zakaj je element takšne velikosti, kot je – pogost glavobol CSS!
::before in ::after
Še ena, kjer malce goljufam. ja ::before in ::after sta dva posamezna psevdoelementa, a spet si ne morem predstavljati učenja o enem brez drugega. To je dvojček!
Spomnim se, kako osupljivo je bilo, ko sem izvedel, da ti obstajajo in da je iz njih mogoče ustvariti vse kul učinki uporabniškega vmesnika za dokončanje enodelne ilustracije. Odpira nove možnosti in daje prvi vpogled v to, kako močan je v resnici CSS.
@media
Uf, sem že pri svojem petem in zadnjem elementu na seznamu in zdi se mi, da je še toliko dobrote CSS, ki sodi sem. Če pa moram izbrati še zadnjo stvar, bi bila medijske poizvedbe. Zakaj? Ker je glavna sestavina za ustvarjanje tekočih, prilagodljivih postavitev in različnih kontekstov gledanja. Poizvedbe za vsebnike morda bom to črtal s seznama, ko bo dozorel, toda za zdaj, @media je odličen primer za odzivno oblikovanje.
Onkraj tega, @media je lep prvi korak k pogojnim lastnostim CSS. Ne glede na to, ali pišemo poizvedbo glede na vrsto naprave, ki se uporablja (npr. screen or print) ali a, ko vidno polje brskalnika izpolnjuje določena merila (npr. width >= 768px) @media sintaksa je izjemno uporabna za ustvarjanje postavitev, ki so optimizirane za različne pogoje.
Oh, in sploh se nismo dotaknili, kako @media se nanaša na dostopnost, zahvaljujoč njegovi sposobnosti, da uporabite sloge na podlagi uporabnikovih preferenc (npr. prefers-reduced-motion). Medijske poizvedbe so torej poleg oblikovanja pogojnih postavitev lep naslednji korak k razumevanju vključujočega oblikovanja.
Spoštovane omembe
Razvrstiti CSS v seznam petih lastnosti in izbirnikov, ki jih je treba poznati, je težko, še posebej zdaj, ko je CSS danes zmogljivejši, kot je bil na primer celo pred petimi leti. Obstaja veliko drugih elementov, ki sem jih resnično želel vključiti, na primer (brez posebnega vrstnega reda):
calc()has()colorfontoverflowposition(predvsem to)z-index
Vendar stojim za svojimi odločitvami. Učenje CSS je pomembnejše od pomnjenja seznama lastnosti. To je potovanje in mislim, da pet, ki sem jih izbral, ustvarja lepo malo učno pot, ki postavlja temelje za pisanje dobrih slogovnih pravil in naslednjih korakov za poglobitev v CSS.
V redu, povej mi svojega!
Se ne strinjate z mojim seznamom? Moral bi! Stavim, da imate nekaj pametnih mnenj in želim videti, kako bi zaokrožili seznam Top 5.
