Sisältö
- 01. Mukautetut ominaisuudet
- Oletusten asettaminen
- Kuinka mukautetut ominaisuudet eroavat esiprosessorin muuttujista?
- 02. Ominaisuuskyselyt
- Kuinka käyttää ominaisuuskyselyjä
- 03. Mediakyselyt
- 04. Muuttuvat fontit
- Vaihteluakseli
- Font-variation-settings
- Rekisteröidyt akselit
- Mukautetut akselit
- 05. Graafiset tehosteet
- 08. CSS-ruudukko ja asettelut
- Kuinka käyttää CSS Gridiä
CSS kehittyy jatkuvasti ja joukko jännittäviä uusia ominaisuuksia on lisätty, jotta spesifikaatiosta tulee entistäkin tehokkaampi ase verkkosuunnittelijan työkalupaketissa.
CSS Grid vie asettelut uusille tasoille, joita ei ole ennen nähty, mukautetut ominaisuudet esittävät muuttujien käsitteen, kun taas ominaisuuskyselyt tarkistavat selaintuen. Mediakyselyt nousevat tasolle uusien esteettömyysominaisuuksien kanssa, vaihtelevat fontit tarjoavat maksimaalisen luovuuden ja koodin vähäisen paisumisen samalla kun vierityksen napsautus poistaa JavaScriptin tarpeen. Tutustu upeisiin CSS-animaatioesimerkkeihimme nähdäksesi, mitä voit luoda. Tai voit rakentaa sivuston ilman koodia kokeilemalla näitä verkkosivustojen rakentajia.
Niille, jotka haluavat olla luovia, on CSS-muodot ainutlaatuisille asetteluille sekä joukko sekoitustiloja ja suodattimia Photoshop-tyylisten suunnittelutehosteiden esittelemiseksi. Lue lisää siitä, miten voit käyttää näitä välttämättömiä ominaisuuksia uusimmissa rakennelmissasi. Muista kuitenkin, että monimutkainen verkkosivusto tarkoittaa, että tarvitset webhotellipalvelun, joka tukee tarpeitasi.
01. Mukautetut ominaisuudet
Jos olet käyttänyt esiprosessoria, kuten Sass, tai itse ohjelmointikieliä, kuten JavaScriptiä, olet varmasti perehtynyt muuttujien käsitteeseen - arvot, jotka on määritelty uudelleenkäyttöä varten koko koodissasi. Mukautettujen ominaisuuksien avulla voimme tehdä tämän CSS: ssä ilman esiprosessoreita. Muuttujat voidaan asettaa: juuritasolle (luoda globaaleja muuttujia) tai laajentaa valitsimen sisällä. Niitä voidaan sitten kutsua syntaksin avulla var (- ›- myVariableName). Voimme esimerkiksi asettaa muuttujan nimeltä --primaryColor kuten tämä:
/ * Root-elementissä (globaali muuttuja) * /: root {- -primaryColor: # f45942; } / * Skaalattu valitsimeen * / .my-komponentti {- -primaryColor: # 4171f4; }
Nyt voimme käyttää muuttujaa ominaisuusarvona:
h1 {väri: var (- -primaryColor); }
Mukautetut ominaisuudet peritään, millä on erittäin hyödyllisiä vaikutuksia. Yksi niistä on teemalla. Otetaan yllä oleva esimerkki: Voimme määrittää globaalin muuttujan (# f45942 - kirkkaan oranssinpunainen) --primaryColor juuritasolla, joten jokaisessa esimerkissä, jossa käytämme tätä muuttujaa, arvo on punainen. Mutta määritämme myös saman muuttujan uudelleen valitsimessa, eri arvolla (# 4171f4 - keskisininen). Joten jokaisessa tapauksessa, jossa käytämme --primaryColor muuttujan sisällä, laskettu arvo on sininen.
Oletusten asettaminen
Muuttujien laajuus on hieno ominaisuus, mutta sellainen, joka saattaa sinut kiinni toisinaan! Jos yrität käyttää muuttujaa, jota ei ole vielä määritelty, tuloksena oleva arvo laskee takaisin selaimen oletusarvoon tai perittyyn arvoon sen sijaan, että muuttuja määritettäisiin edelleen kaskadissa. Joissakin tapauksissa voi olla tarkoituksenmukaista asettaa oletusarvo:
h1 {väri: var (- -primaryColor, sininen); }
Kuinka mukautetut ominaisuudet eroavat esiprosessorin muuttujista?
Mukautetut ominaisuudet eroavat esiprosessorin muuttujista muutamalla keskeisellä tavalla. Esiprosessorimuuttujat kootaan ennen koodisi lähettämistä selaimelle. Selain ei koskaan näe, että arvo on muuttuja, se näkee vain lopputuloksen. Mukautetut ominaisuudet lasketaan selaimessa. Voit tarkastaa ne nykyaikaisissa kehitystyökaluissa, muuttaa muuttujaa ja nähdä ratkaistun arvon. Ne ovat dynaamisia muuttujia, eli niiden arvoja voidaan muuttaa CSS: ssä tai ajon aikana JavaScriptin avulla.
Toisin kuin esikäsittelijän muuttujat, mukautettuja ominaisuuksia ei voida käyttää valitsinten nimissä, ominaisuusavaimissa tai media kyselyilmoituksissa - vain CSS-ominaisuusarvoissa. CSS-esiprosessoreilla on vielä paljon etuja, joten todennäköisesti näemme niiden olevan kiinni jonkin aikaa, mutta todennäköisesti niitä käytetään useammin yhdessä mukautettujen ominaisuuksien kanssa.
02. Ominaisuuskyselyt
Ominaisuuskyselyt ovat tapa testata, tukeeko selain tiettyä CSS-ominaisuus-arvoyhdistelmää CSS-tiedostossasi. Ne käytännöllisesti katsoen tarvitsevat ominaisuusentunnistuskirjastoja, kuten Modernizr. Syntaksi on samanlainen kuin mediakysely: Käytät at-sääntöä @support, jota seuraa omaisuus-arvo-parisi, käärimällä suoritettava koodi, jos selain täyttää määritetyt ehdot.
Ominaisuuskyselyt ovat hyvin tuettuja nykyaikaisissa selaimissa, mutta ne ovat suhteellisen uusia, ja yksi "gotcha" on, että jotkin selaimet, jotka haluat ehkä testata tueksi, eivät välttämättä tue itse ominaisuuskyselyjä. Usein paras tapa käsitellä tätä on tarjota ensin palautustyylit (ominaisuuskyselyn ulkopuolella) ja sitten kääri lisäosat selainten tukemiseksi @support sääntö.
Huomaa, että ominaisuuskyselyjä on käytettävä vain säästeliäästi. Yksi CSS: n hienoista ominaisuuksista on, että selaimet yksinkertaisesti jättävät huomiotta kaikki ominaisuudet tai arvot, joita he eivät ymmärrä. On parasta käyttää ominaisuuskyselyjä vain silloin, kun se ei tee niin, aiheuttaisi visuaalisen virheen, muuten voit asettaa itsesi paljon ylimääräistä työtä varten.
Kuinka käyttää ominaisuuskyselyjä
Yhden ominaisuusarvon tuen testaamiseksi voimme tarjota ensin varakuvan. Tässä esimerkissä tarjoamme flexbox-varavoiman selaimille, jotka eivät tue ruudukon asettelua.
.my-komponentti {display: grid; } @supports (display: grid) {.my-komponentti {display: flex; }}
03. Mediakyselyt
Olet todennäköisesti tottunut käyttämään mediakyselyjä havaitsemaan näkymän leveyden ja korkeuden sekä mediatyypin (yleisimmin näyttö tai tulostus). Tason 5 Media Queries -määrittely tuo meille (valinnaisesti) testattavia uudempia mediaominaisuuksia, joita joissakin selaimissa jo tuetaan. Nämä tarjoavat joitain suuria etuja saavutettavuudelle.
Käyttäjät, joilla on vestibulaarisia häiriöitä, ja ne, jotka kärsivät liikesairaudesta, eivät ehkä pidä arvosta paljon liikettä sisältäviä verkkosivuja, kuten animaatioita ja parallaksirullaustehosteita. Pienemmällä liikkeellä olevan mediakyselyn avulla voimme tarjota käyttäjille, jotka eivät halua käyttää rajoitetun liikkeen vaihtoehtoa.
.elementtini {animaatio: ravista 500 ms: n helpotus sisään-ulos 5; } @media (mieluummin vähennetty liike: vähennä) {.my-element {animaatio: ei mitään; }}
Sivustojen on yhä suositumpi tarjota vaihtoehtoinen tumma teema. Prefers-colours-malli antaa meille mahdollisuuden kysyä, onko käyttäjä asettanut järjestelmän laajuisen mieltymyksen (käyttämällä avainsanoja tumma, vaalea tai ei-etusija), ja näyttää sopivan värimallin vastaavasti.
/ * Mediakyselyt 02 * / body {tausta: lineaarinen gradientti (alareunaan, # b5faff, # ffe2b4); } @media (mieluummin värimaailma: tumma) {body {väri: valkoinen; tausta: lineaarinen gradientti (loppuun, # 0c1338, # 3e3599); }}
04. Muuttuvat fontit
Yleensä, jos haluamme sisällyttää verkkosivustollemme useita saman perheen fontteja, meidän on ladattava sama määrä fonttitiedostoja. Mitä enemmän fonttitiedostoja lataat, sitä enemmän painoa lisätään sivullesi, mikä vaikuttaa suorituskykyyn - joten on yleensä viisasta ladata enintään kolme tai neljä fonttitiedostoa (suorituskykybudjetistasi riippuen).
Muuttavat fontit muuttavat kaikkea sitä. Niiden avulla voimme ladata yhden kirjasintiedoston koko kirjasinperheelle. Vaikka tämä tiedosto on yleensä suurempi kuin yksi kirjasin, jos haluat hyödyntää erilaisia painoja ja tyylejä, muuttuja fontti on tehokkaampi ratkaisu. Jos olet ostanut kokonaisen kirjasinperheen, muista sijoittaa se turvallisesti pilvitallennustilaan, jotta et menetä tiedostojasi!
Vaihteluakseli
Paitsi että, mutta muuttuvilla kirjasimilla, emme ole rajoittuneet pieneen fonttien painojen osajoukkoon. Kun työskentelet tavallisten kirjasinten kanssa, käytettävissä olevat kirjasinpainot ilmoitetaan 100: n kerrannaisina. Tyypillisesti 400 voi olla tavallinen paino, 300 kevyt paino ja 700 rohkea paino - eri perheiden toimittamalla enemmän tai vähemmän. Muuttuvilla kirjasimilla on vaihteluakseli, joka antaa meille arvon arvoja ominaisuuksille, kuten fontin paino. Fontin akseli voi olla 1–900, mikä antaisi meille pääsyn 900 eri painoon!
Vaihteluakseli ei rajoitu vain painoon. Muuttuvilla kirjasimilla voi olla eri akselit x-korkeudelle, vinolle, serif-pituudelle ja kontrastille (vain muutama esimerkki) - mikä tarkoittaa, että yksi kirjasintiedosto voi antaa meille pääsyn satoihin tai jopa tuhansiin muunnelmiin! Voisimme jopa animoida nämä ominaisuudet, jotta voimme saavuttaa todella hienoja vaikutuksia. Mandy Michaelilla (https://codepen.io/mandymichael) on koko joukko luovia demoja, jotka todella testaavat rajoja.
Selaimen tuki muuttuville kirjasimille on melko hyvä, ja monet kirjasinten valimot kehittävät aktiivisesti uusia muuttuvia fontteja, joita voit aloittaa nyt - vaikkakin nämä ovat usein ensiluokkaisia etenkin täysin varustelluille kirjasinperheille. Jos haluat vain aloittaa pelaamisen vaihtelevilla kirjasimilla nähdäksesi, mitä he voivat tehdä, on olemassa useita muuttuvan fontin leikkipaikkoja:
Huomaa, että jos haluat käyttää muuttuvia fontteja juuri nyt, sinun on varmistettava, että käytät ajan tasalla olevaa käyttöjärjestelmää - ne eivät toimi vanhemmissa käyttöjärjestelmissä.
Font-variation-settings
Vaikka voimme muuttaa fontin painoa riittävän helposti fontin paino CSS-ominaisuus, font-variation-settings on uusi ominaisuus, joka antaa meille täyden pääsyn fontin eri muunnosakseleihin. Näihin kuuluvat sekä rekisteröidyt akselit että mukautetut akselit.
Rekisteröidyt akselit
Rekisteröityjä akseleita on viisi, jotka vastaavat erilaisia CSS-ominaisuuksia. Jokaisella näistä on ns. Akselimerkki. Rekisteröidyt akselit ovat: wght (fontin paino), wdth (font-stretch), slnt (kirjasintyyli: vino / kulma), ital (kirjasintyyli: kursiivi), opsz (fontin optinen mitoitus). Voimme käyttää näitä akseleita joko CSS-ominaisuudella tai font-variation-settings.
Nämä akselit eivät välttämättä sisälly kaikkiin muuttujan kirjasimiin (joillakin voi olla vain yksi tai kaksi akselia), mutta ne ovat todennäköisesti yleisimpiä.
Mukautetut akselit
Mukautetut akselit ovat fonttisuunnittelijan sisällyttämiä räätälöityjä akseleita, ja ne voivat olla mitä tahansa. Ne voivat sisältää (esimerkiksi) serif-pituuden, x-korkeuden, jopa jotain luovempaa (ja vähemmän typografisesti tyypillistä), kuten kierto.
Molemmat akselityypit on ilmaistava nelimerkkisenä tunnisteena. Rekisteröityjen akseleiden on oltava pieniä, kun taas mukautetut akselit ovat isoja. Molemmat voidaan yhdistää font-variation-settings -ominaisuuteen. Font-variation-settings on animoitava, mikä voi sallia joitain erittäin hienoja käyttöliittymätehosteita! Myös mielikuvakirjasimilla on tuotettu joitain erittäin mielenkiintoisia kokeita.
05. Graafiset tehosteet
Monet verkkosivustot hyödyntävät JavaScript-kirjastoja tarjotakseen tyylikkään, alkuperäisen sovelluksen kaltaisen vierityskokemuksen, jossa sisältö "napsahtaa" pisteisiin käyttäjän vierittäessä. Nyt Scroll Snap -määrityksen avulla voimme tehdä tämän oikein CSS-tiedostossamme - sinun ei tarvitse juurikaan tuoda raskaisiin JS-moduuleihin sivusi paisuttamiseksi!
Vierityksen napsautuksen toteuttamiseksi tarvitsemme elementin, joka toimii vieritysastiana. Säiliön suorat lapset sanelevat pisteet, joihin napsautetaan ja jotka voidaan kohdistaa eri tavoin napsautusalueella.
Vierityksen napsautus voi olla vieläkin tehokkaampi, kun se yhdistetään toiseen uuteen CSS-ominaisuusarvoon - asento: tahmea. Tämä sijaintiarvo "kiinnittää" elementin määritettyyn sijaintiin vierittäessä sen säilöä - toinen käyttäytyminen, joka aiemmin oli mahdollista vain JavaScriptin avulla. Katso tämä Scroll-napsautus esimerkillä position: sticky and intersectionObserver.
08. CSS-ruudukko ja asettelut
Etupään kehittäjät ovat hakkeroitu ulkoasuun kaikilla käytettävissä olevilla työkaluilla - viimeksi flexboxilla, jota monet modernit ruudukkojärjestelmät käyttävät. Mutta flexboxia ei koskaan suunniteltu tiukkojen verkkojen rakentamiseen - sen tarkoitus on joustavuus!
CSS Grid on ensimmäinen määritys, joka on suunniteltu kaksiulotteiseen asetteluun, jonka avulla voimme hallita ulkoasun rakentamista ja sijoittaa kohteita sekä rivin että sarakkeen akselille. Reagoivan asettelun rakentaminen Gridillä ei vaadi calc (): ta tai hakkerointia negatiivisilla marginaaleilla. Salaisuus on fr-yksikkö - uusi yksikkö, joka on yksinomaan ruudukkoon. Fr-yksikkö mitoittaa ruudukon jäljet (rivit ja sarakkeet) suhteessa käytettävissä olevaan tilaan. Se ottaa huomioon kaikki kiinteät raidat, kourut ja sisällön, ja jakaa sitten jäljellä olevan tilan vastaavasti. Jen Simmons loi termin "sisäinen web-suunnittelu" kuvaamaan Gridin johtamaa web-asettelun uutta aikakautta.
Kuinka käyttää CSS Gridiä
Ruudukko vaatii elementin, jonka näytön ominaisuusarvo on asetettu ruudukoksi, toimimaan ruudukkosäiliönä. Ruudukon kontin suorat lapset ovat kohteita, jotka voidaan sijoittaa ristikkoon. Käytämme ominaisuuksia ruudukko-malli-rivit ja ruudukko-malli-sarakkeet määrittää ruudukon jäljet (rivit ja sarakkeet) ja sarakeväli ja riviväli määritellä kourut (raot raiteiden välillä).
.grid {display: ruudukko; ruudukko-malli-sarakkeet: toista (4, 1fr); ruudukko-malli-rivit: toista (4, 200 kuvapistettä); aukko: 20px; }
Käytämme toistaa() toiminto pitämään koodin ytimekkäämpänä vaihtoehtona pitkäkäden (esim. ruudukko-malli-sarakkeet: 1fr 1fr 1fr 1fr). Tässä esimerkissä käytetään myös lyhennettä aukko varten riviväli ja sarakeväli.
Yllä oleva koodi antaa meille neljä riviraitaa, kukin 100px korkea, ja neljä sarakeraitaa, jotka kukin täyttävät yhtä suuren osan käytettävissä olevasta tilasta fr-yksikön avulla.
On syytä huomata, että tämä ei ole ainoa tapa luoda ruudukkoraitoja. Implisiittisiä raitoja voidaan luoda myös sijoittamalla ruudukon kohteita. On hyödyllistä lukea tästä hieman, jos käytät Gridiä, koska kannattaa saada syvällisempi käsitys siitä, miten Grid käyttäytyy eri olosuhteissa, ja se voi helpottaa asettelun koodaamista.
Voimme sijoittaa kohteita ruudukkoon viittaamalla ruudukon rivinumeroihin, jotka ovat numeerisia viivoja, jotka istuvat kunkin raidan välissä. Täällä käytämme lyhennettä ruudukko-sarake ja ristikkorivi varten ruudukko-sarake-alku, ruudukko-sarake-pää, ruudukko-rivi-alku ja ruudukon rivin pää. Nämä kertovat selaimelle, millä rivillä tuotteemme pitäisi alkaa ja päättyä kullakin akselilla.
.tuote {ruudukko-sarake: 1/4; ruudukkorivi: 2; }
Ruudukko tarjoaa meille monia erilaisia tapoja sijoittaa kohteita: voimme sen sijaan nimetä ruudukon viivat:
.grid {display: ruudukko; grid-template-sarakkeet: [image-start] 1fr 1fr 1fr [image-start] 1fr; ruudukko-malli-rivit: 200px [kuvan alku] 200px 200px [kuvan loppu] 200px; aukko: 20px; }
Vaihtoehtoisesti ruudukko-malli-alue ominaisuuden avulla voimme "piirtää" ruudukon asettelun tekstillä.
.grid {display: ruudukko; ruudukko-malli-sarakkeet: toista (4, 1fr); ruudukko-malli-rivit: toista (4, 200 kuvapistettä); aukko: 20px; ruudukko-malli-alueet: ’. . . . ' "Kuvan kuvan kuva". 'Kuvan kuvan kuva.' ”. . . . " }
Jommallakummalla näistä menetelmistä voimme yksinkertaisesti viitata vastaavaan ruudukkoalueeseen sijoittamalla ruudukon kohdetta:
.image {ruudukkoalue: kuva; }
Tämä artikkeli julkaistiin alun perin luovassa verkkosivujen lehdessäNettisivujen suunnittelija. Osta numero 290 nyt.
- 10 parasta CSS-kehystä vuonna 2019
- Animaation lisääminen SVG: hen CSS: n avulla
- 52 verkkosuunnittelutyökalua, jotka auttavat sinua työskentelemään älykkäämmin vuonna 2019
