7 új funkció egy rugalmas weboldal készítéséhez

A modern CSS a szükséges JavaScript segítségével átveszi a weboldal stílusának teljes irányítását. Ebben a cikkben hét új CSS-frissítést emelünk ki a stílus jövőjének egyszerűsítése érdekében. Ezen felül fontolóra vesszük a Chrome, az Edge és a Firefox böngészőtámogatását. Végül megbeszéljük azokat a kérdéseket, megoldásokat és nagyjából mindent, ami azonnali kezdéshez szükséges.

Figyelembe véve az összes trükköt és technikát, íme néhány válogatott CSS-szolgáltatás, amely megéri az idejét. Tehát minden további nélkül merüljünk bele közvetlenül.

1. CSS alrács

A CSS flexbox azon képességével ellentétben, hogy csak egy irányban mozoghat, mindkét dimenziót megadhatja a rácsokban. Amint az elkövetkező évtizedekben egyre erőteljesebbé és népszerűbbé válnak, óriási változások tapasztalhatók a webdesignban. A beágyazott rácsokat rácsok rajzolására használják a rácsok belsejében. De melyek azok a fő hátrányok, amelyek felhívták a CSS alhálózatokat?

• A 2. szint után beágyazott rácsok túlterhelték a tartalmat a nagyobb rácson kívül, ami erősen befolyásolta a weboldal reakciókészségét.
instagram viewer
• A beágyazott rácsok önálló elemként működtek a nagyobb rácstartályban. Egyáltalán nem volt utalás a szülőtárolóra semmilyen változásra.

Részrácsok nélkül:

Alrácsok után:

Az alrácsok megvalósításának módja:

.container {
szélesség: 700px;
magasság: 500px;
háttér: rgb (214, 255, 139);
kijelző: rács;
rács-sablon-oszlopok: 1fr 1fr 1fr 1fr;
rács-sablon-sorok: 1fr 1fr 1fr 1fr;
}
.container div {
háttér: rgb (72, 170, 137);
rács-sor: 2/3;
rácsoszlop: 2/5;
kijelző: rács;
rács-sablon-oszlopok: alháló;
rács-sablon-sorok: alháló;
}

Több alhálót is elhelyezhet. A figyelemre méltó kivétel az, hogy az alhálózatok öröklik a szülő rács-rés tulajdonságát. Ez azt eredményezi, hogy minden szülőrácson belül létrehozzák az összes azonos rés tulajdonságú részrácsot.

A legjobb dolog az alrácsokban, hogy nagyon érzékenyek, állíthatók és méretezhetők.

Böngésző kompatibilitás: Firefox

2. oldalarány Tulajdonság

Egy adott tároló képarányának módosításával kiküszöbölheti az összes beállítási és számítási kérdést. Ha videót szeretne beilleszteni, akkor csak annyit kell tennie, hogy rögzítenie kell a méretarányt a változó képernyőmérethez képest. De kétdimenziós többszörös rácsok használata közben fennáll a túlcsordulás és az alapértelmezett nézet esélye.

Javíthatja úgy, hogy a szélesség attribútummal támogatja a képarány tulajdonságot. Ez könnyen használható lesz az érzékeny képek számára, mivel meghatározhat magasságot vagy szélességet.

A képarány-tulajdonság megvalósításának módja:

.container {
szélesség: 700px;
képarány: 16/9;
háttér: rgb (72, 170, 137);
}

Megadhatja a képarány: auto beállítást az arány megadása helyett. Az alapértelmezett automatikus érték hátránya, hogy a böngésző kiválasztja a kép eredeti méretét. Kétségtelen, hogy akadályozza a webhely reakciókészségét.

Böngésző kompatibilitás: Chrome, Edge, Firefox (részleges)

3. Flexbox Gap

A rács-rés meglehetősen népszerű az egyenletes tér kialakításában az egyes rácsok között. De negatív margókat, álosztályú szelektorokat és komplex szelektorokat kellett alkalmaznia az egyes flex-elemek közötti tér kezelésére. Így a Flexbox rés kisebb kódsort eredményez, nagyobb skálázhatósággal.

Így hajthatja végre a flexbox hiányosságot:

.container {
szélesség: 700px;
magasság: 500px;
kijelző: flex;
align-items: center;
igazol-tartalom: központ;
rés: 1em;
}

Kimenet:

Böngésző kompatibilitás: Minden fő böngésző, beleértve a Chrome-ot, az Edge-t és a Firefox-ot.

A görgetés segít megosztani több információt egyetlen webhelyről anélkül, hogy elrontaná a webes példányt. De a görgetés fő hátránya, hogy a para vagy kép felénél megállhat. Néha a lapozott tartalom ellenőrzése félúton marad. A JavaScriptet átgondoltan használják a görgetés testreszabásának elkerülése érdekében. De ez nem volt teljesen kielégítő eredmény, amíg meg nem érkezett a CSS Scroll Snap.

A Scroll Snap használatával meghatározott határokat határozhat meg az adott tároló elrendezésének és láthatóságának javításához. Például fantasztikusan működik körhinta és meghatározott webhelyrészek létrehozása. Ne feledje, hogy semmilyen beállításhoz nem lesz szüksége JS-re.

Az alábbiak szerint valósíthatja meg a görgetés bepattintását:

.container {
szélesség: 100%;
magasság: 100%;
kijelző: flex;
overflow-x: görgetés;
scroll-snap-type: x kötelező;
}
szakasz {
flex: nincs;
kijelző: flex;
align-items: center;
igazol-tartalom: központ;
betűméret: 15em;
font-család: Arial, Helvetica, sans-serif;
scroll-snap-align: vég;
szélesség: 100%;
magasság: 100%;
}

Kimenet:

A CSS scroll snap rendelkezik szülő és gyermek tulajdonságokkal. A szülő vagy tároló tulajdonság dönti el a görgetés irányát (x vagy y) és a görgetés bepattanásának viselkedését. Például beállíthatja a scroll-snap-type: x kötelezőt. Megadja a felhasználónak a vezérlési lehetőséget a görgetési pont eldöntésére anélkül, hogy figyelembe venné a görgetési pozíciót.

Másrészt a scroll-snap-type: y közelség csak akkor működik, ha a webhely látogatója közelebb van a görgetési ponthoz.

Az alárendelt tulajdonság görgetés-bepattintás-igazítás az elemek igazításához a CSS-görgetéskor. A kezdő, a befejező és a középértéket adja meg az elemek ennek megfelelő igazításához.

5. Feature Queries

A szolgáltatással kapcsolatos lekérdezéseket a kecses degradáció kezelésére használják. Például a CSS-hálózatok manapság meglehetősen népszerűek. De érdemes megemlíteni, hogy a régebbi böngészők nem tudják megjeleníteni.

Itt a funkció lekérdezések ellenőrzik, hogy az adott böngésző támogatja-e egy adott tulajdonságot, vagy sem olyan támogatási rendszert ad, amely csak akkor ösztönzi a CSS-tulajdonság hivatkozását, ha az ezen támogatott böngésző. Ellenkező esetben az alapértelmezett érték kerül figyelembe vételre. Ebben az esetben blokkokat helyezhet el rácsok helyett az előrejelzett visszaesésekhez.

A következő módon hajthatja végre a funkciókkal kapcsolatos lekérdezéseket:

@supports (tartalom-láthatóság: automatikus) {
test{
háttér: kékeszöld;
szélesség: 100%;
magasság: 100%;
}
}

Ezért csak azoknak a böngészőknek lesz réce háttérszíne, amelyek tartalom-láthatósági tulajdonságokat nyújtanak. különben az alapértelmezett értéket veszik figyelembe. Ne feledje, hogy a @ hasonló a média lekérdezések @ media-jához, ahol a maximális szélességet vagy a min szélességet kellett beállítania a rögtönzött beállításokhoz. Leegyszerűsíti a @supports szolgáltatás lekérdezéseinek emlékezését.

Olvass tovább: Média lekérdezések használata HTML és CSS formátumban

Böngésző kompatibilitás: Minden fő böngésző, beleértve a Chrome-ot, az Edge-t és a Firefox-ot.

6. tartalom-láthatóság Tulajdonság

A gyors megjelenítés gerincként működik a felhasználó interaktív webhelyén. A mobil eszközök növekvő népszerűségével a weboldal megjelenítési teljesítménye szűk keresztmetszetet jelent a vonzó weboldal megszerzéséhez.

Itt a tartalom-láthatóság tulajdonság döntő szerepet játszik. Mivel alapértelmezés szerint a böngészők a weboldal összes elemét egyszerre jelenítik meg. Csökkenti a betöltési időt és a webhely teljes teljesítményét, különösen, ha webhelye sok nehéz animációt tartalmaz. Másrészt a tartalom-láthatóság tulajdonság csak a nézetablak elemeit jeleníti meg, és más elemeket jelenít meg az oldal görgetése közben.

#main {
tartalom-láthatóság: automatikus;
/ * tartalmaz-belső méret: 0 500 képpont; */
}

A tartalom-láthatóság tulajdonság három értéket ad meg. tartalom-láthatóság: látható nem mutat hatást, míg a tartalom-láthatóság: rejtett hasonló a megjelenítéshez: nincs, ahol az elem kihagyja az elérhetetlen tartalmat. A tartalom láthatósága: automatikusan kihagyja a lényegtelen tartalmat, de normál oldalként elérhető a user-agent funkciók számára.

Mérjük meg a tartalom-láthatóság erejét. Itt az eredmény:

7. Átmenet, átalakítás és animáció

A CSS-ben kétféleképpen alkalmazhatjuk az animációt. Az átmenet az elemek vizuális tulajdonságainak sima megváltoztatására szolgál. Másrészt átmenet nélkül az átalakulás hirtelen manipulálna egyik állapotból a másikba.

Az animációkat @keyframe-ekkel használják, amelyek az animáció időtartama alatt több ponton állítanak stílusokat. Az érdekes dolog az A @keyframes határozza meg, hogy a változás mikor következik be, az átalakítás és az animáció átveszi a változás irányítását, az átmenet pedig gondoskodik arról, hogy a változás hogyan fog bekövetkezni (például lebegő effektusok).

.child {
háttér: kékeszöld;
magasság: 150px;
szélesség: 150px;
fehér szín;
átmenet: 0,2-es átalakítás könnyű be-ki;
animáció: myAnimation 2s végtelen;
}
.child: lebeg {
transzformáció: skála (2, 2) forgatás (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
átalakítás: translateX (400px)
}
100% {
átalakítás: translateX (0px)
}
}

Böngésző kompatibilitás: Minden fő böngésző, beleértve a Chrome-ot, az Edge-t és a Firefox-ot.

Csomagolás

A lépcsőzetes stíluslap jelölés folyamatosan fejlődik, jobb funkciókkal. Eddig megismerte ezt a hét fantasztikus funkciót, amelyek magukban foglalják a CSS alhálózatot, a képarányt, flexbox hiányosságok, görgetés, funkciókérdések, tartalom-láthatósági tulajdonság, átmenet, átalakítás és élénkség.

A nap végén meg kell győződnie arról, hogy mely funkciók egyszerűsítik a webhely stílusát.

7 új funkció, amelyekre figyelni kell a Bootstrap 5-ben

Ha weboldalakat és alkalmazásokat fejleszt a Bootstrap CSS keretrendszer használatával, akkor íme a Bootstrap 5 újdonságai.

Olvassa el a következőt

A szerzőről