Sacha Greif ihmetteli avoimesti onko CSS:stä tullut liian iso. Kaikilla selaimilla viimeisten parin vuoden aikana toimitetuilla herkuilla - konttikyselyt! suhteellinen värisyntaksi! kaskadikerrokset! loogisia ominaisuuksia! vaihtelee mediakyselyissä! yksittäisiä muunnoksia! :has() valitsin! - ja kaikki mitä on mahdollista horisontissa - CSS-kytkimet! pesintä! värien sekoittaminen! rullaavat animaatiot! laajennetut tyylit! — Nykyään CSS:n oppimiskäyrä on varmasti erilainen uusille ja kokeneemmille etukäyttäjille.
On saattanut olla aika, jolloin oli mahdollista tietää useimmat CSS-ominaisuudet ja kuinka ne toimivat. Ne ajat ovat menneet, ainakin minun kaltaiselleni vanhalle kädelle. Mutta tämä herättää kysymyksen: mikä CSS sinun tulee ehdottomasti tietää?
Vincas Stonys äskettäin iski listaan. Chris laita yksi yhteen perustuu CSS3:n jälkeen julkaistuihin ominaisuuksiin. Sinulla on luultavasti käsitys siitä, mitä sisällytät luetteloon. Jos minun pitäisi koota Top 5 ja rajoittua vain ominaisuuksiin ja valitsimiin, se voisi näyttää suunnilleen tältä…
writing-mode
En voi sanoa tarpeeksi siitä writing-mode omaisuutta. Se, mikä tekee siitä tärkeän – varsinkin oppimisen näkökulmasta – on, että se asettaa sinulle kattavat periaatteet, jotka ottavat huomioon asettelujen luomisen käyttäjän kielestä riippumatta. Hyvä käsitys writing-mode johtaa ymmärtämiseen loogiset ominaisuudet ja arvot, ja ne puolestaan luovat pohjan asiakirjavirran ymmärtämiselle ja ajattelulle block, inline, startja end fyysisten ohjeiden sijaan.
display
Minun on vaikea uskoa, että kukaan voi kirjoittaa hyvää CSS:ää ilman vankkaa käsitystä siitä display omaisuutta. Se on sekä ominaisuus että kehys asettelujen luomiseen. Ilman sitä ei ole Flexboxia tai CSS Gridiä, joten se on eräänlainen portinvartija näiden tärkeiden ominaisuuksien ymmärtämisessä.
Lisäksi display omaisuus täydentää täydellisesti writing-mode. Se on juuri sitä, mitä tarvitset kerran writing-mode on paljastanut sinut dokumenttien kululle ja loogisille ohjeille. Tarvitset ominaisuuden joko muuttaaksesi elementin normaalia kulkua (kuten lohkoelementin vaihtamista upotettuun elementtiin) tai aloittaaksesi asioiden asettamisen (kuten joustavan asettelukontekstin luomiseen). display tulee pelata.
margin / padding / border
Huh, minä huijaan täällä, mutta ajattele oppimista margin, paddingja border yhdessä on tavallaan väistämätöntä. Ne ovat kaikki osia Laatikkomalli, kaikki auttavat välilyönnissä ja muotoilussa, ja kaikki vaativat tutustumisen CSS-pituusyksiköt. Kun tiedät, mitä nämä ominaisuudet on suunniteltu tekemään ja kuinka ne vaikuttavat elementin laskettuun kokoon, saat varmasti paljon enemmän tyylin hallintaa ja hälventää epäselvyyttä siitä, miksi elementti on sen kokoinen - yleinen CSS-päänsärky!
::before ja ::after
Toinen, jossa vähän huijaan. Joo, ::before ja ::after ovat kaksi yksittäistä pseudoelementtiä, mutta jälleen kerran, en voi kuvitella oppivani toisesta ilman toista. Se on kaksijakoinen!
Muistan, kuinka hämmästyttävää minulle oli oppia, että näitä oli olemassa ja niistä voidaan luoda kaikkea siistejä käyttöliittymätehosteita loppuun yhden jakson kuvituksia. Se avaa uusia mahdollisuuksia ja tarjoaa ensimmäisen kurkistuksen siitä, kuinka tehokas CSS todella on.
@media
Oho, olen jo viidennellä ja viimeisellä listallani ja tuntuu, että täällä on vielä niin paljon CSS-hyvyyttä. Mutta jos minun on valittava yksi viimeinen asia, se olisi mediakyselyt. Miksi? Koska se on tärkein ainesosa luotaessa sulavia, joustavia asetteluja ja erilaisia katselukonteksteja. Säilön kyselyt saattaa päätyä pudottamaan tämän listaltani sen kypsyessä, mutta toistaiseksi @media on loistava pohjamaali reagoivaan suunnitteluun.
Sen lisäksi, @media on mukava ensimmäinen askel kohti CSS:n ehdollisia ominaisuuksia. Kirjoitammeko kyselyn käytetyn laitteen tyypin perusteella (esim. screen or print) tai a kun selaimen näkymä täyttää tietyt ehdot (esim. width >= 768px), @media syntaksi on uskomattoman hyödyllinen luotaessa asetteluja, jotka on optimoitu erilaisiin olosuhteisiin.
Voi, emmekä ole edes käsitelleet miten @media liittyy saavutettavuuteen sen kykynsä ansiosta käyttää tyylejä käyttäjän mieltymysten mukaan (esim, prefers-reduced-motion). Joten ehdollisten asettelujen luomisen lisäksi mediakyselyt ovat mukava seuraava askel kohti osallistavan suunnittelun ymmärtämistä.
Kunniamaininnat
CSS:n tislaaminen viiden pakollisen ominaisuuden ja valitsimen luetteloon on vaikeaa, varsinkin nyt, kun CSS on nykyään tehokkaampi kuin vaikkapa viisi vuotta sitten. Halusin todella sisällyttää joukkoon muita kohteita, kuten (ei tietyssä järjestyksessä):
calc()has()colorfontoverflowposition(varsinkin tämä)z-index
Mutta pysyn valintojeni takana. CSS:n oppiminen on tärkeämpää kuin ominaisuusluettelon muistaminen. Se on matka, ja mielestäni valitsemani viisi muodostavat mukavan pienen oppimispolun, joka luo pohjan hyvien tyylisääntöjen kirjoittamiselle ja seuraaville vaiheille sukeltaessa syvemmälle CSS:ään.
Selvä, kerro minulle omasi!
Oletko eri mieltä listani kanssa? Sinun pitäisi! Lyön vetoa, että sinulla on älykkäitä mielipiteitä ja haluan nähdä, miten olisit päättänyt Top 5 -luettelon.
