Yahoo! User Interface Blog (YUIBlog)

CSS τεχνάσματα των συνόρων με Κατέρρευσε Κουτιά

8 Μαρτίου του 2011 στις 15:23 από τον Thierry Koblentz | Σε CSS 101 , Σχεδιασμός , Ανάπτυξη | 8 Σχόλια

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

Bi-το χρώμα του φόντου

Το παράδειγμα αυτό δεν περιλαμβάνει IE 7.6 λύσεις (ελέγξτε τον πηγαίο κώδικα αυτής της σελίδας demo για IE διορθώσεις).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Dots και σωλήνες μεταξύ των στοιχείων λίστας

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

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Αριστερά και δεξιά προς τα τρίγωνα

Το παράδειγμα αυτό δεν περιλαμβάνει IE 7.6 λύσεις (ελέγξτε τον πηγαίο κώδικα αυτής της σελίδας demo για IE διορθώσεις).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 και τη διαφάνεια των συνόρων

IE 6 δεν υποστηρίζει την λέξη-κλειδί " transparent "για το χρώμα του περιγράμματος. Όταν χρησιμοποιείτε αυτήν την τιμή, IE 6 ισοπαλίες ένα μαύρο πλαίσιο.

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

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

Το font-size δήλωση είναι μια άλλη λύση για IE 6. Είναι για να βεβαιωθείτε ότι αυτό το πρόγραμμα περιήγησης δεν αυξάνει το ύψος του κουτιού.

Σταματήστε τα πιεστήρια έμαθα ακριβώς ένα νέο τέχνασμα (ευχαριστώ Chungho Fang)!:

Η μαγεία [να υπάρξει διαφάνεια στα σύνορα σε IE] είναι να «σύνορα-στυλ», είτε διακεκομμένες ή διακεκομμένη

---

Αυτό είναι! Αυτό είναι απλά ένας ακόμη τρόπος να χρησιμοποιήσετε τα σύνορα για να επιτύχουν την εικόνα-λιγότερο σχεδιασμό.

Περαιτέρω ανάγνωση

• Μια μελέτη των κανονικών πολυγώνων
• slantastic
• Σχηματιστούν κεκλιμένα σώματα

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!

Η θέση του ακινήτου CSS

14 Δεκεμβρίου του 2010 στις 7:35 π.μ. από τον Thierry Koblentz | Σε CSS 101 , Σχεδιασμός , Ανάπτυξη | 6 Σχόλια

Αυτή η ιδιότητα ισχύει για όλα τα στοιχεία. Έχει πέντε πιθανές τιμές:

• static
• relative
• absolute
• fixed
• inherit

θέση: στατική

Από το Τμήμα 9 Visual μοντέλο μορφοποίησης :

Το κιβώτιο είναι ένα φυσιολογικό κουτί, που ορίζονται σύμφωνα με την κανονική ροή . Το top , right , bottom και left ιδιότητες δεν ισχύουν.

Τα πράγματα για να παρατηρήσετε στην παρούσα επίδειξη

• Το δεύτερο κουτί δείχνει ακριβώς εκεί που θα ήταν χωρίς τη δήλωση θέσης.
• Η τιμή που δίνεται στην top δεν έχει εφαρμογή διότι σε μια «στατική» πλαίσιο, η υπολογιζόμενη αξία των αντισταθμιστικών οφελών κουτί είναι πάντα auto .

Τα πράγματα πρέπει να θυμάστε

• Αν η position ιδιοκτησίας ενός στοιχείου έχει την τιμή του static , το στοιχείο αυτό δεν είπε να τοποθετηθεί.
• Επειδή η static είναι η αρχική τιμή (η προεπιλεγμένη τιμή), δεν υπάρχει ανάγκη να συμπεριληφθούν τα εν styling σε ένα τμήμα της δήλωσης, εκτός αν είναι να αντικαταστήσετε μια διαφορετική αξία.

θέση: σχετική

Από το Τμήμα 9 Visual μοντέλο μορφοποίησης :

Η θέση του κουτιού υπολογίζεται σύμφωνα με την κανονική ροή (αυτό ονομάζεται η θέση στην κανονική ροή ). Στη συνέχεια, το πλαίσιο αυτό αντισταθμίζεται σε σχέση με την κανονική της θέση. Όταν μια θέση Β είναι σχετικά τοποθετηθεί, η θέση των ακόλουθων κουτί υπολογίζεται σαν Β δεν αντισταθμίστηκαν.

Τα πράγματα για να παρατηρήσετε στην παρούσα επίδειξη

• "Δύο" Box έχει μετακινηθεί προς τα κάτω κατά 300 pixels, αλλά το πλαίσιο «τρεις», καθώς και τις ακόλουθες παραγράφους έμεινε στη θέση του. Φαίνεται όπως το αν το κουτί άρθηκε από τη σελίδα, αφήνοντας το αποτύπωμα της πίσω. Αυτό συμβαίνει επειδή συμψηφισμό σχετικά τοποθετημένο κιβώτιο δεν θα διαταράξει τη ροή.
• Η σχετικά τοποθετημένο κιβώτιο επικαλύπτει τα ακόλουθα στοιχεία. Δείχνει μπροστά από τα άλλα πλαίσια.

Τα πράγματα πρέπει να θυμάστε

• Οι υπολογιζόμενες αξίες πάντα αριστερά = δεξιά και πάνω =-κάτω. Αν η direction του μπλοκ που περιέχει είναι ltr , η αξία των «αριστερά» νίκες και «δεξιά» γίνεται - «αριστερά». Αν direction της που περιέχουν μπλοκ είναι rtl , «δικαίωμα» νίκες και «αριστερά» δεν λαμβάνεται υπόψη. Οι συγγραφείς θα μπορούσαν να επωφεληθούν από το πώς λειτουργούν τα πράγματα με τη θέσπιση ίσης αξίας σε αντίθετη ιδιότητες.
• Σε αντίθεση με το «απόλυτο» μοντέλο, top , right , bottom και left ιδιότητες δεν μπορεί να τεντώσει ούτε συστέλλεται το κουτί (που δεν μπορεί να αλλάξει το μέγεθός του).

position: absolute

Από το Τμήμα 9 Visual μοντέλο μορφοποίησης :

Η θέση του κουτιού (και ενδεχομένως το μέγεθος) έχει καθοριστεί με την top , right , bottom και left ιδιότητες. Αυτές οι ιδιότητες προσδιορίζουν αντισταθμιστικά οφέλη σε σχέση με το πλαίσιο που περιέχει μπλοκ . Μια απόλυτα τοποθετημένο κιβώτιο έχει αφαιρεθεί από την κανονική ροή εξ ολοκλήρου (δεν έχει καμία επίδραση στην μετέπειτα αδέλφια) και τους αποδίδεται η θέση σε σχέση με ένα μπλοκ που περιέχει. Επίσης, αν και απολύτως τοποθετηθεί κουτιά έχουν τα περιθώρια, δεν καταρρέουν με οποιαδήποτε άλλα περιθώρια.

Τα πράγματα για να παρατηρήσετε στην παρούσα επίδειξη

• Επειδή δεν αντισταθμίζεται πλαίσιο έχει καθοριστεί, το πλαίσιο «δύο» δεν μετακινούνται από την αρχική του θέση, αλλά αν είχαμε χρησιμοποιήσει top:0;left:0; για παράδειγμα, ότι η θέση θα ήταν στην πάνω αριστερή γωνία της θύρας προβολής .
• Διάταξη σοφός, είναι σαν «δύο» κουτί είχε στυλ με το display:none . Το κουτί έχει αφαιρεθεί από τη ροή.
• Με το «δύο» έξω κουτί της ροής, «τρεις» κουτί έχει μετακινηθεί προς τα επάνω κατά κουτί «ένα» (οι παράγραφοι έχουν ακολουθήσει).
• Όπως όλα τα στοιχεία που αφαιρούνται από το «δύο» τη ροή, το κουτί έχει οριζόντια συρρικνούμενη μεμβράνη.

Τα πράγματα πρέπει να θυμάστε

• Για κάθε θέση «απόλυτη» ή «σταθερό» στοιχείο της υπολογιζόμενης αξίας για την display είναι block .
• Για κάθε θέση «απόλυτη» ή «σταθερό» στοιχείο της υπολογιζόμενης αξίας για float είναι none .
• Α 'που περιέχει μπλοκ »είναι ένα πλαίσιο που καθορίζει ένα πλαίσιο τοποθέτησης. Έχει διαπιστωθεί από τον πλησιέστερο πρόγονο με μια «θέση» του «απόλυτου», «σε σχέση» ή «σταθερό». Αυτό σημαίνει ότι το πλαίσιο γονέας δεν μπορεί να περιέχει το μπλοκ .
• Η προεπιλεγμένη θέση ενός απόλυτα τοποθετημένο κιβώτιο δεν είναι πάντα το ίδιο σαν να ήταν διακοσμημένα με κορυφαία: 0? Αριστερά: 0? (Σε ένα πλαίσιο LTR). Και αυτό για δύο λόγους:
  1. Το μπλοκ που περιέχει για ένα τοποθετημένο κιβώτιο έχει οριστεί από την πλησιέστερη θέση πρόγονος? Αν δεν υπάρχει, το δοχείο αναφοράς είναι το ριζικό στοιχείο. Το μπλοκ που περιέχει τον οποίο το στοιχείο ρίζας ζωή είναι ένα ορθογώνιο ονομάζεται η αρχική ομάδα που περιέχει. Για συνεχή μέσα, έχει τις διαστάσεις του viewport (ένα παράθυρο ή μια άλλη περιοχή προβολής στην οθόνη) και βρίσκεται σταθερά στο καταγωγή καμβά. Το παράδειγμα αυτό δείχνει το κουτί τοποθετημένο σε σχέση με το viewport (η προεπιλογή που περιέχει μπλοκ).
  2. Το στοιχείο είναι τοποθετημένο σε σχέση με το κουτί γεμίσει, όχι το πλαίσιο περιεχομένου ούτε το πλαίσιο των συνόρων της που περιέχει μπλοκ. Αυτό το νέο παράδειγμα δείχνει όταν η θέση "δύο" θα ήταν αν τα άκρα του κουτιού γεμίσει δεν αγγίζετε τα άκρα του κουτιού περιεχομένου (που περιέχει το μπλοκ που body ).
• Το μέγεθος του πλαισίου μπορεί να είναι το αποτέλεσμα της top , right , bottom και left αξίες των ακινήτων. Για παράδειγμα, μηδενισμός από όλες τις ιδιότητες που θα κάνει το τέντωμα πλαίσιο για να ταιριάζει με τις διαστάσεις του κουτιού που περιέχει το υλικό παραγεμίσματος του μπλοκ του. Δείτε μηδενισμό από όλα τα αντισταθμιστικά οφέλη κουτί (σημείωση: IE6 δεν τεντώσει το κουτί).
• Για να δημιουργήσετε μια επικάλυψη μάσκα που δεν κύλιση με το έγγραφο (όπως στο προηγούμενο παράδειγμα ), είτε τη χρήση fixed αντί της absolute ή το στυλ body με position:relative με το αρχικό μπλοκ τοποθέτηση είναι το viewport (styling html δεν θα εργάζονται σε IE) . Δεδομένου ότι αυτό το demo επικάλυψη δείχνει.
• position:absolute προκαλεί haslayout .

Το πιο σημαντικό πράγμα που πρέπει να θυμάστε

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

θέση: σταθερό

Από το Τμήμα 9 Visual μοντέλο μορφοποίησης :

Σταθερή θέση για μία υποκατηγορία της απόλυτης θέσης. Η μόνη διαφορά είναι ότι για μια θέση σταθερή κουτί, που περιέχει το μπλοκ είναι εγκατεστημένος από το viewport . Για συνεχή μέσα , σταθερές θέσεις δεν κινούνται όταν το έγγραφο κύλιση. Από αυτή την άποψη, είναι παρόμοια με σταθερές εικόνες φόντου . Για σελιδοποιημένη μέσα μαζικής ενημέρωσης (όπου το περιεχόμενο του εγγράφου είναι χωρισμένη σε μία ή περισσότερες διακριτές σελίδες), τα κουτιά με σταθερές θέσεις που επαναλαμβάνονται σε κάθε σελίδα. Αυτό είναι χρήσιμο για την τοποθέτηση, για παράδειγμα, μια υπογραφή στο κάτω μέρος κάθε σελίδας. Περικόπτονται Κουτιά με σταθερή θέση που είναι μεγαλύτερη από την περιοχή της σελίδας. Μέρη του σταθερού πλαισίου θέση που δεν είναι ορατές στην αρχική περιέχει μπλοκ δεν θα εκτυπωθεί.

Τα πράγματα για να παρατηρήσετε το demo αυτό :

• Δεδομένου ότι η σταθερή θέση είναι μια υποκατηγορία της απόλυτης θέσης, ό, τι ίσχυε για «απόλυτη» ισχύει επίσης και για «σταθερό» (το στοιχείο συρρικνωθεί-αναδιπλώνεται, έχει αφαιρεθεί από τη ροή, κ.λπ.).
• Το κιβώτιο είναι τοποθετημένο σε σχέση με το viewport, δεν κύλισης με τη σελίδα.
• Σε IE 6, το πλαίσιο εμφανίζεται ως μια στατική θέση , αλλά υπάρχει ένα «αστείο» λύση γι 'αυτό.
• Κατά την εκτύπωση του εγγράφου, στη θέση «δύο» εμφανίζεται σε κάθε σελίδα.

Τα πράγματα πρέπει να θυμάστε:

• Η θέση του κουτιού υπολογίζεται σύμφωνα με την «απόλυτη» μοντέλο, αλλά, επιπλέον, το πλαίσιο είναι σταθερό σε σχέση με κάποια αναφορά. Στην περίπτωση των φορητών, προβολής, οθόνη, TTY, και τηλεόραση τύπους μέσων, το πλαίσιο είναι σταθερό σε σχέση με το viewport και δεν μετακινείται κατά την κύλιση.
• Το περιεχόμενο μπορεί να inaccessile σε χρήστες χωρίς προβλήματα όρασης, εάν μέρος του πλαισίου που είναι έξω από την περιοχή viewport.
• Στην περίπτωση των έντυπων μέσων τύπου, οι συγγραφείς μπορεί να θέλει να αποτρέψει ένα στοιχείο από την εμφάνιση σε κάθε εκτυπωμένη σελίδα. Ίσως με τη χρήση των μέσων ενημέρωσης @ κανόνα, όπως και σε:

    @ Έντυπα μέσα ενημέρωσης { 
     # Logo {θέση: στατική?}
   } 

• Όπως position:absolute , position:fixed θα προκαλέσει haslayout στον IE.

θέση: κληρονομούν

Εάν position:inherit προσδιορίζεται για μια δεδομένη θέση, τότε θα πάρει την ίδια αξία υπολογίζεται ως το ακίνητο για γονέα του κουτιού.

Σημειώστε ότι IE 6 και 7 δεν υποστηρίζουν αυτή τη λέξη-κλειδί, εκτός όταν χρησιμοποιείται με direction και visibility (βλ. Αξία Ακινήτου CSS κληρονομούν ).

Πράγματα που εξετάζουν

Αντισταθμίζει Box

Θα πρέπει να γνωρίζετε ότι για απολύτως και σταθερά τοποθετημένη κουτιά, τιμών που ορίζονται στο ποσοστό για top , right , bottom και left υπολογίζονται σύμφωνα με τις διαστάσεις του που περιέχει μπλοκ (η οποία δεν μπορεί να είναι το πλαίσιο γονέα).

«Θέση» και «ξεχειλίζουν»

Ένα κουτί στυλ με overflow:hidden θα κλιπ σχετικά τοποθετημένα στοιχεία (ένθετα κουτιά), αλλά δεν θα κρύψει πάντα απολύτως τοποθετημένα αυτά. Αυτό οφείλεται στο γεγονός ότι το πλαίσιο γονέας δεν είναι πάντα το μπλοκ που περιέχει (το πλησιέστερο πρόγονο με μια «θέση» του «απόλυτου», «σε σχέση» ή «σταθερές»).

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

Περιθώρια

Οι συγγραφείς μπορούν να χρησιμοποιήσουν τα περιθώρια σχετικά με τα στοιχεία, ανεξαρτήτως του καθεστώτος της θέσης τους.

Η περίπτωση του IE

Σε IE, «τοποθέτηση», ένα κουτί μπορεί να είναι ευλογία ή κατάρα:

• Σε IE6, position:relative (with haslayout) μπορεί να χρησιμοποιηθεί για να αποτρέψει ένα παράθυρο διακοσμημένο με αρνητικά περιθώρια κέρδους από που κόβονται από ένα δοχείο γονέα (δείτε πώς τοποθέτηση στο πλαίσιο διορθώνει αυτό το θέμα).
• Τοποθέτηση ένα στοιχείο που μπορεί να «διαταράξει» το δρόμο στοίβα κουτιών στον IE 6 και 7, καθώς αυτό μπορεί να δημιουργήσει ένα νέο πλαίσιο στοίβαγμα (δείτε μια δοκιμή ).

Στοίβαξης τάξη και στοίβαγμα επίπεδο

• Σύμφωνα με την ακολουθία στον πηγαίο κώδικα, τοποθετημένα κουτιά έρχονται μπροστά από άρματα και κουτιά στην κανονική ροή.
• Οι συγγραφείς μπορούν να καθορίζουν τα επίπεδα στοίβα μέσω της περιουσίας του «z-index» μόνο σε κουτιά τοποθετημένα.
• Σε IE6 και 7, το απλό γεγονός της τοποθέτησης ενός πλαισίου μπορούν να δημιουργήσουν ένα στοίβαγμα πλαίσιο (βλ. παραπάνω, « η περίπτωση του IE ").

Κινητές συσκευές

Διαβάστε το άρθρο του PPK, της [έκτης] αξία θέση , για να ανακαλύψει γιατί πάγκους πωλητών πρόγραμμα περιήγησης δεν μπορεί να στηρίξει πραγματικά position:fixed .

Περαιτέρω αναγνώσεις

• Visual μοντέλο μορφοποίησης
• Θέση (CSS ιδιοκτησίας)
• Η δήλωση θέση

Ένα "φάντασμα" αναλογία με DrLangbhani:

Ένα στοιχείο με τη σχετική θέση είναι πάντα αντισταθμίζεται σε σχέση με την κανονική του θέση είναι στη ροή. Με άλλα λόγια, μετατοπίζεται σε σχέση με την οποία θα ήταν υπό κανονικές συνθήκες, και η μετατόπιση αυτή δεν επηρεάζει τη διάταξη των στοιχείων γύρω από αυτό. Είναι σαν ένα φάντασμα που έχει αφήσει το σώμα του πίσω. Ένα σώμα που έχει πλάτος και το ύψος και επηρεάζει το περιβάλλον του, αλλά είναι αόρατη. Το φάντασμα κουτί είναι σε θέση να κινηθεί, αλλά εξακολουθεί να είναι συνδεδεμένο με το παλιό σώμα σε αυτή τη θέση της εξακολουθεί να μετράται από αυτό. Τώρα, ένα στοιχείο με απόλυτη θέση είναι ακόμη πιο εύκολη. Κανείς πλέον δεν επηρεάζει το περιβάλλον του σε όλα (είναι τραβηχτεί έξω από τη ροή διάταξης). Είναι πλέον ένα πραγματικό φάντασμα, χωρίς το σώμα μένει πίσω. Σε ό, τι αφορά τα στοιχεία αδελφό του είναι σαν να μην υπάρχει πλέον. Για να πάρει τη θέση της, να κοιτάξετε μέσα από κάθε ένα από τα στοιχεία της μητρικής της, μέχρι να βρείτε ένα είτε με τη θέση: συγγενής, [θέση: σταθερή,] ή θέση: απόλυτη. Το στοιχείο αυτό θα χρησιμεύσει ως σημείο αναφοράς. Μόνο αν δεν μπορείτε να βρείτε μια "θέση" στοιχείο θα είναι να αντισταθμιστεί από το έγγραφο.

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!

Γρήγορη Συμβουλή: Προσαρμογή της βρύσης Mobile Safari Χρώμα επισήμανσης

1 του Οκτωβρίου, 2010 στις 11:34 am από Ryan Grove | Σε Σχεδιασμός , Ανάπτυξη | 3 Σχόλια

Πάντα παρατηρήστε την ημι-διαφανές γκρίζο φόντο που εμφανίζεται μερικές φορές όταν πατήσετε πάνω σε κάτι στο Mobile Safari; Αυτή είναι η βρύση προεπιλεγμένο χρώμα τονίζουν, η οποία Mobile Safari εμφανίζεται όταν πατήσετε σε ένα στοιχείο με ένα χειριστή κλικ JavaScript.

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

Τα καλά νέα είναι ότι Mobile Safari υποστηρίζει μια επέκταση που ονομάζεται CSS -webkit-tap-highlight-color , το οποίο μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε το χρώμα του τονίζουν βρύση ή να αποκρύψετε εντελώς.

Η -webkit-tap-highlight-color ιδιοκτησία δέχεται καμία κατ 'αποκοπή αξία χρώμα CSS, αλλά θα θελήσετε πιθανώς να παρέχουν μια αξία RGBA με σκοπό τον έλεγχο της διαφάνειας άλφα. Απενεργοποιώντας το κυριώτερο βρύσης είναι τόσο απλή όσο τον καθορισμό της τιμής άλφα σε 0 , όπως:

 #container { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

Φωτιά μέχρι αγαπημένη σας συσκευή iOS και δείτε αυτή την απλή επίδειξη για να δει τι μια κατ 'εξουσιοδότηση κλικ μοιάζει με και χωρίς μια κορυφαία επιλογή της βρύσης. Για περισσότερες λεπτομέρειες σχετικά -webkit-tap-highlight-color και άλλες χρήσιμες Mobile Safari επεκτάσεις CSS, δείτε το Safari CSS αναφοράς .

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!

Εναλλακτικές Skins για Yui 3.1.0 Slider

6 Απριλίου 2010 στις 6:03 π.μ. από τον Jeff Conniff | Σε Σχεδιασμός , Ανάπτυξη | 1 σχόλιο

Αποφασίσαμε να λάβουν τα Yui 3 Slider δέρματα widget μια οπτική εγκοπή για Yui 3.1.0. Αυτοί ήταν οι στόχοι μας:

1. Βελτίωση της συνολικής οπτικής γεύση και 3-D εμφάνιση
2. Προσφορά ένα ευρύτερο φάσμα του αντίχειρα και των σιδηροδρομικών δέρματα
3. Παρέχουν δύο δέρματα σετ για να εξυπηρετήσει σκοτάδι καθώς και ελαφριά φόντα σελίδα
4. Παρέχει ένα πλήρες σύνολο αντίχειρες και σιδηροτροχιές για κάθετη όσο και οριζόντια χρήση
5. Κάντε το πιο εύκολο να αναμίξετε και να ταιριάξετε αντίχειρες με διαφορετικά στυλ σιδηροδρομικών
6. Παροχή Photoshop περιουσιακών στοιχείων για τους προγραμματιστές ενίσχυση τροποποίηση εικόνες ρυθμιστικό για να ταιριάζει με οποιοδήποτε χρώμα φόντου

Συγκρίνετε την Yui 2 δέρματα slider κινητό με αυτά Yui 3 κατωτέρω. Η νέα σειρά έχει μεγαλύτερη ποικιλία και θα πρέπει να εξυπηρετεί ένα ευρύ φάσμα των σελίδων και στυλ.

Yui 2 Skins Slider:

Yui 3 Skins Slider:

Εμείς δεν περιορίζουν τους αντίχειρες να ορθογώνια και 45 μοίρες. Αυτό δημιουργεί κάποια προβλήματα με anti-aliasing. Η Yui 2 αντίχειρες έχουν ενσωματωθεί σκιές στην εικόνα του αντίχειρα, έτσι ώστε να είναι ένα στερεό γκρίζο χρώμα. Έχουμε βελτιώσει αυτό κάνοντας ένα αντικείμενο σκιά που είναι ξεχωριστό από την εικόνα αντίχειρα. Η σκιά έχει opacity: 0.15 . Αυτό σημαίνει ότι μοιάζει φυσικό, όπως η σκιά πέφτει στο σιδηροδρομικό και τα σημάδια υποδιαίρεσης.

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

Widget Yui 3 είναι θεμέλιο έφτασε GA κατάσταση την περασμένη εβδομάδα με την κυκλοφορία του Yui 3.1.0 . Δεν έχουμε ακόμα μια πλήρη πλάκα των ιθαγενών widgets Yui 3, και δεν έχουμε ακόμη καθορίσει ένα σύνολο παγκόσμιων δέρματα. Ωστόσο, το έργο που κάναμε στην οπτική περιουσιακά στοιχεία για την beta Component Slider θα πρέπει να είναι πιο χρήσιμη σε σύντομο χρονικό διάστημα, και θα σας μεταφέρουν όλες αυτές τις εικαστικές επιλογές ως εναλλακτική θέματα ή θέματα παραδείγματα φορά την έναρξη Yui 3 είναι σε θέση .

Ρίξτε μια ματιά σε αυτά τα παραδείγματα κώδικα εργασίας της νέας ρυθμιστικά. Checkout το πίσω από τις σκηνές λεπτομερή λειτουργία των εικόνων του δέρματος και CSS.

Ελπίζουμε ότι αυτά τα νέα ρυθμιστικά θα είναι μια ωραία οπτική Εκτός από την τσάντα σας κόλπα.

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!

Τρία νέα σχεδιαστικά πρότυπα πλοήγησης

22 του Φεβρουαρίου 2010 στις 16:56 από τον Christian Crumlish | Σε Σχεδίαση | 5 Σχόλια

Κατά τη διάρκεια των προηγούμενων λίγων μηνών έχω διενέργησε έλεγχο των προτύπων στην Yahoo! 's εσωτερική βιβλιοθήκη πρότυπο σχέδιο, με ένα μάτι προς δημοσίευση, όπως πολλοί από αυτούς όσο το δυνατόν σε ανοικτή βιβλιοθήκη στο YDN . Γιατί; Λοιπόν, για ένα πράγμα, για να πάρετε περισσότερα μάτια πάνω τους, για τη συγκέντρωση περισσότερων σχολίων και να κρατήσει τη βελτίωση των προτύπων. Επίσης, δεδομένου ότι πολύ λίγα σχήματα στη βιβλιοθήκη περιέχει Yahoo!-συγκεκριμένες πληροφορίες, και μια εναλλακτική διαδικασία είναι τώρα σε θέση για την εξακρίβωση των απαιτήσεων συγκεκριμένα με το δίκτυο του Yahoo! και των συστατικών του brand, τη συλλογή πρότυπο σχέδιο μπορεί τώρα πιο εύκολα να επικεντρωθεί σε (σχετικά) οικουμενικές αρχές σχεδιασμού για εφαρμογές web.

Έχω ολοκληρώσει τον έλεγχο πριν από το τέλος του περασμένου έτους και αναμένεται να απελευθερώσει τα νέα πρότυπα σε παρτίδες κατά τη διάρκεια των επόμενων μηνών. Μερικά μοντέλα θα είναι ώριμη και να προσφέρει μια σταθερή βάση για το σχεδιασμό ιστοσελίδας. Λίγα θα δημοσιευθεί ως beta μοτίβα που μπορεί να υποστεί σημαντικές αλλαγές στις επόμενες ενημερώσεις με βάση τα σχόλια που έλαβε. Ανεξαρτήτως του καθεστώτος τους, ελπίζουμε ότι θα λάβετε μέρος και την αναθεώρηση και την ανατροφοδότηση σχετικά με την προϋπόθεση ότι η μοτίβα.

Η πρώτη παρτίδα των σχεδίων για να βγει από τον έλεγχο σχετίζεται με μπάρες πλοήγησης . Υπάρχουν τρία σχέδια μέχρι τώρα σε αυτόν τον όμιλο: Top Navigation , πλοήγησης αριστερά , και Progress Bar . Ένα εύλογο ερώτημα είναι αν πάνω και αριστερά nav μπαρ είναι ακόμα ο καλύτερος ή πιο πρόσφατη τρόπος για να πλοηγηθεί σε μια ιστοσελίδα και να βρουν το περιεχόμενο; Μπορούμε ακόμα να βρείτε πολλά παραδείγματα από αυτά πέρα ​​από τον Ιστό και σε χρήση στο Yahoo! έτσι για τώρα θα πω ναι, αλλά αξίζει να σκεφτόμαστε.

Όπου είναι δυνατό προσπαθώ να συνδέσει μοτίβα πίσω σε την Yui Βιβλιοθήκη και, ενδεχομένως, σε άλλους κώδικα και την εφαρμογή λύσεων. Yui έχει μεγάλη υποστήριξη για navbars και παραδείγματα μενού. Πιθανώς το καλύτερο μέρος για να ξεκινήσετε είναι το widget μενού .

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

Παρακαλούμε ελέγξτε έξω αυτά τα νέα πρότυπα και να μας πείτε τη γνώμη σας!

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!

iPhone στένσιλ Σχεδιασμός στη Βιβλιοθήκη Προτύπων

17η Δεκεμβρίου 2009 στις 2:11 pm από Christian Crumlish | Σε Σχεδίαση | 1 σχόλιο

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!

Τα αποτελέσματα της έρευνας Pattern Accordion

26 Οκτ 2009 στις 14:44 από τον Christian Crumlish | Σε Σχεδιασμός , Ανάπτυξη | Comments Off Λίγους μήνες πίσω μοιραστήκαμε τρέχουσες απόψεις μας για το «ακορντεόν» συνιστώσα πλοήγησης , και ζήτησε από την κοινότητα των web developers και designers που διαβάζουν αυτό το blog να αναλάβει έρευνα για να μας βοηθήσει να καθορίσουμε τις προεπιλογές, τις τρέχουσες πρακτικές, καθώς και άλλες κατευθυντήριες γραμμές για την ενσωμάτωση σε ένα μοτίβο Ακορντεόν και συμβάλλουν στην κατάρτιση ένα ακορντεόν Yui συνιστώσα. Είχα αρκετό καιρό να εξετάσει και να μελετήσει τα αποτελέσματα και ήθελα να τις μοιραστώ με την κοινότητα, όπως γράφουμε ένα "βήτα" έκδοση του προτύπου και ετοιμαστείτε να το μοιραστώ, έτσι χωρίς περαιτέρω αντίο, εδώ είναι τα αποτελέσματα . (σημειώστε ότι αυτή η έρευνα δεν πρέπει να θεωρούνται αυστηρά επιστημονικά) που απάντησαν ερωτηθέντες προσδιόρισαν οι ίδιοι με τους εξής τρόπους:

• Designer 21,4%
• Προγραμματιστής 32,1%
• Hybrid (οι δύο σχεδιαστής και προγραμματιστής) 42,3%
• Κανένα από τα Πάνω από 4,2%

Ορολογία Διακρίσεις συντριπτικές πλειοψηφίες σε όλους τους συμμετέχοντες συμφώνησαν ότι

• Ακορντεόν και Μενού Ακορντεόν σημαίνουν το ίδιο πράγμα (73%)
• Ακορντεόν και ελέγχου Tree είναι δύο διαφορετικά πράγματα (89%)

Πολλοί σχολιαστές περιγράφεται η διαφορά μεταξύ ακορντεόν και τα δέντρα προς αυτή την κατεύθυνση: "Έλεγχος Tree σημαίνει, γενικά, ένα βάθος της ιεραρχίας που δεν είναι γενικά παρούσα με ένα ακορντεόν." Μια μικρότερη πλειοψηφία είπε ότι Ακορντεόν και Πτυσσόμενες Panels αναφέρονται στο ίδιο πράγμα (60%) . Οι πλειοψηφίες ήταν σταθερά μεταξύ τους ρόλους. Παρουσίαση του ακορντεόν Μια ισχυρή πλειοψηφία (68%), δήλωσε ότι ακορντεόν μπορεί να είναι έτσι τοποθετημένες σε οριζόντια όσο και κάθετα (και στην πραγματικότητα το σχέδιο είναι καλά βεβαιώνεται στο διαδίκτυο). Οι άνθρωποι πρότειναν ότι οι ετικέτες σε οριζόντια ακορντεόν θα πρέπει να είναι γραμμένο καθέτως ή / και περιστρέφεται. Μια ακόμη μεγαλύτερη πλειοψηφία (72%) δήλωσε ότι ακορντεόν μπορεί να έχει μόνο δύο επίπεδα (αυτό ευθυγραμμίζεται με τη διάκριση μεταξύ ακορντεόν και δέντρα): Μια μικρή πλειοψηφία (53%) δήλωσε ότι ακορντεόν μπορεί να είναι ένθετα μέσα σε άλλα ακορντεόν. Οι γραπτές παρατηρήσεις που πρότεινε ότι η διατύπωση του ερωτήματος οδήγησε κάποιους να απαντήσει ότι είναι σίγουρα εφικτή, αλλά όχι κατ 'ανάγκη επιθυμητή, κάνοντας προτάσεις όπως, «Αν υδρορροών τους επαρκώς, αυτό θα ήταν δυνατό, αλλά σε γενικές γραμμές μια φοβερή ιδέα - κάτι σαν τη χρήση πάρα πολλές καρτέλες και να τους τυλίξετε σε πολλαπλές γραμμές. " Αυτό ήταν ένα από τα ερωτήματα που αυτο-περιγράφεται σχεδιαστές και προγραμματιστές έλαβαν αντιτιθέμενες πλευρές. 57% των Developers και Υβρίδια συμφώνησαν ότι ακορντεόν μπορεί να είναι ένθετες, ενώ το 64% των Σχεδιαστές, δήλωσε ότι δεν μπορεί να είναι. (Κανένα από τα Aboves σε αναλογία 50/50!) Αν έπρεπε να μαντέψω, θα έλεγα ότι οι προγραμματιστές (και υβρίδια), πιο στενά συνδεδεμένη με το πώς από το γιατί μπορεί να έχουν να έχουν εκφράσει περισσότερο ένα "θα μπορούσε να το κάνει ... »προοπτική, ενώ οι σχεδιαστές μπορούν να έχουν εκφράσει περισσότερο από ένα" ... αλλά δεν πρέπει να "άποψη. ακορντεόν Πώς πρέπει να συμπεριφέρονται Μια μικρή πλειοψηφία (54%) πιστεύει ότι ακορντεόν θα πρέπει να επιτρέψει για περισσότερο από ένα πάνελ να είναι ανοικτή σε φορά. Και οι δύο συμπεριφορές μπορούν να βρεθούν σε απευθείας σύνδεση, έτσι έχουμε την εντύπωση ότι αυτή η συμπεριφορά μπορεί να εξαρτώνται περισσότερο από τους περιορισμούς του χώρου του σχεδιασμού και το σκοπό του ακορντεόν από ό, τι σε έναν κανόνα κουβέρτα ένα τρόπο ή τον άλλο. Αυτή η ερώτηση επίσης διαχωρισμός κατά μήκος γραμμές ταυτότητα, αλλά με διφορούμενο τρόπο. Υβρίδια προτίμησε το ένα πάνελ-at-a-time κανόνα από ένα μικροσκοπικό πλειοψηφία, ενώ οι σχεδιαστές και προγραμματιστές και κανένα από τα Aboves συμφώνησε ότι πολλές ομάδες είναι εντάξει με ελαφρώς μεγαλύτερες πλειοψηφίες. Μια πολύ μεγαλύτερη πλειοψηφία (73%) πιστεύει ότι ένα ακορντεόν μπορεί να έχει μια τελείως κλειστή κατάσταση (δηλαδή, ότι δεν είναι απαραίτητο να υπάρχει πάντα ένας πίνακας ανοιχτό). Η μόνη ακραία τιμή είναι ότι η Καμία από τις Aboves έσπασε το 60% για τη θέση ότι πρέπει να υπάρχει πάντα ένας πίνακας ανοιχτό. Αρκετοί σχολιαστές, υποδηλώνουν ότι είναι μια καλή πρακτική να έχουμε έναν πίνακα ανοικτή από προεπιλογή, και για αυτόν τον πίνακα να είναι είτε το πρώτο, εκείνο που χρησιμοποιήθηκε πιο πρόσφατα. Μια άλλη μεγάλη πλειοψηφία (76%) πιστεύει ότι το συνολικό μέγεθος ένα ακορντεόν μπορεί να αλλάξει ανάλογα με τις ανάγκες, αντί να περιορίζονται σε μια συνεπή μέγεθος. (Φυσικά, υπάρχουν καταστάσεις, όπως η οθόνη του μια φορητή συσκευή, στην οποία μπορεί να είναι μια έγκυρη επιλογή ή ακόμα και ένα περιορισμό του σχεδιασμού που ένα ακορντεόν διατηρήσει μια συνεπή μέγεθος.) Μια πολύ μικρή πλειοψηφία (51%) πρότειναν ότι ακορντεόν θα πρέπει να ανοίξει με κλικ (σε αντίθεση με στο αιωρείται) και ένα σχεδόν τόσο μεγάλη μειονότητα (45%) δήλωσε ότι εξαρτάται. Είναι ενδιαφέρον, λιγότερο από το 4% ήταν πρόθυμοι να δηλώσουν το ακορντεόν θα πρέπει να ανοίξει σε αιώρηση κατά κανόνα. Γραπτά σχόλια σχετικά με αυτό το θέμα προσφέρεται άφθονο καλό τροφή για σκέψη, όπως:

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

Εξαρτάται από τη διαμόρφωση του κάθε ακορντεόν. Έβαλα αυτά τα παραδείγματα μαζί [ πολλαπλά , ανατροπής ], έτσι ώστε ο προγραμματιστής μπορεί να χρησιμοποιήσει πραγματικά την «καλύτερη εφαρμογή» για κάθε περίπτωση χρήσης. Επίσης, θα πρέπει να υπάρχει η δυνατότητα να χρησιμοποιούν ανατροπής με διαφορετικούς κανόνες: (ένα πιο ανοικτό) ή (στοιχεία που πρέπει να ανοιχθεί επί mouseover μόνο).

Για προηγμένες χρήσεις, ένα ακορντεόν θα πρέπει να ανοίξει σε αιωρούνται κατά τη διάρκεια του drag and drop λειτουργίες. Σε οποιαδήποτε άλλη περίσταση, δεν μπορείτε να εμπιστεύεστε ότι η αιώρηση είναι εκ προθέσεως.

Προσβασιμότητα Τέλος, ζητήσαμε μια ανοικτή ερώτηση για την αλιεία με τα γνωστά θέματα της προσβασιμότητας με ακορντεόν και πήρε πολλή μεγάλη απαντήσεις. (Για παράδειγμα, το θέμα μας, οι περισσότεροι άνθρωποι συμφωνούν ότι η χρήση ολόκληρη την ετικέτα clickable και όχι μόνο ένα μικρό εικονίδιο είναι σημαντικό.) Εδώ είναι ένα δείγμα των άλλων διορατικότητα σχετικά με την προσβασιμότητα με ακορντεόν:

I think it's safe to assume that an Accordion interaction is an advanced interaction. Lots of accessibility problems can arise.

1. Content is hidden behind panels so people may not find it.
2. Depending on the size of the clickable area or the trigger to open/close the panels there could be issues with the manual dexterity needed.

Accordions should open all panels if javascript is unavailable (though that may produce a “flicker” for those with javascript).

It depends on whether content in the hidden panels is present in the DOM or is retrieved upon opening the panel. If it is being retrieved, focus needs to be placed on the newly opened panel.

Well, I really believe the title should be clickable, specially if the content of the element will be loaded using AJAX (just like a tabview approach), but the reality is that sometimes the developer (should have)/(want) the control to customize that behavior. Here is the list of examples that I created for an accordion widget implementation based on YUI 2.x, it's probably one of the most used components from the bubbling YUI extension.

We've had a case where the 'label' of the accordion was a link to a full blog post, and so could not be accordion-clickable. In that case, we wrote an icon into the source with js to do the job. Provided the icon is sufficiently large and/or comes with an accesskey, I don't see a major difficulty…

Accordion controls server the purpose of fitting lots of content into less space. Since this is a visual concern, it would be fine for a screen reader to simply read all of the content and ignore the fact that it is displayed as an accordion visually. It is sufficient for an icon to be clickable to expand a panel. There could be a configuration option to allow the entire label to expand a panel, or it can be left up to the implementing developer to attach a listener to the label that calls a public “open” or “expand” function to add that functionality.

Just think of an accordion as a tabbed view. The entire panel label area should be clickable, but if it contains other controls (eg a “dismiss” or “close” button) I suggest only the label (text) be clickable, or at least the clikable area only expand up to the interactive controls (ie for a caption containing a button, the area above, below and “after” the button should be clickable).

Releasing the Draft Pattern One commenter questioned the artificial constraints of the survey (a fair cop, if you ask me):

I didn't like this survey. The questions were not flexible enough. As a designer/developer, I believe all interface elements need to be tailored to particular site or web application. Asking black and white questions does not leave room for the obvious differences between projects. Some projects need a hard and fast rule, while the same rule might be totally inappropriate for another application. For the most part, I could of answered every question with a “it depends” result.

Rest assured that the pattern will only gently recommend and the YUI code will be flexible and powerful. The survey wasn't designed to limit people's choices but rather to gather opinions and preferences, so even feedback about not having hard-and-fast rules is useful. We've published a beta version of the Accordion pattern in the Yahoo! Design Pattern Library. If you'd like to give further feedback on the pattern, in a free-form manner, please drop by or visit the related forum discussion.

Εύρεση συζητήσεις: Bloglines | Technorati

Μοιραστείτε και να επεκτείνουν: Σελιδοδείκτης με Del.icio.us | Digg it! | reddit!