5 Hot New CSS -ominaisuudet ja niiden käyttö

Tässä artikkelissa tutkitaan viisi uutta kiinteistöä, jotka tulevat CSS: hen, katsomaan, mitä he tekevät ja miten ne voivat käyttää käytännöllistä käyttöä projekteissasi. Aiomme luoda a Verkkosivuston asettelu Sivulle, joka sisältää sanomalehden ja pienen chat-ruutuun kulmassa. Lisää CSS-temppuja, katso artikkelimme, joka tutkii erilaisia CSS-animaatioesimerkkejä . Jos luot koko uuden sivuston, kokeile a Verkkosivuston rakentaja ja muista selata sivujen ylläpito Asetukset täältä.

Tähän opetusohjelmaan tarvitaan Chrome 65+ tai Firefox 59+. Katsokaa mukana Github Repo vaiheittaiseen koodiin. Hyödynnämme seuraavia ominaisuuksia paremman kokemuksen ja työn ympärillä joitain asioita. Ja jos suunnittelet tiimin vieressä, käytä parasta pilvivarasto pitää asiat yhtenäisenä.

CSS-näyttömoduuli (taso 3)

• Näyttö: Sisältö;
• W3C-tila - Luonnos
• Selaimen tuki

CSS Ehdollisen sääntöjen moduuli (taso 3)

• @tuki(...) {...}
• W3C-tila - ehdokasuositus
• Lukumäärä: MDN Web-dokumentit

CSS Overscroll käyttäytymismoduuli (taso 1)

• Overscroll-käyttäytyminen: sisältää;
• W3C-tila - epävirallinen
• Selaimen tuki
• Lukumäärä: Ota valvonta vierityksesi

CSS-valitsimet Moduuli (taso 4)

• : keskittyminen
• W3C-tila - Luonnos
• Selaimen tuki
• Lisätietoja: MDN Web-dokumentit : keskittyminen , : Placeholder-esitetty

CSS-eristysmoduuli (taso 1)

• sisältää: maali;
• W3C-tila - ehdokasuositus
• Selaimen tuki
• Lukumäärä: CSS-eristys Chromessa 52

01. Aseta sanomalehti HTML

Ensinnäkin meidän on perustettava eräänlainen yksinkertainen, toistuva merkintä uutiselle. Luotaan a .container DIV on järjestämättömällä luettelossa. Anna & lt; ul & gt; luokka .feed ja sitten luo 10 luetteloa, joissa kukin sisältää div .kortti Luokka ja tekstikortti 1, kortti 2 jne.

Lopuksi luo toinen List-tuote välillä 5 ja 6, jossa on luokka .Snedested - Tämä on hyödyllistä myöhemmin - ja lisätä a & lt; ul & gt; Sisällä kolme luetteloa käyttäen tekstiä korttia A, kortti B jne.

 & lt; body & gt;
 & lt; div luokka = "kontti" & gt;
 & lt; ul class = "rehu" & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 2 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "sisäkkäinen" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti A & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti b & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti C & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 6 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 7 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 8 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 9 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div luokka = "kortti" & gt; kortti 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. Tyyli uutiset

Nyt meidän on lisättävä joitakin nopeita tyylejä, jotta tämä alkaa näyttää enemmän kuin uutiskirje. Ensin voimme antaa & lt; body & gt; Hienovainen harmaa taustaväri. Anna sitten .container Max-leveys 800px ja käyttö Marginaali: 0 auto; keskittää se.

Anna myös .kortti valkoinen tausta, 10px pehmuste ja marginaali ja lopulta a min-korkeus 300px - tämän pitäisi antaa meille tarpeeksi tehdä sivun vieritettäväksi. Lopuksi me ripottele joitakin Flexbox Magic .feed Jotta esineet virtaavat hienosti, kaksi korttia per rivi.

 .Feed {
Näyttö: Flex;
Flex-Wrap: Kääri;
}
.feed li {
FLEX: 1 0 50%;
} 

03. Korjaa layout-ongelmat

Jos vierittäisit luetteloa, huomaat, että kortit sisältävät luettelossa olevat kortit A - C, aiheuttavat joitain layout-ongelmia. Ihannetapauksessa haluaisimme heitä virrata muihin kortteihin, mutta ne ovat kaikki jumissa yhteen lohkoon. Syy tähän on, että Flex Container - joka luodaan käyttäen Näyttö: Flex - Vain välittömät lapset (eli luettelon kohteet) tekevät Flex-tuotteisiin.

Nyt normaalisti ainoa tapa vahvistaa tämä on muuttaa merkintää, mutta teeskennellä, että sinulla ei ole ylellistä. Ehkä uutiskirjamerkki tuottaa kolmannen osapuolen komentosarja tai sen perintökoodi, jonka yrität vain Reskinia. Joten miten voimme korjata tämän?

Tavata Näyttö: Sisältö . Tämä pieni yhden vuoraus on olennaisesti elementti käyttäytyä ikään kuin se ei ole siellä. Näet edelleen elementin jälkeläiset, mutta itse elementti ei vaikuta ulkoasuun.

Koska me teeskentelemme, emme voi muuttaa merkintää (vain tähän vaiheeseen) voimme olla hieman älykkäitä tästä ja tehdä .kortti elementit Flex-tuotteet ja lähes kokonaan sivuuttaa luettelon merkinnät.

Poista ensin olemassa oleva .feed li Luokka ja käytä sitten Näyttö: Sisältö molemmille & lt; ul & gt; ja & lt; li & gt; Elementit:

 .Feed ul,
.feed li {
Näyttö: Sisältö;
} 

Nyt sinun pitäisi nähdä kortit, jotka virtaavat järjestyksessä, mutta olemme menettäneet mitoituksen. Korjaa, että lisäämällä Flex-ominaisuus .kortti sen sijaan:

 .Card {
FLEX: 1 0 40%;
} 

TA-DA! Kortit käyttävät nyt Flexboxin ihmeitä ikään kuin rakenteellisen järjestämättömän luettelon merkinnät eivät ole olemassa.

Sidosilmoituksena saatat miettiä, miksi flex-pohjainen Arvo on 40%. Tämä johtuu siitä, että .kortti Luokka on marginaali, joka ei sisälly leveyden laskemiseen, kun odotat käytettäessä Box-Mitoitus: Border-Box . Työskentelemme tämän ympärille, meidän on vain asetettava flex-pohjainen Riittävän korkea liipaisemaan käärintä tarvittavaan pisteeseen ja Flexbox täyttää jäljellä olevan tilan automaattisesti.

04. Tutki ominaisuuskyselyt

Siitä huolimatta Näyttö: Sisältö Tarkastelee tarkalleen mitä tarvitsemme, se on edelleen vain työssä tilaa W3C: n kanssa. Ja Chrome-tuki saapui vain maaliskuussa 2018 julkaistiin versiossa 65. Uskovasti Firefox on tukenut huhtikuusta 2015 lähtien!

Jos poistat tyylin Devtools näet, että muutokset ovat tehneet hieman sotkua ulkoasun kanssa Näyttö: Sisältö ei sovelleta. Joten mitä voimme tehdä tästä? Aika seuraavaan uusiin ominaisuuksiin - ominaisuuskyselyt.

Nämä työt aivan kuten mediakyselyt, mutta niiden avulla voit pyytää selainta - käyttämällä CSS yksin - jos kiinteistöä ja arvon ilmaisua tuetaan. Jos ne ovat, kyselyn sisältämät tyylejä sovelletaan. Nyt siirrämme meidän Näyttö: Sisältö Tyylit ominaisuuskyselyyn.

 @supports (näyttö: Sisältö) {
.Feed UL,
.feed li {
  Näyttö: Sisältö;
}
.card {
  FLEX: 1 0 40%;
}
} 

05. Käytä "ei" puhtaampaa tuloksesta

Normaalisti tällaisessa progressiivisessa lisälaite-skenaariossa käytämme kyselyä lisäämällä uusia tyylejä, mutta sen on myös poistettava eräitä alkuperäisiä tyylejä, jotka ovat välttämättömiä takaisinvahvistimen ulkoasuun.

Voit kuitenkin päättää, että koska ominaisuuskyselyjen tuki on melko hyvä (jos sivuutat IE), haluat todella käyttää ominaisuuskyselyä ei Operaattori. Se toimii aivan kuten odotit, jotta voimme käyttää alkuperäistä taivuttaa Kiinteistöt luetteloihin, kun Näyttö: Sisältö ei ole tuettu:

 @supports ei (näyttö: Sisältö) {
.feed li {
  FLEX: 1 0 50%;
}
} 

Sisällä ei kysely voimme lisätä tyylejä niin, että .Snedested esineitä, jotka periaatteessa sovelletaan uudelleen, mitä käytettiin käyttämällä Näyttö: Sisältö .

 Syöttö Li.Nested {
Flex-pohjainen: 100%;
}
.Feed li.nested ul {
 Näyttö: Flex;
 Flex-Wrap: Kääri;
} 

06. Ota se yksi askeleen edelleen

Voit jo nähdä ominaisuuskyselyjen mahdollisuudet, mutta todella hieno asia on, että voit yhdistää lausekkeita kolmella käytettävissä olevilla operaattoreilla: ja , tai ja ei . Ehkä voisimme myös tarkistaa Näyttö: Flex Tuki ja lisää sitten float-pohjainen sisäänkirjautuminen.

Emme aio tehdä sitä täällä, mutta jos olisimme ensin muuttaneet kaksi ominaispiirteitä, kuten niin:

 @supports (näyttö: Flex) ja (Näyttö: Sisältö) {
...
}
@supports (näyttö: Flex) ja (ei (näyttö: sisältö)) {
...
} 

Bonuksena voit myös testata mukautettuja ominaisuuksia tukea näin:

 @supports (--Foo: vihreä) {
...
} 

07. Lisää chat-ruutu

Nyt meillä on kaunis uutinen paikallaan, lisätään pieni chat-ruutu, joka on kiinnitetty näytön oikeassa alakulmassa. Tarvitsemme luettelon viesteistä ja tekstikenttä käyttäjälle antamaan viestin. Lisää tämä lohko juuri avauksen jälkeen & lt; body & gt; tag:

 & lt; div luokka = "chat" & gt;
 & lt; div luokka = "viestit" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 1 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 2 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 3 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 4 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 5 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 6 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 7 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 8 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 9 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div luokka = "viesti" & gt; viesti 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; syöttötyyppi = "Teksti" Class = "Input" & GT;
& lt; / div & gt; 

08. Tyyli Chat-ruutu

Aika lisätä nopeasti muotoilua niin, että se näyttää puoliksi kunnollisesta.

 .Chat {
 Tausta: #FFF;
 Raja: 10px kiinteä # 000;
 Pohja: 0;
 Font-koko: 10px;
 Paikka: kiinteä;
 Oikea: 0;
 Leveys: 300px;
 Z-indeksi: 10;
}
.Messages {
 Border-Bottom: 5PX kiinteä # 000;
 Overflow: Auto;
 Pehmuste: 10px;
 Max-korkeus: 300px;
}
.Message {
 Tausta: # 000;
 Border-RADIUS: 5PX;
 Väri: #FFF;
 Marginaali: 0 20% 10px 0;
 Pehmuste: 10px;
}
.Messages Li: Last-child .Message {
 Margin-pohja: 0;
}
.Input {
 Raja: Ei mitään;
 Näyttö: Block;
 Pehmuste: 10px;
 Leveys: 100%;
} 

09. Selaa ketjutus

Toivottavasti nyt sinulla on pieni chat-ruutu, jossa on vierittävä luettelo viestien päällä, jotka istuvat uutisesi päälle. Loistava. Mutta oletko huomannut, mitä tapahtuu, kun vierität sisäkkäisen alueen sisällä ja pääset sen vieritettäväksi? Kokeile. Selaa aina viestejä loppuun ja näet itse sivun, joka alkaa vierittää sen sijaan. Tätä kutsutaan vierityskestäviksi.

Se ei ole iso juttu esimerkkimme vaan joissakin tapauksissa se voi olla. Meidän on täytynyt työskennellä tämän ominaisuuden ympärillä ennen kuin luodaan vierittäviä alueita muodoissa tai kontekstivalikoissa.

Likainen korjaus on asettaa & lt; body & gt; jllek ylivuoto piilotettu , Mutta on mukava, kiiltävä uusi CSS-ominaisuus, joka korjaa kaiken tämän ja se on yksinkertainen yhden vuori. Sano Hei Overscroll-käyttäytyminen . On kolme mahdollista arvoa:

• auto - oletusarvo, joka mahdollistaa rullauksen
• sisältää - Poistaa vierityskestävät
• ei mitään - Poistaa vierityskestävät ja muut ylikuormitukset (esim. Kuminauha)

Voimme käyttää lyhyttä Overscroll-käyttäytyminen tai voimme kohdistaa tiettyyn suuntaan Overscroll-käyttäytyminen-X (tai --y ). Lisää se meidän .Messages Luokka:

 .Messages {
...
Overscroll-käyttäytyminen-Y: Sisältää;
...} 

Nyt kokeile vieritys uudelleen ja näet, ettei se enää vaikuta sivun selaukseen, kun pääset sisältöön.

Tämä ominaisuus on myös melko kätevä, jos halusit toteuttaa PWA: n vetäytyvän virkistysominaisuuden, sanoa virkistää uutiset. Jotkut selaimet, kuten Chrome Androidille, lisäävät automaattisesti omat ja toistaiseksi ei ole helppoa poistaa käytöstä sitä käyttämättä JS: tä peruuttamaan tapahtumia käyttämällä suorituskykyä vaikuttavia ei-passiivisia käsittelijöitä.

Nyt sinun tarvitsee vain lisätä Overscroll-käyttäytyminen: sisältää Viewport-sisältävään elementtiin, luultavasti & lt; body & gt; tai & lt; html & gt; .

On syytä huomata, että tämä ominaisuus ei ole W3C-standardi, pikemminkin Web Incubator Community Groupin (WICG) ehdotus. Suosittuja, vakaa ja kypsä WICG-ehdotuksia käsitellään muuttoliikkeessä W3C-työryhmään myöhemmässä vaiheessa.

10. Kutista chat-ruutu, kun sitä ei käytetä

Tällä hetkellä chat-ruutu vie melko vähän tilaa, ellei ole vuorovaikutusta sen kanssa, on hieman häiritsevää. Onneksi voimme tehdä jotain tästä vähän CSS-taikuutta.

Mutta ensinnäkin meidän on muutettava nykyisiä tyylejä hieman. Oletuksena haluamme, että chat-ruutu on romahtanut, joten meidän on vähennettävä max-korkeus arvo .Messages Luokka. Vaikka me voimme myös lisätä siirtymistä max-korkeus Kiinteistövälitys:

 .Messages {
 ...
 Max-korkeus: 25px;
Siirtyminen: Max-korkeus 500ms; } 

Seuraava sivu: Jatka uusien CSS-ominaisuuksien tutkimista vaiheissa 11-20

• 1
• 2

Tämänhetkinen sivu: Tutustu 5 Uusi CSS: n ominaisuudet: vaiheet 01-10