CSS – Visibility (Ορατότητα)

Ακόμα ένα άρθρο για την css που αποτελεί καρπό εργασίας σπουδαστών του προγράμματος web designer – developer του ΚΕΔΙΒΙΜ του Παν. Αιγαίου το οποίο στηρίζει το Εργαστήριο ΤΠΕ Ήρων μέσω του επιχειρησιακού του βραχίονα της DreamWeaver.Gr

Μια ιδιότητα της CSS που ονομάζεται ορατότητα (Visibility), σάς επιτρέπει να αποκρύψετε ένα στοιχείο από την προβολή. Μπορείτε να χρησιμοποιήσετε αυτήν την ιδιότητα μαζί με τη JavaScript για να δημιουργήσετε πολύ περίπλοκο μενού και πολύ περίπλοκες διατάξεις ιστοσελίδων.

Μπορείτε να επιλέξετε να χρησιμοποιήσετε την ιδιότητα ορατότητας για να αποκρύψετε μηνύματα σφάλματος που εμφανίζονται μόνο εάν ο χρήστης χρειάζεται να τα δει ή να αποκρύψετε τις απαντήσεις σε ένα κουίζ μέχρι ο χρήστης να επιλέξει μια επιλογή.

ΣΗΜΕΙΩΣΗ: Να θυμάστε ότι ο πηγαίος κώδικας θα εξακολουθεί να περιέχει ότι υπάρχει στην αόρατη παράγραφο, επομένως δεν πρέπει να το χρησιμοποιείτε για να αποκρύψετε ευαίσθητες πληροφορίες, όπως στοιχεία πιστωτικής κάρτας ή κωδικούς πρόσβασης.

CSS – Visibility (Ορατότητα)

Η ιδιότητα ορατότητας μπορεί να λάβει τις τιμές που αναφέρονται στον πίνακα που ακολουθεί :

Εδώ είναι ένα παράδειγμα :

Θα παράγει το ακόλουθο αποτέλεσμα :

Αυτή η παράγραφος πρέπει να είναι ορατή με κανονικό τρόπο.

Μπορείτε να διαβάσετε για την απόλυτη και σχετική τοποθέτηση μέσω της css σε προηγούμενο  άρθρο μας εδώ 

Μια κοντινή ιδιότητα στο  visibility hidden είναι το display none. Η διαφορά τους έγκειται στην ορατότητα. Το visibility: hidden κρύβει το στοιχείο, αλλά εξακολουθεί να καταλαμβάνει χώρο στη διάταξη. Το display none δεν αφαιρεί εντελώς το στοιχείο από το έγγραφο. Δεν καταλαμβάνει χώρο, παρόλο που το HTML για αυτό βρίσκεται ακόμα στον πηγαίο κώδικα

Εξαρτάται από τις ανάγκες που υπάρχουν κατά την κατασκευή μιας ιστοσελίδας ή την κατασκευή ενός eshop

Μετάφραση: Νίκος Τσοχαταρίδης
Πηγή: tutorialspoint.com