Κρατώντας τον κώδικα CSS3 του κώδικα σας Slim
Οι προγραμματιστές ιστού μπορούν να εξοικονομήσουν πολύ χρόνο χρησιμοποιώντας πιο σύνθετη σύνταξη CSS3. Οι χρήστες που επισκέπτονται τη σελίδα σας περιμένουν το γρηγορότερο δυνατό χρόνο φόρτωσης - το οποίο σας αναθέτει να διατηρήσετε τα μεγέθη των αρχείων σας κάτω. Υπάρχουν πολλά κόλπα στενογραφίας με το CSS και ειδικά με το νέο μοντέλο CSS3.
Έχω συγκεντρώσει μερικές από αυτές τις ιδέες στον παρακάτω οδηγό. Θα πρέπει επίσης να αγγίξουμε άλλους τομείς, όπως τον μικροσκοπικό κώδικα CSS. Υπάρχουν διαθέσιμα εργαλεία περιήγησης για να βοηθήσετε τους προγραμματιστές στη διαδικασία styling, αλλά θα θέλατε να συνδυάσετε τα shortcodes με αυτή τη μείωση μεγέθους αρχείου για να εξομαλύνετε τελικά τη διαδικασία αποδόσεων του ιστότοπού σας.
Βασικές συμβουλές για τη μορφοποίηση
Πριν περάσουμε στην πραγματική σύνταξη CSS θέλω να ξεπεράσω το θέμα πως για να γράψετε το CSS. Αν είστε λίγο εξοικειωμένοι με το σχεδιασμό ιστοσελίδων, έχετε δει πιθανώς ένα φύλλο στυλ πριν, πιθανώς περισσότερες από μία φορές. Το πρώτο μέρος κάθε εντολής ονομάζεται εκλέκτορας. Αυτό στοχεύει στον τύπο του στοιχείου που θα λάβει τα στυλ που προστίθενται μέσα στα σγουράκια, επίσης γνωστά ως ιδιότητες.
Inline Level
Με ενσωματωμένα στυλ κάθε ιδιοκτησία γράφεται το ένα μετά το άλλο με μόνο κενά για να τα χωρίσει. Αυτή η μέθοδος εφαρμόζεται καλύτερα στους επιλογείς όπου χρειάζεστε μόνο δύο ιδιότητες. Αυτό θα σας εξοικονομήσει χώρο στη σελίδα και κύλιση μέσω του φύλλου στυλ σας θα είναι πολύ πιο γρήγορα. Σε περίπτωση που δεν έχετε ξανασυνδέσει ποτέ CSS inline, έχω προσθέσει ένα μικρό παράδειγμα κάτω από τη στόχευση συνδέσμων βάσης HTML.
α χρώμα: # 648cc8; γραμματοσειρά-βάρος: έντονα. α: μετακινήστε χρώμα: # 739cda; κείμενο-διακόσμηση: κανένα? a.alt χρώμα: # bd4949! σημαντικό;
Επίπεδο αποκλεισμού
Από την άλλη πλευρά, οι ιδιότητες τύπου μπλοκ εισάγονται σε μία γραμμή ανά ζεύγος κλειδιών / τιμών και συχνά είναι ομαδοποιημένες για ταχύτερη επεξεργασία όταν γίνεται σάρωση του κώδικα. Περίπου το 99% των καθαριστικών φύλλων στυλ που χρησιμοποιώ για αυτή τη μορφοποίηση και έχει γίνει βιομηχανικό πρότυπο σε πολλούς σχεδιαστές. Εάν ο επιλογέας σας χρησιμοποιεί περισσότερα από 6 ή 7 ιδιότητες, αυτή είναι η καλύτερη μορφοποίηση που πρέπει να εφαρμόσετε.
Όταν λάβετε υπόψη τις πολλές νέες ιδιότητες CSS3, συνειδητοποιείτε επίσης πόσο γρήγορα γεμίζουν τα φύλλα στυλ σας. Και πολλές από αυτές τις ιδιότητες υποστηρίζουν αντίγραφα ειδικά για το πρόγραμμα περιήγησης, τα οποία απαιτούν σχεδόν διπλές καταχωρήσεις κώδικα (όπως ακτίνα ακρών). Μπορείτε να ελέγξετε το παράδειγμά μου για ένα σύνολο περιουσιακών στοιχείων μπλοκ κάτω από τη στόχευση ενός δείγματος περιτύλιξης δείγματος.
.wrap εμφάνιση: μπλοκ? συμπλήρωση: 6px 10px; φόντο: #FFF; ακτίνα ακτίνας: 4px; -moz-ακτίνα-ακτίνα: 4px; -webkit-ακτίνα-ακτίνα: 4px; -ο-ακτίνα-ακτίνα: 4px;
Κανένας τρόπος γραφής του CSS είναι ειδικά καλύτερος από τον άλλο. Τελικά η επιλογή σας ως προγραμματιστή είναι το στυλ που προτιμάτε, ακόμα και αυτό σύμφωνα με το έργο στο οποίο εργάζεστε. Είναι ακόμη συνηθισμένο να βρείτε το CSS όπου οι σχεδιαστές έχουν μοιραστεί μαζί! Εγώ προσωπικά το αισθάνομαι αυτό “εργασίες σε εξέλιξη” τείνουν να είναι ευκολότερες με μπλοκ-στυλ, δεδομένου ότι είμαι συνεχώς εξετάζει το φύλλο στυλ για να κάνει επεξεργασίες ή προσθήκες. Αλλά για τομείς με μεγάλη κίνηση, ο μικρότερος αριθμός αρχείων CSS είναι ο απόλυτος καλύτερος τρόπος για να προχωρήσετε.
Κρατώντας τους Slim
Χρησιμοποιώντας τους πολλούς σύντομους κώδικες που είναι διαθέσιμοι στο CSS3, μπορείτε να εξοικονομήσετε πολύ χρόνο ανάπτυξης. Η επεξεργασία των στοιχείων HTML θα γίνει πολύ πιο εύκολη καθώς καταλαβαίνετε αυτό το εξοικονόμηση χρόνου. Επιπλέον, ο κώδικας θα εμφανιστεί πιο καθαρός και θα είναι πιο εύκολος.
Το μόνο μειονέκτημα είναι ότι δεν υποστηρίζουν πλήρως όλα αυτά τα προγράμματα περιήγησης. Υπάρχουν λύσεις για πολλά από τα υπάρχοντα ζητήματα, όπως στον Internet Explorer και στο Netscape. Ευτυχώς, ο Παγκόσμιος Ιστός προχωρεί πάντα προς τα εμπρός και καθώς το CSS3 εξελίσσεται σε δημοτικότητα, αναμφίβολα θα βιώσουμε μια αύξηση της συμβατότητας του προγράμματος περιήγησης.
RGBa Διαφάνεια / Αδιαφάνεια χρώματος
Το νέο RGBavalue δεν είναι ακριβώς ένα CSS3 ιδιοκτησία, αλλά Η διαφάνεια άλφα είναι συγκεκριμένη μόνο για το CSS3. Αντί των κοινών τιμών "κόκκινου πράσινου μπλε" που περνάτε για το χρώμα που μπορείτε τώρα περιλαμβάνουν μια τέταρτη επιλογή διαφάνειας χρωμάτων. Εξαιτίας αυτού, οι προγραμματιστές ιστού γίνονται με σχεδόν διαφανείς PNG.
Η βασική σύνταξη απαιτεί μια τιμή από 0-255 στις τρεις πρώτες (3) υποδοχές και 0-1.0 στη θέση άλφα. Το εύρος χρώματος είναι συγκεκριμένο για το πόσο από κάθε απόχρωση (RGB) είναι ορατό με το 0 να είναι τίποτα και το 255 πλήρες.
/ ** σύνταξη ** / υπόβαθρο: rgba (όνομα_εξίας, όνομα_εξόδου, όνομα_εξόδου, τιμή_αξίας, τιμή opacity_value); / ** παράδειγμα ** / div φόντο: rgba (255, 255, 255, 0.3).
Συμβατότητα με το πρόγραμμα περιήγησης
Μια άλλη ιδιοκτησία αδιαφάνεια μπορεί να χρησιμοποιηθεί σε ορισμένες περιπτώσεις. Ωστόσο, αυτό θα επηρεάσει ολόκληρο το στοιχείο HTML και εσωτερικό περιεχόμενο, όχι μόνο το φόντο όπως είδατε στο παράδειγμά μου.
Δυστυχώς, ο Internet Explorer δεν υποστηρίζει την τιμή χρώματος RGBa μέχρι στιγμής. Θα πρέπει γενικά να συμπεριλάβετε ένα εφεδρικό ιδιότητα με πλήρη αδιαφάνεια για αυτά τα λιγότερο πρότυπα προγράμματα περιήγησης. Ορίσατε αυτό με τις ίδιες τιμές αλλά αποκλείοντας την 4η (αδιαφάνεια). Θα φαινόταν κάτι σαν rgba (255, 255, 255)
Επιπλέον, ο Internet Explorer μπορεί να χειριστεί λίγο πιο χαριτωμένα μέσω conditionals. Μπορείτε να ελέγξετε αν το πρόγραμμα περιήγησης εκτελεί IE και εμφανίζει ένα ιδιόκτητο φίλτρο Microsoft CSS με εντολή. Έχω αποδείξει αυτό στο παρακάτω παράδειγμα μου (σημειώστε ότι αυτό θα εμφανιζόταν κάπου στο αρχείο HTML σας):
Ακτίνα περιγράμματος CSS3
Έχω διαβάσει μερικά θέματα που προκαλούν σύγχυση σχετικά με τη δημιουργία στρογγυλεμένων συνόρων με το CSS3 - όχι τόσο από την πλευρά του τρόπου με τον οποίο γίνεται, αλλά με την πλούσια υποστήριξη του προγράμματος περιήγησης, οι προγραμματιστές του διαδικτύου προσπαθούν να μειώσουν τον κώδικα και να λειτουργήσουν όπως αναμένεται.
/ ** σύνταξη ** / ακτίνα περιθωρίου: πάνω-αριστερά πάνω-δεξιά-κάτω δεξιά-κάτω-αριστερά?
ο ακτίνα ακρόασης η ιδιότητα μοιράζεται παρόμοια σύνταξη με τη δημιουργία ενός τυπικού περιγράμματος, εκτός από την περίπτωση που στοχεύουμε στις γωνίες του πλαισίου. Αυτή η ιδιότητα θα δεχτεί στην πραγματικότητα 1 - 4 τιμές και κάθε μία στοχεύει σε διαφορετική ρύθμιση γωνιών.
- 1: Και οι τέσσερις γωνίες στρογγυλεύονται στην ίδια τιμή
- 2 τιμές: Η πρώτη τιμή ισχύει για
πάνω αριστεράκαικάτω δεξιάενώ η δεύτερη τιμή χτυπάπάνω δεξιάκαικάτω αριστερά - 3 τιμές: Αρχικά ισχύει για το
πάνω αριστεράγωνία, η δεύτερη είναι και τα δύοκάτω αριστερά& &πάνω δεξιάενώ εφαρμόζεται η 3η και η τελική τιμήκάτω δεξιά - 4 τιμές: Οι 4 τιμές στοχεύουν τις γωνίες με την ακόλουθη σειρά: πάνω αριστερά, πάνω δεξιά, κάτω δεξιά, κάτω αριστερά
/ ** παράδειγμα ** / div ακτίνα-ακτίνα: 4px 4px 8px 4px; div ακτίνα-ακτίνα: 4px 4px 8px;
Έτσι στον παραπάνω κώδικα που χρησιμοποιούμε ακτίνα ακρόασης να εφαρμόσετε στρογγυλεμένο αποτέλεσμα 4px σε όλα εκτός από το κάτω δεξιά που παίρνει μια λεία καμπύλη 8px. Αν το έχετε παρατηρήσει, και οι δύο αυτοί κωδικοί θα εφαρμόσουν στην πραγματικότητα το ίδιο αποτέλεσμα στυλ.
Συμβατότητα με το πρόγραμμα περιήγησης
Τώρα το κύριο πρόβλημα είναι αυτό ακτίνα ακρόασης υποστηρίζεται μόνο σε λίγα προγράμματα περιήγησης. Ο Internet Explorer 9 πρόσθεσε πρόσφατα μεγάλη υποστήριξη και η Opera θα το κάνει και αυτό. Ωστόσο, ακόμη και η Όπερα δημιούργησε το δικό της ακίνητο με -o-ακτίνα ακτίνας στοχεύοντας στον συγκεκριμένο κινητήρα του προγράμματος περιήγησης. Επιπροσθέτως -moz-border-radius υποστηρίζεται από το λογισμικό Firefox / Gecko και το -webkit-ακτίνα-ακτίνα για το Google Chrome / Safari.
Ο παρακάτω κώδικας είναι ένα παράδειγμα του πρότυπου γυμνού οστού μου για τη δημιουργία στρογγυλεμένων γωνιών με τη μεγαλύτερη υποστήριξη παγκόσμιου προγράμματος περιήγησης.
div ακτίνα-ακτίνα: 4px 4px 8px 4px; -webkit-ακτίνα-ακτίνα: 4px 4px 8px 4px ;; -moz-όριο ακτίνας: 4px 4px 8px 4px; -ο-περιθώριο-ακτίνα: 4px 4px 8px 4px;
Φανταστείτε μια Σκιά Drop?
Η άλλη πραγματικά εκπληκτική πτυχή του CSS3 είναι η υποστήριξη για κουτί και σκιά κειμένου. Αυτό ήταν ένα τέτοιο πρόβλημα για τους προγραμματιστές στο παρελθόν, δεδομένου ότι οι εικόνες φόντου ήταν η μόνη ρεαλιστική επιλογή. Αυτή η σύνταξη ακολουθεί πραγματικά έναν ρόλο στενογραφίας που είναι πολύ πιο εύκολος από τις άλλες ιδιότητες που καλύψαμε. Είναι δύσκολο να θυμηθείτε την σωστή σειρά των βασικών αξιών στην αρχή - αλλά όσο περισσότερη πρακτική βάζετε, τόσο πιο εύκολη θα γίνει.
Δυστυχώς, ο Internet Explorer είναι και πάλι το περίεργο. Κάθε άλλο μεγάλο πρόγραμμα περιήγησης, συμπεριλαμβανομένων των Firefox, Google Chrome, Safari και Opera, υποστηρίζει πλήρως το σκιά κειμένου ιδιοκτησία. Οι προγραμματιστές προσπάθησαν να δημιουργήσουν τη δική τους υποστήριξη IE, αλλά εξακολουθεί να είναι πολύ περιοριστική. Η βασική σύνταξη γράφεται ως εξής:
/ ** σύνταξη ** / σκίαση κειμένου: Χ-offset y-offset χρώμα-ακτίνα χρώματος? / ** παράδειγμα ** / div κείμενο-σκιά: 2px 2px 1px # 111;
Οι μετατοπίσεις X και Y λένε στο πρόγραμμα περιήγησης πόσο πάνω και δεξιά θα εμφανιστεί η σκιά. Μπορείτε να χρησιμοποιήσετε αρνητικές τιμές για να τοποθετήσετε τη σκιά πάνω και πάνω αριστερά, αντίστοιχα. Αλλά αυτό έρχεται μακριά φαίνεται πολύ αμήχανη γι 'αυτό συστήνω θετικούς ακέραιους. Επίσης, η τιμή της ακτίνας θόλωσης μπορεί να χρησιμοποιηθεί για την εξομάλυνση των άκαμπτων άκρων, εάν η σκιά κειμένου εμφανίζεται αφύσικη.
Αυτή η σύνταξη εξετάζει απλώς τη βασική συμβολική ιδιότητα όταν δημιουργεί ένα ενιαίο εφέ σκιάς σταγόνας. Οι εξαιρετικά προηγμένοι σχεδιαστές έχουν μελετήσει ακόμη και να δημιουργούν πολλαπλές σκιές ταυτόχρονα! Αναφέρομαι σε αυτό το φοβερό blog post από τον Απρίλιο του 2011, το οποίο εξηγεί με μεγάλη λεπτομέρεια την επιβολή σκιών κειμένου. Αν έχετε χρόνο, μεταφέρετε το περιεχόμενο μόνο για να πάρετε μια ιδέα για τα πιο προηγμένα χαρακτηριστικά και φροντίστε να το σημειώσετε ως μελλοντική αναφορά!
Συμβατότητα με το πρόγραμμα περιήγησης
Ο μεγαλύτερος αγοραστής που αντιμετωπίζουμε είναι ο Internet Explorer. Ξανά και ξανά Η Microsoft έχει σπρώξει τη δική της μηχανή εμφάνισης του προγράμματος περιήγησης που έχει εκτελεί υπο-par σε καλύτερη περίπτωση. Τώρα ακόμη και με το CSS3 να παίρνει τις βασιλεύσεις σε σκιές κειμένου, ο IE είναι ακόμα πίσω. Υπάρχει μια μεγάλη ιστοσελίδα επίδειξης όπου μπορείτε να βρείτε παραδείγματα κώδικα και παραδοσιακά σχόλια υπό όρους CSS.
Βασικά, θέλετε να ελέγξετε εάν το πρόγραμμα περιήγησης που χρησιμοποιεί ο χρήστης σας αντιστοιχεί σε οποιαδήποτε έκδοση του Internet Explorer 9 ή παρακάτω. Στη συνέχεια, χρησιμοποιώντας φίλτρα MS, μπορούμε να εφαρμόσουμε μια σκιά σε οποιοδήποτε στοιχείο κειμένου (παραπάνω, χρησιμοποιούμε μια παράγραφο).
Διευκόλυνση μεταβάσεων
CSS3 μετάβαση είναι η πιο καυτή ιδιοκτησία στην αγορά σχεδιασμού από τα flapjacks της γιαγιάς! Οι σχεδιαστές ιστοσελίδων έχουν κάνει μια τέτοια αναστάτωση σχετικά με τις καθαρές μεταβάσεις του CSS, παρόλο που η υποστήριξη περιορίζεται κυρίως σε προγράμματα περιήγησης Webkit. Μπορείτε βεβαίως να χρησιμοποιήσετε δευτερεύουσες ιδιότητες για Mozilla και Opera και τέτοια. Αλλά η σημείωση στενογραφία είναι πραγματικά μαγευτική, ειδικά αν είστε ενάντια σε animations JavaScript για οποιοδήποτε λόγο.
Πρώτον, ας ρίξουμε μια ματιά στην αρχική ιδιοκτησία μετάβασης. Αυτό θα απαιτήσει 4 τιμές οι οποίες θα μπορούσατε επίσης να σπάσετε σε ίδιες τις ιδιότητες. Ανταποκρίνονται στη μετάβαση ιδιοκτησία(ποιο είναι το αποτέλεσμα), διάρκεια(πόσο καιρό να το εξάγετε), λειτουργία χρονισμού(αλλαγές στην ταχύτητα πάνω από το κινούμενο σχέδιο), και καθυστέρηση(αριθμός δευτερολέπτων για αναμονή πριν από την κίνηση).
/ ** σύνταξη ** / μετάβαση: χρονική περίοδος ιδιότητας-καθυστέρηση λειτουργίας; / ** παράδειγμα ** / img transition-property: opacity; διάρκεια μετάβασης: 2 δευτερόλεπτα. μετάβαση-χρονοδιάγραμμα-λειτουργία: ευκολία-μέσα? μεταβατική καθυστέρηση: 0,5 δευτερόλεπτα.
Θα πρέπει να κατανοήσετε διαισθητικά το σκοπό για τις περισσότερες από αυτές τις ιδιότητες εκτός από τη λειτουργία χρονισμού. Παρόλο που αρχικά προκαλεί σύγχυση, η ιδιότητα αυτή απλώς ζωντανεύει την μετάβαση διαφορετικά, έτσι ώστε το εφέ να αρχίσει πιο αργά, να τελειώσει πιο αργά ή κάτι παρόμοιο.
Το W3 Schools έχει μια ηλεκτρονική λειτουργία ηλεκτρονικού ταχυδρομείου, η οποία περιλαμβάνει όλες τις πιθανές τιμές που μπορείτε να δοκιμάσετε. Βρίσκω συνεχώς Googling για αυτούς τους οδηγούς, αλλά κάνουν τέτοιους εύχρηστους σελιδοδείκτες.
Συμβατότητα με το πρόγραμμα περιήγησης
Τώρα ας φέρνουμε πλήρη υποστήριξη του προγράμματος περιήγησης. Από προεπιλογή, η ιδιότητα μετάβασης είναι μόνο υποστηρίζεται από νεότερες εκδόσεις του Safari. Ωστόσο, πολλοί χρήστες εξακολουθούν να χρειάζονται το -webkit πρόθεμα που ισχύει και για το Google Chrome και παρόμοιες μηχανές απόδοσης. Παρακάτω είναι α “οριστικοποιήθηκε” πρότυπο μπλοκ κώδικα Σας συνιστώ να αποθηκεύσετε και να χρησιμοποιήσετε εάν χρειάζεστε υποστήριξη μετάβασης από την πλειοψηφία των προγραμμάτων περιήγησης ιστού.
img μετάβαση: αδιαφάνεια 2s ευκολία-in 1s; -webkit-transition: αδιαφάνεια 2s easy-in 1s; / * χρωμίου, σαφάρι, κοπάδι * / -moz-μετάβαση: opacity 2s ευκολία-in 1s? / * mozilla + gecko * / -o-μετάβαση: αδιαφάνεια 2s ευκολία-in 1s? /* ΛΥΡΙΚΗ ΣΚΗΝΗ */
Εφέ κτυπήματος κειμένου
Αυτό το ακίνητο δεν είναι τεράστιο και δεν θα βρείτε πολλούς σχεδιαστές ιστοσελίδων που το χρησιμοποιούν σήμερα. Αλλά μπορείτε να χρησιμοποιήσετε κτυπήματος κειμένου για να δημιουργήσετε κάποια πολύ καθαρά εφέ με τις γραμματοσειρές σας. Τα προγράμματα περιήγησης Webkit, όπως το Safari και το Chrome, είναι οι μόνοι αληθινοί υποστηρικτές αυτής της ιδιοκτησίας μέχρι στιγμής. Η Opera και ο Firefox δυσκολεύουν να μετατρέψουν αντικείμενα κειμένου σε αυτά τα ίδια περιγράμματα.
/ ** σύνταξη ** / p -webkit-κείμενο-εγκεφαλικό: χρώμα πλάτος? / ** παράδειγμα ** / p -webkit-κείμενο-εγκεφαλικό: 1px # 222;
Συμβατότητα με το πρόγραμμα περιήγησης
Εάν αισθάνεστε την ανάγκη για εφέ κτυπήματος κειμένου, θα πρέπει πάντα να έχετε ένα εφεδρικό χρώμα. Mozilla και Opera μπορούν να πάρουν από, ωστόσο οι χρήστες του Internet Explorer δεν έχουν άλλες επιλογές. Δυστυχώς αυτό είναι ένα από τα νεότερα CSS3 ιδιότητες που μόλις δεν έχει συγκεντρώσει αρκετή υποστήριξη από την κοινότητα προγραμματιστών του προγράμματος περιήγησης στο Web. Θα πρέπει να περάσετε λίγο χρόνο παίζοντας με αυτό το μεγάλο εργαλείο Ιστού ειδικά δημιουργημένο για την κατασκευή αυτών των περιγραμμάτων CSS3 κειμένου.
Μεγέθυνση πλαισίου
Η ιδιότητα μεγέθους πλαισίου σας δίνει μεγαλύτερο έλεγχο στο συνολικό πλάτος / ύψος κάθε στοιχείου μπλοκ. Από προεπιλογή, το πλάτος / ύψος + περιθώριο + περιθώριο + παραπληρωμή συνθέτουν το συνολικό μέγεθος ενός κουτιού. Ωστόσο, χρησιμοποιώντας το πλαίσιο περιθωρίου στο περιεχόμενό σας, ωθούνται όλα τα περιθώρια και τα περιθώρια προς τα μέσα για να διατηρήσετε το πλάτος ακριβώς το ίδιο. Υπάρχουν μόνο δύο τιμές για αυτήν την ιδιότητα, με περιεχόμενο-πλαίσιο είναι το προεπιλεγμένο.
div πλάτος: 550px; padding: 9px; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? / * το πλάτος θα παραμείνει στα 550px * /
Όπως μπορείτε να φανταστείτε αυτό θα έρθει σε πρακτικό σε κάποιο σημείο κατά τη διάρκεια της καριέρας CSS σας. Το πάτημα και τα περιθώρια μπορεί να είναι ένας πραγματικός πόνος και όταν προσθέτετε σύνορα, τείνετε να χάσετε κομμάτι των εικονοστοιχείων.
Συμβατότητα με το πρόγραμμα περιήγησης
Το Opera και το IE 8 υποστηρίζουν αυτήν την νέα ιδιότητα από προεπιλογή. Οι IE7 και παρακάτω είναι κολλημένοι με τη ρύθμιση του πλαισίου περιεχομένου, εκτός εάν οι επισκέπτες σας χρησιμοποιούν λειτουργία quirks. Οι μοναδικές προσθήκες θα πρέπει να γνωρίζετε σχετικά με τους συγκεκριμένους στόχους webkit και Mozilla-powered μηχανές αναζήτησης.
div -webkit-box-size: border-box; / * Safari / Chrome * / -moz-box-size: border-box. / * Firefox * / μέγεθος-κιβώτιο: border-box? / * Opera / IE8 + * /
Καθαρές στήλες CSS3
Οι στήλες είναι λίγο δύσκολες με το CSS3 αλλά μπορούν να επιτευχθούν με ελάχιστο κώδικα. Οι 2 ιδιότητες στις οποίες θέλετε να εστιάσετε είναι μέτρηση στήλης και κενό στη στήλη. Η καταμέτρηση αναφέρει τον συνολικό αριθμό των στηλών που θέλετε να εφαρμόσετε, ενώ το χάσμα δημιουργεί ένα περιθώριο μεταξύ των δύο.
div # cols αριθμός στήλης: 3; κενό-στήλη: 10px;
Στο παράδειγμά μου μπορούμε να δούμε το αναγνωριστικό #cols που χρησιμοποιείται ως κοντέινερ. Στο εσωτερικό διαιρέσαμε το div σε 3 στήλες με ένα διάκενο 10px μεταξύ των δύο. Περαιτέρω θα μπορούσατε να ρυθμίσετε πλάτος στήλης που χρησιμοποιείται για να ορίσετε το συνολικό πλάτος κάθε στήλης αντί για την εισαγωγή ενός σταθερού αριθμού.
Συμβατότητα με το πρόγραμμα περιήγησης
Οτιδήποτε πριν από το IE8 απλά δεν θα μπορέσει να κάνει χρήση αυτής της ιδιότητας. Αλλά όπως έχουμε δει σε κάθε παράδειγμα, το Mozilla και το Webkit προσφέρουν τις δικές τους λύσεις για πολλαπλά προγράμματα περιήγησης. Αν χρειάζεστε ένα πρότυπο, ελέγξτε τον παρακάτω μικρό κώδικα παράδειγμα:
div # πλευρική γραμμή πλάτος: 210px; -μεριθμός-στήλη-3: -μψος-στήλη-χάσμα: 7px; -webkit-στήλη-count: 3; -webkit-κενό-στήλη: 7px; Αριθμός στήλης: 3. κενό-στήλη: 7px;
Προσαρμοσμένο @ font-face
Πρέπει να έχετε ακούσει για τον ενθουσιασμό σχετικά με τις γραμματοσειρές CSS3. Χρησιμοποιώντας την ιδιότητα @ font-face μπορούμε να εισαγάγουμε εξωτερικά στυλ γραμματοσειράς και να τα χρησιμοποιήσουμε όπως ακριβώς και κάθε άλλη οικογένεια. Η σύνταξη είναι κάπως περίπλοκη και θα χρειαστεί να περάσετε λίγο χρόνο για να γίνει σωστό. Το μπλοκ για @ font-face χρησιμοποιείται για να ορίσει ένα οικογενειακό όνομα, στη συνέχεια μπορείτε να το χρησιμοποιήσετε στο δικό σας γραμματοσειρά-οικογένεια ιδιότητες οπουδήποτε!
@ γραμματοσειρά font-family: 'MyNewFont'; src: url ('New_Font.ttf'), διεύθυνση url ('New_Font.eot'); / * Μόνο Internet Explorer * / Έτσι, βλέπετε παραπάνω δεν στοχεύω κανένα συγκεκριμένο τύπο γραμματοσειράς, αλλά η σύνταξη είναι αυτό που πρέπει να ξεχωρίζει. Παρατηρήστε ότι ο Internet Explorer υποστηρίζει μόνο .eot τύπους γραμματοσειρών, ενώ .ttf και .otf είναι δημοφιλείς επιλογές για τα άλλα προγράμματα περιήγησης. Επίσης σημαντικό, πρέπει να καταλάβετε ότι μπορείτε να περάσετε γραμματοσειρές URL από άμεσες συνδέσεις, π.χ.. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Δεν υπάρχει πραγματικό ζήτημα cross-browser με αυτήν τη ρύθμιση, αφού όλες οι μηχανές επεξεργασίας μπορούν να αναλύσουν αυτούς τους τύπους αρχείων γραμματοσειρών. Απλά θυμηθείτε ότι για την υποστήριξη IE πρέπει να συμπεριλάβετε μια eot έκδοση καθώς και το πρωτότυπο. Πιστεύω ότι το άρθρο W3 Schools έχει έναν κατάλογο με τις πιο σημαντικές πληροφορίες που πρέπει να ελέγξετε.
Μετατροπή σε μικροσκόπιο CSS
Αυτό το θέμα συζητείται συχνά καθώς εξυπηρετεί διαφορετικό σκοπό για κάθε έργο. Από τη μία πλευρά, οι προγραμματιστές ιστού ξοδεύουν πολύ χρόνο για να γράψουν τα φύλλα στυλ. Δεν υπάρχει τρόπος να κρυπτογραφήσετε αυτόν τον τύπο δεδομένων απλού κειμένου και να τον αποκρύψετε από το να κοιτάζετε τα μάτια σας. Εάν προσπαθείτε να κρατήσετε άλλους από την κατάχρηση κατάφωρα τον κώδικα σας, το καλύτερο που μπορείτε να κάνετε είναι να γεμίσετε τα στυλ και να αφαιρέσετε όλα τα διαλείμματα / διαστήματα.
Αυτή η διαδικασία μπορεί να επισημανθεί ως μικρογραφία ο κωδικός σου. Γενικά, οι προγραμματιστές θα γράψουν το CSS σε κανονική μορφή και στη συνέχεια θα αφαιρέσουν όλα τα κενά πριν μεταφορτωθούν στον διακομιστή ιστού. Στη συνέχεια, έχετε ένα τοπικό αντίγραφο για να επεξεργαστείτε γρήγορα, παρέχοντας επίσης μια μικρότερη έκδοση στο ζωντανό έργο. Αυτή η μέθοδος μπορεί προφανώς να είναι χρήσιμη για τη μείωση των φορτίων σελίδας μαζί με τη διατήρηση των κλοπών κώδικα στον κόλπο.
Ο σύνδεσμος που δημοσίευσα παραπάνω που οδηγεί στο Minify CSS έχει κάποιο καταπληκτικό υλικό ανάγνωσης για το θέμα. Ο ιστότοπος παρέχει επίσης ένα εργαλείο που βασίζεται σε πρόγραμμα περιήγησης για την κατάργηση αυτού του κεντρικού χώρου και των βασικών επιστροφών από τον κωδικό σας. Ο συμπιεστής CSS είναι μια άλλη επιλογή που αθλείται από μια απλή διεπαφή που τρέχει απευθείας στο πρόγραμμα περιήγησης ιστού σας. Έχω ακούσει επίσης καλά πράγματα για το Clean CSS, αν και δεν έχω χρησιμοποιήσει ποτέ το app μου.
σχετικοί σύνδεσμοι
Για να σας κρατήσω πιέζοντας προς τα εμπρός έχω δώσει έξι χρήσιμους συνδέσμους από τον ιστό. Αυτά περιλαμβάνουν όχι μόνο συντομογραφία αλλά χρήσιμους οδηγούς και tutorials για την πρόσβαση κατά την άσκηση αυτού του νέου σύντομου κώδικα CSS.
- Οδηγός αρχαρίων για το CSS3
- Οδηγός στέγασης CSS
- Χρησιμοποιείτε σωστά το CSS3?
- Τα περιεχόμενα του CSS και το διάγραμμα συμβατότητας του προγράμματος περιήγησης
- CSS3 + Προοδευτική Ενίσχυση = Έξυπνο σχέδιο
- Πλήρης ευρετήριο ιδιοτήτων CSS / CSS3
συμπέρασμα
Χρειάζεται πολλή αφοσίωση και πρακτική γραφή CSS κώδικα για να χτίσει ένα συγκεκριμένο πρόγραμμα που μπορείτε να ακολουθήσετε για κάθε έργο. Οι περισσότεροι σχεδιαστές ιστοσελίδων είναι στην ευχάριστη θέση να πάρουν νέα έργα και ιδέες, οπότε σίγουρα θα βρείτε τον χρόνο για να εξασκήσετε αυτές τις χρήσιμες συμβουλές για την κωδικοποίηση. Δοκιμάστε να αντιγράψετε ένα μικρό φύλλο αναφοράς για τη δική σας ευκολία σε περίπτωση που δεν μπορείτε να βρείτε τυχόν εξαίρετα φύλλα ή ακόμα χειρότερα χάνετε σύνδεση στο Internet!
Γνωρίζετε άλλες χρήσιμες ιδιότητες ή συντομεύσεις CSS3; Θα θέλαμε να ακούσουμε τις σκέψεις και τις ιδέες σας στα σχόλια της συζήτησης. Οι προγραμματιστές του διαδικτύου πιέζουν για περισσότερη τυποποίηση στο W3C και είναι σαφές ότι η μετάβαση έχει γίνει ευκολότερη. Το CSS3 προσφέρει φανταστικά οφέλη και εάν μπορείτε να αποκτήσετε master κωδικό στενογραφίας, αυτό θα κρατήσει τα μεγέθη του αρχείου σας χαμηλά και θα αποτρέψει τα copycats από την κλοπή του κώδικα.
