CSS Shorthand vs. Longhand - Πότε να χρησιμοποιήσετε το

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

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

Τι είναι ιδιοκτησία στενογραφίας?

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

Βασικα,

 σύνορα: 1χλ. 

είναι το ίδιο με:

 πλάτος συνόρου: 1px; μεθοδικό στυλ: συμπαγές; border-χρώμα: μπλε;

Με αυτό, δεν είναι απαραίτητο να δηλώνουμε ξεχωριστά τις ατομικές αξίες ιδιοκτησίας (που είναι περιττές, χρονοβόρες και διαστημικές). Επαναφέρει επίσης τις αριστερές ιδιότητες στη δήλωση, κάτι που μπορεί να αξιοποιηθεί.

Πώς λειτουργεί?

Όπως αναφέρθηκε προηγουμένως, γράφουμε μια σειρά από άλλες τιμές ιδιοκτησίας σε στενογραφία, η σειρά δεν έχει σημασία αν όλες οι τιμές ιδιοκτησίας στη σύντομη είναι διαφορετικού είδους Όπως σε σύνορο. Για ιδιότητες με παρόμοια είδη αξιών όπως περιθώριο, η σειρά έχει σημασία. Σε περίπτωση αμφιβολίας, θυμηθείτε δεξιόστροφα!

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

 σύνορα: 1px μπλε; 

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

 σύνορα: 1px κανένα μπλε; 

Τώρα αφήστε το 1px Για πλάτος και κρατήστε τα άλλα δύο:

 σύνορα: στερεό μπλε?

Θα μπορέσουμε να δούμε τα σύνορα μόνο με ένα παχύτερο πλάτος και αυτό συμβαίνει επειδή το πλάτος ιδιότητα πήρε την προεπιλεγμένη τιμή Μεσαίο.

 σύνορα: μέσο στερεό μπλε? 

Τούτο καταλήγει στο συμπέρασμα αυτό για μας όταν παραμείνει μια τιμή ιδιοκτησίας σε μια δήλωση στένωσης, αυτή η ιδιότητα παίρνει την προκαθορισμένη τιμή της (ακόμα και αν πρέπει να αντικαταστήσει οποιαδήποτε προηγούμενη τιμή που αντιστοιχεί στην ίδια).

Αν υπάρχει πλάτος συνόρου: 1px; για ένα στοιχείο κάπου πριν σύνορα: στερεό μπλε? για το ίδιο, το πλάτος των συνόρων πρόκειται να είναι Μεσαίο (η προεπιλεγμένη τιμή), όχι 1px.

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

ο όλα ιδιοκτησία

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

 div όλα: αρχική

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

⚠ Προειδοποίηση

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

Σημείωση: Ιδιότητα CSS χρώμα λαμβάνει δεκαεξαδική τιμή με συντομογραφία, αν οι δύο αριθμοί hex value σε κάθε κανάλι χρώματος είναι ίδιοι. Για παράδειγμα, φόντο: # 445599; είναι ίδια με background: # 459;.

Τι είναι ιδιοκτησία από καιρό?

ο μεμονωμένες ιδιότητες που μπορούν να συμπεριληφθούν σε μια ιδιότυπη συντομογραφία καλούνται properties longhand. Μερικά παραδείγματα είναι: εικόνα φόντου, περιθώριο-αριστερά, διάρκεια κινούμενης εικόνας, και τα λοιπα.

Γιατί πρέπει να το χρησιμοποιήσουμε?

Παρόλο που οι εναλλακτικές της στενογραφίας είναι χρήσιμες, έχουν ένα μειονέκτημα. Θυμηθείτε στην αρχή, είδαμε πώς η στενογραφία αντικαθιστά τις υπάρχουσες ιδιότητες με τις προεπιλεγμένες τιμές τους; Αυτό μπορεί να είναι ένα πρόβλημα εάν η επαναφορά δεν είναι επιθυμητή.

Πάρτε το γραμματοσειρά για παράδειγμα. Ας το χρησιμοποιήσουμε στο h4 στοιχείο (το οποίο έχει ένα προεπιλεγμένο στυλ προγράμματος περιήγησης γραμματοσειρά-βάρος: έντονα)

 γραμματοσειρά: 20px "courier new"; 

Στον παραπάνω κώδικα στενογραφίας, δεν υπάρχει τιμή για το γραμματοσειράς-βάρους ιδιοκτησία, εξ ου και η γραμματοσειρά-βάρος: έντονα(προεπιλεγμένο στυλ προγράμματος περιήγησης) θα αντικατασταθεί από την προεπιλεγμένη τιμή γραμματοσειρά-βάρος: κανονικό προκαλώντας το h4 στοιχείο για να χάσει το τολμηρό στυλ του, το οποίο μπορεί να μην είχε προβλεφθεί.

Έτσι, για το παραπάνω παράδειγμα απλές δύο ιδιότητες longhand, μέγεθος γραμματοσειράς και γραμματοσειρά-οικογένεια είναι τέλεια.

Επίσης, χρησιμοποιώντας συντομογραφία για η ανάθεση μόνο μιας ή δύο τιμών ιδιοκτησίας δεν είναι πολύ χρήσιμη. Γιατί να δώσετε στο πρόγραμμα περιήγησης επιπλέον εργασία για την ερμηνεία κάθε ιδιότητας (συμπεριλαμβανομένων των αριστερών) στη σύντομη γραφή, όταν χρειάζεται μόνο μία εργασία?

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

συμπέρασμα

Σήμερα, με τη δυνατότητα γρήγορης κωδικοποίησης (με τη βοήθεια εργαλείων όπως το Emmet) και των minification, δεν απαιτείται υψηλή αξιοπιστία στη στενογραφία, αλλά ταυτόχρονα είναι λογικό να πληκτρολογείτε περιθώριο: 0;. Το πλαίσιο στο οποίο προτιμούμε τις σημειώσεις CSS θα διαφέρει και το μόνο που πρέπει να κάνουμε είναι να καταλάβουμε τι συμβολισμός θα λειτουργήσει καλύτερα για εμάς και πότε.