Η visibilityιδιότητα στο CSS έχει δύο διαφορετικές λειτουργίες. Κρύβει σειρές και στήλες ενός πίνακα και κρύβει επίσης ένα στοιχείο χωρίς να αλλάζει τη διάταξη.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityέχει τέσσερις έγκυρες τιμές: visible, hidden, collapse, και inherit. Θα εξετάσουμε κάθε ένα από αυτά για να μάθουμε περισσότερα.
ορατός
Όπως ακούγεται, visibleκάνει τα πράγματα ορατά. Τίποτα δεν είναι κρυμμένο από προεπιλογή, επομένως αυτή η τιμή δεν κάνει τίποτα εκτός εάν έχετε ορίσει hiddenαυτό ή έναν γονέα αυτού του στοιχείου.
κρυμμένος
Η hidden τιμή κρύβει τα πράγματα. Αυτό είναι διαφορετικό από τη χρήση display: none, επειδή hidden κρύβει μόνο οπτικά στοιχεία. Το στοιχείο παραμένει εκεί και εξακολουθεί να καταλαμβάνει χώρο στη σελίδα, αλλά δεν μπορείτε να το δείτε πια (κάτι σαν να μετατρέπετε την αδιαφάνεια σε 0). Είναι ενδιαφέρον ότι αυτή η ιδιότητα δεν κληρονομείται από προεπιλογή. Αυτό σημαίνει ότι, σε αντίθεση με τις ιδιότητες display ή τις opacityιδιότητες, μπορείτε να δημιουργήσετε ένα στοιχείο hiddenκαι να έχετε ακόμα ένα από τα παιδιά του ως visibleεξής:
Σημειώστε ότι, ενώ είναι κρυμμένο, το γονικό στοιχείο δεν ενεργοποιεί το :hover.
κατάρρευση
Αυτό επηρεάζει μόνο τις σειρές πινάκων ( ), τις ομάδες γραμμών (όπως ), τις στήλες ( ), τις ομάδες στηλών ( ) ή τα στοιχεία που γίνονται με αυτόν τον τρόπο μέσω display).
Αντίθετα hidden, αυτή η τιμή κρύβει το επιμέρους στοιχείο του πίνακα, χωρίς να αφήνει το χώρο όπου ήταν. Εάν χρησιμοποιείται οπουδήποτε αλλά σε επιμέρους στοιχείο πίνακα, λειτουργεί όπως visibility: hidden.
Υπάρχουν τόσες πολλές ιδιαιτερότητες με αυτό είναι δύσκολο να γνωρίζουμε από πού να ξεκινήσω. Ακριβώς ως ορεκτικό:
- Το Chrome / Safari θα καταρρεύσει, αλλά ο χώρος που καταλαμβάνει θα παραμείνει. Και αν τα κελιά του πίνακα είχαν ένα περίγραμμα, αυτό θα καταρρεύσει σε ένα μόνο περίγραμμα κατά μήκος της άνω άκρης.
- Το Chrome / Safari δεν θα συμπτύξει μια στήλη ή μια ομάδα στηλών.
- Το Safari συμπτύσσει ένα κελί πίνακα (λάθος) αλλά το Chrome δεν θα (σωστό).
- Σε οποιοδήποτε πρόγραμμα περιήγησης, εάν ένα κελί βρίσκεται σε μια στήλη που έχει καταρρεύσει (ανεξάρτητα από το εάν καταρρέει ή όχι), το κείμενο σε αυτό το κελί δεν θα εμφανίζεται.
- Το Opera (pre WebKit) θα καταρρεύσει τα κενά όλων, εκτός από ένα κελί πίνακα (το οποίο είναι σωστό).
Υπάρχουν περισσότερα, αλλά βασικά: μην το χρησιμοποιείτε ποτέ.
κληρονομώ
Η προεπιλεγμένη τιμή. Αυτό απλώς αναγκάζει το στοιχείο να κληρονομήσει την τιμή του γονέα του.
Flexbox
visibility: collapse; χρησιμοποιείται και στο Flexbox και είναι πιο καλά καθορισμένο.
Υποστήριξη προγράμματος περιήγησης
Τα βασικά, χωρίς να λαμβάνονται υπόψη όλες οι ιδιοτροπίες με κατάρρευση:
| Οποιος | Οποιος | Οποιος | 4+ | 4+ | Οποιος | Οποιος |
Το IE 7- δεν υποστηρίζει collapseή inherit.