Πώς να δημιουργήσετε θέσεις ιστότοπου με μεταβλητές CSS

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

Πολλοί προγραμματιστές χρησιμοποιούν ήδη μεταβλητές με προεπεξεργαστές όπως η SASS ή Πιο λιγο ως μέσο μείωσης της επανάληψης κώδικα. Οι εγγενείς μεταβλητές CSS λειτουργούν σε μεγάλο βαθμό με τον ίδιο τρόπο, αλλά δεν απαιτούν κανένα πρόσθετο βήμα κατασκευής, καταρράκτη σαν κανονική ιδιοκτησία CSS και το πιο σημαντικό είναι διαθέσιμο κατά το χρόνο εκτέλεσης. (Για να διατηρήσετε ομαλά τον ιστότοπό σας, βεβαιωθείτε ότι έχετε επιλέξει το σωστό web hosting υπηρεσία.)

• Τι είναι η SASS;

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

Σε αυτό το σεμινάριο, θα εξερευνήσουμε πώς μπορούμε να χρησιμοποιήσουμε τις μεταβλητές CSS για να εφαρμόσουμε την ιστοσελίδα τους σε μια εφαρμογή Mock Web που ονομάζεται NoteApp. Αυτό θα συνεπάγεται τη σύνταξη Css και Javascript Για να επιτρέψετε στον χρήστη να αλλάξει το σχήμα χρώματος και να ενεργοποιήσει την ποσότητα των στηλών που εμφανίζονται. Στη συνέχεια, θα αξιοποιούμε το API αποθήκευσης ιστού για να βεβαιωθείτε ότι οι αλλαγές αποθηκεύονται για μελλοντικές συνεδρίες.

Πάρτε τα αρχεία φροντιστηρίων

Πρώτα πράγματα πρώτα, κατεβάστε τα αρχεία του έργου από Το FileSilo του Web Designerilo (Τεύχος 264). Σημείωση: Οι χρήστες πρώτων χρόνων θα πρέπει να εγγραφούν για να χρησιμοποιήσουν το FileSilo.

01. Ρυθμίστε το χώρο εργασίας

Στο / Ιστοσελίδα-πρότυπο Κατάλογος Θα βρείτε την ιστοσελίδα Static NoteApp στην οποία θα εφαρμόσουμε το θέμα του ιστότοπου χρησιμοποιώντας μεταβλητές CSS και το API αποθήκευσης ιστού. Ανοίξτε τον κατάλογο στον προτιμώμενο επεξεργαστή κειμένου.

02. Ρυθμίστε τις μεταβλητές μας CSS

Σε main.css , θα βρείτε πολλά css του έργου. Στην κορυφή, δημιουργήστε ένα μπλοκ που στοχεύει το ρίζα ψευδο-κλάση. Μέσα σε αυτό ορίζουν μεταβλητές όπως στο απόσπασμα παρακάτω. Αυτό το root block περιέχει παγκόσμιες μεταβλητές που θα καταρρεύσουν κάτω από το φύλλο στυλ μας όπως κάθε κανονική ιδιοκτησία CSS.

: ρίζα {
  --Προϊόντα: # 2F353E;
  --Secondary: # 2B9BCA;
  - # f3583f;
  --σέτα: # e0e1e2;
  - Κεφάλαιο: #FFFFFF;
} 

03. Αντικαταστήστε τα χρώματα με μεταβλητές

Πηγαίνετε μέσα από το φύλλο στυλ, είτε χειροκίνητα είτε χρησιμοποιώντας εύρεση / αντικατάσταση και ανταλλάξτε οποιεσδήποτε στατικές εξαγωνικές κώδικες με την αντίστοιχη μεταβλητή τους από το ριζικό μπλοκ. Για να το κάνετε αυτό, χρησιμοποιήστε το εύκαμπτος και να περάσετε το όνομα της μεταβλητής. Αυτό λέει στο πρόγραμμα περιήγησης να αναφέρει την αξία της μεταβλητής. Για παράδειγμα:

 .c-header {
  Ιστορικό-Χρώμα: VAR (- πρωτεύουσα);
  Χρώμα: VAR (- Τετέκα);
} 

04. Εντοπίστε inline SVG για εικονίδια

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

05. Προσθήκη μεταβλητών CSS στο SVG

Ένα πλεονέκτημα της χρήσης inline SVG αντί για ένα αρχείο .svg είναι ότι το CSS μπορεί να έχει πρόσβαση στην εσωτερική της δομή. Αυτό σημαίνει ότι μπορούν οι μεταβλητές μας CSS (υποστήριξη του προγράμματος περιήγησης εδώ ). Σε index.html , Αντικαταστήστε το μπλοκ στυλ του SVG με το απόσπασμα παρακάτω. Τώρα κάθε ένα από τα χρώματα του SVG συνδέεται με τις τιμές των μεταβλητών μας CSS.

 & lt; στυλ & gt;
  .Primary {
  Συμπληρώστε: VAR (-Προστασία, # 2f353E);
  }
  .Secondary {
  Συμπληρώστε: VAR (-Secondary, # 2B9BCA);
  }
& lt; / style & gt; 

06. Δημιουργία μεταβλητής στήλης

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

: ρίζα {
  --Προϊόντα: # 2F353E;
  --Secondary: # 2B9BCA;
  - # f3583f;
  --σέτα: # e0e1e2;
  - Κεφάλαιο: #FFFFFF;
  --Columns: 3;
} 

07. Εφαρμογή εναλλαγής στήλης

Χρησιμοποιώντας τις νέες μεταβλητές στήλες μας και το () Λειτουργία, θα υπολογίσουμε πλέον πόσο ευρεία θα πρέπει να είναι κάθε στοιχείο σημείωσης ώστε να δημιουργηθεί ο σωστός αριθμός των στηλών. Για παράδειγμα, εάν οι στήλες έχουν οριστεί σε 4, κάθε σημείωση πρέπει να έχει πλάτος 25%.

 .c-note {
  Πλάτος: Calc (100% / VAR (- στήλες));
} 

08. Προσθέστε τις κατηγορίες JS και τα χαρακτηριστικά δεδομένων

Κατά την εφαρμογή της συμπεριφοράς JS σε ένα στοιχείο DOM, γάντζει σε αυτό μέσω μιας κατηγορίας με ένα πρόθεμα JS. Αυτό αποσυνδέει τις λειτουργικές πτυχές ενός στοιχείου από τους CSS. Ας προσθέσουμε ένα Μεταβλητή JS-UPDATE τάξη σε όλες τις εισόδους χρώματος και ραδιοφώνου καθώς και ένα χαρακτηριστικό δεδομένων αναφέροντας την αντίστοιχη μεταβλητή για την ενημέρωση.

 & lt; Τύπος εισόδου = "χρώμα" τιμή = "# 2f353E"
class = "js-ενημέρωση-μεταβλητή u-κρυμμένα-οπτικά"
Μεταβλητή δεδομένων = "Πρωτογενή" & GT; 

09. Προσθέστε το JS για να ενημερώσετε τις μεταβλητές CSS

Ανοιξε main.js και προσθέστε το απόσπασμα παρακάτω. Αυτό βρόχους μέσω όλων μας Μεταβλητή JS-UPDATE Εισάγει και προσθέτει λογική, οπότε κατά την αλλαγή, η μεταβλητή που αναφέρεται στο χαρακτηριστικό της μεταβλητής δεδομένων ενημερώνεται με την τιμή εισόδου. Τα χρωματικά δείγματα και η εναλλαγή στηλών θα πρέπει τώρα να λειτουργούν!

 var vartrig = έγγραφο
.queryselectorall (". JS-ενημέρωση-μεταβλητή").
για (var i = 0, i & lt; vartrig.length, i ++) {
vartrig [i]
.adeventListener ("αλλαγή", λειτουργία () {
document.documentEment.style
.Setproperty ("-" + αυτό.Dataset.Varable,
αυτό.Value).
});
} 

10. Συνδέστε μια κλάση JS στο κουμπί Αποθήκευση

Έχει νόημα να αποθηκεύσετε μόνο το χρωματικό σχήμα του χρήστη όταν κάνουν κλικ στο κουμπί Αποθήκευση, όπως αυτό που τους επιτρέπει να πειραματιστούν με θέματα όσο θα ήθελαν χωρίς αυτόματα την επένδυση του τρέχοντος. Για να ξεκινήσετε, προσθέστε .js-save-colors στο Αποθηκεύσετε για να λειτουργήσει ως γάντζο JS.

 & lt; Κλήση κουμπιού = "C-button js-save-colors"
δεδομένα-modal = "js-modal" δεδομένα-modal
-Προστασία = "JS-COLORS-MODAL-CONTENT" & GT;
Αποθήκευση & lt; / κουμπί & gt; 

11. Δημιουργία συστοιχίας χρώματος

Πίσω στο main.js , δηλώστε μια νέα μεταβλητή που ονομάζεται Χρώματα Και το αντιστοιχίστε σε αυτό μια νέα συστοιχία που περιέχει όλες τις μεταβλητές χρώματος που θέλουμε να αποθηκευτούν μόλις γίνει κλικ στο κουμπί Αποθήκευση.

 var χρώματα = [
  "πρωταρχικός",
  "δευτερεύων",
  "τριτογενής",
  "τετραδικός",
  "ανά πέντε"
] · 

12. Κατασκευάστε τον ακροατή εκδήλωσης

Κάτω από τη διάταξη χρώματος, δημιουργήστε έναν ακροατή εκδήλωσης κλικ για το js-save-colors Κατηγορία που προστέθηκαν στο παρελθόν στο κουμπί SAVE. Μέσα σε αυτό δημιουργήστε μια νέα μεταβλητή που ονομάζεται htmlstyles και το ορίστε τις υπολογισμένες ιδιότητες του στοιχείου HTML ρίζας. Θα το χρησιμοποιήσουμε για να αποκτήσουμε πρόσβαση στις μεταβλητές μας CSS.

 Document.QuerySelector ("JS-Save-Colors")
.adeventListener ("κλικ", λειτουργία () {
var htmlstyles = παράθυρο
.GetComputEdStyle (έγγραφο
.κύλετη ("html")),
}), 

13. Καταγράψτε τις μεταβλητές χρώματος CSS

Στη συνέχεια, στον ακροατή εκδήλωσης, δημιουργήστε μια νέα μεταβλητή που ονομάζεται κολοβωτή και το ορίστε ένα κενό αντικείμενο. Στη συνέχεια, δημιουργήστε ένα ΓΙΑ βρόχο χρησιμοποιώντας το Χρώματα ARRAY από το βήμα 11. Μέσα από αυτό, θα προσθέσουμε ένα πλήρες αρχείο πλήκτρων / τιμών των μεταβλητών που αναφέρονται στο Χρώματα πίνακα στο κολοβωτή αντικείμενο.

 ARRAY στο αντικείμενο "ColoursToSave".
colourstosave = νέο αντικείμενο.
για (var i = 0, i & lt; colors.length, i ++) {
colourstosave [χρώματα [i]] = htmlstyles
.GetPropertyValue ("-" + χρώματα [i]);
} 

14. Στείλτε το ColourStosave στο τοπικό

Τώρα έχουμε όλες τις διαθέσιμες μεταβλητές χρώματος κολοβωτή , Θα το στείλουμε σε ένα στοιχείο του API αποθήκευσης ιστού που ονομάζεται τοπική τάση. Αυτό είναι ουσιαστικά ένα αντικείμενο που παραμένει σε συναντήσεις. Μπορούμε να αποθηκεύσουμε άλλα αντικείμενα μέσα σε αυτό χρησιμοποιώντας το Setitem () μέθοδος. Ας το στείλουμε κολοβωτή αντικείμενο.

 localstorage.setitem ("χρώματα",
Json.stringify (Colourstosave)). 

15. Προσθέστε μια κλάση JS στις στήλες

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

 & LT; Τύπος εισόδου = "Ραδιόφωνο" Όνομα = "Στήλες"
= "JS-UPDATE-VARIAXY-UPDATE-Στήλες
u-κρυμμένο-οπτικά "τιμή =" 1 "
Μεταβλητή δεδομένων = "Στήλες" & GT; 

16. Στείλτε στήλες στο τοπικό τοποθέτηση

Για κάθε js-ενημέρωση-στήλες , Θα προσπαθήσουμε να αναθέσουμε στους ακροατές συμβάντος να παρακολουθήσουν αλλαγές. Κατά την ανίχνευση, θα στείλουμε στη συνέχεια την τρέχουσα τιμή του στήλες μεταβλητή σε τοπικός , και πάλι χρησιμοποιώντας το Setitem () μέθοδος. Σε αντίθεση με τα χρώματα, δεν χρειάζεται να κλονίσουμε αυτή την τιμή, καθώς δεν είναι ένα αντικείμενο.

 var colinputs = έγγραφο
.queryselectorall (". js-update-columns").
για (var i = 0, i & lt; colinputs; i ++) {
colinputs [i] .adeventListener ("αλλαγή",
Λειτουργία () {var htmlstyles = παράθυρο
.GetComputEdStyle (έγγραφο
.κύλετη ("html"));
localstorage.Setitem ("Στήλες",
htmlstyles.getpropropertyvalue ("- στήλες"));
});} 

17. Χειριστείτε νέες συνεδρίες

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

 Document.AddeventListener
("DomContent φορτωμένο", λειτουργία () {
αν (localstorage.getitem ("χρώματα")) {
}
αν (localstorage.getitem ("στήλες")) {
}
}) · 

18. Τροποποίηση μεταβλητών χρώματος

Στα χρώματα αν Δήλωση, δημιουργήστε μια νέα μεταβλητή που ονομάζεται σωληνώνει και να το αντιστοιχίσετε την αξία ενός αντικειμένου αναλυμένου χρώματος από τοπικός . Χρησιμοποιώντας ένα ΓΙΑ ΜΕΣΑ βρόχος με σωληνώνει , Πιάστε κάθε ζεύγος χρώματος / ζεύγος χρώματος και προσαρτήστε το στο στοιχείο HTML ρίζας ως μεταβλητή CSS.

 var savedcolours = json.parse
(localstorage.getitem ("χρώματα"));
για (χρώμα σε savedcolours) {
document.documentelement.style.setproperty
("-" + χρώμα, Savedcolours [Color]). } 

19. Συγκεντρώστε δεδομένα μεταβλητών στηλών

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

 Var Columns = Τοπικό
.Getitem ("Στήλες"),
columntriggers = έγγραφο.
queryselectorall ("js-ενημέρωση-στήλες"). 

20. Τροποποίηση της μεταβλητής και του κράτους

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

 Document.documentEnement.Style
.SetProperty ("- στήλες", στήλες).
COUNTRIGGERS [Στήλες - 1] .Checked = TRUE; 

21. Δοκιμάστε το τελικό προϊόν

Αυτό είναι! Τα πάντα στη σελίδα Mock NoteApp θα πρέπει τώρα να λειτουργήσουν. Μπορείτε να δημιουργήσετε το δικό σας σχέδιο χρωμάτων κάνοντας κλικ στα δείγματα και στη συνέχεια το δεσμεύσετε τοπικός μέσω του κουμπιού αποθήκευσης. Εάν επιθυμείτε να ενεργοποιήσετε την ποσότητα των στηλών που εμφανίζονται, κάντε κλικ στον κατάλληλο αριθμό στη συστατική στήλη.

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

Αυτό το άρθρο εμφανίστηκε αρχικά στο θέμα του περιοδικού Web Designer 264. Εγγραφείτε εδώ .

Διαβάστε περισσότερα:

• 15 πραγματικά χρήσιμα ανταποκρινόμενα σεμινάρια σχεδιασμού ιστοσελίδων
• Πώς να ξεκινήσετε με τη Sass
• 7 συμβουλές για τη διαχείριση του χρώματος καλύτερα στον ιστό