8 avancerede CSS-funktioner (og hvordan man bruger dem)

Moderne CSS
(Billedkredit: Getty Images)

CSS udvikler sig konstant, og en række spændende nye funktioner er tilføjet for at gøre specifikationen til et endnu mere kraftfuldt våben i en webdesigners værktøjssæt.

CSS Grid tager layout til nye niveauer, der ikke er set før, tilpassede egenskaber introducerer konceptet med variabler, mens funktionsforespørgsler kontrollerer browsersupport. Medieforespørgsler bevæger sig op på et niveau med nye tilgængelighedsegenskaber, variable skrifttyper giver maksimal kreativitet med minimum kodeopblæsning, mens rulle snapping eliminerer behovet for JavaScript. Tjek vores cool CSS animation eksempler for at se, hvad du kan oprette. Eller prøv disse for at opbygge et websted uden kode hjemmesidebygere .



For dem, der ønsker at blive kreative, er der CSS-figurer til unikke layout og et væld af blandingstilstande og filtre for at introducere Photoshop-stildesigneffekter. Læs videre for at finde ud af, hvordan du kan bruge disse must-try-funktioner i dine seneste builds. Men husk, et komplekst websted betyder, at du har brug for en webhosting service, der kan understøtte dine behov.



01. Brugerdefinerede egenskaber

Hvis du har brugt en forprocessor som Sass eller faktisk et programmeringssprog som JavaScript, vil du uden tvivl være fortrolig med begrebet variabler - værdier, der er defineret til genbrug i hele din kode. Brugerdefinerede egenskaber gør det muligt for os at gøre dette i vores CSS uden behov for forprocessorer. Variabler kan indstilles på: rodniveau (oprettelse af globale variabler) eller afgrænses inden for en vælger. De kan derefter kaldes ved hjælp af syntaksen var (- & rsaquo; -myVariableName). For eksempel kan vi indstille en variabel kaldet --primaryColor sådan her:

/* On the root element (a global variable) */ :root { -​-primaryColor: #f45942; } /* Scoped to a selector */ .my-component { -​-primaryColor: #4171f4; }

Nu kan vi bruge denne variabel som en egenskabsværdi:



h1 { color: var(-​-primaryColor); }

Brugerdefinerede egenskaber nedarves, hvilket har nogle meget nyttige konsekvenser. En af dem er tema. Tag ovenstående eksempel: Vi kan definere en global variabel (# f45942 - en lys orange rød) til --primaryColor på rodniveau, så hver forekomst, hvor vi bruger denne variabel, vil værdien være rød. Men vi omdefinerer også den samme variabel i en vælger med en anden værdi (# 4171f4 - mellemblå). Så for hvert tilfælde hvor vi bruger --primaryColor variabel inden for denne vælger, vil den beregnede værdi være blå.

Indstilling af standardindstillinger

Omfanget af variabler er en fantastisk funktion, men en, der måske fanger dig ud ved lejligheder! Hvis du forsøger at bruge en variabel, der endnu ikke er defineret, falder den resulterende værdi tilbage til browserens standard eller en nedarvet værdi snarere end en variabel, der er defineret længere op ad kaskaden. I nogle tilfælde kan det være hensigtsmæssigt at indstille en standardværdi:

h1 { color: var(-​-primaryColor, blue); }

Hvordan adskiller brugerdefinerede egenskaber sig fra præprocessorvariabler?

Brugerdefinerede egenskaber adskiller sig fra præprocessorvariabler på nogle få vigtige måder. Forprocessorvariabler kompileres, før din kode sendes til browseren. Browseren ser aldrig, at en værdi er en variabel, den ser kun slutresultatet. Brugerdefinerede egenskaber beregnes i browseren. Du kan inspicere dem i moderne udviklerværktøjer, ændre variablen og se den løste værdi. De er dynamiske variabler, hvilket betyder, at deres værdier kan ændres inden for CSS eller ved kørsel med JavaScript.



I modsætning til præprocessorvariabler kan brugerdefinerede egenskaber ikke bruges inden for vælgernavne, ejendomsnøgler eller medieforespørgselserklæringer - kun CSS-egenskabsværdier. CSS-præprocessorer har stadig masser af fordele, så vi ser sandsynligvis dem holde fast i et stykke tid længere, men de vil sandsynligvis blive brugt oftere i kombination med tilpassede egenskaber.

02. Funktionsforespørgsler

Funktionsforespørgsler er en måde at teste, om en browser understøtter en bestemt kombination af CSS-egenskab og værdi i din CSS-fil. De fjerner stort set behovet for funktionsdetekteringsbiblioteker som Modernizr. Syntaksen ligner en medieforespørgsel: Du bruger at-rule @bakker op , efterfulgt af dit ejendomsværdipar, der indpakker koden, der skal udføres, hvis browseren opfylder de angivne betingelser.

Funktionsforespørgsler understøttes godt i moderne browsere, men de er relativt nye, og en 'gotcha' er, at nogle browsere, som du måske vil teste for support, muligvis ikke understøtter funktionsforespørgsler selv. Ofte er den bedste måde at håndtere dette på først at give tilbagevendende stilarter (uden for funktionsspørgsmålet) og derefter pakke dine forbedringer til understøttelse af browsere inde i @bakker op Herske.

Vær opmærksom på, at funktionsforespørgsler kun skal bruges sparsomt. En af de store funktioner i CSS er, at browsere simpelthen ignorerer egenskaber eller værdier, som de ikke forstår. Det er bedst kun at anvende funktionsforespørgsler, når det ikke ville medføre en visuel fejl, ellers kan du indstille dig til en masse ekstra arbejde.

CSS Feature Queries - caniuse.com

Tjek webstedet caniuse.com for at kontrollere browsersupport for funktionsforespørgsler(Billedkredit: caniuse.com)

Sådan bruges funktionsforespørgsler

For at teste for understøttelse af en enkelt ejendomsværdi kan vi først give tilbagefaldet. I dette eksempel leverer vi en flexbox-reserve til browsere, der ikke understøtter gitterlayout.

.my-component { display: grid; } @supports (display: grid) { .my-component { display: flex; } }

03. Medieforespørgsler

Du vil sandsynligvis være vant til at bruge medieforespørgsler til at registrere bredden og højden på visningsporten og medietypen (oftest skærm eller udskrivning). Niveau 5 Media Queries-specifikationen bringer os nogle nyere mediefunktioner til (valgfrit) at teste for, som allerede understøttes i nogle browsere. Disse tilbyder nogle store fordele for tilgængelighed.

Brugere med vestibulære lidelser og dem, der lider af køresyge, sætter måske ikke pris på websider med meget bevægelse, såsom animationer og parallax-rulleeffekter. Ved hjælp af den medieforespørgsel, der foretrækker reduceret bevægelse, kan vi give brugere, der fravælger et alternativ med nedsat bevægelse.

.my-element { animation: shake 500ms ease-in-out 5; } @media (prefers-reduced-motion: reduce) { .my-element { animation: none; } }

Det bliver stadig mere populært for websteder at give et alternativt mørkt tema. Foretrukne farver-skema giver os mulighed for at spørge, om brugeren har indstillet en systemomfattende præference (ved hjælp af nøgleordene mørk, lys eller ikke-præference) og vise det relevante farveskema i overensstemmelse hermed.

/* Media queries 02 */ body { background: linear-gradient(to bottom, #b5faff, #ffe2b4); } @media (prefers-color-scheme: dark) { body { color: white; background: linear-gradient(to bottom, #0c1338, #3e3599); } }

04. Variable skrifttyper

Variable skrifttyper

Tjek Axis-Praxis, et websted til leg med OpenType Variable skrifttyper(Billedkredit: AxisPraxis)

Generelt, hvis vi vil medtage et antal forskellige skrifttyper af samme familie på vores webside, skal vi indlæse det samme antal skrifttypefiler. Jo flere fontfiler du indlæser, jo mere vægt føjer du til din side med indflydelse på ydeevnen - så det er normalt klogt at indlæse maksimalt tre eller fire fontfiler (afhængigt af dit præstationsbudget).

Variable skrifttyper ændrer alt dette. De gør det muligt for os at indlæse en enkelt skrifttypefil til en hel skrifttypefamilie. Selvom denne fil normalt er større end en enkelt skrifttype, hvis du vil drage fordel af forskellige vægte og stilarter, så er en variabel skrifttype den mere effektive løsning. Hvis du har købt en hel skrifttypefamilie, skal du huske at gemme den sikkert i Sky lagring så du ikke mister dine filer!

Variationsakse

Ikke kun det, men med variable skrifttyper er vi ikke begrænset til en lille delmængde skrifttypevægte. Når du arbejder med almindelige skrifttyper, angives de tilgængelige fontvægte i multipla af 100. Typisk kan 400 være den normale vægt, 300 den lette vægt og 700 den fed vægt - med forskellige familier, der leverer flere vægte eller færre. Variable skrifttyper har en variationsakse, som giver os en række værdier for egenskaber som fontvægten. En skrifttype kan have en akse på 1–900, som giver os adgang til 900 forskellige vægte!

Variationsaksen er ikke kun begrænset til vægt. Variable skrifttyper kan have forskellige akser for x-højde, skråstilling, serif længde og kontrast (for kun at vælge et par eksempler) - hvilket betyder, at en enkelt fontfil kunne give os adgang til hundreder eller endda tusinder af variationer! Vi kunne endda animere disse egenskaber, så vi kunne opnå nogle virkelig seje effekter. Mandy Michael ( https://codepen.io/mandymichael ) har en hel masse kreative demoer, der virkelig tester grænserne.

Browsersupport til variable skrifttyper er ret godt, og mange fontstøberier udvikler aktivt nye variable skrifttyper, som du kan begynde at bruge nu - selvom disse ofte kommer til en præmie, især for de mere fuldt udstyrede skrifttypefamilier. Hvis du bare vil komme i gang med at lege med variable skrifttyper for at se, hvad de kan gøre, er der en række forskellige lekepladser med variabel font:

Vær opmærksom på, at hvis du vil bruge variable skrifttyper lige nu, skal du sikre dig, at du bruger et opdateret operativsystem - de fungerer ikke på ældre operativsystemer.

Indstillinger for skrifttypevariation

Mens vi kan ændre fontvægten let nok med skriftvægt CSS ejendom, indstillinger for font-variation er en ny egenskab, der giver os fuld adgang til en skrifts forskellige variationer. Disse inkluderer både registrerede akser og brugerdefinerede akser.

Registrerede akser

Der er fem forskellige registrerede akser, der svarer til forskellige CSS-egenskaber. Hver af disse har det, der kaldes et 'aksetag'. De registrerede akser er: wght (fontvægt), wdth (font-stretch), ER (skrifttype: skrå / vinkel), drikke (font-stil: kursiv), opsz (font-optisk-størrelse). Vi kan få adgang til disse akser enten via CSS-ejendommen eller med indstillinger for font-variation .

Disse akser er ikke nødvendigvis alle inkluderet i hver variabel skrifttype (nogle kan kun have en eller to akser), men de er sandsynligvis de mest almindelige.

Brugerdefinerede akser

Brugerdefinerede akser er skræddersyede akser inkluderet af fontdesigneren og kan overhovedet være hvad som helst. De kunne omfatte (for eksempel) serif længde, x-højde, endda noget mere kreativt (og mindre typografisk typisk), som rotation.

Begge aksetyper skal udtrykkes som et mærke med fire tegn. Registrerede akser skal være små, mens tilpassede akser er store bogstaver. Begge kan kombineres i egenskaben font-variation-settings. Font-variation-settings kan animeres, hvilket kan give mulighed for nogle meget seje UI-effekter! Nogle meget interessante eksperimenter er også produceret ved hjælp af ikonfonter.

05. Grafiske effekter

CSSgram - et lille bibliotek til genskabelse af Instagram-filtre

CSSgram er et lille bibliotek til genskabelse af Instagram-filtre(Billedkredit: CSSGram)

Hvis du er fortrolig med designværktøjer som Photoshop og Illustrator, er du muligvis opmærksom på blandingstilstande og hvordan de kan bruges til at producere forskellige effekter på billeder. Den måde blandingsfunktioner fungerer på er at blande to eller flere lag sammen ved hjælp af matematiske formler til at beregne en resulterende værdi for hver pixel. Lagene kunne være hvad som helst - billeder, gradienter eller flade farver. Nogle blandingstilstande frembringer et mørkere resultat (f.eks. Gang, hvilket multiplicerer pixelværdierne for lagene), nogle lysere (f.eks. Skærm og overlay). Vi behøver dog ikke at forstå matematikken for at kunne bruge dem. At lege med forskellige blandingstilstande kan give os en god fornemmelse for, hvem af dem der producerer de ønskede resultater, når de kombineres med forskellige lag.

Med CSS-egenskaberne mix-blend-mode og baggrund-blanding-tilstand , kan vi opnå Photoshop-lignende billedeffekter i browseren. Begge egenskaber har de samme værdier, men fungerer lidt anderledes.

Baggrundsblanding-tilstand

Baggrundsblanding-tilstand blander baggrundslagene af det element, vi målretter mod, sammen. Vores element kunne have baggrundsbilleder, farver og gradienter, og de ville alle blive blandet med hinanden uden at påvirke forgrundsindholdet. Vi kan angive flere værdier for baggrund-blanding-tilstand , en for hvert baggrundslag.

.my-element { background: url(#myUrl), linear-gradient(45deg, rgba(65, 68, 244, 1), rgba(203, 66, 244, 0.5)), rgba(244, 65, 106, 1); background-size: cover; background-blend-mode: screen, multiply; }

Mix-blend-mode

Mix-blend-mode påvirker, hvordan elementet blandes med sin forælder og dets søskende, inklusive alt forgrunds- og baggrundsindhold, og pseudo-elementer. Nogle interessante kreative effekter kan opnås ved at blande overlejrede pseudo-elementer (:: før og :: efter).

.my-element { background: rgb(244, 65, 106); mix-blend-mode: multiply; }

CSS-filtre

CSS-filtre kan også bruges til at skabe slående visuelle effekter ved hjælp af filter egenskabs- og filterfunktionsværdier. I modsætning til blandingstilstande anvender de en grafisk effekt direkte på det element, de målretter mod, og et element kan have flere filtre anvendt.

Konverter til gråtoner

Vi kan manipulere farverne på et element med en større grad af kontrol end at stole på blandingstilstande. Filtre kan konvertere et billede til gråtoner, justere lysstyrke, kontrast og mætning, sløre et element eller tilføje en skygge. De kan også animeres og ser godt ud med svæveeffekter.

SVG-filtre

CSS-filtre er faktisk forenklede versioner af SVG-filtre. CSS filter ejendom tager også en url () funktion, så vi kan sende en URL til et SVG-filter. SVG-filtre er ekstremt kraftfulde og giver mulighed for nogle utrolige billedeffekter - men de er også langt mere komplicerede end CSS-filterfunktioner! Sara Soueidan har en vidunderlig artikelserie om Codrops, hvis du er interesseret i at dykke ned i kodning af dine egne brugerdefinerede SVG-filtre. Tjek artiklen på https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Klipning og maskering: ud over rektangler

Vi er vant til at handle i kasser på nettet, men ikke alt skal være rektangulært! Klipning og maskering er to sider af samme mønt og er forskellige måder at skjule og vise forskellige dele af et element, så baggrunden viser igennem. Dette giver os magten til at introducere interessante og kreative former til vores designs.

Clip-sti

Det klip-sti () egenskab giver os mulighed for at 'klippe ud' et element ved at definere en sti. Det tager en række grundlæggende formfunktioner, indsats (), cirkel (), ellipse () eller polygon () , som giver os mulighed for at skabe mere komplekse udskæringsformer ved hjælp af par af xy-koordinater til at definere stien. Alternativt kan vi også passere i en SVG-sti ved hjælp af sti() funktion eller brug url () at give et SVG-sti-id.

Ikke inde i stien

Klipning af et element klipper alt uden for den sti, du definerer, men selve elementet er stadig et rektangel. Hvis du har indhold, der strækker sig ud af klipstiens grænser, bliver det også klippet - det vikles ikke inde i formen.

Maskebillede

maske-billede giver os mulighed for at vise og skjule dele af billedet ved hjælp af et billede (SVG eller gennemsigtig PNG) eller gradient som en maske. I modsætning til klip-sti , kan vi tilføje tekstur til vores billeder med maskering, da maskekilden ikke behøver at være en sti - det giver mulighed for grad af gennemsigtighed.

06. CSS-former

CSS Shapes-specifikationen giver os mulighed for at pakke tekst omkring flydende geometriske figurer og skabe nogle interessante, magasinlignende layouts. Dette muliggøres ved hjælp af form udenfor ejendom. Svarende til klip-sti , kan vi give denne egenskab en grundlæggende formfunktion cirkel (), ellipse (), indsats (), polygon () , eller en URL til en SVG-sti, og faktisk fungerer de to meget godt! form udenfor vil pakke vores tekst effektivt, men det påvirker ikke det flydende element. Hvis vi ønsker, at teksten skal se ud, som omvikler den rundt om billedet eller det svævede objekt, kan vi bruge den samme værdi til klip-sti . Brug formmargen for at tilføje mellemrum mellem formstien og indholdet, der omslutter den. Se på Ting & nonsens websted for at se, hvordan CSS Shapes bruges til at pakke tekst rundt om et centralt billede.

Firefox har en form-sti-editor inden for dev-værktøjspanelet, hvilket er især nyttigt til at arbejde med komplekse former. Brug dog med forsigtighed. Indpakning af forkant af et stykke tekst er fantastisk til kunstnerisk effekt, men det er ikke altid godt for brugeroplevelse. Komplekse taggede former kan gøre tekstblokke sværere at læse. For vigtigt indhold kan du undgå at rydde.

07. Rul snapping

Rul Snapping

Michelle Barkers CodePen demonstrerer rulle snapping i aktion(Billedkredit: CodePen - Michelle Barker)

Mange websteder drager fordel af JavaScript-biblioteker til at give en glat, indbygget app-lignende rulleoplevelse, hvor indholdet 'klikker' til punkter, når brugeren ruller. Nu, med Scroll Snap-specifikationen, kan vi gøre dette lige inden for vores CSS-fil - der er lidt behov for at importere i tunge JS-moduler for at blæse din side!

For at implementere rulle-snapping har vi brug for et element til at fungere som vores rullebeholder. Containerens direkte børn dikterer de punkter, der skal snappes til og kan justeres på forskellige måder inden for snapområdet.

Scroll snapping kan være endnu mere effektiv, når det kombineres med en ny ny CSS-egenskabsværdi - position: klæbrig . Denne positionsværdi 'klæber' et element til en bestemt position, mens du ruller inden i dets container - en anden adfærd, der tidligere kun var mulig med JavaScript. Tjek denne Scroll snap med position: sticky og intersectionObserver-eksempel .

08. CSS-gitter og layout

Front-end-udviklere har hacket layout med de værktøjer, der var tilgængelige til brug på det tidspunkt - senest flexbox, som mange moderne netsystemer bruger. Men flexbox blev aldrig designet til at opbygge strenge net - dens formål er fleksibilitet!

CSS Grid er den første specifikation, der er designet til todimensionalt layout, hvilket giver os fuld kontrol over at opbygge et layout og placere elementer på både rækken og søjleaksen. Opbygning af et responsivt layout med Grid kræver ikke calc () eller hacking med negative margener. Det hemmelige våben er fr-enheden - en ny enhed eksklusiv til gitter. Fr-enheden størrelser gitterspor (rækker og kolonner) som en andel af den tilgængelige plads. Det tager højde for eventuelle faste spor, tagrender og indhold og fordeler derefter den resterende plads i overensstemmelse hermed. Jen Simmons opfandt udtrykket “Intrinsic Web Design” for at beskrive den nye æra af weblayout, som Grid indleder.

Sådan bruges CSS Grid

Gitter kræver et element med skærmegenskabsværdien indstillet til gitter for at fungere som gitterbeholderen. Gitterbeholderens direkte børn er de genstande, der kan placeres på gitteret. Vi bruger egenskaberne gitter-skabelon-rækker og gitter-skabelon-kolonner for at definere sporene (rækker og kolonner) i gitteret, og kolonnegab og række-hul for at definere tagrenderne (mellemrummene mellem sporene).

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; }

Vi bruger gentage() funktion til at holde koden mere kortfattet, som et alternativ til langhåndet (f.eks. gitter-skabelon-kolonner: 1fr 1fr 1fr 1fr ). Dette eksempel bruger også stenografien hul til række-hul og kolonnegab .

Koden ovenfor giver os fire række spor, hver 100 pixel høje, og fire kolonnespor, der hver udfylder en lige stor del af den tilgængelige plads ved hjælp af fr-enheden.

Det er værd at bemærke, at dette ikke er den eneste måde at skabe gitterspor på. Implicitte spor kan også oprettes ved at placere gitterelementer. Det er nyttigt at læse lidt om dette, hvis du bruger Grid, da det lønner sig at få en dybere forståelse af, hvordan Grid opfører sig under forskellige forhold og kan gøre kodning af et layout meget lettere.

hvordan man tilføjer tekst i biograf 4d

Vi kan placere elementer på gitteret ved at henvise til gitterlinjenumre, som er numeriske linjer, der sidder mellem hvert spor. Her bruger vi stenografi gitterkolonne og gitter-række til gitter-kolonne-start , gitter-søjle-ende , gitter-række-start og gitter-række-ende . Disse fortæller browseren, hvilken linje vores vare skal starte og slutte på hver akse.

.item { grid-column: 1 / 4; grid-row: 2; }

Grid giver os mange forskellige måder at placere varer på: vi kunne i stedet navngive vores gitterlinjer:

.grid { display: grid; grid-template-columns: [image-start] 1fr 1fr 1fr [image-start] 1fr; grid-template-rows: 200px [image-start] 200px 200px [image-end] 200px; gap: 20px; }

Alternativt kan gitter-skabelon-område egenskab lader os 'tegne' et gitterlayout med tekst.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; grid-template-areas: ‘. . . .’ ‘image image image .’ ‘image image image .’ ‘. . . .’; }

Ved hjælp af en af ​​disse metoder kan vi blot henvise til det tilsvarende gitterareal, når vi placerer et gitterelement:

.image { grid-area: image; }

Denne artikel blev oprindeligt offentliggjort i kreativt magasin for webdesign Webdesigner . Køb nummer 290 nu.