Περιεχόμενο
- Σχέδιο
- Clearfix
- Μέγεθος κουτιού
- Πολλές στήλες
- Υπολογισμοί
- Στυλ
- Διαφάνεια
- Φίλτρα
- Αντικατάσταση εικόνας
- Αποκριτικό βίντεο
- Λειτουργικότητα
- Επιλέγοντας εύκολα στοιχεία
- Δημιουργία νέων συστοιχιών
- Καθαρίστε αντικείμενα εγγράφου και παραθύρου
- Σας άρεσε αυτό; Διαβάστε αυτά!
Αυτό το άρθρο δημοσιεύθηκε για πρώτη φορά στο τεύχος 234 του περιοδικού .net - το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων.
Μια τεχνική, στον πυρήνα της, είναι ένας τρόπος εκτέλεσης μιας εργασίας και, ως προγραμματιστές και σχεδιαστές frontend, έχουμε πολλές εργασίες. Ωστόσο, συχνά ξεχνάμε πόσο έχει αλλάξει αυτό το τοπίο. Από το 2002 έως το 2010 η κοινότητά μας ήταν σάπια με κώδικα και πόρους, εμποδίζοντας την απόδοση και τη συντήρηση. Για να ξεπεραστεί αυτό, δημιουργήσαμε πολλές συμβουλές, κόλπα και χακς που ονομάσαμε «τεχνική». Εκτελέσαμε ακόμη καθήκοντα, απλά όχι με τον πιο αποτελεσματικό τρόπο.
Κάνοντας ένα 360, τα τελευταία χρόνια είδαμε καλύτερα πρότυπα και πρότυπα υλοποίησης, επιτρέποντάς μας ως κοινότητα να αναπτύξουμε νεότερες και πιο προηγμένες «τεχνικές». Αυτό το νέο τοπίο είναι αυτό που θεωρείται «σύγχρονος ιστός».
Καθώς το «Web 2.0» έγινε στάσιμο και μπερδεμένο, το ίδιο θα κάνει και ο «σύγχρονος ιστός». Δώσε του χρόνο. Τούτου λεχθέντος, προς το παρόν, μπορούμε να χρησιμοποιήσουμε και να καταχρήσουμε τον όρο αρκεί να υπάρχει κοινή κατανόηση του τι αντιπροσωπεύει.
Το 2010 προστέθηκε η προδιαγραφή HTML5, παρέχοντας ένα ολοκαίνουργιο, ημι-τυποποιημένο περιβάλλον ιστού. Τα προγράμματα περιήγησης όπως τα Opera, Firefox, Chrome και Safari αγκάλιασαν αυτό το νέο κύμα και ώθησαν τις ομάδες προγραμματιστών τους σε νέα όρια εφαρμογής προτύπων και εξερεύνησης API. Για να σας δώσουμε μια ιδέα για το πώς «ενσωματώνουν» αυτά τα προγράμματα περιήγησης, ελέγξτε τις απεικονίσεις www.html5readiness.com για την αλλαγή της υποστήριξης HTML5.
Μην ανησυχείτε για την έλλειψη υποστήριξης στον Internet Explorer. Μπορούμε να το αντιμετωπίσουμε χάρη στο Google Chrome Frame. Από τότε που η Google το παρουσίασε το 2010, έγινε ο μηχανισμός υποστήριξης για τον Internet Explorer. Όλες οι εκδόσεις του IE μπορούν να στοχευτούν με το Chrome Frame, το οποίο ζητά από έναν νέο χρήστη να κατεβάσει μια προσθήκη που καθιστά τους επιλεγμένους ιστότοπους με μια ελαφριά έκδοση του Chrome, μέσα στο IE. Για να εφαρμόσουμε το Chrome Frame προσθέτουμε την ακόλουθη μετα-ετικέτα στην ετικέτα της επικεφαλίδας του ιστότοπού μας>.
μετα-http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Από εδώ μπορούμε να ζητήσουμε από τους χρήστες IE να κατεβάσουν την προσθήκη, εάν δεν είναι ήδη εγκατεστημένη, χρησιμοποιώντας JavaScript:
τύπος σεναρίου = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFΕγκατάσταση.
min.js "> / script>
σενάριο>
window.onload = συνάρτηση () {
CFInstall.check ({
λειτουργία: "επικάλυψη",
προορισμός: "http://www.yourdomain.com"
});
};
/ σενάριο>
Ο προορισμός μπορεί να ρυθμιστεί για να στείλει το χρήστη σε έναν συγκεκριμένο σύνδεσμο μετά την εγκατάσταση της προσθήκης. Προειδοποίηση: αν και το Chrome Frame μας δίνει μια μέθοδο ανάπτυξης αυστηρά για πραγματικά μοντέρνα προγράμματα περιήγησης, δεν πρέπει να ξεχνάμε ότι ο χρήστης έχει την επιλογή να μην κάνει λήψη της προσθήκης εάν δεν το θέλει. Εάν δεν το κάνουν, και απαιτείται να παρέχετε υποστήριξη για μία ή άλλες διαφορετικές εκδόσεις του IE, θα πρέπει να αφιερώσετε περισσότερο χρόνο για να μάθετε τι μπορείτε και τι δεν μπορείτε να παράσχετε, με τις εμπειρίες σας, το cross-browser.
Με αυτόν τον κώδικα να παρέχει πολύ πιο ισότιμους όρους ανταγωνισμού για να αναπτυχθούμε στη σύγχρονη διαδικτυακή στοίβα, μπορούμε να προχωρήσουμε άνετα με το μυαλό μας. Μπορεί να θυμάστε ότι πρέπει να δημιουργήσετε έναν αριθμό hacks για συγκεκριμένο πρόγραμμα περιήγησης για να δημιουργήσετε τον ιστότοπό σας σωστά το διασταυρούμενο πρόγραμμα περιήγησης, δημιουργώντας έναν αμέτρητο αριθμό κενών στοιχείων που θα χρησιμοποιηθούν με τις φέτες των εικόνων σας, ή ακόμα και τη σύνταξη υπερβολικά ρητού ή περιττού κώδικα JavaScript για να λάβετε το απλούστερη λειτουργικότητα για εργασία. Όλοι αυτοί οι πόνοι είναι, κατά κάποιο τρόπο, τα ίδια προβλήματα που ανησυχούμε σήμερα. Ακόμα αγωνιζόμαστε για περισσότερο έλεγχο και καλύτερα εργαλεία για την καταπολέμηση της διάταξης, του στυλ και της λειτουργικότητας, αλλά σε επίπεδο που είναι ώριμο.
Σχέδιο
Clearfix
Το Floating an element εισήχθη πίσω στο CSS 2.1 αλλά ποτέ δεν αποδείχθηκε η πλήρης λύση που ελπίζαμε. Ένα από τα μεγαλύτερα προβλήματα ήταν η διατήρηση των διαστάσεων ενός γονικού στοιχείου όταν ένα παιδικό στοιχείο μετακινήθηκε. Για να αντιμετωπιστεί αυτό, δημιουργήθηκε η τεχνική Clearfix.
Πάρτε το ακόλουθο HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Αυτή η τεχνική γράφτηκε από τον Nicolas Gallagher:
.clearfix: πριν,
.clearfix: μετά τις {
περιεχόμενο: "";
οθόνη: τραπέζι;
}
.clearfix: μετά τις {
σαφές: και τα δύο?
}
.clearfix {
* ζουμ: 1;
}
Εάν χρησιμοποιείτε HTML5Boilerplate για να ξεκινήσετε τα έργα σας, τότε θα έχετε ήδη ενσωματώσει αυτήν την έκδοση της τεχνικής Clearfix.
Μέγεθος κουτιού
Για χρόνια οι προγραμματιστές συζήτησαν ποια εφαρμογή μοντέλου κουτιού είχε πιο νόημα. Η λειτουργία Quirks vs Standards εννοούσε πραγματικά: «πρέπει να αλλάξουν οι διαστάσεις ενός στοιχείου, αφού οριστούν, όταν εφαρμόζονται περιγράμματα και padding ή όχι».
Είναι πλέον ευρέως αποδεκτό ότι είναι πιο λογικό να αφαιρούν τα περιθώρια και τα μαξιλάρια από τον διαθέσιμο χώρο μέσα σε ένα στοιχείο και να μην προσθέτουν στο πλάτος ή το ύψος του στοιχείου. Η συζήτηση έγινε άσχετη με την εκτεταμένη εφαρμογή του μεγέθους κουτιού. Το πρόγραμμα περιήγησης θα πάρει τις υποδείξεις του αντί για το αντίστροφο.
Δημοφιλής από τον Chris Coyier και τον Paul Irish, μια τεχνική που περιλαμβάνει όλα τα ακόλουθα:
* {
-webkit-box-size: περίγραμμα-πλαίσιο?
-moz-box-size: περίγραμμα-πλαίσιο?
μέγεθος κουτιού: πλαίσιο-πλαίσιο;
}
Η χρήση του επιλογέα * στο CSS έχει συζητηθεί, λόγω πιθανών επιτυχιών απόδοσης. Αυτά τα είδη αξιώσεων είναι επιπόλαια εάν δεν βελτιστοποιείτε υπερβολικά όλες τις άλλες πτυχές του ιστότοπου / της εφαρμογής σας. Η χρήση πλαισίου περιγράμματος θα κάνει το πρόγραμμα περιήγησης να προσθέσει παραγέμισμα και περιγράμματα εντός του διαθέσιμου σετ χώρου. Το "Standards Mode" μπορεί να χρησιμοποιηθεί ρυθμίζοντας το μέγεθος κουτιού σε περιεχόμενο-πλαίσιο.
Πολλές στήλες
Ο ιστός εμπνεύστηκε σε μεγάλο βαθμό από γραπτή μορφή και τύπο. Δυστυχώς, κολλήσαμε στη φάση περγαμηνής. Μερικά από αυτά τα ζητήματα έρχονται στο μυαλό με τις πολυαναμενόμενες προδιαγραφές Paged-Media και CSS Regions. Τούτου λεχθέντος, τα πρώτα βήματα προς περισσότερες διατάξεις τύπου περιοδικών έγιναν όταν τα προγράμματα περιήγησης άρχισαν να εφαρμόζουν πολλές στήλες CSS. Ο κώδικας για τη δημιουργία αυτού του εφέ είναι αρκετά απλός:
Π {
-webkit-στήλη-μέτρηση: 2;
-moz-στήλη-μέτρηση: 2;
μέτρηση στήλης: 2;
}
Μπορείτε να μάθετε περισσότερα σχετικά με τις προδιαγραφές πολλαπλών στηλών CSS3, καθώς και ένα εναλλακτικό JavaScript που μπορείτε να χρησιμοποιήσετε για οποιοδήποτε πρόγραμμα περιήγησης χωρίς υποστήριξη, από το ιστολόγιο του A List Apart.
Υπολογισμοί
Ο υπολογισμός των διαστάσεων μπορεί να είναι δύσκολος. Παλιά, δεν είχαμε κανέναν τρόπο να κάνουμε κάθε είδους υπολογισμούς μονάδας, πόσο μάλλον μικτούς υπολογισμούς μονάδας. Όλα αυτά άλλαξαν χάρη στο calc. Δημιουργία επένδυσης εφέ που δεν επηρεάζει το αρχικό πλάτος των στοιχείων ή χρησιμοποιεί κάτι όπως το μέγεθος κουτιού: πλαίσιο-πλαίσιο; ήταν, μέχρι πρόσφατα, δυνατή μόνο με την προσθήκη επιπλέον στοιχείων που περιέχουν.
.padded {
περιθώριο: 0 αυτόματη;
θέση: σχετική
πλάτος: -webkit-calc (100% - (20px * 2));
πλάτος: -moz-calc (100% - (20px * 2));
πλάτος: calc (100% - (20px * 2));
}
Το calc () φροντίζει τον σωστό υπολογισμό πλάτους βάσει του γονικού πλάτους του .padded και μείον ένα καθορισμένο 20px padding. Αυτό το πολλαπλασίασα με 2 και στις δύο πλευρές του στοιχείου μου, στο κέντρο στο στοιχείο χρησιμοποιώντας σχετική τοποθέτηση και ένα αριστερό και δεξί περιθώριο αυτόματα.
Στυλ
Διαφάνεια
Η απόκτηση του σωστού στυλ ενός στοιχείου εξαρτάται πάντα από το είδος των εργαλείων που είχαμε στη διάθεσή μας στο CSS. Η διαφάνεια είναι μια από τις πρώτες παραλλαγές υποστήριξης που θα αντιμετωπίσετε στις αρχές έως τα μέσα της δεκαετίας του 2000.
Με την έλευση του HTML5 και πιο εστιασμένων προσπαθειών προτύπων, τα προγράμματα περιήγησης έχουν μια τυπική εφαρμογή της ιδιότητας αδιαφάνειας και έχουν εκθέσει υποστήριξη καναλιών άλφα σύμφωνα με τη νέα προδιαγραφή Color Module. Αυτό περιλαμβάνει τις οδηγίες RGBA και HSLA.
ένα {
χρώμα: rgba (0,255,0,0,5);
φόντο: rgba (0,0555,0,05);
περίγραμμα: rgba (255,0,0,0,5);
}
Μπορείτε να χρησιμοποιήσετε χρώματα RGBA ή HSLA οπουδήποτε θα βρείτε τιμές HEX. Υπάρχει επίσης μια εκτεταμένη λίστα διασκεδαστικών χρωμάτων με καθορισμένα ονόματα που μπορείτε να δείτε απευθείας στις προδιαγραφές. Αυτά είναι χρήσιμα όταν θέλετε να δημιουργήσετε ένα δυναμικό συνδυασμό μεταξύ των στοιχείων.
Φίλτρα
Τα φίλτρα CSS είναι εξαιρετικά συναρπαστικά. Η δυνατότητα δυναμικής αλλαγής της εμφάνισης και της αίσθησης των στοιχείων σε μια σελίδα χωρίς την ανάγκη για προσθήκες τρίτων είναι εκπληκτική και θα σας βοηθήσει να μειώσετε σημαντικά τον χρόνο που αφιερώσατε στο Photoshop.
img src = "market.webp">
img {
-webkit-filter: κλίμακα του γκρι (100%).
}
Τα φίλτρα CSS υποστηρίζονται προς το παρόν μόνο σε προγράμματα περιήγησης WebKit, επομένως η χρήση τους θα πρέπει να είναι της πρόσθετης φύσης και να μην εξαρτάται. Διαβάστε περισσότερα εδώ.
Αντικατάσταση εικόνας
Η αντικατάσταση κειμένου με εικόνες υπήρξε εδώ και πολύ καιρό. Δυστυχώς, εξακολουθούν να υπάρχουν μειονεκτήματα, ανάλογα με την προσβασιμότητα, στις πιο πρόσφατες και πιο εξελιγμένες τεχνικές αντικατάστασης εικόνας. Αλλά δύο πρόσφατα ήρθαν στο φως που είναι εξαιρετικά έξυπνα και μοναδικά από μόνα τους. Το πρώτο γράφτηκε από τον Scott Kellman:
h1 class = "hide-text"> Λογότυπο του ιστότοπού μου / h1>
. απόκρυψη-κείμενο {
κείμενο-εσοχή: 100%;
white-space: nowrap;
υπερχείλιση: κρυφό;
}
Το δεύτερο γράφτηκε από τον Nicolas Gallagher:
. απόκρυψη-κείμενο {
γραμματοσειρά: 0/0 α;
text-shadow: κανένα;
χρώμα: διαφανές
}
Αποκριτικό βίντεο
Η απόκτηση μέσων σε σωστή κλίμακα σε ένα περιβάλλον απόκρισης μπορεί να είναι δύσκολη. Με όλο και περισσότερους ιστότοπους που σέβονται την προσαρμοστική σχεδίαση, είναι σημαντικό να διαχειρίζεστε σωστά τις διαστάσεις των στοιχείων και τον λόγο διαστάσεων.
Το ενσωματωμένο βίντεο ήταν ένας από τους πιο δύσκολους τύπους πολυμέσων που αντιμετωπίζουν προβλήματα λόγω του τρόπου με τον οποίο οι υπηρεσίες τρίτων εξυπηρετούν το περιεχόμενο. Μια τυπική ενσωμάτωση YouTube μοιάζει με αυτό:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Το στοιχείο iframe περιέχει στη συνέχεια ένα αντικείμενο Flash ή ένα στοιχείο ενσωμάτωσης. Χρησιμοποιώντας κάτι σαν iframe {maxwidth: 100%; } δεν θα λειτουργήσει επειδή τα ένθετα στοιχεία δεν αλλάζουν το μέγεθος σωστά όταν αλλάζει το πλάτος. Πρέπει λοιπόν να κάνουμε κάποια κόλπα.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Το τύλιγμα του iframe σε ένα άλλο στοιχείο θα μας δώσει τον έλεγχο που χρειαζόμαστε για να προσθέσουμε τη σωστή λειτουργική απόκριση στο βίντεο.
.βίντεο {
θέση: σχετική
επένδυση-κάτω: 56,25%;
ύψος: 0;
υπερχείλιση: κρυφό;
}
.video iframe,
αντικείμενο βίντεο.
. ενσωμάτωση βίντεο {
θέση: απόλυτη;
κορυφή: 0;
αριστερά: 0;
πλάτος: 100%;
ύψος: 100%;
}
Ρύθμιση της βάσης του περιτυλίγματος .video: 56,25%; είναι η μαγεία αυτής της μεθόδου. Η χρήση του padding σημαίνει ότι το ποσοστό που χρησιμοποιείται θα βασίζεται στο πλάτος του γονέα. Το '56 0,25% 'θα δημιουργήσει αναλογία διαστάσεων 16: 9. Κάντε τα μαθηματικά μόνοι σας, αν θέλετε. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (αυτό είναι το ποσοστό μας).
Λειτουργικότητα
Επιλέγοντας εύκολα στοιχεία
Με τη δημοτικότητα ενός αριθμού βιβλιοθηκών JavaScript (jQuery, για παράδειγμα), η επιτροπή ECMAScript και τα πρότυπα W3C σημείωσαν ένα από τα βασικά κομμάτια λειτουργιών που δεν είχαν εγγενείς προγραμματιστές - καλή επιλογή στοιχείων. Μέθοδοι όπως το getElementByID () και το getElementByClassName () ήταν γρήγορες αλλά όχι τόσο ευέλικτες και στιβαρές όσο οι μηχανές επιλογής που προέρχονταν από την κοινότητα προγραμματιστών. Το querySelectorAll () ήταν ο τρόπος του σώματος τυποποίησης να μιμείται κάποια από αυτήν την ευελιξία σε μια εγγενή μέθοδο επιλογής.
var items = document.querySelectorAll («# header .item»);
Το querySelectorAll () μπορεί να περάσει πολλαπλούς και μικτούς επιλογείς. Διαβάστε περισσότερα για αυτό.
Δημιουργία νέων συστοιχιών
Η επανάληψη μέσω ενός πίνακα είναι κάτι που γίνεται κουραστικό να γράφετε. Το γράψιμο και η επανεγγραφή για () βρόχους δεν είναι διασκεδαστικό. Στην έκδοση JS 1.6 η μέθοδος map () προσγειώθηκε παρέχοντας υποστήριξη για έναν εύκολο τρόπο επανάληψης και δημιουργίας ενός νέου πίνακα από έναν άλλο.
var people = ["Heather", "James", "Kari", "Kevin"];
var welcomes = people.map (συνάρτηση (όνομα) {
επιστρέψτε "Γεια" + όνομα + "!";
});
Εκτελώντας αυτόν τον κωδικό, αν θέλαμε να το console.log (καλωσορίζει), θα δείτε ότι το Welcome είναι μια νέα σειρά [«Γεια Heather!», «Γεια Τζέιμς!», «Γεια Κάρι!», «Γεια Κέβιν!» ].
Καθαρίστε αντικείμενα εγγράφου και παραθύρου
Οι βιβλιοθήκες JavaScript τρίτων είναι επιρρεπείς σε βλάβες με εγγενή αντικείμενα εγγράφων και παραθύρων. Αυτό μπορεί να είναι πρόβλημα για άλλες βιβλιοθήκες τρίτων μερών, καθώς και για τον προγραμματιστή συμπεριλαμβανομένων αυτών. Ως ένα από τα δύο μέρη, βεβαιωθείτε ότι εργάζεστε με μια καθαρή έκδοση και των δύο αντικειμένων δημιουργώντας μια νέα παρουσία τους. Ο καλύτερος τρόπος για να γίνει αυτό είναι η δημιουργία ενός στοιχείου iframe, η εισαγωγή του στο DOM και η αποθήκευση των νέων παρουσιών αυτών των αντικειμένων.
var iframe = document.createElement («iframe»);
iframe.style.display = "κανένας";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Παρόλο που υπήρξαν μεγάλες βελτιώσεις στη στοίβα ιστού, το να συνεχίσουμε να ολοκληρώνουμε και να εξειδικεύουμε την τεχνολογική σουίτα για να ανταποκριθούμε στις προκλήσεις που αντιμετωπίζουμε στη διάταξη, το στυλ και τη λειτουργικότητα του έργου μας εξακολουθεί να είναι εξαιρετικά σημαντική. Για να διατηρήσουμε ένα καλό οικοσύστημα ανάπτυξης, πρέπει να ενθαρρύνουμε τους φορείς τυποποίησης και τους προμηθευτές προγραμμάτων περιήγησης να συνεχίσουν την πρόοδο με νέες προδιαγραφές και καινοτόμες υλοποιήσεις λειτουργιών, ενώ μοιραζόμαστε τις δικές μας γνώσεις με άλλους προγραμματιστές και σχεδιαστές. Περισσότερες πληροφορίες, λιγότερες παραβιάσεις.
Ο Darcy Clarke είναι ένας βραβευμένος προγραμματιστής, συνιδρυτής της θεματικής εταιρείας WordPress Themify και του Daily Deal Agagator DealPage και μέλος της ομάδας jQuery. Εργάζεται στο Polar Mobile ως ανώτερος προγραμματιστής UX.
Σας άρεσε αυτό; Διαβάστε αυτά!
- Πώς να δημιουργήσετε μια εφαρμογή
- Κατεβάστε τις καλύτερες δωρεάν γραμματοσειρές
- Δωρεάν πινέλα Photoshop κάθε δημιουργικό πρέπει να έχει
- Εκμάθηση εικονογράφων: εκπληκτικές ιδέες για δοκιμή σήμερα!
- Υπέροχα παραδείγματα τέχνης doodle
- Brilliant Wordpress επιλογή εκμάθησης
- Οι καλύτερες δωρεάν γραμματοσειρές Ιστού για σχεδιαστές
- Κατεβάστε δωρεάν υφές: υψηλή ανάλυση και έτοιμο για χρήση τώρα
