7 nových funkcií na vytvorenie responzívneho webu

Moderné CSS preberá celú kontrolu nad štýlom webových stránok pomocou požadovaného JavaScriptu. V tomto článku zdôrazníme sedem nových aktualizácií CSS, aby sme zjednodušili budúcnosť tvarovania. Ďalej uvažujeme o podpore prehliadača Chrome, Edge a Firefox. Na záver si povieme niečo o problémoch, riešeniach a skoro všetkom, čo budete hneď potrebovať.

Vzhľadom na všetky triky a techniky je tu niekoľko vybraných funkcií CSS, ktoré stoja za váš čas. Poďme sa teda do toho pustiť bez ďalších okolkov.

1. Podskupina CSS

Na rozdiel od schopnosti CSS flexboxu pohybovať sa iba jedným smerom, môžete definovať obe rozmery v mriežkach. Keď sa začnú v nasledujúcich desaťročiach stávať výkonnými a populárnymi, vo webových dizajnoch dôjde k obrovským zmenám. Vnorené mriežky sa používajú na kreslenie mriežok vo vnútri mriežok. Aké sú však hlavné nevýhody, ktoré vyvolali výzvu pre podskupiny CSS?

• Vnorené mriežky po úrovni 2 slúžili na pretečenie obsahu mimo väčšiu mriežku, čo malo výrazný vplyv na odozvu webu.
instagram viewer
• Vnorené mriežky fungovali ako nezávislé prvky vo vnútri väčšej mriežkovej nádoby. Vôbec sa nenachádzal odkaz na nadradený kontajner pre každú zmenu.

Bez podskupín:

Po čiastkových mriežkach:

Takto môžete implementovať podskupiny:

.kontajner {
šírka: 700px;
výška: 500px;
pozadie: rgb (214, 255, 139);
displej: mriežka;
stĺpce mriežky-šablóny: 1fr 1fr 1fr 1fr;
riadky mriežky-šablóny: 1fr 1fr 1fr 1fr;
}
. kontajner div {
pozadie: rgb (72, 170, 137);
riadok mriežky: 2/3;
mriežkový stĺp: 2/5;
displej: mriežka;
grid-template-columns: subgrid;
grid-template-riadky: subgrid;
}

Môžete umiestniť viac podskupín. Pozoruhodnou výnimkou je, že podsiete dedia vlastnosť nadradenej mriežky. Výsledkom bude vytvorenie všetkých podskupín s rovnakými vlastnosťami medzery vo vnútri každej nadradenej mriežky.

Najlepšie na podskupinách je to, že sú vysoko citlivé, nastaviteľné a škálovateľné.

Kompatibilita prehliadača: Firefox

2. Vlastnosť s pomerom strán

Všetky problémy s úpravami a výpočtami môžete vylúčiť zmenou pomeru strán daného kontajnera. Ak chcete vložiť video, stačí opraviť pomer strán vzhľadom na rôznu veľkosť obrazovky. Pri práci s dvojrozmernými viacerými mriežkami však existuje šanca na pretečenie a predvolené zobrazenie.

Môžete to opraviť podporou vlastnosti pomer strán s atribútom width. U responzívnych obrázkov sa stane praktickým, pretože môžete definovať výšku alebo šírku.

Vlastnosť pomeru strán môžete implementovať takto:

.kontajner {
šírka: 700px;
pomer strán: 16/9;
pozadie: rgb (72, 170, 137);
}

Namiesto zadania pomeru môžete tiež zadať pomer strán: auto. Nevýhodou predvolenej automatickej hodnoty je, že prehliadač vyberie pôvodnú dimenziu obrázka. Nepochybne to bráni responzívnosti stránky.

Kompatibilita prehliadača: Chrome, Edge, Firefox (čiastočná)

3. Flexbox Gap

Mriežková medzera je veľmi populárna na vytvorenie rovnakého priestoru medzi každou mriežkou. Mali ste však použiť záporné okraje, selektory pseudotried a komplexné selektory na spracovanie medzery medzi jednotlivými flex položkami. Výsledkom medzery Flexboxu sú teda menšie riadky kódu s vyššou škálovateľnosťou.

Tu je príklad, ako môžete implementovať medzeru vo flexboxe:

.kontajner {
šírka: 700px;
výška: 500px;
displej: flex;
align-items: center;
justify-content: center;
medzera: 1em;
}

Výkon:

Kompatibilita prehľadávačov: Všetky hlavné prehľadávače vrátane Chrome, Edge a Firefox.

Posúvanie pomáha zdieľať viac informácií o jednej webovej stránke bez toho, aby bola webová kópia neprehľadná. Hlavnou nevýhodou rolovania je však to, že sa môže zastaviť na polovici para alebo obrázka. Niekedy je kontrola stránkovaného obsahu ponechaná v polovici cesty. JavaScript je premyslene používaný, aby sa zabránilo prispôsobeniu rolovania. Nebol to však úplne uspokojivý výsledok, kým neprišiel CSS Scroll Snap.

Pomocou Scroll Snap môžete definovať konkrétne hranice, aby ste opravili rozloženie a viditeľnosť daného kontajnera. Funguje to napríklad úžasne na vytváranie karuselov a definitívnych sekcií webových stránok. Upozorňujeme, že od spoločnosti JS nebudete vyžadovať žiadne úpravy.

Tu je príklad, ako môžete implementovať rolovanie:

.kontajner {
šírka: 100%;
výška: 100%;
displej: flex;
overflow-x: rolovať;
scroll-snap-type: x povinné;
}
oddiel {
flex: žiadny;
displej: flex;
align-items: center;
justify-content: center;
veľkosť písma: 15em;
rodina fontov: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
šírka: 100%;
výška: 100%;
}

Výkon:

Prichytávanie CSS má vlastnosť rodič a dieťa. Vlastnosť rodiča alebo kontajnera určuje smer rolovania (x alebo y) a správanie sa rolovania. Môžete napríklad nastaviť povinné rolovanie a snímanie: x. Poskytne používateľovi kontrolu nad rozhodnutím bodu rolovania bez zohľadnenia polohy rolovania.

Na druhej strane blízkosť typu scroll-snap-type: y funguje, iba ak je návštevník webovej stránky bližšie k bodu posúvania.

Podradená vlastnosť je scroll-snap-align na zarovnanie prvkov počas CSS scroll snap. Zadáva počiatočné, koncové a stredové hodnoty, aby zodpovedajúcim spôsobom zarovnala prvky.

5. Dotazy na funkcie

Dotazy na funkcie sa používajú na riešenie ladnej degradácie. Napríklad CSS mriežky sú v dnešnej dobe veľmi populárne. Ale stojí za zmienku, že staršie prehliadače to nedokážu vykresliť.

Tu sa zisťujú otázky týkajúce sa funkcií, či daný prehliadač podporuje konkrétnu vlastnosť alebo nie a poskytuje systém podpory, ktorý podporuje odkazovanie na vlastnosť CSS, iba ak je na nej podporovaná prehliadač. V opačnom prípade sa použije predvolená hodnota. V takom prípade môžete umiestniť mriežky namiesto mriežok pre akékoľvek predpokladané záložné riešenie.

Tu je príklad, ako môžete implementovať dotazy na funkcie:

@supports (content-visibility: auto) {
telo {
pozadie: zelenomodrá;
šírka: 100%;
výška: 100%;
}
}

Preto budú mať zelenú farbu pozadia iba tie prehľadávače, ktoré vykresľujú vlastnosti viditeľnosti obsahu; inak by sa brala do úvahy predvolená hodnota. Upozorňujeme, že @ je podobné ako @media mediálnych dotazov, kde ste mali nastaviť maximálnu alebo minimálnu šírku, aby ste vykonali provizórne úpravy. Zjednodušuje si to zapamätanie si dotazu na funkcie @ support.

Čítaj viac: Ako používať mediálne dotazy v HTML a CSS

Kompatibilita prehľadávačov: Všetky hlavné prehľadávače vrátane Chrome, Edge a Firefox.

6. vlastnosť viditeľnosti obsahu

Rýchle vykreslenie funguje ako chrbtová kosť pre interaktívny web používateľa. S rastúcou popularitou mobilných zariadení predstavuje vykresľovací výkon webovej stránky ako prekážku pre získanie atraktívnej webovej stránky.

Tu hrá dôležitú úlohu vlastnosť viditeľnosti obsahu. Pretože prehľadávače predvolene vykresľujú všetky prvky webových stránok naraz. Znižuje čas načítania a celkový výkon stránok, najmä ak má váš web veľa náročných animácií. Na druhej strane vlastnosť content visibility vykresľuje iba prvky výrezu a zobrazuje ďalšie prvky pri rolovaní po stránke.

#hlavný {
viditeľnosť obsahu: auto;
/ * contain-intrinsic-size: 0 500px; */
}

Vlastnosť viditeľnosť obsahu zadáva tri hodnoty. viditeľnosť obsahu: viditeľné nevykazuje žiadny vplyv, zatiaľ čo viditeľnosť obsahu: skryté je podobné zobrazeniu: žiadne, kde prvok preskočí neprístupný obsah. Viditeľnosť obsahu: auto preskočí irelevantný obsah, ale je k dispozícii ako normálna stránka pre funkcie user-agent.

Zmerajme silu viditeľnosti obsahu. Výsledok:

7. Prechod, transformácia a animácia

V CSS máme dva spôsoby použitia animácie. Prechod sa používa na hladké zmeny vizuálnych vlastností prvkov. Na druhej strane, bez prechodu by transformácia náhle manipulovala z jedného štátu do druhého.

Animácie sa používajú s @keyframes, ktoré nastavujú štýly na niekoľkých miestach počas trvania animácie. Zaujímavosťou je, že @keyframes definujú, kedy dôjde k zmene, transformáciu a animáciu preberá kontrolu nad zmenou a prechod sa stará o to, ako k zmene dôjde (napr. efekty vznášania).

.dieťa {
pozadie: zelenomodrá;
výška: 150px;
šírka: 150px;
farba: biela;
prechod: transformácia 0,2 s easy-in-out;
animácia: myAnimation 2s nekonečná;
}
.child: hover {
transformácia: mierka (2, 2) otočenie (45 stupňov);
}
@keyframes myAnimation {
0% {
}
50% {
transformácia: translateX (400px)
}
100% {
transformácia: translateX (0px)
}
}

Kompatibilita prehľadávačov: Všetky hlavné prehľadávače vrátane Chrome, Edge a Firefox.

Balenie

Značky kaskádových štýlov sa neustále vyvíjajú s lepšími funkciami. Doteraz ste sa dozvedeli o týchto siedmich úžasných funkciách, ktoré zahŕňajú podskupinu CSS, vlastnosť pomeru strán, medzery flexboxu, rolovanie, dotazy na funkcie, vlastnosť viditeľnosti obsahu, prechod, transformácia a animácia.

Na konci dňa musíte zabezpečiť, ktoré funkcie zjednodušujú štýl vášho webu.

7 nových funkcií, na ktoré je potrebné dávať pozor v bootstrape 5

Ak vyvíjate webové stránky a aplikácie pomocou rámca CSS Bootstrap, tu je to, čo je nové v Bootstrap 5.

Prečítajte si Ďalej

O autorovi