DIY: Μια έκδοση στο Web του Ακρυλικού Υλικού του Σχεδιασμένου με Υψηλό Σχεδιασμό

Χρησιμοποιώντας το φίλτρο backdrop στο Microsoft Edge και σε άλλα σύγχρονα προγράμματα περιήγησης

"Είναι οι σκοτεινές τέχνες."

Αυτό λέει μια συνάδελφος μου μια μέρα, καθώς περπατούσαμε στο γεύμα μιλούσαμε για ανθρώπους με εμπειρία CSS. Συνέχισε να το συγκρίνει με τις πιο παραδοσιακές μορφές της επιστήμης των υπολογιστών (μαθηματικά) και του οπτικού σχεδιασμού (τέχνη). "Αλλά οι άνθρωποι με δεξιότητες CSS, ο άνθρωπος ..." αναστέναξε, "είναι οι σκοτεινές τέχνες".

Αυτό ισχύει ιδιαίτερα για εκείνους από εμάς που κάνουν ιστότοπους να εργάζονται σε προγράμματα περιήγησης και λειτουργικά συστήματα. Όλες οι διασταυρούμενες αντιδράσεις των περιηγητών, η ανίχνευση χαρακτηριστικών CSS, τα τεχνάσματα εντοπισμού θέσης κ.λπ ... ένα dev dev πρέπει να συλλέγει και να διαχειρίζεται μια βιβλιοθήκη ξόρκων για να είναι επιτυχής στο έργο τους.

Λοιπόν, εδώ είναι ένα άλλο για το βιβλίο σου. Θα σας δείξω πώς να χρησιμοποιήσετε το φίλτρο backdrop-σήμερα. Πιάσε το καπέλο σου.

Τι είναι το φίλτρο backdrop;

Φως θέμα ακρυλικόDark θέμα ακρυλικό

Εδώ είναι το τι λέει το caniuse.com:

"Μέθοδος εφαρμογής αποτελεσμάτων φίλτρου (όπως θαμπάδα, κλίμακα του γκρι ή απόχρωση) σε περιεχόμενο / στοιχεία κάτω από το στοιχείο στόχου."

Έχετε δει αυτό το αποτέλεσμα στο Ακρυλικό Υλικό του Fluent Design System καθώς και στο iOS. Αν θέλατε να φέρετε αυτό το αποτέλεσμα στα σχέδιά σας στο διαδίκτυο, θα έπρεπε να εξηγήσετε στους χρήστες σας μόνο τη χρήση του Safari και φυσικά δεν το κάνατε επειδή είστε καλός μάγος, ξέρουμε. Αυτό οφείλεται στο γεγονός ότι το Safari ήταν το μόνο πρόγραμμα περιήγησης που υποστηρίζει το backdrop-filter από το κουτί. Μέχρι τώρα, ούτως ή άλλως. Με την έκδοση του Απριλίου του 2018 των Windows, το Edge 17 υποστηρίζει backdrop-filter χρησιμοποιώντας το πρόθεμα -webkit.

Το πώς να συμμετέχει

backdrop-φίλτρο είναι ακόμα πολύ καινούργιο και αν είχε ευρεία έκδοση του προγράμματος περιήγησης, αυτό το άρθρο θα ήταν πολύ σύντομο που θα αποτελείται από τα εξής:

Τοποθετήστε αυτό στο στοιχείο CSS αν θέλετε να θολάτε ό, τι είναι πίσω από αυτό
φίλτρο φόντου: θαμπάδα (20χλμ.);

Φυσικά, εάν το στοιχείο σας έχει ένα συμπαγές έγχρωμο υπόβαθρο, δεν θα δείτε καμία διαφορά, οπότε βεβαιωθείτε ότι χρησιμοποιείτε έναν τύπο χρώματος (RGBA, HSLA, κλπ.) Όπου μπορείτε να ελέγξετε την αδιαφάνεια όπως έτσι:

φίλτρο φόντου: θαμπάδα (20χλμ.);
Χρώμα φόντου: rgba (255,255,255, .3);

Αλλά αυτό λειτουργεί μόνο στο Safari. Για να αποκτήσετε αυτό το καλό στο Edge, χρησιμοποιήστε το πρόθεμα -webkit:

-webkit-backdrop-φίλτρο: θαμπά (20px);
φίλτρο φόντου: θαμπάδα (20χλμ.);
Χρώμα φόντου: rgba (255,255,255, .3);

Φυσικά, ένα γρήγορο ταξίδι στο caniuse.com επιβεβαιώνει κάτι που ίσως ήδη γνωρίζουμε: αυτό λειτουργεί μόνο σε Edge και Safari (και iOS). Τι γίνεται με τους άλλους; Ο Firefox και το Chrome δεν το υποστηρίζουν ακόμα, οπότε θα πρέπει να χρησιμοποιήσουμε μια εναλλακτική λύση για αυτό.

Εν τω μεταξύ, στο Hogwarts ...

Η Hermione Granger (ανυψώνει το χέρι): Στην πραγματικότητα, κύριε Day, το Chrome έχει υποστήριξη για αυτό αν ενεργοποιήσετε τις λειτουργίες πλατφόρμας Πειραματικής Ιστού στη διεύθυνση chrome: // flags, αλλά δεν μπορούμε να περιμένουμε από τους χρήστες να το έχουν αυτό. πρέπει να το αντιμετωπίσουμε όπως και τα άλλα προγράμματα περιήγησης που δεν το υποστηρίζουν.

Εγώ: Ευχαριστώ γι 'αυτό, κυρία Granger. Είστε απολύτως σωστοί. Μπορείτε να βάλετε τώρα το χέρι σας.

Πληκτρολογήστε το ερώτημα @supports.

Αυτό το εύχρηστο μικρό ερώτημα, πολύ παρόμοιο με ένα ερώτημα μέσων, σας δίνει τη δυνατότητα να ορίσετε κανόνες αν το πρόγραμμα περιήγησης υποστηρίζει συγκεκριμένες ιδιότητες του CSS. Δεν θα πάω σε βάθος σε αυτό εδώ, αν θέλετε να μάθετε περισσότερα, ο Τζζ Simmons της Mozilla έχει την πλάτη σας. Επομένως, ας πούμε ότι αποφασίζουμε ότι το στοιχείο μας θα πρέπει να είναι 90% αδιαφανές λευκό όταν το πρόγραμμα περιήγησης δεν υποστηρίζει φίλτρο backdrop.

χρώμα φόντου: rgba (255.255.255, .9);
@supports (φίλτρο backdrop: θαμπά (20px)) ή (-webkit-backdrop-filter: blur (20px)) {
    -webkit-backdrop-φίλτρο: θαμπά (20px);
    φίλτρο φόντου: θαμπάδα (20χλμ.);
    Χρώμα φόντου: rgba (255,255,255, .3);
}}

Δουλεύει άψογα. Τώρα στο Edge και το Safari, οι χρήστες σας θα παρακολουθήσουν τη μαγεία του φίλτρου backdrop, ενώ οι χρήστες του Firefox και του Chrome δεν θα ξέρουν τι λείπουν. Μαγεία.

Ένα βήμα παραπέρα: Υγρό ακρυλικό υλικό

Για όσους από εσάς έρχονται μακριά από το Microsoft Build 2018 εμπνευσμένο από την αναπνοή κάποιου Fluent design στις εμπειρίες σας, εδώ είναι αυτό που κάνει η ομάδα Fluent για να δημιουργήσει ακρυλικό υλικό στις παροδικές επιφάνειες τους στο διαδίκτυο:

φίλτρο φόντου: θολά (30px) κορεσμός (125%);

Είναι αξιοσημείωτο ότι αυτό δεν περιλαμβάνει το θόρυβο ή το στρώμα εξαίρεσης που βρίσκετε στην τεκμηρίωση UWP, αλλά κάνει dial up ο κορεσμός για να πάρει λίγο περισσότερο χρώμα.

Ελπίζω ότι αυτό είναι χρήσιμο για εσάς. Εάν έχετε οποιεσδήποτε ερωτήσεις ή δοκιμάσετε το, αφήστε ένα σχόλιο παρακάτω!

Βρες περισσότερα

Μάθετε περισσότερα για το Fluent Design και συμμετέχετε στην ποικιλία της δημιουργικής κοινότητας στην ομάδα LinkedIn του Fluent Design

Ακολουθήστε το Microsoft Design σε Dribbble, Twitter και Medium

Και μην ξεχάσετε να δείτε το #FluentFridays στο Twitter!

Για να παραμείνετε ενημερωμένοι με τη Microsoft Design, ακολουθήστε μας στο Dribbble, στο Twitter και στο Facebook ή να συμμετάσχετε στο πρόγραμμα Windows Insider. Και αν σας ενδιαφέρει να συμμετάσχετε στην ομάδα μας, κατευθυνθείτε στο aka.ms/DesignCareers.