Εκφράζοντας IT

Ένας άλλος γρήγορος Tut. Εδώ είναι κάτι απλό και ωραίο χρησιμοποιώντας τη δύναμη των CSS ... αλλά ήταν δύσκολο φανταζόμαστε (και σίγουρα δεν ήμουν εγώ) να αρχίσει με. Προσθέτοντας Dropshadow, μπορεί να είναι ενός κομματιού του κέικ για πολλούς από εμάς, χρησιμοποιώντας κάποια εργαλεία επεξεργασίας εικόνας όπως το Photoshop ANF Πυροτεχνήματα κλπ.
Ο λόγος για τον οποίο, επέλεξα για σκίαση χρησιμοποιώντας CSS είναι ότι, συνήθως, δημιουργώντας παράλληλα ένα σχέδιο σελίδα / html της αίτησης, οι απαιτήσεις κρατήσει επανάληψη. Αυτό που εννοώ είναι, σε μια υπάρχουσα ιστοσελίδα με πολλές εικόνες, όπως αυτές που εμφανίζουν freinds λίστα ή μια γκαλερί εικόνων, θα είναι δύσκολο να επανεπεξεργάζονται ολόκληρο το φορτίο των εικόνων που είχαν ήδη εκφορτωθεί για να προσθέσετε ή να αφαιρέσετε τις σκιές, για να θέμα.
Έτσι, εάν έχετε κάνει λίγο προς τα εμπρός σκέψης, δημιουργώντας παράλληλα τις HTMLs να προσθέσετε τα επιπλέον τμήματα ή συνήθως η κατάσταση είναι ότι έχετε μια λογική βρόχος παράγει αυτά τα εικονίδια / μικρογραφίες σε XSL, PHP. JAVA ή οποιοδήποτε άλλο προγραμματισμού / scripting γλώσσα, μπορείτε να προσθέσετε ανά πάσα στιγμή, τότε είναι ακριβώς το θέμα της εμφάνισης και της απόκρυψης αυτών των σκιών χρησιμοποιώντας την ιδιότητα Εμφάνιση CSS, σύμφωνα με τους πελάτες συνεχώς μεταβαλλόμενες απαιτήσεις μου ... Δεν εχετε κάνει αυτό το είδος της σκέψης προς τα εμπρός πριν από αυτή ... αλλά ahev ξεκίνησε τώρα!

Στο παρακάτω παράδειγμα, η αρχική εικόνα είναι ελεύθερη σκιά και οι dropshadows εφαρμόζονται, όπως απαιτείται! ΕΠΙΣΗΣ, έχω πάει μια μικρή επιπλέον, χρησιμοποιώντας τα κόλπα των προηγούμενων Τουτ μου (Well! αυτά ίσως είναι μικρότερη ποικιλία από σεμινάρια, έτσι ώστε να δικαιολογείται μόνο καλώντας τους "Τουτ" "α) για την χρήση CSS Ακινήτου κλιπ για να αναδείξουν μόνο

Αρχικό εικόνας

CSS Αποτελέσματα DropShadow

Προβολή Demo | Download sourcefiles

Βάλτε Stylesheets στο Top

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

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

Οι προδιαγραφές HTML W3 »αναφέρει επίσης ότι το CSS μου πρέπει να περιλαμβάνει στο τμήμα HEAD της σελίδας HTML. at the bottom of the page, so it's best not to use it. Επίσης, σημειώστε ότι, Σε IE @import συμπεριφέρεται το ίδιο με τη χρήση <link> στο κάτω μέρος της σελίδας, έτσι δεν είναι καλύτερο να το χρησιμοποιήσετε.

Αποφύγετε τη χρήση προγράμματος περιήγησης Ιδιαιτερότητες

Φίλτρα: Χρήση του φίλτρου αυξάνει την κατανάλωση μνήμης και εφαρμόζεται ανά στοιχείο, όχι ανά εικόνα, οπότε το πρόβλημα πολλαπλασιάζεται. Επίσης, τα φίλτρα IE ιδιοσκευασμάτων, ως εκ τούτου δεν θα λειτουργήσει όπως προβλέπεται σε άλλα προγράμματα περιήγησης. Αν θέλετε διαφάνεια ή το ντεγκραντέ φόντο, χρησιμοποιήστε 1Pixel με εικόνες.
Εκφράσεις: CSS εκφράσεις είναι ένα καλό χαρακτηριστικό γνώρισμα για να έχουν σε CSS, αλλά εξακολουθεί να είναι IE ιδιαίτερο χαρακτηριστικό. Επίσης, είναι σημαντικό να σημειωθεί ότι, αυτές οι εκφράσεις αξιολογούνται όταν η απόδοση της σελίδας και αλλαγή μεγέθους, κύλιση, ακόμα και όταν ο χρήστης μετακινεί το ποντίκι πάνω στη σελίδα. Περιττό να πούμε ότι αυτό θα μπορούσε να επηρεάσει την απόδοση της σελίδας σας. Ως εκ τούτου, με απλά λόγια, Αποφύγετε τη χρήση CSS εκφράσεις, εκτός εάν αισθάνεστε υπέρ της «ζυγίζει περισσότερα από τα μειονεκτήματά της»

Εξωτερικούς σας CSS

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

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

Πακέτο CSS αρχείου σας

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

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

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

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

Η CSS επαναφέρει ότι συνήθως τείνουν να χρησιμοποιούν μοιάζει με αυτό

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

OL, UL {
Λίστα στυλ: κανένας?
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%?
font-weight: normal?
}

Επαναφορά του μεγέθους της γραμματοσειράς πρόγραμμα περιήγησης
Επίσης, σημειώστε την επαναφορά που έχει εφαρμοστεί στον browser το μέγεθος της γραμματοσειράς στην ακόλουθη γραμμή ...

html {font-size: 76%;}

Η παραπάνω επαναφέρει CSS το μέγεθος της γραμματοσειράς πρόγραμμα περιήγησης στο 10 pixel, και αυτό καθιστά δυνατό να συνεργαστεί με σχετικά μεγέθη γραμματοσειράς (η οποία είναι κάθε σημαντική και από την τήρηση WAI prespective)
Για παράδειγμα, στο ακόλουθο ορισμό, μέγεθος γραμματοσειράς σε μια έκταση έχει οριστεί σε 10 pixel και ότι το paragarph έχει οριστεί σε 14 εικονοστοιχεία ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Π.χ..
Καθορισμός ιδιότητα CSS, όπως αυτό,

Περιθώριο: 5px 0?

πραγματικά σημαίνει,

περιθώριο: 0px 5px 5px 0px?

Η πρώτη ιδιότητα περιθώριο σημαίνει:

επάνω και κάτω περιθώριο = 5px | | αριστερό και δεξί περιθώριο = 0px

έτσι η «πλέον στενογραφία» θα ήταν

περιθώριο: 0px 5px 5px 0px? (Τ, R, B, L)

θα μπορούσατε να χρησιμοποιήσετε ακόμη και 3 τιμές

Περιθώριο: 0 5px 5px?

πράγμα που σημαίνει

= κορυφή 5px | | δεξιά και αριστερά = 0px | | πίσω = 5px

Ο Internet Explorer προσθέτει αυτόματα γεμίσει με κουμπιά σε φόρμες HTML.
Ο χώρος εκτείνεται ανάλογα με το μήκος του κειμένου του κουμπιού.

Η λύση είναι να προσθέσετε υπερχείλιση στο ύφος του .... δηλαδή

. Το κουμπί {
υπερχείλιση: ορατός?
padding-αριστερά! 10px σημαντικό?
padding-δεξιά! 10px σημαντικό?
... Κάθε άλλο στυλ για αυτό το κουμπί ...
}

Ή

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;