5 forró új CSS funkciók és hogyan kell használni őket

Ebben a cikkben feltárjuk a CSS-re érkező öt új tulajdonságot, nézd meg, hogy mit csinálnak, és hogyan lehet őket gyakorlati felhasználásra a projektekben. Meg fogunk hozni a honlap elrendezés egy olyan oldalra, amely tartalmaz egy hírfékezést és egy kis csevegő dobozt a sarokban. További CSS trükkökért nézzük meg a különböző cikkünket CSS animációs példák . Ha új webhelyet hoz létre, próbálja meg a weboldal építője és győződjön meg róla, hogy böngészhet web hosting Opciók itt.

Ehhez a bemutatóhoz Chrome 65+ vagy Firefox 59+ szükséges. Nézd meg a kísérő github repo a lépésenkénti kódhoz. A következő funkciókat kihasználjuk, hogy jobb tapasztalatot hozzunk létre, és néhány kérdésben dolgozzunk. És ha egy csapat mellett tervezi, használja a legjobbat felhő tároló a dolgokat kohéziós.

CSS kijelzőmodul (3. szint)

• Kijelző: Tartalom;
• W3C állapot - Munkacsoport
• Böngésző támogatás

CSS feltételes szabályok modulja (3. szint)

• @support (...) {...}
• W3C állapot - Jelölt ajánlás
• További irodalom: MDN Web Dokumentumok

A CSS túllépő viselkedési modul (1. szint)

• Túláramlás-viselkedés: tartalmaz;
• W3C állapot - Nem hivatalos
• Böngésző támogatás
• További irodalom: Vegye át a görgetést

CSS-választók modulja (4. szint)

• : Fókuszban
• W3C állapot - Munkacsoport
• Böngésző támogatás
• További olvasás: MDN Web Dokumentumok : Fókuszban , : helyőrző által látható

A CSS elszigetelési modulja (1. szint)

• tartalmazza: festék;
• W3C állapot - Jelölt ajánlás
• Böngésző támogatás
• További irodalom: CSS elszigetelése Chrome 52-ben

01. Állítsa be a HTML-t a hírfedésre

Először be kell állítanunk néhány szuper egyszerű, ismétlődő jelölést a hírfüzetünkhöz. Hozzunk létre egy .tartály div a rendezetlen listán belül. Adja vminek & lt; ul & gt; az osztály .Feed , akkor hozzon létre 10 listát, amely mindegyikét tartalmazza, amely egy div-t tartalmaz a .kártya osztály és a szövegkártya 1, 2-es kártya stb.

Végül hozzon létre egy másikat listaelem 5 és 6 között van egy osztályban .neded - Ez hasznos lesz később - és add hozzá a & lt; ul & gt; belül három listaelemekkel a szövegkártya, a B kártya stb.

 & lt; test & gt;
 & lt; div osztály = "konténer" & gt;
 & lt; ul class = "feed" & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 1 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 2 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 3 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 4 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li osztály = "beágyazott" & gt;
 & lt; ul & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya A & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya B & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya c & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 6 & lt; / div & gt; & lt; / li & gt;
 & Li & gt; & lt; div osztály = "kártya" & gt; kártya 7 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 8 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 9 & lt; / div & gt; & lt; / li & gt;
 & li & gt; & lt; div osztály = "kártya" & gt; kártya 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / test & gt; 

02. Stílus A hírfedény

Most hozzá kell adnunk néhány gyors stílusot, hogy ez úgy kezdjen, mint egy hírfék. Először adhatunk & lt; test & gt; finom szürke háttér színe. Majd adj .tartály Max-szélesség 800px és használat Margó: 0 Auto; hogy középen legyen.

Adjunk tovább .kártya fehér háttér, 10px párnázás és margó és végül a Min-Magasság 300px -ból - ez elegendőnek kell adnia ahhoz, hogy az oldal görgethető legyen. Végül megszórjuk a flexbox mágiát a .Feed Ahhoz, hogy az elemek szépen áramlik, két soronként.

 .Feed {
Kijelző: FLEX;
Flex-Wrap: Wrap;
}
.Feed li {
Flex: 1 0 50%;
} 

03. Rögzítse az elrendezési problémákat

Ha lefelé görgetheti a listát, észre fogja, hogy kártyáink a beágyazott listában, a Card A - C, néhány elrendezési problémát okoz. Ideális esetben szeretnénk, ha a kártyák többi részével áramolnának, de mindegyikük egy blokkban össze van ragasztva. Ennek oka az, hogy egy flex tartály - amelyet használnak Kijelző: FLEX - csak a közvetlen gyermekeit (azaz a listaelemeket) rugalmas elemekre teszi.

Most, általában az egyetlen módja annak, hogy ezt rögzítsük a jelölés megváltoztatása, de úgy teszünk, mintha nincs ilyen luxusod. Talán a hírfedeg jelölést egy harmadik féltől származó szkript generálja, vagy örökölt kódot, amelyet csak a Reskin akarsz. Szóval hogyan javíthatjuk ezt?

Találkozik Kijelző: Tartalom . Ez a kis egybélés lényegében egy elem viselkedik, mintha nincs ott. Még mindig látod az elem leszármazottait, de maga az elem nem befolyásolja az elrendezést.

Mert úgy teszünk, mintha nem tudunk megváltoztatni a jelölést (csak erre a lépésre), egy kicsit okos lehetünk erről, és hogy a .kártya Elements A Flex elemek és szinte teljesen figyelmen kívül hagyják a lista jelölését.

Először távolítsa el a meglévő .Feed li osztály, majd használja Kijelző: Tartalom mindkettőnek & lt; ul & gt; és & lt; li & gt; Elemek:

 .feed ul,
.feed li {
Kijelző: Tartalom;
} 

Most meg kell látnod a sorrendben folyó kártyákat, de elvesztettük a méretezést. Rögzítse azt, hogy a flex tulajdonság hozzáadásával a .kártya helyette:

 .Card {
Flex: 1 0 40%;
} 

Ta-da! A kártyáink most a flexbox csodáit használják, mintha a szerkezeti rendezetlen lista jelölése nem létezik.

Mint oldali jegyzetként lehet, hogy kíváncsi, hogy miért flexi alapon Az érték 40% -ra van állítva. Ez azért van, mert a .kártya az osztálynak van egy margója, amely nem szerepel a szélesség számításában, amint azt a használat során elvárnád Box-méretezés: Border-Box . Ahhoz, hogy dolgozzunk, csak be kell állítanunk flexi alapon Elég nagy ahhoz, hogy a csomagolás a szükséges ponton, és a Flexbox automatikusan kitölti a fennmaradó helyet.

04. Fedezze fel a funkciók lekérdezéseit

Habár Kijelző: Tartalom Pontosan mit kell, amire szükségünk van, még mindig csak a W3C munkatervezetében van. És a Chrome támogatásban csak 2018 márciusában megjelent 65 verzióban érkezett meg. Hihetetlenül a Firefox 2015 áprilisáig támogatott!

Ha letiltja a devtools stílusát, akkor látni fogja, hogy a változásaink egy kicsit rendetlenséget tettek az elrendezéssel, amikor Kijelző: Tartalom nem alkalmazzák. Szóval mit tehetünk ezzel kapcsolatban? Idő a következő új funkciókhoz - Jellemzői lekérdezések.

Ezek a munkák, mint a média lekérdezések, de lehetővé teszik, hogy megkérdezze a böngészőt - a CSS-t használva - ha egy tulajdonság és érték kifejezés támogatott. Ha vannak, a lekérdezés belsejében található stílusok kerülnek alkalmazásra. Most menjünk át Kijelző: Tartalom stílusok egy funkciók lekérdezésére.

 @Supports (kijelző: tartalom) {
.feed ul,
.Feed li {
  Kijelző: Tartalom;
}
.card {
  Flex: 1 0 40%;
}
} 

05. Használja a "nem" egy tisztább kimenetelét

Normális körülmények között ez a fajta progresszív növelése forgatókönyv leszünk használni a lekérdezés adni az új stílus, de ez is le kell tiltani a néhány eredeti stílus szükséges tartalék elrendezést.

Azonban eldöntheti, hogy mivel a funkciók lekérdezések támogatása nagyon jó (ha figyelmen kívül hagyja az IE), akkor ténylegesen szeretné használni a funkció lekérdezését nem operátor. Úgy működik, mintha elvárnád, így újra alkalmazhatjuk az eredeti Flex Tulajdonságok a listákhoz, amikor Kijelző: Tartalom nem támogatott:

 @supports nem (kijelző: tartalom) {
.feed li {
  Flex: 1 0 50%;
}
} 

Benne nem lekérdezés, hozzáadhatunk néhány stílusot, hogy a .neded Az elemek alapvetően újra alkalmazzák azt, amit örökölt a használatával Kijelző: Tartalom .

 Feed Li.Neded {
Flex alap: 100%;
}
.feed li.ned ul {
 Kijelző: FLEX;
 Flex-Wrap: Wrap;
} 

06. Egy lépéssel tovább

Már láthatja a funkciók lekérdezéseinek lehetőségét, de az igazán hűvös dolog az, hogy kombinálhatja a kifejezést a három rendelkezésre álló szolgáltatóval: és , vagy és nem . Talán megnézhettük Kijelző: FLEX Támogatás, majd adjunk hozzá egy úszóalapú bilincset.

Nem fogjuk ezt megtenni, de ha először módosítnánk, módosítjuk a két jellemzői lekérdezést:

 @Supports (kijelző: flex) és (kijelző: tartalom) {
...
}
@supports (kijelző: flex) és (nem (kijelző: tartalom)) {
...
} 

Bónuszként tesztelheti az egyéni tulajdonságok támogatását is:

 @supports (-foo: zöld) {
...
} 

07. Csevegő doboz hozzáadása

Most van egy szép hírfüzetünk a helyén, adjunk hozzá egy kis csevegő dobozt, amely a képernyő jobb alsó sarkában van rögzítve. Szükségünk lesz az üzenetek listájára és egy szövegmezőre, amelybe a felhasználó beírja az üzenetet. Adja hozzá ezt a blokkot a nyílás után & lt; test & gt; címke:

 & lt; div osztály = "chat" & gt;
 & lt; div osztály = "üzenetek" & gt;
 & lt; ul & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 1 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 2 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 3 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 4 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 5 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 6 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "Üzenet" & gt; üzenet 7 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; Üzenet 8 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 9 & lt; / div & gt; & lt; / li & gt;
& li & gt; & lt; div osztály = "üzenet" & gt; üzenet 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; input type = "szöveg" osztály = "bemenet" & gt;
& lt; / div & gt; 

08. Stílus A csevegő doboz

Ideje, hogy gyorsan hozzáadjon néhány kialakítást, így fél tisztességesnek tűnik.

 .Chat {
 Háttér: #FFF;
 Határ: 10px Solid # 000;
 alsó: 0;
 betűméret: 10px;
 Pozíció: fix;
 Jobb: 0;
 Szélesség: 300px;
 Z-index: 10;
}
.üzenetek {
 Border-Bottom: 5px Solid # 000;
 túlcsordulás: Auto;
 Padding: 10px;
 Max-Magasság: 300px;
}
.message {
 Háttér: # 000;
 Border-sugara: 5px;
 Szín: #FFF;
 Margó: 0 20% 10px 0;
 Padding: 10px;
}
.mesages Li: Utolsó gyermek .message {
 margó alsó: 0;
}
.input {
 Border: Nincs;
 Kijelző: blokk;
 Padding: 10px;
 Szélesség: 100%;
} 

09. Scroll laining

Remélhetőleg most van egy kis csevegő doboz, amelynek görgethető listája van az üzenetek tetején ülve. Nagy. De észrevette, hogy mi történik, amikor egy beágyazott területen görget, és eléri a görgethető tartomány végét? Próbáld ki. Görgessen egészen az üzenetek végéig, és akkor az oldal maga is elkezd görgetni. Ezt a scroll láncolásnak nevezik.

Ez nem egy nagy ügyünkben, de bizonyos esetekben lehet. Ezt a funkciót korábban kellett dolgoznunk, amikor görgethető területeket hoztak létre a modálokon vagy a kontextus menüben.

A piszkos javítás az, hogy beállítsa a & lt; test & gt; nak nek túlcsordulás: rejtett , de van egy szép, fényes új CSS tulajdonság, amely javítja mindezt, és ez egy egyszerű egybélés. Köszönj a átruházás-viselkedés . Három lehetséges érték van:

• autó - az alapértelmezett, amely lehetővé teszi a tekercselést
• tartalmaz - letiltja a tekercscsereszezéset
• egyik sem - letiltja a tekercs-láncolást és más túllépési hatások (például gumibanding)

Használhatjuk a rövidítést átruházás-viselkedés vagy egy konkrét irányt célozhatunk túlterhelés-viselkedés-x (vagy -szerű ). Adjuk hozzá .üzenetek osztály:

 .messages {
...
Túlcsévélés-viselkedés-y: tartalmazzák;
...} 

Most próbálja meg újra a görgetést, és látni fogja, hogy már nem befolyásolja az oldal görgetését, amikor eléri a tartalom végét.

Ez a tulajdonság is elég praktikus, ha a PWA-ban húzódó frissítést szeretne végrehajtani, mondjuk, hogy frissítse a hírfékezést. Egyes böngészők, mint például a Chrome Androidra, automatikusan hozzáadni a saját, és mostanáig nem volt egyszerű módja, hogy tiltsa meg használata nélkül JS, hogy megszünteti eseményeket teljesítmény-befolyásoló, nem passzív rakodók.

Most csak hozzá kell adnod Túlcercoll-viselkedés: tartalmazzon valószínűleg a nézetablak-tartalmú elemhez & lt; test & gt; vagy & lt; html & gt; .

Érdemes megjegyezni, hogy ez a tulajdonság nem W3C szabvány, hanem a Web Inkubátor közösségi csoport (WICG) javaslata. A népszerű, stabil és érett WICG-javaslatok egy későbbi szakaszban egy W3C munkacsoportba történő áttelepítésre kerülnek.

10. A csevegő doboz összecsukása Ha nincs használatban

Abban a pillanatban, amikor a csevegő doboz elég egy kis helyet foglal el, és hacsak nem vagyunk kölcsönhatásban, egy kicsit zavaró. Szerencsére valamit tehetünk erről egy kis CSS mágiával.

De először is módosítanunk kell a meglévő stílusunkat kissé. Alapértelmezés szerint azt szeretnénk, ha a csevegő doboz összeomlik, ezért csökkenteni kell a maximum magasság érték a .üzenetek osztály. Bár mi is hozzáadhatunk átmenetet a maximum magasság ingatlan:

 .messages {
 ...
 Max-Magasság: 25px;
Átmenet: Max-Magasság 500ms; } 

Következő oldal: Folytassa az új CSS funkciók feltárását a 11-20

• 1
• 2

Aktuális oldal: Fedezze fel az 5 új CSS funkciót: 01-10