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

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

Γράψτε ένα απόσπασμα του CSS που θα εμφανίσει μια παράγραφο σε μπλε χρώμα σε παλαιότερα προγράμματα περιήγησης, κόκκινο σε νεότερα προγράμματα περιήγησης, σε πράσινο και μαύρο IE6 σε IE7

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

Re-Ποδηλασία είναι Buzzword και στην ανάπτυξη Web δεν σημαίνει ότι δεν υπάρχουν διαφορετικές. Είναι εξοικονομεί ενέργεια, από την άποψη της προσπάθειας!

Πάνω από χρόνια γράφοντας CSS και HTML από τη δημιουργία σχεδίων, έχω ακολουθήσει μερικές από τις καλύτερες πρακτικές, για την επιδίωξη των εξοικονομώντας χρόνο και ενέργεια σε αυτό που συνήθως ως όρος «επανεφεύρεση του τροχού». Ξανά και ξανά, έχω τον εαυτό μου είπαν, ότι πρέπει να δημιουργήσει μερικά πρότυπα, μερικά πρότυπα επαναχρησιμοποιήσιμα CSS ότι θα χρησιμοποιήσετε ΑΠΟ ΤΗ ΣΥΣΚΕΥΑΣΙΑ στο μέλλον τη δουλειά μου. Αν και δεν είναι εντελώς, αλλά δεν είχα καταφέρει να επιτύχει ορισμένους από τους στόχους.

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

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

Κλειδιά ανακύκλωση των CSS:

Χρησιμοποιήστε συμβάσεις ονομασίας

Αυτό πρέπει να είναι ο πιο σημαντικός παράγοντας στη λήψη της CSS / HTML επαναχρησιμοποιήσιμα. Δίνοντας ονόματα συνεπείς με τα στοιχεία της σελίδας επιτρέπει την επαναχρησιμοποίηση των συστατικών σελίδα και στυλ τους με ελάχιστη ή τροποποιήσεις. Σύμφωνα με αυτό το επιχείρημα, ακόμη και HTML5, σε μια σημαντική αλλαγή για την αλλαγή τους προκατόχους του, είναι να εισαγάγει κάποια συγκεκριμένα διαρθρωτικά ετικέτες. <article>, <section>, <header>, <aside>, και <nav> [ Τι θα φέρει το HTML5; ]. Ακόμη και με την HTML 4 (ή κάτω), είναι καλύτερα να αναφέρουμε πρότυπο ενότητες της σελίδας σας consistanly όπως στο παρακάτω απλό παράδειγμα ...

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

  <div id="container">
    <div id="header"> ... </ p>
    <div id="nav"> ... </ p>
    <div id="sidebar"> ... </ p>
    <div id="footer"> ... </ p>
   </ Span> 

Επαναφορά προεπιλεγμένων στυλ (CSS Επαναφέρει): Είτε θέλετε να χρησιμοποιήσετε ένα πλαίσιο ή γράψε τη δική σου, θα πρέπει να παρέχουν CSS Επαναφέρει [ Τι είναι CSS Επαναφέρει; ], όπως τη μείωση ή την εξάλειψη της οπτικής μερικές φορές αντιφάσεις που εμφανίζονται μεταξύ των διαφόρων browsers. Με απλά λόγια ο μηχανισμός επαναφοράς CSS ορίζει το στυλ του στοιχείου HTML στο μηδέν ή μηδενικές τιμές, με αποτέλεσμα να παρακάμψετε τις προεπιλεγμένες τιμές πρόγραμμα περιήγησης μπορεί να δημιουργεί. Αυτό παρέχει μια καθαρή πλάκα για να ρυθμίσετε τις ιδιότητες αυτών των στοιχείων άκυρη κάθε User-Agent προεπιλογών [ CSS2.1 προεπιλογών χρήστη Φύλλο στυλ Agent ]. Όλα τα πλαίσια CSS χρειάζεται επαναφορά του μηχανισμού. Αν γράφετε το δικό σας Επαναφέρει CSS, μια λέξη της προσοχής είναι ότι, αν τύχει να ξεχάσετε να επαναφέρετε μια βασική ιδιότητα, θα μπορούσε να οδηγήσει σε cross-browser ζητήματα, που είναι πολύ δύσκολο για τον εντοπισμό σφαλμάτων. Θυμηθείτε, Κρατήστε ένα αντίγραφο των επαναφορά στυλ και απόθεση τους σε κάθε νέο έργο που δημιουργείτε.

  σώμα, div, dl, dt, dd, ul, ol, Li,
  H1, H2, H3, H4, H5, H6,
  προ, τη μορφή, πεδίων, των εισροών, επιλέξτε, textarea,
  p, blockquote, τραπέζι, ου, TD
  {
    σύνορα: 0px?
    margin: 0?
    padding: 0?
  } 

Ορισμός προεπιλογών (Στυλ Baseline) Στοιχεία για:

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

Οι περισσότεροι πλαισίων CSS, πάντα εισάγει ορισμένες νέες προεπιλογές, εκτός από την επαναφορά στυλ προεπιλεγμένο πρόγραμμα περιήγησης.
Αυτές οι προεπιλογές είναι άκυρες των User-Agent προεπιλογών (απογυμνωθεί μακριά από το Reset CSS), αυτά θα είναι συνεπής σε όλους τους φυλλομετρητές.

Θυμηθείτε, τα στυλ εκκίνησης χρησιμοποιούνται για να ορίσετε στυλ που πρόκειται να χρησιμοποιηθούν για το σχεδιασμό επίπεδο. π.χ..

  html {font-size: 77%? font-family: Arial, sans-serif?}
 ισχυρή, H1, H2, H3, H4, H5, H6 {font-weight: bold?} 

Περίληψη Στυλ για την Κοινή HTML Εξαρτήματα και κοινές κατατάξεις:

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

Εκτός από τον καθορισμό επαναχρησιμοποιήσιμων ορισμούς στυλ για τους κοινούς HTML Εξαρτήματα, θα μπορούσαμε να αφηρημένες κατηγορίες στυλ που σχετίζονται με την τυπογραφία, το χρώμα ή ακόμα και τη διάταξη. Εγώ τείνουν να χρησιμοποιούν κοινά μαθήματα ... όπως Clearfix, Font08, FontGrey, AlignL, DisplayB κλπ.

  input μορφή {border: 0px? υπόβαθρο: # ffffff? padding: 0px 10px? _padding: 0px 0px? ύψος: 26px? χρώμα: # 000000? γραμμή-ύψος: 30px? font-size: 1.1em?}
 textarea μορφή {border: 0px? υπόβαθρο: # ffffff? χρώμα: # 000000? font-size: 0,9 em? γραμμή-ύψος: 1.5em? υπερχείλιση: ορατός?}
 . Fbold {font-weight: τολμηρό? Χρώμα: # cccccc?}
 . Fgrey {color: # 666666?}
 . Flightgrey {color: # bbbbbb?}
 . Clearfix {σαφής: τόσο?}
 . Διαχωριστικό {σύνορα-top: 1px solid # 647B06? Σύνορα-κάτω: 1px solid # 9CC00A? Ύψος: 0px?}
 . Displayb {display: block?}. Displayn {display: none?}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: δικαίωμα?}. Floatl {float: αριστερά?} 

Διορθώσεις στην κοινή ιδιορρυθμίες φυλλομετρητή

Διάφορα προγράμματα περιήγησης εφαρμόσουν κώδικα CSS και παρέχει διαφορετικό επίπεδο υποστήριξης για τις προδιαγραφές CSS. Το αποτέλεσμα αυτό .... "Παραξενιές Browser", ότι είμαστε προγραμματιστές έφυγαν για την αντιμετώπιση της. Ειδικά, IE6 στοιχειώνει πλέον CSS προγραμματιστές με μια προθεσμία για να ανταποκριθεί. Τα καλά νέα είναι ότι η εμπειρία έχει συγκεντρώσει το δυνατόν ΕΠΑΝΑΧΡΗΣΙΜΟΠΟΙΗΣΙΜΗ διορθώσεις σε αυτά τα θέματα (όπως αποκαλείται συχνά CSS αμυχές ).

Θυμηθείτε, Κρατήστε αυτές τις αμυχές / διορθώσεις πρακτικό

  / * Το ζουμ εξής: 1 κανόνας είναι ειδικά για τον IE6 + IE7.  * /
    * Html. Clearfix,
    *:. Πρώτο παιδί + html {clearfix
           ζουμ: 1?
      } 

Κρατήστε Εξευγενισμός CSS σας

• Η συνήθεια της ανακύκλωσης δεν θα έρχονται σε σας με την ημέρα. Πρέπει να αναπτυχθεί. Έτσι σχεδιάζουν σας Re-Ποδηλασία. Έχετε αυτό στο μυαλό σας ότι θα μπορούσε αφηρημένη προεπιλογές στυλ, ορισμοί τυπογραφία, σχεδιαγράμματα, HTML Στυλ Στοιχείων κ.λπ. Προσπαθήστε να σκεφτούμε το μέλλον.
• Επίσης κοιτάζουμε πίσω στο παρελθόν τα έργα σας, θα βοηθήσει στον εντοπισμό στυλ ότι έχετε την τάση να χρησιμοποιείτε συχνά σε όλη την porjects. Περίληψη αυτό.
• Αφαιρέστε τυχόν αχρησιμοποίητο στυλ. Η πρακτική αυτή θα κρατήσει πλαίσιο CSS σας από ένα κοινό σύμπτωμα που ονομάζεται «Φούσκωμα» -
• Αφαιρέστε επαναλαμβανόμενες μορφές.
• Φτιάξτε ένα σύνολο στυλ που είναι αρκετά ευέλικτο ώστε να το μεταφέρουν σε όλα τα έργα.

Μια ματιά στα πλαίσια CSS

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

• 960 ΔΕΣΜΗΕ : Το 960 ΔΕΣΜΗΕ είναι μια προσπάθεια για τον εξορθολογισμό web ανάπτυξη της ροής εργασίας με την παροχή που χρησιμοποιούνται συνήθως διαστάσεις, βασίζεται σε πλάτος 960 pixel. Υπάρχουν τρεις παραλλαγές: 12, 16 και 24 στήλες, οι οποίες μπορούν να χρησιμοποιηθούν χωριστά ή σε συνδυασμό. Η σκέψη ότι τίποτα δεν μπορείτε να δημιουργήσετε ένα για το δικό σας αρκετά εύκολα, το πλαίσιο προβλέπει πρότυπα πλέγμα για εκτύπωση σε μορφή PDF, το οποίο μπορεί κανείς να χρησιμοποιήσει για να σκίτσο designs.Bet σελίδα σας, αυτό θα κάνει μια επαγγελματική εντύπωση, αν φέρετε μερικά φύλλα όταν πηγαίνετε σε έναν πελάτη για τη συλλογή UI απαιτήσεις. Παρέχει επίσης βασικές πρότυπα πλέγμα για γνωστά σχεδιαστικά προγράμματα όπως το Fireworks, Flash, InDesign, Illustrator, Photoshop, το Visio, κ.λπ. παρέχοντας μια "μίζα για δέκα" για να ξεκινήσει το έργο το σχέδιό σας.
• Σχεδιάγραμμα : σχεδιάγραμμα παρέχει ευδιάκριτα ταξινομούνται τα αρχεία CSS για Επαναφέρει, πλέγματα, έντυπα, εκτύπωση, τυπογραφία, για Plug-κουμπιά, καρτέλες και ξωτικά κλπ. Επίσης παρέχει υποστήριξη για το IE ως ξεχωριστό περιλαμβάνουν.
• SenCSs : Σε αντίθεση με τους δύο παραπάνω, SenCSs (προφέρεται Sense), δεν έχει ορισμούς για CSS διάταξης. Κάνει περιλαμβάνουν γραμματοσειρές, μαξιλαράκια, τα περιθώρια, πίνακες, λίστες, κεφαλίδες, Η Eτικέτα Blockquote, φόρμες και άλλα.
• BlueTrip : αρχική απαίτηση του στη φήμη ήταν ότι, ήταν ένας συνδυασμός από τα καλύτερα χαρακτηριστικά γνωρίσματα που παρέχονται από άλλα πλαίσια, όπως άλλοι μπλε εκτύπωσης, ταξιδιού oli ... απ 'όπου παίρνει το όνομά του. Το χαρακτηριστικό της περιλαμβάνει 24-στήλη πλέγματος, στυλ τυπογραφίας, στυλ ORM, εκτύπωσης, κουμπιά κλπ.
• YUI πλέγματα : Έφερε σε σας από το δίκτυο προγραμματιστών Yahooo, υποστηρίζει υγρό πλάτους (100%) σχεδιαγράμματα καθώς και προκαθορισμένο σταθερό πλάτος σε διατάξεις 750px, 950px, και 974px, και η δυνατότητα εύκολης προσαρμογής σε οποιοδήποτε αριθμό. Όπως μπορείτε να δείτε, του μόνο τα τεχνικά Εξαρτήματα διάταξη. YUI παρείχε επίσης HTML / CSS σύνολα για άλλα στοιχεία σελίδας
• YAML (Yet Another Multicolumn Διάταξη)
• Emastic

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

CSS συμπλήρωσε 10 χρόνια ύπαρξης του τρέχοντος έτους! Εκείνοι που ήταν γύρω για μια στιγμή, κερδίζοντας το ψωμί τους (ή όχι) με χρήση CSS, τότε ίσως να γνωρίζει πώς έχουν πείνα για μια καλή επιλογή των γραμματοσειρών. Ακόμη και με την έλλειψη των γραμματοσειρών σχεδιαστές όπως αυτές στο css Zen Garden έχουν κάνει χρήση των CSS εικόνες φόντου για την αντικατάσταση γραμματοσειρών κατά την άσκηση του κάνει τη δικαιοσύνη για τα σχέδιά τους. Έχουμε επίσης προσπαθήσει Flash / JavaScript ® αμυχές να επιτύχει τους στόχους του σχεδιασμού μας. Με κανένα τρόπο αυτός είναι ένας λανθασμένος τρόπος για να πάρετε τις γραμματοσειρές που επιθυμούμε σε σχέδια ιστοσελίδα μας, αλλά σίγουρα, δεν είναι το πιο επιθυμητό τρόπο. και το πέρασμα των ετών σχεδιαστής ιστοσελίδων, όπως εγώ, έχουν πλήρως στηρίχθηκε σε δέκα ή έτσι γραμματοσειρές για τα σχέδιά τους.

Οι πρόσφατες εξελίξεις στο Web Standards και μορφή της γραμματοσειράς να είναι δυνατόν να καταστήσουν το κείμενο σε μορφή HTML γραμματοσειρές, εκτός από τα ίδια παλιά προεπιλεγμένες γραμματοσειρές. Έρχεται στο "@ fontface" decleration CSS.

@ Fontface provids μια λύση για τη σύνδεση με το πραγματικό αρχείο γραμματοσειράς και να ανακτούν από το web. Χρησιμοποιώντας @ fontface, οι σχεδιαστές μπορούν να χρησιμοποιήσουν τις γραμματοσειρές χωρίς να χρειάζεται να παγώσει το κείμενο ως εικόνες φόντου. Η εφαρμογή είναι πολύ απλή, όπως φαίνεται παρακάτω, αλλά όπως όλα τα καλά πράγματα έχουν ένα CON μέρος σε αυτό, όλοι οι browsers δεν υποστηρίζουν μια ενιαία "γραμματοσειρά". Εάν σκοπεύετε να χρησιμοποιήσετε @ fontface σε site με σταυρό που απαιτούν υποστήριξη του προγράμματος περιήγησης, τότε θα πρέπει να παρέχουν σε διάφορες πηγές font-τύπους του ίδιου.

1. TrueType - Μια μορφή σχεδιαστεί για να φαίνονται καλά στην οθόνη. Συνιστάται ιδιαίτερα για τα Windows browsers (Chrome).
2. OpenType (CFF) - Αυτό το σχήμα είναι το καλύτερο για την εργασία εκτύπωσης και δεν είναι πάντα φαίνονται καλά στα Windows.
3. ΕΟΤ - Θα πρέπει αυτήν τη μορφή, αν θέλετε να στοχεύσετε τον Internet Explorer. IE δεν θα χρησιμοποιήσετε οποιαδήποτε άλλη μορφή. ΕΟΤ για μας θα μπορούσε να θεωρηθεί «Lite», δεδομένου ότι δεν είναι συμπιεσμένο ούτε περιορίζεται σε τομέα.
4. SVG - Αυτό είναι ένα XML μορφή που υποστηρίζεται από ορισμένα προγράμματα περιήγησης όπως το iPhone.
5. WOFF - Αυτό το cross-browser, web-μόνο τη μορφή των γραμματοσειρών είναι ελαφρύ (γραμματοσειρά δεδομένα είναι συμπιεσμένα zip) και μπορούν να καταρτίζονται είτε με TrueType ή PostScript (CFF) περιγράφει. Είναι αυτή τη στιγμή υποστηρίζεται από τον Firefox 3.6 +.

Χρησιμοποιώντας @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular"?
 src: url ("CalligraphyFLF.eot»)?
 src: τοπική αυτοδιοίκηση («CalligraphyFLF»), οι τοπικές («CalligraphyFLF»), url («CalligraphyFLF.woff») μορφή («WOFF»), url («CalligraphyFLF.ttf») μορφή («TrueType»), url ("CalligraphyFLF . svg # CalligraphyFLF ») μορφή (SVG)?
 }
 @ Font-face {
   font-family: "γραμματοσειρά σας"?
   src: url ("γραμματοσειρές / font_filename.eot")?
   src: τοπική αυτοδιοίκηση («Εναλλακτική ονομασία"), τοπική ("Alternatename"),
     url ("γραμματοσειρές / font_filename.woff") μορφή ("WOFF"),
     url ("γραμματοσειρές / font_filename.otf") μορφή ("OpenType"),
     url ("γραμματοσειρές / font_filename.svg # font_filename") μορφή ("SVG")?
   }
 H2 {font-family: "γραμματοσειρά σας", στη Γεωργία, serif?} 

Όπως μπορείτε να δείτε από το παραπάνω παράδειγμα, να περιλαμβάνουν την επιλεγμένη γραμματοσειρά γραμματοσειράς, πρέπει να συνδεθούν με ένα σύνολο fonttypes για την ίδια γραμματοσειρά. Ως εκ τούτου, οι άνθρωποι αναφέρονται σε αυτό ως «κιτ γραμματοσειράς".
Υπάρχουν διαθέσιμα πακέτα γραμματοσειρών που ρητά επιτρέπει τη σύνδεση με την ιδιότητα CSS @ font-face δυνάμει της Άδειας Χρήσης Τελικού Χρήστη (EULA).

Χρήσιμες Πηγές WebFont:

• Γραμματοσειρές για ενσωμάτωση @ font-face σελίδα στο wiki http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Αυτός είναι ένας διάσημος σχεδιαστής γραμματοσειρών που έχει κάνει εκατοντάδες ενδιαφέρουσες γραμματοσειρές TrueType ελεύθερα διαθέσιμα για χρήση στο web. Γραμματοσειρές του είναι κομψό, διακοσμητικά, και παιχνιδιάρικο.
• Dieter Steffmann είναι μια άλλη μεγάλη σχεδιαστής γραμματοσειρών. Έχει, επίσης, έχει κάνει πολλές όμορφες γραμματοσειρές που είναι διαθέσιμες για οποιονδήποτε να το χρησιμοποιήσει.
• Κατάστημα Γραμματοσειρά : προσφέρει γραμματοσειρές που έχουν σχεδιαστεί ειδικά για χρήση ιστοσελίδων. Περισσότερα από 30 από τις πιο επιτυχημένες οικογένειες FontFont είναι τώρα διαθέσιμο ως FontFonts Web. FontShop έχει επίσης ένα λεπτομερές εγχειρίδιο WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Σκίουρος Γραμματοσειρά : Βιτρίνες όλες τις γραμματοσειρές που προσφέρει σκίουρος γραμματοσειράς για χρήση με ενσωμάτωση @ font-face CSS. Σκίουρος γραμματοσειράς προσφέρει μια εντυπωσιακή ποσότητα του τύπου, καθιστά νεκρός απλό να ξεχωρίσω μία, και επιδέξια προσφέρει "πακέτα" - η γραμματοσειρά της επιλογής σας, σε διάφορες μορφές, συσκευασμένα με επίδειξη HTML και CSS που χρησιμοποιεί πολύ ρεύμα @ font-face σύνταξη . Προσφέρουν επίσης έναν τρόπο για να φτιάξετε το δικό @ font-face κιτ σας . Εάν η γραμματοσειρά που θέλετε να χρησιμοποιήσετε έχει αδειοδοτηθεί κατάλληλα (αυτοί που έρχονται με τον υπολογιστή σας δεν είναι απαραίτητα καλά), η γεννήτρια παράγει ΕΟΤ, SVG, και hey! WOFF αρχεία.

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

Δήλωση Πρόβλημα:
I και έτσι μπορεί να πολλές από τις άλλες σοβαρές web developers να έχουν παρατηρήσει περισσότερα από ένα πολλές φορές, ότι όταν υπάρχει ένθετο επιπλέει στη διάταξη, με υπερίπτανται ορισμένες συνδέσεις (ετικέτες άγκυρα), το δοχείο που περιέχει φαίνεται να μετατοπίσει μερικά εικονοστοιχεία προς τα δεξιά . Έχω προσπαθήσει να το google λύσεις για το θέμα αυτό, αλλά έχουν βρει σχεδόν καμία λογική απάντηση στο γιατί και όταν συμβαίνει (που μπορεί να βοηθήσει να αποτρέψει αυτό το ζήτημα από το να συμβεί), ως εκ τούτου, δεν έχω βρει μια σαφή λύση στο πρόβλημα, είτε ...

Πιθανή Λύση:
Από την εμπειρία, έχω δει το 90% τοις εκατό των φορές, δηλαδή, ότι το θέμα αυτό καθορίζεται με την προσθήκη ενός ακινήτου ζουμ στον ορισμό του CSS της στη λανθασμένη συμπεριφορά δοχείο ...

 # {Somediv
       ζουμ: 1?
 }

και πάλι οι λόγοι είναι ασαφείς ... δοκιμάστε αυτό ...
Ορισμένα στοιχεία στην Ιρλανδία έχουν ένα "hasLayout" περιουσία, η οποία είναι "αλήθεια" από προεπιλογή. Πολλές συμπεριφορές οπτικής CSS? Για παράδειγμα, ένα άλφα φίλτρο λειτουργεί μόνο σε ένα στοιχείο που hasLayout. και το {Zoom: 1} φαίνεται να δίνει τα στοιχεία του ακινήτου στόχο hasLayout .... Χρήσιμες; Δεν σκέφτομαι έτσι ...

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

Χθες, μετά το θέμα που αντιμετώπισε με το CSS Επαναφέρει στο Google Chrome ... σκέφτηκα να σκάψει λίγο βαθύτερα στην περιοχή των Style Sheets User Agent ...
Βρέθηκαν αυτόν τον πίνακα σε προκαθορισμένες τιμές του CSS2.1 τα Style Sheets User Agent ... (για όσους δεν γνωρίζουν τι σημαίνει «Φύλλα Στυλ User Agent" είναι να ακολουθήσετε Ποια είναι τα Style Sheets User Agent (προδιαγραφές) .

Για τον πλήρη κατάλογο των CSS 2,1 Φύλλα Στυλ User Agent προεπιλογών κάντε κλικ εδώ

Χθες, όπως και κάθε άλλο «Ημέρα γουρουνιών Ground", δούλευα σε ορισμένες διαμορφώσεις CSS / tableless. Όλα πήγαιναν καλά στον IE 7, ύψους 3 και Chrome, εώς ξαφνικά, είδα κάποια σχετική επιτυχία-un περιθώρια δει μόνο στο Google Chrome. Αν και πολύ παράξενο και μεγάλο ποσοστό του πληθυσμού, ήταν κάποια νέα bug / θέμα που είχα συναντάμε, υπήρξε τελικά κάποια μπαχαρικό στο κοσμικό έργο μου. Σαντ (αλλά ωραίο) που πήρε καθοριστεί μέσα σε λίγα λεπτά του καθετήρα ...

Βασικά, αυτό έμοιαζε με το Google Chrome αγνοούνται CSS Επαναφέρει μου (περιθώριο: 0px). Είναι πραγματικά προκλήθηκε από το στυλ πράκτορα χρήστη (-webkit-padding-start: 40px). Έτσι, η λύση ήταν να επαναφέρετε αυτό το στυλ από τη padding: 0 απρεπώς τα στοιχεία.
Ένας καλός τρόπος για να αποφευχθεί αυτό το πρόβλημα από το να συμβεί σε οποιοδήποτε στοιχείο είναι η χρήση ενός παγκόσμιου Υπόλοιπο CSS ως εξής

* {Margin: 0? Padding: 0?}

Ποια είναι τα Style Sheets Πράκτορες Χρηστών (Προδιαγραφές);
Το ακόλουθο απόσπασμα έχει ληφθεί από http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , παρακάτω link για να διαβάσετε περισσότερα για τα Style Sheets User Agent

CSS 1 εισάγει την ιδέα, δηλώνοντας ότι κάθε Πράκτορα Χρήστη (UA, συχνά «πλοηγού» ή «πελάτη ίντερνετ) θα έχουν ένα φύλλο προεπιλεγμένο στυλ που παρουσιάζει έγγραφα σε ένα λογικό - αλλά αναμφισβήτητα εγκόσμια - τρόπο. CSS 2 αναφέρει ότι σύμφωνα πράκτορες χρήστη πρέπει να εφαρμόσετε ένα φύλλο στυλ προεπιλεγμένο (ή συμπεριφέρονται σαν να έκανε) και ότι η προεπιλογή φύλλο ενός πράκτορα χρήστη στυλ θα πρέπει να παρουσιάσει τα στοιχεία της γλώσσας εγγράφου με τρόπους που συνάδουν προς τις γενικές προσδοκίες παρουσίαση για τη γλώσσα του εγγράφου? CSS 3 είναι πιθανό να είναι το ίδιο μυαλό.

Δεδομένου ότι οι προδιαγραφές CSS αφεθεί στις υλοποιήσεις εάν θέλετε να χρησιμοποιήσετε ένα "πραγματικό" φύλλο στυλ για οθόνη προεπιλογή ή όχι, δεν είναι εκπληκτικό ότι δεν μπορείτε να βρείτε ένα φύλλο προεπιλεγμένο στυλ σε κάθε φάκελο εγκατάστασης του προγράμματος περιήγησης. Σε αντίθεση με τον Internet Explorer της Microsoft καθώς και Όπερα, για παράδειγμα (και όσο ξέρω), Gecko browsers όπως Firefox και Netscape Navigator (προσέξτε για "html.css"), αλλά και τον Konqueror καθιστά μάλλον απλό να κατανοήσει τους στυλ προεπιλογή.

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

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

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

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

Προβολή Demo | Download sourcefiles

Γιατί θέλω να το καταλάβετε αυτό? Humm ...!

Οι περισσότεροι συγγραφείς του CSS, θα συμφωνήσουν ότι το CSS ιδιοκτησία Clip είναι πιθανώς μια από τις πιο διαδεδομένες un ιδιότητες CSS. Ήταν τόσο αληθινό για μένα πάρα πολύ και ήταν πιο ευτυχής να το παραμελούν, μέχρι που άρχισε να τροποποιεί το Mootools ΔΥΟ Κουμπί (Pin) Component Slider (με Δείκτη Range) .

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

Καλά! πόσο δύσκολο μπορεί να είναι; Όχι πολύ καθόλου ... ΝΑΙ και του ΟΧΙ. Η σύνταξη να χρησιμοποιήσει το ακίνητο Κλιπ CSS είναι αρκετά όρθια θέση, αλλά η έννοια / usuage είναι λίγο croocked. Με μια μνήμη όπως η δική μου, κάθε φορά που κάθομαι να επαναλάβει στο Σενάριο Slider μου ... Έχω tokeep παραπέμποντας με τη χρήση αυτού του ακινήτου CLIP, να θυμηθώ τη λογική που έχω δημιουργήσει στο σενάριό μου .... Ως εκ τούτου! πιστεύεται ότι πένα προς τα κάτω, με την ελπίδα να θυμόμαστε ότι το μέλλον (αλλά και προς όφελος εκείνων που φαίνονται σε σύγχυση από την Ακινήτου Κλιπ CSS)

Τι CSS Κλιπ κάνει;

Clip είναι μέρος του οπτικού μονάδα εφέ του CSS 2.1. Με απλά λόγια, η δουλειά του είναι να τοποθετήσετε ένα ορατό παράθυρο πάνω από ένα αντικείμενο που ψαλιδίζεται, ως εκ τούτου, ψαλίδισμα εικόνες και δημιουργώντας μικρογραφίες χωρίς να χρειάζεται να δημιουργήσουν επιπλέον αρχεία (έχω ήδη θέσει αυτό το χαρακτηριστικό για την καλύτερη χρήση του στοιχείου Slider )

Χρησιμοποιώντας την ιδιότητα Κλιπ CSS, μπορείτε να δημιουργήσετε ένα απόκομμα με το σχήμα ορθ. Όπως και πολλές άλλες ιδιότητες CSS (όπως περιθώριο, padding κλπ), χρησιμοποιώντας RECT απαιτεί τέσσερις συντεταγμένες Επάνω, Δεξιά, Κάτω, Αριστερά (TRBL). Η croocked χαρακτήρα της ιδιοκτησίας αντικατοπτρίζει όταν ρίξετε μια πιο προσεκτική ματιά στο πώς κλιπ υπολογίζει την περιοχή αποκοπής, χρησιμοποιώντας αυτές τις τέσσερις συντεταγμένες (εγκέφαλος στέλνει σε μια κλήρωση για ένα διάστημα). Τώρα να σας μπερδέψει το κάτω μέρος ξεκινά από την κορυφή, και το δικαίωμα ξεκινά από την αριστερή. . Βλέπετε τι είπα; .... Ως εκ τούτου, αυτό το post ...

Αυτή η μικρή σύγχυση μπορεί εύκολα να εξαφανιστεί, με αυτή την οπτική επεξήγηση του CSS Κλιπ / RECT ιδιοκτησίας, όπως παρακάτω!

Απαιτήσεις CSS Κλιπ

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

Αρχικό Thumbnal / εικόνας	Απαιτήσεις για Clip Sqaure Thumbmail

CSS Αποτελέσματα Κλιπ

Προβολή Demo | Download sourcefiles

Πριν είχαμε να αντιμετωπίσουμε με CSS για τη δημιουργία διατάξεις σελίδα μας, ευθυγραμμίζοντας κάποιο περιεχόμενο μέσα σε ένα κελί πίνακα φαίνεται το παιχνίδι μόνο του παιδιού. Απλά ρυθμίστε το "ευθυγραμμίσει" ή "valign" κτήμα του πίνακα να έχουν την ευθυγράμμιση της επιλογής σας, κομμάτι κέικ!
Με CSS διατάξεις, αν και έχουμε "κάθετη-align" ιδιοκτησίας για τα στοιχεία, δεν φαίνεται να είναι τόσο απλή όσο την "ευθυγράμμιση" ή "valign" ιδιότητες. Για να γίνω πιο specifiic η "κάθετη ευθυγράμμιση," δεν φαίνεται ποτέ να λύσει κανένα από τα προβλήματά σας, ειδικά αν γράψω ένα κομμάτι της πολλαπλής CSS πλοηγός.

Χωρίς τη χρήση της HTML πίνακες, Το πρόβλημα της κεντραρίσματος στο αντικείμενο, είτε πρόκειται για μια εικόνα ή ένα κείμενο μέσα σε ένα τμήμα που περιέχει, έχει πιθανώς κάθε UI / CSS εφιάλτης προγραμματιστές σε κάποιο σημείο. Το πρόβλημα αυτό προεκτείνει περαιτέρω τις ανησυχίες σας για την ευθυγράμμιση, αν το αντικείμενο πρέπει να είναι δυναμική επικεντρώνεται στο χαρακτήρα, δηλαδή όταν το ύψος του είναι μεταβλητή (άγνωστο ύψος).

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

ΛΥΣΗ:
Σε browsers όπως Mozilla, Opera και Safari, Η παράξενη συμπεριφορά "κάθετη-align" ιδιοκτησία μπορεί να φέρει στα συγκαλά του, ρυθμίζοντας απλώς το "οθόνη" ιδιοκτησία της διαίρεσης να περιέχουν "πίνακα στοιχείων" (display: table-cell) .

Το πρόβλημα παραμένει με την οικογένειά του IE browser, ο οποίος, όμως δεν φαίνεται να κατανοούν τι πρέπει να με "πίνακα στοιχείων" ιδιοκτησίας και αδαείς ως έχουν, αγνοούν ακριβώς. Η λύση που δόθηκε συνέχεια, αν και απλή, λίγες διαφημίσεις πιο DOM στοιχεία σε μορφή HTML σας για να κάνετε τα πράγματα να συμβούν.

Η CSS και HTML μοιάζει με αυτό
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <BR/> Η θέα: 3456 </ p>
</ Span>
</ Span>

Το αποτέλεσμα μοιάζει με αυτό: -

δείτε το demo εδώ | Λήψη Αρχείων Πηγή (Κατεβασμένο 452 φορές)

TOP Ευθυγράμμιση CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <BR/> Η θέα: 1234 </ p>
</ Span>
</ Span>

Το αποτέλεσμα μοιάζει με αυτό: -

ΚΑΤΩ Ευθυγράμμιση CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <BR/> Η θέα: 1234 </ p>
</ Span>
</ Span>

Το αποτέλεσμα μοιάζει με αυτό: -

δείτε το demo εδώ | Κατεβάστε εδώ

Φαίνεται σαν αιώνες, από τότε που προσπαθούν να βρουν μια λογική λύση σε αυτό το πρόβλημα της ευθυγράμμισης. Αλλά τώρα με τη λύση αυτή, αισθάνομαι λίγο ειρήνη.

Με την ελπίδα ότι κάποια μέρα

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

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

PS: Και από τον τρόπο, αυτά είναι μικρογραφίες του μερικές φωτογραφίες που έχω επιλέξει ...

CSS για μη-IE browsers: καμία είδηση ​​της στο CSS προγραμματιστές που, CSS Selectors παιδιών, όπως το παρακάτω παράδειγμα, δεν φαίνεται να εργαστούν στον IE.

π.χ. div> διάστημα {} κάποια css, αυτό σημαίνει ότι "όταν ένα στοιχείο άνοιγμα είναι ένα παιδί (και όχι ένα εγγόνι ή μεγάλο μεγάλο παιδί κλπ) ενός στοιχείου διαίρεση".

Αλλά συνηθίζαμε CON αυτό προς όφελός μας. Ιστορικά, ο επιλογέας παιδί έχει χρησιμοποιηθεί για να κρύψει CSS εντολές από IE. Απλά με την τοποθέτηση html>body μπροστά από κάθε εντολή CSS IE θα την αγνοήσουμε:

html>body .foo { CSS commands go here ;}

Αυτό λειτουργεί, επειδή <body> είναι πάντα ένα παιδί του <html> - δεν μπορεί ποτέ να είναι φυσικά ένα εγγόνι ή μεγάλος-εγγονός του <html> .

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

html> /**/ body .foo { CSS commands go here ;}

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

• Προϋπόθεση Σχόλια: Για ΑΠ έχει μόνο-Μέρος Duex σας
• CSS σιδηροπρίονο: JavaScript, CSS, HTML μόνο για τον Firefox
• Για σας η ΑΠ Μόνο