Εισαγωγή στις προσαρμοσμένες ιδιότητες CSS

Feb 2, 2026

πως να

Ένα από τα απλά καλύτερα χαρακτηριστικά των επεξεργαστών CSS είναι μεταβλητές. Έχοντας τη δυνατότητα να δηλώσετε μία φορά και να επαναχρησιμοποιήσετε τη μεταβλητή σε ολόκληρο το έργο σας δεν πρέπει να είναι προαιρετική σε οποιοδήποτε σύστημα.

5 Hot New CSS χαρακτηριστικά και πώς να τα χρησιμοποιήσετε

Χρησιμοποιώντας ένα προεπεξεργαστή όπως Σάλτσα (Μάθετε περισσότερα στο άρθρο μας σε ποια είναι η SASS; ) σας δίνει τουλάχιστον ένα επιπλέον βήμα κατασκευής, το οποίο μπορεί να είναι ένας πόνος αν απλά θέλετε να χτίσετε ένα πράγμα γρήγορα (για να χτίσει πολύ γρήγορα, δοκιμάστε ένα οικοδόμος ιστότοπου ). Το CSS έχει έρθει πολύ μακριά από τις σκοτεινές μέρες των επιτραπέζιων hacks, οπότε ας εξετάσουμε μία από τις πιο χρήσιμες πτυχές: προσαρμοσμένες ιδιότητες.

Για περισσότερα εργαλεία που θα κάνουν τη ζωή σας ευκολότερη, δείτε αυτά web hosting υπηρεσία και αποθήκευση σύννεφων επιλογές. Ή να διαβάσετε και θα ξεκινήσουμε με ένα απλό παράδειγμα.

: ρίζα {
      - Color-Red: # fc4752;
    }
    
    .Site-πλοήγηση {
      Ιστορικό-χρώμα: VAR (- χρώμα-κόκκινο);
    }
    
    .Site-footer {
      Χρώμα: var (- χρώμα-κόκκινο);
    }

ο :ρίζα Ο ψευδολετής επιδιώκει το γονικό στοιχείο του υψηλού επιπέδου στο DOM, δίνοντας όλα τα στοιχεία πρόσβαση - Color-Red . Ναι, ο ορισμός των μεταβλητών CSS πρέπει να ξεκινήσει με - , και μπορείτε να έχετε πρόσβαση σε οπουδήποτε με var () . Καλά, οπουδήποτε που είναι cascaded κάτω από μας :ρίζα εκλέκτορας.

color-red image — Με το VAR () μπορείτε επίσης να ορίσετε μια καταπληκτική τιμή, η οποία θα χρησιμοποιηθεί εάν η δεδομένη μεταβλητή είναι απρόσκοπτη ή ανύπαρκτη

Με var () Μπορείτε επίσης να ορίσετε μια καταπληκτική τιμή, η οποία θα χρησιμοποιηθεί εάν η δεδομένη μεταβλητή είναι απρόσκοπτη ή ανύπαρκτη για την τάξη.

 .Site-Navigation {
      Ιστορικό-χρώμα: var (- χρώμα-κόκκινο, κόκκινο);
    }

Οι τιμές κληρονομούνται από το DOM, πράγμα που σημαίνει ότι μπορείτε να τα κάνετε πιο συγκεκριμένα.

: ρίζα {
      - Coloror: κόκκινο?
    }
       
    .Site-πλοήγηση {
      - Coloror: Πράσινο.
      
      Ιστορικό-Χρώμα: VAR (- Χρώμα);
    }
        
    .Site-footer {
      Χρώμα: VAR (- χρώμα);
    }

Κάθε var (- χρώμα) είναι κόκκινο, εκτός από κάθε var (- χρώμα) κάτω από Πλοήγηση ιστότοπου . Σε γενικές γραμμές, δεν είναι μια ιδανική πρακτική να αντικατασταθεί μια τιμή που έχει ήδη οριστεί, αλλά υπάρχουν περιπτώσεις στις οποίες η τιμή SCoped εξακολουθεί να είναι η πιο επαρκής λύση.

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

: ρίζα {
      - Color-Red: # fc4752;
      - Διάταξη - Διάταξη: σειρά;
    }
    
    @Media (μέγιστο πλάτος: 640px) {
      : ρίζα {
        - Τοπή-διάταξη: στήλη;
      }
    }
    
    .Site-πλοήγηση {
      Εμφάνιση: Flex;
      Κατεύθυνση Flex: VAR (- Flex-Layout, σειρά);
      
      Ιστορικό-χρώμα: var (- χρώμα-κόκκινο, κόκκινο);
    }
    
    .Site-footer {
      Χρώμα: var (- χρώμα-κόκκινο);
    }

Κάτω από 640px το ερώτημα πολυμέσων ενεργοποιεί, αλλάζοντας την κατεύθυνση Flex στη στήλη στην κλάση πλοήγησης στο χώρο, καθιστώντας το περιεχόμενο κάθετο (στήλη) αντί της προεπιλεγμένης οριζόντιας (γραμμής). Σε αυτό το παράδειγμα, λόγω της προεπιλεγμένης μεταβλητής που δίνεται στην πλοήγηση στο χώρο, δεν χρειάζεται καν την αρχική :ρίζα ορισμός του - Διάταξη - διάταξη. Αντ 'αυτού, θα πάει πραγματικά κατευθείαν στη σειρά.

amedia written in a green bubble — Κάτω από 640px το ερώτημα πολυμέσων ενεργοποιεί, αλλάζοντας την κατεύθυνση Flex στη στήλη και καθιστώντας το περιεχόμενο κάθετο αντί για οριζόντια

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

Είναι εντάξει. Θα κολλήσουμε σε αυτό που έχουμε τώρα. Μια ακόμα προηγμένη περίπτωση χρήσης για μια προσαρμοσμένη ιδιότητα αλλάζει θέματα. Μπορείτε να ορίσετε ένα θέμα βάσης, να δημιουργήσετε τον ιστότοπό σας γύρω από αυτό και απλά απενεργοποιήστε το, με το πρόγραμμα περιήγησης να κάνει τη βαριά ανύψωση. Και δεν είναι καν εκείνο το βαρύ.

Ουσιαστικά, σκεφτείτε ότι είναι σύμφωνα με τις γραμμές της νυχτερινής λειτουργίας του Twitter, αλλά χωρίς να αλλάζετε πραγματικά το CSS (σε βλέπω).

 & lt; main & gt;
      & lt; class nav = "site-navigation" & gt;
        & lt; Div & GT; I Love InterWebs & LT; / Div & GT;
      & lt; / nav & gt;
      & lt; div class = "site-footer" & gt;
        & lt; ετικέτα για = "color-picker" & gt; αλλαγή χρώματος & lt; / label & gt;
        & lt; τύπος εισόδου = "χρώμα" id = "color-picker" & gt;
      & lt; / div & gt;
      & lt; στυλ & gt;
        : ρίζα {
          - Coloror: # fc4752;
        }
        
        σώμα {περιθώριο: 0; Padding: 0; }
        
        Κύριο {
          Εμφάνιση: Flex;
          Κατευθυντήριες γραμμές: στήλη;
          δικαιολογήστε-περιεχόμενο: χώρος-μεταξύ?
          Ύψος: 100VH;
        }
        
        .Site-πλοήγηση,
        .Site-footer {
          Padding: 12px;
        }
        
        .Site-πλοήγηση {
          Ιστορικό-χρώμα: var (- χρώμα, κόκκινο);
        }
        
        .Site-footer {
          Χρώμα: VAR (- χρώμα);
        }
      & lt; / style & gt;
      & lt; script & gt;
        var colorpicker = document.queryselector ("# color-picker");
        colorpicker.addeventListener ("αλλαγή", λειτουργία () {
          document.documentelement.style.setproperty ("- χρώμα", αυτό.Value);
      })
      & lt; / script & gt;
& lt; / main & gt;

Η τιμή που συλλέγεται χρώμα εισόδου αντικαθιστά το έγγραφο --χρώμα Αξία, κάνοντας την αλλαγή χωρίς σκάφος. Μπορείτε να παίξετε με λειτουργίες μείγμα, χρώματα αλφαίωσης και PNGS - ατελείωτες δυνατότητες και διασκέδαση.

white text saying - - dark on a dark background — Μπορείτε να δημιουργήσετε τον ιστότοπό σας γύρω από ένα θέμα βάσης και απλά να το απενεργοποιήσετε, με το πρόγραμμα περιήγησης να κάνει τη βαριά ανύψωση

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

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

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

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

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 306 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Εγγραφείτε στο καθαρό εδώ .

Σχετικά Άρθρα:

5 συμβουλές για εξαιρετικά γρήγορη CSS
Κατανόηση της ιδιοκτησίας οθόνης CSS
CSS κόλπα για να φέρει επανάσταση στις διατάξεις του ιστού σας

Εισαγωγή στις προσαρμοσμένες ιδιότητες CSS

πως να - Τα πιο δημοφιλή άρθρα

Πώς να μετατρέψετε τη φωτογραφία σε εικονογράφηση

Δημιουργία συγκεκριμένων μορφών και διατάξεων CSS

Πάρτε το κεφάλι σας να αντιδράσει με αυτούς τους πέντε παράγοντες

4 Συμβουλές για τη βελτίωση της απόδοσης της σελίδας σας

Πώς να δημιουργήσετε χαρακτήρες γείτονα καρτούν

Επίπεδο επάνω χαρακτήρες παιχνιδιών με δημιουργική συνέλευση

5 Τρόποι για τη δημιουργία περισσότερων εμπειριών VR

11 Συμβουλές για τη δημιουργία ενός υδατικού τοπίου σε 3D

Κατηγορίες