CSS @property Κανονισμοί

CSS @property Κανονισμοί

@property Οι κανόνες χρησιμοποιούνται για να ορίσουν προσαρμοσμένες CSS ιδιότητες απευθείας στο στυλ χωρίς να χρειάζεται να εκτελεστεί οποιοσδήποτε JavaScript.

@property Οι κανόνες έχουν έλεγχο τύπου δεδομένων και περιορισμούς, ορίζουν προεπιλεγμένες τιμές και καθορίζουν αν η ιδιότητα μπορεί να κληρονομήσει τιμή.

Ορισμός παραδείγματος προσαρμοσμένης ιδιότητας:

@property --myColor {
  syntax: "<color>";
  παράδοση: αληθές;
  initial-value: λευκό;
}

Η παραπάνω οριστική περιγραφή σημαίνει --myColor Είναι μια ιδιότητα χρώματος που μπορεί να κληρονομήσει την τιμή του γονικού στοιχείου, με προεπιλεγμένο χρώμα lightgray.

Για να χρησιμοποιήσουμε προσαρμοσμένες ιδιότητες στο CSS, χρησιμοποιούμε var() Συνάρτηση:

body {
  background-color: var(--myColor);
}

Χρήση @property Τα πλεονεκτήματα:

• Τύπος έλεγχος：Πρέπει να καθοριστεί ο τύπος δεδομένων της προσαρμοσμένης ιδιότητας, όπως <number>、<color>、<length>。Αυτό αποτρέπει τα σφάλματα και διασφαλίζει τη σωστή χρήση της προσαρμοσμένης ιδιότητας
• Ρύθμιση προεπιλεγμένης τιμής：Μπορεί να οριστεί προεπιλεγμένη τιμή για την προσαρμοσμένη ιδιότητα. Αυτό διασφαλίζει ότι αν αργότερα απονεμηθεί μια άκυρη τιμή, ο περιηγητής θα χρησιμοποιήσει την ορισμένη εναλλακτική τιμή.
• Ρύθμιση συμπεριφοράς κληρονομικότητας：Πρέπει να καθοριστεί αν η προσαρμοσμένη ιδιότητα μπορεί να κληρονομήσει τις τιμές από το γονικό στοιχείο.

Υποστήριξη του περιηγητή

Τα αριθμήματα στη τάβλη θα δείξουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως το κανόνα.

Απλός παράδειγμα @property

Ο παρακάτω παράδειγμα ορίζει δύο προσαρμοσμένες ιδιότητες:--my-bg-color και --my-txt-color. Στη συνέχεια, το στοιχείο div στο background-color και χρώμα Χρησιμοποιώντας την προσαρμοσμένη ιδιότητα:

Παράδειγμα

@property --my-bg-color {
  syntax: "<color>";
  παράδοση: αληθές;
  initial-value: λευκό;
}
@property --my-txt-color {
  syntax: "<color>";
  παράδοση: αληθές;
  initial-value: σκούρο μπλε;
}
div {
  πλάτος: 300px;
  ύψος: 150px;
  πλατινότητα: 15px;
  background-color: var(--my-bg-color);
  χρώμα: var(--my-txt-color);
}

Προσπάθησε να το δοκιμάσεις

έναν άλλο παράδειγμα @property

Στο παρακάτω παράδειγμα, χρησιμοποιούμε την προεπιλεγμένη προσαρμοσμένη ιδιότητα στο στοιχείο <div>. Στη συνέχεια, χρησιμοποιούμε .fresh και .nature Κατακρίνει την προσαρμοσμένη ιδιότητα της κατηγορίας (μέσω άλλων χρωμάτων), με εξαιρετικό αποτέλεσμα:

Παράδειγμα

@property --my-bg-color {
  syntax: "<color>";
  παράδοση: αληθές;
  initial-value: λευκό;
}
div {
  πλάτος: 300px;
  ύψος: 150px;
  πλατινότητα: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Προσπάθησε να το δοκιμάσεις

Αποφεύγοντας σφάλματα με τύπος ελέγχου και εναλλακτικές τιμές

Στο παρακάτω παράδειγμα, θα .nature Η τιμή της προσαρμοσμένης ιδιότητας στη κατηγορία είναι αριθμός. Αυτό είναι άκυρο, ο περιηγητής θα χρησιμοποιήσει στο initial-value Εναλλακτικές χρώσεις που ορίζονται στην ιδιότητα (λευκό):

Παράδειγμα

@property --my-bg-color {
  syntax: "<color>";
  παράδοση: αληθές;
  initial-value: λευκό;
}
div {
  πλάτος: 300px;
  ύψος: 150px;
  πλατινότητα: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Προσπάθησε να το δοκιμάσεις

χρησιμοποιήσουμε την τιμή παράδοσης

Στο παρακάτω παράδειγμα, θα παράδοση Η τιμή ορίζεται σε ψευδέςΑυτό σημαίνει ότι οι προσαρμοσμένες ιδιότητες δεν θα κληρονομήσουν τις τιμές από το γονικό στοιχείο. Δείτε τα αποτελέσματα:

Παράδειγμα

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: λευκό;
}

Προσπάθησε να το δοκιμάσεις

Ο επόμενος παράδειγμα θα παράδοση Η τιμή ορίζεται σε αληθέςΑυτό σημαίνει ότι οι προσαρμοσμένες ιδιότητες θα κληρονομήσουν τις τιμές από το γονικό στοιχείο. Δείτε τα αποτελέσματα:

Παράδειγμα

@property --my-bg-color {
  syntax: "<color>";
  παράδοση: αληθές;
  initial-value: λευκό;
}

Προσπάθησε να το δοκιμάσεις

Χρήση @property για τη δημιουργία ομαλής κινηματογράφησης

Χρήση @property Η δυνατότητα που επιτρέπει τη δημιουργία νέων κανόνων για περιεχόμενο που δεν μπορούσε να κινηματογραφηθεί προηγουμένως είναι η διαδρομή. Δείτε το παρακάτω παράδειγμα:

Παράδειγμα

Καθορίστε δύο προσαρμοσμένες παραμέτρους για τη διαδρομή:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Προσπάθησε να το δοκιμάσεις

CSS @property Κανονισμοί