CSS @property κανόνας

Καθορισμός και χρήση

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

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

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

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

Παράδειγμα: Καθορισμός προσαρμοσμένων ιδιοτήτων

@property --my-color {
  grammar: "<color>";
  κληρονομικότητα: true;
  initial-value: lightgray;
}

Η παραπάνω καθορισμός σημαίνει ότι το --my-color είναι μια ιδιότητα χρώματος που μπορεί να κληρονομήσει τιμή από το γονικό στοιχείο και έχει ως προεπιλεγμένη τιμή το lightgray.

Στο CSS χρησιμοποιούμε τις προσαρμοσμένες ιδιότητες:

body {}}
  backgound-color: var(--my-color);
}

Παράδειγμα

Παράδειγμα 1

Ορίζει δύο προσαρμοσμένες ιδιότητες για την παραλλαγή - και χρησιμοποιείται για την анимαζία της παραλλαγής:

@property --startColor {
  grammar: "<color>";
  initial-value: #EADEDB;
  κληρονομικότητα: false;
}
@property --endColor {
  grammar: "<color>";
  initial-value: #BC70A4;
  κληρονομικότητα: false;
}

Προσπαθήστε το شخصικά

Παράδειγμα 2

Ορίζει δύο προσαρμοσμένες ιδιότητες: μια για το μέγεθος του αντικειμένου και μια για το χρώμα του αντικειμένου:

@property --item-size {
  grammar: "<percentage>";
  κληρονομικότητα: true;
  initial-value: 50%;
}
@property --item-color {
  grammar: "<color>";
  κληρονομικότητα: false;
  initial-value: lightgray;
}

Προσπαθήστε το شخصικά

Γραμματική CSS

@property --propertyname {
  grammar: "<color>";
  initial-value: red;
  κληρονομικότητα: false;
}

Τιμή ιδιότητας

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

Τα αριθμήματα στην τаблицή δείχνουν την έκδοση του περιηγητή που υποστηρίζει πλήρως την @ διάταξη.

Σχετικές σελίδες

Εκμάθηση:CSS @property κανόνας