DIY: En webudgave af det flydende designsystems akrylmateriale

Brug af baggrundsfilter på Microsoft Edge og andre moderne browsere

”Det er den mørke kunst.”

Det var hvad en kollega af mig sagde en dag, da vi gik til frokost og talte om mennesker med CSS-ekspertise. Han fortsatte med at sammenligne det med de mere traditionelle former for datalogi (matematik) og visuel design (kunst). "Men folk med CSS-færdigheder, mand ..." sukkede han, "det er den mørke kunst."

Dette har især været tilfældet for dem af os, der får websteder til at arbejde på tværs af browsere og operativsystemer. Alle krydsbrowser-hacks, CSS-funktionsdetektion, placeringsticks osv.… En front-end-dev skal samle og administrere et bibliotek med staver for at få succes med deres arbejde.

Nå, her er en anden til din bog om forældre. Jeg vil vise dig, hvordan du bruger baggrundsfilter i dag. Grib din spidse hat.

Hvad er baggrundsfilter?

Let tema akrylMørkt tema akryl

Her er hvad caniuse.com siger:

"Metode til anvendelse af filtereffekter (som slør, gråtoner eller nuance) på indhold / elementer under målelementet."

Du har set denne effekt i det flydende designsystems akrylmateriale såvel som i iOS. Hvis du ønskede at bringe denne effekt ind i dine designs på nettet, ja, du var nødt til at hex dine brugere til kun at bruge Safari, og selvfølgelig gjorde du ikke det, fordi du er en god guide, vi ved. Dette skyldes, at Safari var den eneste browser, der understøttede baggrundsfilter ud af boksen. Indtil nu alligevel. Med Windows 2018-frigivelsen af ​​Windows understøtter Edge 17 baggrundsfilter ved hjælp af -webkit-præfikset.

Sådan deles

baggrundsfilter er stadig meget nyt, og hvis det havde udbredt browser-vedtagelse, ville denne artikel være en meget kort, der består af følgende:

Læg dette på dit CSS-element, hvis du ønsker at sløre det, der ligger bag det
baggrundsfilter: sløring (20px);

Selvfølgelig, hvis dit element har en solid farvebaggrund, ser du ikke nogen forskel, så sørg for at du bruger en farveformel (RGBA, HSLA osv.), Hvor du kan kontrollere opaciteten sådan:

baggrundsfilter: sløring (20px);
baggrundsfarve: rgba (255.255.255, .3);

Men dette fungerer kun i Safari. For at få den godhed i Edge skal du bruge præfikset -webkit:

-webkit-baggrundsfilter: sløring (20px);
baggrundsfilter: sløring (20px);
baggrundsfarve: rgba (255.255.255, .3);

En hurtig tur til caniuse.com bekræfter selvfølgelig noget, vi måske allerede ved: dette fungerer kun i Edge og Safari (og iOS). Hvad med de andre? Firefox og Chrome understøtter ikke det endnu, så vi bliver nødt til at bruge et dropback til det.

I mellemtiden på Hogwarts ...

Hermione Granger (løfter håndsommeligt): Faktisk, Mr. Day, Chrome har support til det, hvis du aktiverer eksperimentelle webplatformfunktioner på chrome: // -flagg, men vi kan ikke forvente, at brugere har dette, så nu vil vi er nødt til at behandle det som de andre browsere, der ikke understøtter det.

Mig: Tak for det, frøken Granger. Du har helt ret. Du lægger måske din hånd ned nu.

Indtast @supports-forespørgslen.

Denne handy lille forespørgsel, meget lig en medieforespørgsel, giver dig mulighed for at definere regler, hvis browseren understøtter specifikke CSS-egenskaber. Jeg vil ikke gå nærmere ind på det her, hvis du vil lære mere, har Mozillas Jen Simmons din ryg. Så lad os sige, at vi beslutter, at vores element skal være 90% uigennemsigtigt hvidt, når browseren ikke understøtter baggrundsfilter.

baggrundsfarve: rgba (255,255,255, 0,9);
@supports (baggrundsfilter: sløring (20px)) eller (-webkit-baggrundsfilter: sløring (20px)) {
    -webkit-baggrundsfilter: sløring (20px);
    baggrundsfilter: sløring (20px);
    baggrundsfarve: rgba (255.255.255, .3);
}

Fungerer som en charme. Nu i Edge og Safari vil dine brugere være vidne til magien med baggrundsfilter, mens de på Firefox og Chrome ikke ved, hvad de mangler. Magi.

Et skridt videre: Flydende akrylmateriale

For dem af jer, der kommer væk fra Microsoft Build 2018 inspireret til at indånde noget flydende design i dine oplevelser, her er hvad det flydende team gør for at skabe akrylmateriale på deres kortvarige overflader på nettet:

baggrundsfilter: sløring (30px) mættet (125%);

Bemærkelsesværdigt inkluderer dette ikke støj eller det ekskluderingslag, som du finder i UWP-dokumentationen, men det ringer op mætning for at få lidt mere farve.

Jeg håber, at dette er nyttigt for dig. Hvis du har spørgsmål eller prøv det, skal du skrive en kommentar nedenfor!

Find ud af mere

Lær mere om Fluent Design, og deltag i det forskellige samfund af skabere i Fluent Designs LinkedIn-gruppe

Følg Microsoft Design på Dribbble, Twitter og Medium

Og glem ikke at tjekke #FluentFridays på Twitter!

Følg os på Dribbble, Twitter og Facebook eller tilmeld dig vores Windows Insider-program for at holde dig viden om Microsoft Design. Og hvis du er interesseret i at blive medlem af vores team, skal du gå til aka.ms/DesignCareers.