Manuel Matuzovic: max() Trickery

Μέσω α ανάρτηση Manuel Matuzovic που είναι μέσω μιας επίδειξης από Τεμάνη Αφίφ.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Θα κάνατε τη χάρη στον εαυτό σας να διαβάσετε την ανάλυση του Manuel για όλα όσα συμβαίνουν εδώ, αλλά βασικά λειτουργεί με το ισοδύναμο αυτής της μεγαλύτερης σύνταξης:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…όπου:

• Μέγιστη() δέχεται μια λίστα αριθμητικών τιμών CSS διαχωρισμένη με κόμμα, όπου η εφαρμοσμένη τιμή είναι η μεγαλύτερη (ή ως Το MDN το θέτει, το «πιο θετικό») στο σετ.
• 0px είναι η πρώτη τιμή στο σύνολο, διασφαλίζοντας ότι η μικρότερη τιμή θα είναι πάντα μεγαλύτερη από μηδέν pixel.
• (100% - 64rem) είναι η δεύτερη «τιμή» στο σύνολο, αλλά εκφράζεται ως υπολογισμός (σημειώστε ότι calc() είναι περιττό) που αφαιρεί το το max-width του στοιχείου (64rem) από το πλήρες διαθέσιμο width (100%). Αυτό που απομένει είναι ο χώρος που δεν καταλαμβάνει το στοιχείο.
• ((100% - 64rem) / 2)) διαιρεί τον υπόλοιπο χώρο εξίσου αφού τον διαιρούμε μεταξύ των εσωτερικών ορίων του στοιχείου.
• max(0px, ((100% - 64rem) / 2)) συγκρίνει 0px και (100% - 64rem) / 2). Χρησιμοποιείται η μεγαλύτερη τιμή. Αυτό θα είναι το αποτέλεσμα της εξίσωσης στις περισσότερες περιπτώσεις, αλλά αν 64rem είναι πάντα μεγαλύτερη από την υπολογισμένη τιμή του πλήρους στοιχείου 100% πλάτος, θα κλειδώσει αυτή την τιμή στο μηδέν για να διασφαλίσει ότι δεν θα έχει ποτέ αρνητική τιμή.
• margin-inline είναι η ιδιότητα που ορίζει η τιμή που κερδίζει, η οποία εφαρμόζει περιθώριο στις ενσωματωμένες πλευρές του στοιχείου — αυτή είναι η λογική συντομογραφία που ισοδυναμεί με τον ορισμό της ίδιας τιμής στο margin-left και margin-right φυσικές ιδιότητες.

Είναι η ίδια ιδέα Ο Κρις μοιράστηκε λίγο καιρό πριν που χρησιμοποιεί το CSS max()λειτουργία για την επίλυση του «Εσωτερικό πρόβλημα» — ένα κοντέινερ που υποστηρίζει ένα πλήρες χρώμα φόντου, ενώ περιορίζει το περιεχόμενο μέσα σε αυτό padding.

max(), calc(), margin-inline… αυτό είναι πολύ νέο CSS! Και ο Manuel είναι σωστός smack ταμπλό στη μέση του γράφοντας για αυτές και άλλες σύγχρονες δυνατότητες CSS για πάνω από 100 ημέρες.

Απευθείας Σύνδεσμος →