7 nových funkcí pro vytvoření responzivního webu

Moderní CSS přebírá veškerou kontrolu nad stylem webových stránek pomocí požadovaného JavaScriptu. V tomto článku zdůrazníme sedm nových aktualizací CSS, abychom zjednodušili budoucnost stylingu. Kromě toho uvažujeme o podpoře prohlížečů Chrome, Edge a Firefox. Nakonec probereme problémy, řešení a skoro vše, co potřebujete, abyste mohli hned začít.

Vezmeme-li v úvahu všechny triky a techniky, zde jsou některé ručně vybrané funkce CSS, které stojí za váš čas. Takže se bez dalších okolků ponořme přímo do toho.

1. Subgrid CSS

Na rozdíl od schopnosti CSS flexboxu pohybovat se pouze jedním směrem, můžete definovat obě rozměry v mřížkách. Jak se v nadcházejících desetiletích začnou stávat výkonnými a oblíbenými, ve webových designech dojde k obrovským změnám. Vnořené mřížky se používají k vykreslení mřížek uvnitř mřížek. Jaké jsou však hlavní nevýhody, které vyvolaly volání pro subgrids CSS?

• Vnořené mřížky po úrovni 2 slouží k přetečení obsahu mimo větší mřížku, což silně ovlivnilo odezvu webu.
instagram viewer
• Vnořené mřížky fungovaly jako nezávislé prvky uvnitř větší nádoby s mřížkou. Při jakékoli změně nebyl vůbec odkaz na nadřazený kontejner.

Bez podsítí:

Po dílčích mřížkách:

Zde je návod, jak můžete implementovat dílčí mřížky:

.kontejner {
šířka: 700px;
výška: 500px;
pozadí: rgb (214, 255, 139);
displej: mřížka;
grid-template-columns: 1fr 1fr 1fr 1fr;
řádky mřížky šablony: 1fr 1fr 1fr 1fr;
}
.kontejner div {
pozadí: rgb (72, 170, 137);
řádek mřížky: 2/3;
mřížkový sloup: 2/5;
displej: mřížka;
grid-template-columns: subgrid;
grid-template-riadky: subgrid;
}

Můžete umístit více dílčích mřížek. Pozoruhodnou výjimkou je, že podřízené mřížky dědí nadřazenou vlastnost mezery v mřížce. Výsledkem bude vytvoření všech dílčích mřížek se stejnými vlastnostmi mezer uvnitř každé nadřazené mřížky.

Nejlepší na subgridech je, že jsou vysoce citlivé, nastavitelné a škálovatelné.

Kompatibilita prohlížeče: Firefox

2. Vlastnost poměr stran

Všechny problémy s úpravami a výpočty můžete eliminovat změnou poměru stran daného kontejneru. Pokud chcete vložit video, vše, co musíte udělat, je opravit poměr stran vzhledem k různé velikosti obrazovky. Při práci s dvourozměrnými více mřížkami ale existuje šance na přetečení a výchozí zobrazení.

Můžete to opravit podporou vlastnosti poměr stran s atributem width. U responzivních obrázků se stane užitečným, protože můžete definovat výšku nebo šířku.

Vlastnost poměr stran můžete implementovat takto:

.kontejner {
šířka: 700px;
poměr stran: 16/9;
pozadí: rgb (72, 170, 137);
}

Místo zadání poměru můžete také zadat poměr stran: auto. Nevýhodou výchozí automatické hodnoty je, že prohlížeč vybere původní rozměr obrázku. Nepochybně to brání odezvě webu.

Kompatibilita s prohlížeči: Chrome, Edge, Firefox (částečná)

3. Flexbox Gap

Grid-gap je docela populární pro vytváření stejného prostoru mezi každou mřížkou. Měli jste ale použít záporné okraje, selektory pseudotřídy a složité selektory, abyste zvládli prostor mezi jednotlivými flex-položkami. Mezera Flexboxu tedy vede k menším řádkům kódu s vyšší škálovatelností.

Zde je návod, jak můžete implementovat mezeru flexboxu:

.kontejner {
šířka: 700px;
výška: 500px;
displej: flex;
align-items: center;
justify-content: center;
mezera: 1em;
}

Výstup:

Kompatibilita s prohlížeči: Všechny hlavní prohlížeče, včetně Chrome, Edge a Firefox.

Posouvání pomáhá sdílet více informací o jediném webu bez přeplnění webové kopie. Hlavní nevýhodou posouvání je však to, že se může zastavit na polovině para nebo obrázku. Někdy je kontrola stránkovaného obsahu ponechána uprostřed. JavaScript je zamyšleně používán, aby se zabránilo přizpůsobení posouvání. Nebyl to však zcela uspokojivý výsledek, dokud nepřišel CSS Scroll Snap.

Pomocí Scroll Snap můžete definovat konkrétní hranice, abyste opravili rozložení a viditelnost daného kontejneru. Například skvěle funguje vytváření karuselů a určitých částí webu. Všimněte si, že JS nebudete vyžadovat pro jakoukoli úpravu.

Tady je způsob, jak můžete implementovat rolování:

.kontejner {
šířka: 100%;
výška: 100%;
displej: flex;
overflow-x: scroll;
scroll-snap-type: x povinné;
}
sekce {
flex: žádný;
displej: flex;
align-items: center;
justify-content: center;
velikost písma: 15em;
rodina fontů: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
šířka: 100%;
výška: 100%;
}

Výstup:

Přichycení CSS má vlastnost rodič a dítě. Vlastnost nadřazeného prvku nebo kontejneru určuje směr posouvání (x nebo y) a chování uchopení posouvání. Můžete například nastavit scroll-snap-type: x povinné. Umožní uživateli ovládat rozhodování o bodu posouvání bez ohledu na polohu posouvání.

Na druhou stranu proximity funkce scroll-snap-type: y funguje, pouze když je návštěvník webu blíže k bodu rolování.

Podřízená vlastnost je scroll-snap-align pro zarovnání prvků během CSS scroll snap. Zadává počáteční, koncové a středové hodnoty pro odpovídající zarovnání prvků.

5. Dotazy na funkce

Dotazy na funkce se používají k řešení ladné degradace. Například mřížky CSS jsou dnes docela populární. Ale stojí za zmínku, že starší prohlížeče to nemohou vykreslit.

Zde dotazy na funkce zkontrolují, zda daný prohlížeč podporuje konkrétní vlastnost nebo ne a poskytuje systém podpory, který podporuje odkazování na vlastnost CSS, pouze pokud je na tom podporována prohlížeč. Jinak je brána v úvahu výchozí hodnota. V tomto případě můžete místo mřížek umístit bloky pro jakékoli předpokládané záložní řešení.

Zde je návod, jak můžete implementovat dotazy na funkce:

@supports (content-visibility: auto) {
tělo{
pozadí: zelenomodrá;
šířka: 100%;
výška: 100%;
}
}

Proto budou mít zelenou barvu pozadí pouze ty prohlížeče, které vykreslí vlastnosti viditelnosti obsahu; jinak by byla brána v úvahu výchozí hodnota. Všimněte si, že @ je podobné jako @media mediálních dotazů, kde jste měli nastavit maximální šířku nebo minimální šířku pro provizorní úpravy. Zjednodušuje zapamatování dotazů na funkce @ support.

Přečtěte si více: Jak používat dotazy médií v HTML a CSS

Kompatibilita s prohlížeči: Všechny hlavní prohlížeče, včetně Chrome, Edge a Firefox.

6. Vlastnost viditelnosti obsahu

Rychlé vykreslování funguje jako páteř pro uživatelsky interaktivní web. S rostoucí popularitou mobilních zařízení působí vykreslovací výkon webu jako překážka pro získání přitažlivého webu.

Zde hraje klíčovou roli vlastnost viditelnosti obsahu. Protože ve výchozím nastavení prohlížeče vykreslují všechny prvky webu najednou. Snižuje dobu načítání a celkový výkon webu, zejména pokud má váš web mnoho náročných animací. Na druhou stranu vlastnost viditelnosti obsahu vykreslí pouze prvky výřezu a při procházení stránkou zobrazuje další prvky.

#hlavní {
viditelnost obsahu: auto;
/ * contain-intrinsic-size: 0 500px; */
}

Vlastnost viditelnosti obsahu zadává tři hodnoty. viditelnost obsahu: viditelný nevykazuje žádný účinek, zatímco viditelnost obsahu: skrytý je podobný zobrazení: žádný, kde prvek přeskočí nepřístupný obsah. Viditelnost obsahu: auto přeskočí irelevantní obsah, ale je k dispozici jako normální stránka funkcím agenta uživatele.

Změřme sílu viditelnosti obsahu. Výsledek:

7. Přechod, transformace a animace

V CSS máme dva způsoby, jak použít animaci. Přechod se používá k hladkým změnám vizuálních vlastností prvků. Na druhou stranu, bez přechodu by transformace náhle manipulovala z jednoho státu do druhého.

Animace se používají s @keyframes, které nastavují styly v několika bodech během trvání animace. Zajímavé je to @keyframes definují, kdy ke změně dojde, transformaci a animaci převezme kontrolu nad změnou a přechod se postará o to, jak ke změně dojde (např. efekty přechodu myší).

.child {
pozadí: zelenomodrá;
výška: 150px;
šířka: 150px;
barva bílá;
přechod: transformace 0,2 s easy-in-out;
animace: myAnimation 2s nekonečno;
}
.child: vznášet se {
transformace: měřítko (2, 2) otočení (45 stupňů);
}
@keyframes myAnimation {
0% {
}
50% {
transformace: translateX (400px)
}
100% {
transformace: translateX (0px)
}
}

Kompatibilita s prohlížeči: Všechny hlavní prohlížeče, včetně Chrome, Edge a Firefox.

Balení

Kaskádové značení stylů se neustále vyvíjí s lepšími funkcemi. Zatím jste věděli o těchto sedmi úžasných funkcích, které zahrnují subgrid CSS, vlastnost poměru stran, mezery flexboxu, rolování, dotazy na funkce, vlastnost viditelnosti obsahu, přechod, transformace a animace.

Na konci dne musíte zajistit, které funkce zjednodušují styl vašeho webu.

7 nových funkcí, na které je třeba dávat pozor v Bootstrapu 5

Pokud vyvíjíte webové stránky a aplikace pomocí rámce CSS Bootstrap, zde je novinka v Bootstrapu 5.

Přečtěte si další

O autorovi