Χρησιμοποιώντας το "focus" στα Css

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από patriot » 28 Νοέμ 2005 13:26

Ένα ασυνήθιστο tutorial για το focus των Css!

Άλλο έψαχνα και άλλο βρήκα. Όταν όμως το βρήκα είπα να το βάλω εδώ γιατί είναι ένα κάπως σπάνιο κόλπο. Το κολπάκι αυτό είναι για αυτούς που δεν έχουν mouse (ποντίκι) (ή δεν θέλουν να το χρησιμοποιήσουν όπως συνήθως εγώ) και χρησιμοποιούν το πληκτρολόγιο για να "πεταχτούν" από το ένα link στο άλλο μέσω του tab.

Ξεκινάω!
Ας πούμε ότι έχουμε μερικά links:

Link1
Link2
Link3
Link4

Και ας πούμε ότι θέλουμε να πάμε από το Link1 στο Link2 χρησιμοποιώντας μόνο το πληκτρολόγιο. Σε moz (win) και ie (win) θα πατήσουμε το κουμπί "tab". Στην opera υπάρχει μια μικρή αλλαγή. Αντί για tab θα πατήσουμε το "Α". (Σημ: Με εξαίρεση της φόρμες που πατάμε κανονικά το tab)

Όποιο κουμπί και να πατήσουμε πάντως το θέμα είναι: ΠΩΣ θα καταλάβουμε ότι το link επιλέχθηκε τελικά ή όχι;; Ευτυχώς σε όλους τους browsers εμφανίζετε αυτόματα ένα περίβλημα γύρω το επιλεγμένο link για να ξεχωρίζει από τα άλλα.

Αυτό το περίβλημα αν το δεις από κοντά (κάτω από ένα μεγεθυντικό φακό ας πούμε) θα δεις ότι αποτελείται από μαύρες και άσπρες κουκίδες εναλλάξ (dotted) που σχηματίζουν ένα τετράγωνο τόσο μεγάλο όσο ήταν το link που επιλέξαμε. Και ακριβώς επειδή οι κουκίδες είναι εναλλάξ γι' αυτό στην κανονική του μορφή (όχι κάτω από τον μεγεθυντικό φακό) θα δείτε ότι φαίνεται κάπως ξεθωριασμένο. Και εδώ ακριβώς είναι το πρόβλημα: Τι γίνεται άμα υπάρχουν άνθρωποι που δεν είναι τόσοι τυχεροί όσο εμείς με την όραση τους; Καλά δεν θα ήταν να υπήρχε κάτι το ποιο εμφανές; Κάτι που να μην είναι ξεθωριασμένο;

Ευτυχώς το link έχει μερικά καλούδια που μας εξυπηρετούν. Τα: visited, hover, και active. Και η λογική λέει ότι ο τρανός ιππότης που θα έσωζε την κατάσταση θα ήταν η εντολή hover που σημαίνει ότι όταν βάζεις το mouse πάνω στο link αυτό αλλάζει αυτόματα χρώμα γραμμάτων, ή χρώμα φόντου (ή και τα δύο μαζί αν προτιμάτε) σε ότι χρώμα διαλέξατε εσείς όταν φτιάχνατε την όμορφη σελίδα σας, π.χ το κίτρινο ως φόντο και το μαύρο ως χρώμα γραμμάτων. Με το μαύρο χρώμα θα φαίνεται μπροστά η λέξη "Link1" και απο πίσω το φόντο με το κίτρινο χρώμα. Όμως εμείς είπαμε ότι ΔΕΝ χρησιμοποιούμε το mouse αλλά μόνο το πληκτρολόγιο. Άρα ο ιππότης hover δεν μπορεί να γίνει και μένει στην άκρη κλαίγοντας.

Είπα στην αρχή ότι το κολπάκι αυτό είναι σπάνιο γιατί και η εντολή focus είναι σπάνια. Focus σημαίνει "να συγκεντρωθείς κάπου". Όταν πατάμε το tab (είπαμε στην opera το "Α") η προσοχή μας συγκεντρώνεται στο αντίστοιχο link που επιλέχθηκε επειδή είδαμε ξεκάθαρα τι επιλέχθηκε. Πώς όμως βοηθάει το focus;

Βάζοντας το σε συνδιασμό να δουλέψει με το link, μπορούμε να πετύχουμε το επιθυμητό αποτέλεσμα. Αν δηλ κανονικά βάζαμε...:


a:link{color:black;}
a:visited{...}
a:hover{background-color:yellow;}
a:active{...}


... τώρα θα προσθέσουμε και το focus
a:focus{background-color:yellow;}
a:link{color:black;}
a:visited{...}
a:hover{background-color:yellow;}
a:active{...}


Αυτό σημαίνει ότι όταν πατήσουμε το tab το φόντο του link θα είναι κίτρινο κάτι που φυσικά φαίνεται πολύ ποιο εύκολα στα μάτι από ένα ξεθωριασμένο περίβλημα.

Εδώ πρέπει να σημειώσουμε ότι ειδικά στην opera υπάρχει ένα μικρό προβληματάκι αλλά είναι άνευ σημασίας. Ότι χρώμα και να βάλεις (κίτρινο, κόκκινο, γκρίζο, οτιδήποτε) η opera θα δει ένα σκούρο (σχεδόν μαύρο: #0A246A) μπλε. Αλλά αυτό είναι ασήμαντο μπροστά σε κάτι λαθάρες που έχει ο explorer...

Και τώρα που λέμε για explorer.... Τι γίνεται με δαύτον; Το βλέπει κανονικά το focus ή όχι; Λοιπόν η απάντηση είναι.... η αναμενόμενη: ΟΧΙ! Ο explorer είναι τοσο τυφλός όσο και εμείς. Θα πρέπει λοιπόν να κάνουμε άλλο κολπάκι για να δουλέψει και εκεί. Δεν έχουμε παρά να προσθέσουμε ένα active:

a:focus, a:active{background-color:yellow;}
a:link{color:#39B1DD;}
a:visited{color:gray;}
a:hover{color:#5A39D6;}
a:active{color:red;}


Τώρα θα φαινεται το ίδιο σε όλους τους win browsers. Δυστυχώς για Mac δεν ξέρω. Αν έχει κάποιος Mac ας μας πει...

Μια extra σημείωση: Τα Link, Visited, Hover και Active πρέπει να μπαίνει ΠΑΝΤΑ με αυτήν την σειρά για να αποφεύγονται οι συγκρούσεις μεταξύ τους:

1) a:Link
2) a:Visited
3) a:Hover
4) a:Active
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από sibas » 28 Νοέμ 2005 20:35

Ωραίοοοος ;)

Άβαταρ μέλους
mpalarinas
Δημοσιεύσεις: 125
Εγγραφή: 28 Οκτ 2005 20:08
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από mpalarinas » 29 Νοέμ 2005 05:03

Πολύ καλό!Αλήθεια, αναρωτιέμαι, οι κατασκευαστές των browsers δεν το χαν προμελετήσει αυτό;
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από skeftomilos » 29 Νοέμ 2005 07:21

Nice tut! :)

Το dotted περίγραμμα γύρω από τα links φαίνεται αρκετά καλά όταν το background είναι άσπρο ή μαύρο, αλλά πολύ λίγο ως καθόλου για γκρίζα backgrounds: demo. Αυτό ισχύει και στην περίπτωση που το link περιέχει image. Το περίγραμμα εμφανίζεται ακριβώς στη άκρη, στα ακριανά pixels της εικόνας, οπότε συμφέρει να αποφεύγονται τα γκρίζα περιγράμματα στις σχετικές εικόνες.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από Cmg__ » 29 Νοέμ 2005 20:22

mpravo patriot, xrhsimotatp... :D

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από patriot » 02 Δεκ 2005 07:55

Χαίρομαι που σας άρεσε! :P

mpalarinas
Πολύ καλό!Αλήθεια, αναρωτιέμαι, οι κατασκευαστές των browsers δεν το χαν προμελετήσει αυτό;
Νομίζω πως ναι. Είχα διαβάσει κάτι σχετικό για τον Netscape 4+ πριν τουλάχιστον μια 5ετία. Ε, δεν θα είναι για τους σημερινούς browsers;

skeftomilos
Oh my God!!!! Στραβώθηκα!!! Δεν το είχα δει ποτέ ρε παιδί μου έτσι. Να σκεφτείς ότι εγώ κάθησα και το έψαξα για να μην στραβώνω τους άλλους στις δικές μου τις σελίδες (ξέροντας από προσωπική πείρα μιας και δεν έχω και τα καλύτερα μάτια) και το παράδειγμα σου ήταν πειστικότατο!! Φαντάσου δηλ!!
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Megistos
Δημοσιεύσεις: 149
Εγγραφή: 14 Ιουν 2005 15:38

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από Megistos » 02 Δεκ 2005 11:42

Αρκετά χρήσιμο thanks!

btw σχετικά με τα προβλήματα όρασης, τα windows έχουν κάτι options με focus μεγάλων αντιθέσεων, χοντρά borders, blinking, οπτικοακουστικά σήματα και τέτοια. Τα οποία τα υποστηρίζει ο IE, δεν ξέρω για FF. Πάντως μια φορά που τα είχα δοκιμάσει ήταν ... για προβλήματα όρασης δεν είναι... Για εντελώς γκαβούς είναι...
The Flame Still Burns

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από patriot » 02 Δεκ 2005 13:45

Megistos έγραψε:btw σχετικά με τα προβλήματα όρασης, τα windows...
Τα windows?? Είσαι απόλυτα σίγουρος ότι αυτή ειναι η σωστή λέξη; Μήπως εννοείς browser;
χοντρά borders, blinking, οπτικοακουστικά σήματα και τέτοια.
Χοντρά borders = δεν είναι "χοντρά borders" ως δεδομένο σε ότι αφορά τους browsers. Υπάρχουν borders τα οποία τα κανονίζεις εσύ για το πως θα είναι.

Ειδικά δε, ο ie έχει πρόβλημα και το εξωτερικό border του "double border" το ποίο το εμφανίζει ποιο χοντρό από το εσωτερικό κάτι που κατά το W3 είναι λάθος.

Blinking = Είναι εντολή αποκλειστικά του mozilla/netscape ή μάλλον για να ακριβολογούμε του netscape/mozilla αφού ο mozilla βγήκε πολύ αργότερα.

Οπτικοακουστικά; Δηλ; Τι έχω στα windows μου και δεν το ξέρω;
Τα οποία τα υποστηρίζει ο IE, δεν ξέρω για FF.
Από αυτήν την πρόταση και μόνο καταλαβαίνει κανείς ότι χρησιμοποιείς ie (καλά τι του βρίσκεις;; ) με αποτέλεσμα να μου δινεις την εντύπωση ότι έχεις μαθει μόνο γι' αυτόν. Από την πλευρά ενός designer αυτό ειναι λάθος αν σκεφτείς ότι ο explorer έχει την συνήθεια σε ορισμένα πράγματα να φέρεται από λίγο έως και τελείως διαφορετικά από ότι θα έπρεπε (δηλ ανάποδα) με αποτέλεσμα το χάλια αποτέλεσμα. Αν δηλ κάποιος θέλει να φτιάξει μια σελίδα θα κοιτάξει να την φτιάξει σε όλους τους browsers πρώτα και μετά σε αυτόν. Άρα εσύ θα είχες μειωνέκτημα ως χρήστης αν χρησιμοποιείς explorer. Είσαι σίγουρος ότι δεν θες να αλλάξεις;
Για εντελώς γκαβούς είναι...
Αυτοί δεν θα έβλεπαν απολύτως τίποτα! :P
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από skeftomilos » 02 Δεκ 2005 20:06

Patriot μου φαίνεται λίγο μάταιη η προσπάθεια να πείσεις τους περιηγητές του Internet έναν-έναν να αλλάξουν browser. :P Παραείναι πολλοί οι άτιμοι! :roll: Megistos μην ακους κανέναν, άνοιγε όποιον browser σου αρέσει καλύτερα. ;)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από patriot » 03 Δεκ 2005 10:24

Δυστυχώς δεν έχεις άδικο, οι χρήστες του είναι αμέτρητοι... Απλά προσπαθούσα να του δώσω να καταλάβει το πόσο ηλίθιος είναι ο explorer και ότι είναι κρίμα γι' αυτόν να τον έχει. Αν τώρα θελήσει να τον αλλάξει καλά θα είναι, κέρδος θα έχει. Αλλά επειδή μπορεί εγώ να είμαι φανατικός κατά του ie (που ειμαι δηλ) γι' αυτό του είπα την αλήθεια του W3 που είναι αντικειμενική. Τώρα ας κάνει ότι θέλει...
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Megistos
Δημοσιεύσεις: 149
Εγγραφή: 14 Ιουν 2005 15:38

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από Megistos » 15 Δεκ 2005 14:18

Ναι patriot, τα Windows. Έχουν options για άτομα με ειδικές ανάγκες τα οποία options υποστηρίζουν (μόλις ενεργοποιηθούν στα Windows) και ο ΙΕ και το Outlook και το Office.

Επίσης ναι, χρησιμοποιώ ΙΕ. Όπως καταλαβαίνουμε και τι χρησιμοποιείς εσύ :wink: Πολλά του βρίσκω με κύριο το ότι είμαι Microsoft Developer. Οπότε εκεί τα δοκιμάζω όλα και μετά (είμαι από τους λίγους που) ελέγχω συμβατότητα με τον ff.

Το ότι τα βγάζει ανάποδα είναι σχετικό, από το ποιό θεωρείς ότι είναι το μη ανάποδο. Σε γενικές γραμμές (κατά το 99% των περιπτώσεων) συμπεριφέρονται το ίδιο σε html rendering, css και javascript. Για το υπόλοιπο 1% που έχουν διαφορετικό αποτέλεσμα, έχεις ευθύνη σαν designer να βρεις ένα workaround.

Το ποιος είναι καλύτερος δεν με απασχολεί σαν επαγγελματία. Εμένα με απασχολεί το παγκόσμιο standard το οποίο δυστυχώς ή ευτυχώς δεν είναι το W3 αλλά ο IE. Όχι στην θεωρία, αλλά στην πράξη. Μπορεί να έρθει να μου πει κάποιος developer ότι το καλύτερο λειτουργικό στον πλανήτη είναι το BeOS. Δεν θα διαφωνήσω! Θα του πω, ok γράψε τις εφαρμογές σου για BeOS και όχι για Windows. Λες να πουλήσει έστω και μία; Λες να το κάνει; Αυτό μου λες κι εσύ όταν λες να γράψω με standard τον ff (σε μία κλίμακα 1:Χ καθώς άλλο διαφορές από λειτουργικό σε λειτουργικό και άλλο από browser σε browser).

Φιλικά,
:o 8) :wink: :roll:
The Flame Still Burns

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από Basilakis » 15 Δεκ 2005 14:34

Poly kalo tut. ;)

Vlepw epioasa mia moda me ta css. As ftiaksoume kati kai emeis...
Syntoma sto freestuff.gr!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από skeftomilos » 16 Δεκ 2005 08:52

Megistos όλα σωστά που λες και συμφωνώ. Αφού όμως επιλέγεις τον IE για προσωπική χρήση, για δες ένα-δυο ενδιαφέροντα «features» να τα έχεις υπ' όψη σου: ;)

- Το ανοιχτό Clipboard του Internet Explorer
- window.location | close()
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Megistos
Δημοσιεύσεις: 149
Εγγραφή: 14 Ιουν 2005 15:38

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από Megistos » 16 Δεκ 2005 12:43

Εχμμμ...
Το πρώτο feature δεν μου παίζει σε ΙΕ 6.0 + SP2. Όσο κι αν προσπάθησα δεν κατάφερα να το αναπαράγω.

Το δεύτερο δεν κατάλαβα που είναι το bug. Δεν έκανε τπτ πάντως.

ΥΓ: Είναι Παρασκευή μεσημέρι, περίμενες να κάτσω να διαβάσω js τώρα για να καταλάβω τι θες να κάνεις; Θα το δω τη Δευτέρα. :lol: :P
The Flame Still Burns

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Χρησιμοποιώντας το "focus" στα Css

Δημοσίευση από skeftomilos » 16 Δεκ 2005 16:34

Με SP2 δεν έχω δοκιμάσει ο ίδιος το clipboard feature, άρα δεν ορκίζομαι. :) Ένας φίλος πάντως που το είχε δοκιμάσει μου είχε πει ότι δουλεύει και σε αυτά.

Το δεύτερο σημαίνει ότι οποιοδήποτε site μπορεί να αφαιρέσει όλο το UI από τον browser και να τον αφήσει γυμνό. Πάνε τα menu, πάει η status bar, πάει η address bar, πάνε όλα! :P
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες