Αμυντικός κώδικας HTML και CSS

...

Αυτό μπορεί να είναι ιδανικό για μια κανονική εφαρμογή stay-at-home, αλλά για μια εφαρμογή τρίτου μέρους, είναι ένα πλήρες όχι. Ο λόγος? Ένα τέτοιο γενικό όνομα κλάσης έχει πολλές πιθανότητες να χρησιμοποιηθεί ήδη από τη γονική σελίδα. Εάν εισαγάγετε αυτόν τον κανόνα στυλ, ενδέχεται να αντικαταστήσετε έναν υπάρχοντα κανόνα στυλ που έχει δημιουργήσει ο εκδότης και να καταστρέψει τη διάταξη του ιστότοπού του. Ή, από την άλλη πλευρά, ο κανόνας τους μπορεί να αντικαταστήσει τη δική σας και να αλλάξει το μέγεθος του widget σας κατά λάθος.

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

...

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

Η ονοματοθεσία HTML και CSS είναι απαραίτητη για οποιαδήποτε εφαρμογή τρίτου μέρους που μεταδίδεται απευθείας στη σελίδα του εκδότη. Αυτό δεν είναι μόνο απαραίτητο για την αποτροπή αντικρουόμενων κανόνων CSS. είναι επίσης πιθανό ότι η γονική σελίδα έχει JavaScript που ερωτά το DOM για στοιχεία των οποίων οι ιδιότητες ταυτοποίησης μπορεί να ταιριάζουν με τη δική σας. Να είστε αυστηροί στα namespacing ό, τι βάζετε στο DOM.

CSS ειδικότητα

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

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

... 
  ... 

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

/* Publisher */#page div {background-color: green;}/* Camera Stork */.stork-container {background-color: blue;}

Τώρα, ποιο χρώμα θα έχει το .stork-container; Η απάντηση μπορεί να σας προκαλέσει σοκ και να σας απογοητεύσει: πράσινο. Σε αυτό το απλό παράδειγμα, ο κανόνας του εκδότη (#page div) έχει προτεραιότητα σε σχέση με τον κανόνα της κλάσης τρίτου μέρους (container .stork). Αυτό συμβαίνει επειδή το πρόγραμμα περιήγησης ζυγίζει κανόνες που περιέχουν αναγνωριστικά υψηλότερα από εκείνα που στοχεύουν κλάσεις ή ιδιότητες.

Προτεραιότητες κανόνων CSS

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

1. Εσωτερικά στυλ (στυλ = "...")
2. Αναγνωριστικά
3. Κλάσεις, ιδιότητες και ψευδοκλάσεις (: εστίαση,: αιώρηση)
4. Στοιχεία (div, span, και ούτω καθεξής) και ψευδο-στοιχεία (: πριν, μετά από)

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

Τι συμβαίνει όταν έχετε πολλαπλούς κανόνες CSS του ίδιου βάρους, καθένας από τους οποίους μπορεί να επηρεάσει το ίδιο στοιχείο; Ας ρίξουμε μια ματιά σε ένα παράδειγμα:

Eat your vegetables!

Τι υποθέτετε ότι είναι το χρώμα του span; Η απάντηση μπορεί να είναι εκπληκτική: κίτρινη. Παρόλο που αυτοί οι κανόνες βασίζονται κατά κύριο λόγο στην τάξη, ο δεύτερος κανόνας (.storkcontainer span) θεωρείται πιο συγκεκριμένος από τον πρώτο κανόνα και ο τρίτος κανόνας (.stork-container .stork-msg) πιο συγκεκριμένος από τον δεύτερο κανόνα. Πως λειτουργεί αυτό?

Τα γραμμικά στυλ είναι βασιλιά

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

Το πρόγραμμα περιήγησης χρησιμοποιεί ένα απλό σύστημα βαθμολόγησης για να καθορίσει ποιος κανόνας έχει προτεραιότητα. Για έναν συγκεκριμένο κανόνα, κάθε επιλογέας που συνθέτει τον κανόνα αυτό αξίζει μια ορισμένη τιμή. Αυτές οι τιμές αθροίζονται για να δημιουργηθεί μια βαθμολογία ειδικότητας. Όταν πολλοί κανόνες επηρεάζουν το ίδιο στοιχείο, το πρόγραμμα περιήγησης συγκρίνει τη βαθμολογία ειδικότητας κάθε κανόνα και ο κανόνας με την υψηλότερη βαθμολογία έχει προτεραιότητα. Στην περίπτωση ισοπαλίας, ο κανόνας που καθορίστηκε τελευταία κερδίζει. Χαρακτηριστικά σε στυλ γραμμής: 1000; IDs: 100; τάξεις, ψευδοκλάδιες και χαρακτηριστικά: 10, στοιχεία και ψευδο-στοιχεία: 1.

Έτσι, κοιτώντας πίσω στο προηγούμενο παράδειγμα μας, αυτοί οι κανόνες CSS θα είχαν αποδώσει τις ακόλουθες βαθμολογίες, με τον κανόνα με την υψηλότερη βαθμολογία να δίνεται προτεραιότητα από το πρόγραμμα περιήγησης: Θα παρατηρήσετε γρήγορα ότι αυτοί δεν είναι συνηθισμένοι αριθμοί. Μια βαθμολογία εξειδίκευσης είναι στην πραγματικότητα μια πλειάδα της φόρμας (a, b, c, d), με μια ύπαρξη πιο πολύτιμη από το b, b που είναι πιο πολύτιμη από το c, και ούτω καθεξής. Αυτό σημαίνει ότι ένα στυλ που προκαλείται από ένα χαρακτηριστικό γνώρισμα inline style (1, 0, 0, 0) έχει υψηλότερη ειδικότητα από έναν κανόνα με εκατό επιλογείς ταυτότητας (0, 100, 0, 0).

• (0,0,1,0-ένας επιλογέας κλάσης)
• (0,01,1-ένας επιλογέας κλάσης, ένας επιλογέας στοιχείων)
• .stork-container. stork-msg (0,0,2,0-δύο επιλογείς κλάσης)

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

Επαναπροσδιορισμός του CSS

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

Ας δούμε αυτό στην πράξη. Εξετάστε αυτό το αναθεωρημένο παράδειγμα του δοχείου widget Stork, το οποίο τώρα σπορτίζει δύο στοιχεία δοχείων, το καθένα με μοναδικό αναγνωριστικό:

Mikon E90 Digital SLR
  "/> 
  $ 599 
  4.3 / 5.0 • 176 Αναφορές 

Το συνοδευτικό CSS για αυτό το HTML θα μπορούσε να φαίνεται ως εξής:

#stork-main #stork-container { ... }#stork-main #stork-container .stork-product { ... }#stork-main #stork-container .stork-price { ... }

Με την περιττή εξακρίβωση και των δύο αναγνωριστικών εμπορευματοκιβωτίων ως γονικών επιλογέων όλων των κανόνων CSS, δίνετε στους καθέναν από τους κανόνες CSS ελάχιστο βαθμό ειδικότητας (0,2,0,0). Στη συνέχεια, ο γενικός κανόνας #page του εκδότη από παλαιότερα δεν θα έρχεται πλέον σε σύγκρουση με το γραφικό σας στοιχείο, επειδή χρησιμοποιεί μόνο ένα μοναδικό αναγνωριστικό. Επίσης, δεν θα υπάρξει διένεξη για κανόνες που βασίζονται αποκλειστικά σε τάξεις ή στοιχεία, διότι αυτές είναι μια ολόκληρη κατηγορία βάρους CSS κάτω από τα αναγνωριστικά. Παρόλο που, για λόγους επιλογής, είναι εντελώς περιττό να ορίσετε ένα δεύτερο αναγνωριστικό για τους κανόνες σας, εδώ λειτουργεί ως μια αποτελεσματική συσκευή για την ενίσχυση της ειδικότητας.

Διατηρήστε τη λογική σας με έναν προεπεξεργαστή CSS

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

#stork-main {#stork-container {.stork-product { ... }.stork-price { ... }}}

Ένας αριθμός δημοφιλών προεπεξεργαστών CSS είναι διαθέσιμοι σήμερα, οι οποίοι έχουν ποικίλα σύνολα χαρακτηριστικών. Μεταξύ των πιο δημοφιλών είναι ΠΙΟ ΛΙΓΟ,Sass, και Κονδύλι.

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

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

Η υπερπροσδιορισμός του CSS δεν αναμιγνύεται με εργαλεία ποιότητας κώδικα

Εάν πάρετε την υπερεκμετάλλευση αυτού του CSS, ίσως βρείτε έναν απίθανο εχθρό: εργαλεία που αξιολογούν την ποιότητα του κώδικα CSS σας, όπως το CSS Lint, το Google Page Speed ​​και το YSlow της Yahoo. Αυτά τα εργαλεία υποδεικνύουν ότι κάνετε απομακρυσμένους επιλογείς CSS και θα σας συμβουλεύσουν να καταργήσετε τέτοιους επιλογείς για να μειώσετε το μέγεθος του αρχείου και να βελτιώσετε την απόδοση του CSS των φυλλομετρητών. Δυστυχώς, αυτά τα εργαλεία δεν έχουν προγραμματιστεί με δέσμες ενεργειών τρίτων μερών και δεν αξιολογούν με αξιοπιστία τη χρησιμότητα της υπερέπειας του CSS. Τα οφέλη της υπερφόρτωσης για εφαρμογές τρίτων θα υπερβαίνουν το επιπλέον μέγεθος του αρχείου και την ελάχιστη απόδοση που επιτυγχάνεται.

Κατάχρηση!

Εάν πιστεύετε ότι η υπερκείρηση του CSS σας με πρόσθετες επιλογές αναγνώρισης ή επιλογής κλάσης δεν φτάνει αρκετά, μπορείτε να ξεπεράσετε την επιλογή πυρηνικής ενέργειας: τη σημαντική λέξη-κλειδί. Ιδιότητες μέσα σε έναν κανόνα CSS που αθλούν τη σημαντική λέξη-κλειδί έχουν προτεραιότητα υψηλότερα από όλα, ακόμα και πάνω από τα inline styles. Αυτό οφείλεται στο γεγονός ότι η σημαντική λέξη-κλειδί έχει σχεδιαστεί για να παρέχει στους χρήστες του προγράμματος περιήγησης έναν ασφαλή τρόπο για να αντικαταστήσει τα στυλ "συγγραφέα" (εκδότη), στην περίπτωση των plugins του προγράμματος περιήγησης ή των ειδικών ιστοτόπων. Μπορείτε να καταχραστείτε! Σημαντικό χρησιμοποιώντας το σε όλες τις ιδιότητες του CSS, δίνοντάς τους προτεραιότητα σε όλους τους άλλους κανόνες.

Εδώ μπορείτε να χρησιμοποιήσετε τη σημαντική λέξη κλειδί σε έναν κανόνα CSS:

.stork-price {font-size: 11px !important;color: #888 !important;text-decoration: none !important;display: block !important;}

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

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

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

Αλλά αν μοιράζεστε το DOM με τον εκδότη είναι αυτό που προκαλεί τόση θλίψη, είναι δυνατόν να απομακρύνετε το widget σας από το DOM; Γιατί, ναι-ναι μπορείτε.

Περίληψη

Για μια εφαρμογή JavaScript τρίτου μέρους, η έγχυση HTML και CSS στη σελίδα του εκδότη απαιτεί περισσότερη προσοχή απ 'ότι αν προσθέσατε σήμανση σε ένα "ασφαλές" περιβάλλον. Πρέπει να βεβαιωθείτε ότι όταν εξάγετε HTML στη σελίδα, δεν επιβραδύνετε τη σελίδα με μια λειτουργία αποκλεισμού. Πρέπει επίσης να θεωρήσετε ότι το σενάριό σας μπορεί να συμπεριληφθεί πολλές φορές στην ίδια σελίδα και θα πρέπει να προβάλει με ευχαρίστηση πολλές περιπτώσεις. Επιπλέον, θα πρέπει να επιλέξετε μια βέλτιστη μέθοδο για την έγχυση CSS στη σελίδα του εκδότη, είτε με την ένθεση όλων των στυλ, την προσθήκη στοιχείων σύνδεσης ή την ενσωμάτωση κανόνων CSS στη JavaScript.

Αλλά απλά να πάρει HTML και CSS στη σελίδα δεν είναι αρκετό. Πρέπει να αναγνωρίσετε ότι τα στοιχεία που εισάγετε στο DOM ενδέχεται να έρχονται σε σύγκρουση με τη γονική σελίδα. Πρέπει επίσης να εξετάσετε πώς τα στυλ σας ενδέχεται να έρχονται σε σύγκρουση με τα υπάρχοντα στυλ που ορίζονται από τον εκδότη. Μπορείτε να χρησιμοποιήσετε διάφορες τεχνικές για να μειώσετε τον αντίκτυπο των γονικών στυλ στο γραφικό στοιχείο σας: ορίζοντας τους κανόνες CSS ή παρουσιάζοντας το περιεχόμενό σας σε ένα iframe, είτε πρόκειται για ένα iframe χωρίς src είτε για ένα έγγραφο που περιέχει ένα εξωτερικό έγγραφο HTML.

Ποιες τεχνικές χρησιμοποιείτε για την παραγωγή CSS και HTML για τρίτους; Πάντα πέφτε πίσω! Σημαντικό; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, αμυντική εικόνα μέσω Shutterstock.