Inhalt
Hot nei CSS: Schnell LinksFeature Ufroen (@supports)
CSS Gitter
CSS Filteren
CSS Verännerlechen
Hannergrond widderhuelen (Ronn a Weltraum)
Aspekt-Verhältnis Medienufroen
Blend-Modus
Objet-fit
Form-ausserhalb
aktuell Faarf
Méi Regele fir ze kucken
Wéi de Web sech séier entwéckelt huet, schéngt et bal datt entschëllegt CSS hannerlooss gouf. All Woch geschitt eppes, awer selten wou et wichteg ass - d'Interface. Den Internet befollegt e bal éiwege konvergéiert-dann-divergéieren-dann-konvergéiere Modell an Uwendungen, an elo ass et den Tour vum CSS.
Wéi méi Kaderen, Iddien a Standarden entstane sinn, ass d'Komplexitéit eropgaang mat ëmmer méi Helfer Technologien, déi aus der Noutwennegkeet erfonnt goufen. D'Saache si vill méi komplizéiert fir Entwéckler ginn wéi d'Leit méi erwaarden, awer elo gi se lues a CSS als formell Normen fusionéiert. CSS ass vu senger fréicher Grënnung an den 1990er Joren unerkennbar ginn. Wëllt d'Saache méi einfach wieren? Probéiert e Websäit Builder.
A wat fir d'Zukunft? Mir kënne wahrscheinlech elo soen datt CSS vun der Zukunft eng aner Divergenz gesäit wéi verschidde digital a kierperlech Apparater a Kanäl erschéngen, och zu enger fonkelneier Technologie. Mir kënne wahrscheinlech och roden datt CSS en einfachen Zougang zu nach méi räichen Interfaces gëtt an datt d '"S" Curve an der Entwécklungskomplexitéit an den Entwécklungsfeatures schmuel a steif gëtt (denkt drun, wann Dir e komplexe Site baut, braucht Dir Webhosting dat kann ophalen an anstänneg Cloud Späichere fir Design Dateien ze späicheren an ze deelen).
Awer wat fir elo? Dëst sinn eis Picks fir déi lescht, gréissten an nëtzlechst Updates fir CSS. Liest weider fir ze léieren wéi d'Features Queries benotze fir ze kontrolléieren ob eng Feature ënnerstëtzt gëtt ier Dir ufänkt drop ze vertrauen; bauen personaliséiert, Print-Style Layouten mat CSS Grid; DROCH Ären Code mat CSS Variablen aus; huel Kontroll vun Hannergrënn mat zwee Hannergrond-widderhuelen Optiounen (Ronn an Raum); Aspekt-Verhältnis baséiert Medienufroen entdecken; schafen eenzegaarteg visuell mat Blend-Modus; a maacht Biller unzepassen fir Inhaltskëschte mat ze fëllen Objet-fit; a méi. Benotzt de Quick Links Box vis-à-vis fir an d'Sektioun ze sprangen déi Dir wëllt.
Feature Ufroen (@supports)
Wann Dir Komponente baut déi nei a potenziell net ënnerstëtzte Feature benotzen, ass et wichteg e Fallback mat anzebannen. Bis viru kuerzem gouf dëst mat Feature Detection via JavaScript mat Plugins wéi Modernizr erreecht. Elo ass et méiglech direkt am CSS mat der neier @supports Syntax (och bekannt als Feature Query).
Mat der Zousätzlech vun @supports, kënne mir kontrolléieren ob de Code dee mir benotze wëllen oder net ënnerstëtzt:
@supports (display: flex) {.hagrid {display: flex; }}
Wann d'Säit gelueden ass, gëtt e Kontroll gemaach fir ze kucken ob de Browser am Gebrauch d'Flex Feature ënnerstëtzt. Wann et et mécht, gëtt de Styling an de Support Klamere vum Browser applizéiert.
Wann et net ass, gëtt et ignoréiert - et ass derwäert e Fallback Optioun ze hunn fir wann d'Fro gestallt gëtt net ënnerstëtzt.
De passendste Wee fir de Fallback Code opzehuelen hänkt vum Projet of a wat geännert gëtt wéi et ka sinn @supports Code iwwerschreiwe Standard Styling. An anere Fäll kann et léiwer sinn eng aner matzemaachen @supports préift ob de Code net ënnerstëtzt gëtt. Dëst gëtt erreecht mat der Negatioun vun der Feature-Ufro:
@supports net (display: flex) {.dobby {display: block; }}
Méi Schecken kënne kombinéiert ginn fir ze kucken ob all déi erfuerderlech Features zur selwechter Zäit ënnerstëtzt ginn, fir entweder all oder keng vun de Stilregelen atomesch z'applizéieren. D'Syntax fir dëst ass ganz ähnlech wéi d'Medienufroen ze kombinéieren, wéi zum Beispill Stiler op Geräter tëscht spezifesche Gréissten uwenden. Dëst gëtt erreecht mat dem 'an' Bedreiwer a méi Feature Ufroen:
@supports (display: flex) an (transform: scaleY (3)) {.fluffy {display: flex; transforméieren: scaleY (3); }}
D'Géigespiller Kombinatioun Ufro fir de an Bedreiwer ass den oder Operator, dee kontrolléiert ob ee vun de Feature-Ufroen entsprécht an de Stil applizéiert wann op d'mannst een ënnerstëtzt gëtt:
@supports (affichéieren: flex) oder (transform: scaleY (1.5)) {.grawp {display: flex; transforméieren: SkalaY (1,5); }}
Eppes wat nëtzlech ass well mir schonn CSS Variabelen ofgedeckt hunn ass dat mat @supports Dir kënnt och kucken ob e personaliséierten Eegentum ënnerstëtzt oder net, wat mat der folgender Approche gemaach ka ginn:
@supports (--ron: orange) {body {color: var (- ron); }}
Mat dem uewe genannte Beispill gëtt e Scheck gemaach fir ze kucken ob de personaliséierten Eegeschaftszoustand ënnerstëtzt gëtt a wann et de Kierper ass eng Schrëftfaarf vun orange applizéiert. @supports ass verfügbar fir an all Browser ze benotzen mat Ausnam vun IE 11 a méi, obwuel verschidde Polyfills verfügbar sinn wann Dir esou wäit wéi Internet Explorer 9 musst ënnerstëtzen.
Eng lescht Notiz: Dëst ass e super Wee fir nei Stylingregelen anzebauen, awer et ass och sou hëllefräich fir sécherzestellen datt Dir Websäite baut déi graziéis degradéieren. Wann Dir benotzt @supports da benotzt et och fir ze kontrolléieren ob de Browser Är CSS Regelen net ënnerstëtzt. Dëst kéint Är Aarbechtsbelaaschtung verduebelen, awer et garantéiert och datt Dir eppes erstallt datt Browser méi elegant erofgeet.
CSS Gitter
D'Arrivée vu Flexbox huet erlaabt eis manner Zäit ze verschmotzen eise Code mat klore Fixen, Hacks an Ëmleefungen ze konzentréieren, a méi op d'Schreiwe vu präziser CSS an HTML ze konzentréieren. Wärend Flexbox essentiel fir all UI Dev's Toolbox ass, ass et am Beschten geegent fir an enger eenzeger Richtung gläichzäiteg ze schaffen. Dëst ass normalerweis genuch, well mir normalerweis nëmmen op enger Achs limitéiert sinn (zum Beispill d'Breet vun der Säit ass limitéiert, awer net d'Héicht).
Wéi och ëmmer, an de Fäll wou mir a béid Dimensioune limitéiert sinn, soen eng Dashboard Style App, dann ass CSS Grid definitiv ee fir ze blénken. Ufänken mam Gitter kann ufanks beängschtegend sinn, awer et ass glat ze segelen wann Dir d'Syntax an de Grëff kritt. Sot mir hunn déi folgend HTML Struktur:
div> div> Gryffindor / div> div> Slytherin / div> div> Ravenclaw / div> div> Hufflepuff / div> / div>
Mir kënnen de Gitter definéieren, d'Dimensiounen setzen, an dann benannte Beräicher fir eis Gitterzellen definéieren:
.container {uweisen: Gitter; Breet: 100vw; Héicht: 100vh; } .container> div {border: 2px solid # 000; } .gryffindor {grid-area: gryffindor; Hannergrondfaarf: # C91018; } .Slytherin {Gittergebitt: Slytherin; Hannergrondfaarf: # 26A147; } .ravenclaw {grid-area: ravenclaw; Hannergrondfaarf: # 005782; } .hufflepuff {grid-area: hufflepuff; Hannergrondfaarf: # FFD63C; }
Endlech, op der .container kënne mir Gebrauch vun der maachen Gitter-Template-Beräicher Eegeschafte fir auszeleeën wéi mir wëllen de Gitter ausgesinn:
.container {uweisen: Gitter; Breet: 100vw; Héicht: 100vh; Gitter-Template-Gebidder: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"}
Zousätzlech ginn et eng ganz Rei vun zousätzlechen Eegeschafte fir d'Presentatioun vum Netz ze finignéieren. Fir der e puer ze nennen:
Gitterkolonnespalt: Gréisst>; Gutter tëscht Kolonnen
Gitter-Zeil-Spalt: Gréisst>; Gutter tëscht Reien
Gitter-Template-Spalten: Gréisst>; Breet vu Säulen, Raum getrennt fir méi
Gitter-Template-Reien: Gréisst>; Breet vun der Rei, Plaz getrennt fir méi
align-items: Zentrum | Enn | ufänken>; Vertikal den Inhalt vun all Gitterzell ausriichten
align-items: strecken>; Fëllt d'Zell ganz vertikal
justify-items: Zentrum | Enn | ufänken | strecken>; Wéi uewen, laanscht d'horizontal Achs
Plaz-Elementer: align-items> / justify-items>; Kuerznotatioun, kombinéiert ausriichten-Elementer an justifizéieren-Elementer
Also an der Praxis kéinte mir eise fréiere Gitter aktualiséieren:
.container {uweisen: Gitter; Breet: 100vw; Héicht: 100vh; Gitter-Template-Beräicher: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"; Gitter-Spalt-Spalt: 10px; Gitter-Zeil-Lück: 15px; Gitter-Template-Spalten: 200px Auto Auto 200px; ausriichten-Elementer: Strecken; justifizéieren-Elementer: Strecken; }
Dëst ass alles just knapps d'Uewerfläch vun de Méiglechkeete vum CSS Grid kraazt - et gëtt sou vill méi dat ka gemaach ginn. Momentan gëtt dëst an alle modernen Browser ënnerstëtzt, mat IE11 als Ausnam, wärend et déi al Syntax ënnerstëtzt.
Awer, waart, et gëtt méi! Mat der Benotzung vum CSS Grid kënne mir endlech den Inhalt zentral ausriichten ouni de Stress:
.container {uweisen: Gitter; Héicht: 100vh; Plaz-Artikelen: Zentrum Zentrum; }
Nächst Säit: CSS Filteren an CSS Variabelen
