Μπορεί να υπάρχουν φορές, καθώς εργάζεστε στην ανάπτυξη ιστοσελίδων, ότι πρέπει να "κρύβετε" συγκεκριμένες περιοχές αντικειμένων για έναν ή άλλο λόγο. Θα μπορούσατε, φυσικά, να καταργήσετε απλά τα αντικείμενα στα ερωτήματα από τη σήμανση HTML , αλλά τι γίνεται αν θέλετε να παραμείνουν στον κώδικα, αλλά να μην εμφανίζονται στην οθόνη του προγράμματος περιήγησης για οποιονδήποτε λόγο (και θα εξετάσουμε τους λόγους για να κάντε αυτό σύντομα). Για να διατηρήσετε ένα στοιχείο στη HTML σας, αλλά να το αποκρύψετε για προβολή, θα στραφείτε στο CSS.
Οι δύο πιο συνηθισμένοι τρόποι για να αποκρύψετε ένα στοιχείο που βρίσκεται στο HTML θα χρησιμοποιούσαν τις ιδιότητες CSS για "εμφάνιση" ή "ορατότητα". Με την πρώτη ματιά, αυτές οι δύο ιδιότητες μπορεί να φαίνονται να κάνουν σε μεγάλο βαθμό το ίδιο πράγμα, αλλά το καθένα έχει ξεχωριστές διαφορές που πρέπει να γνωρίζετε. Ας ρίξουμε μια ματιά στις διαφορές μεταξύ της οθόνης: καμία και η ορατότητα: κρυμμένη.
Ορατότητα
Χρησιμοποιώντας το CSS ιδιότητα / τιμή ζεύγος ορατότητας: κρυφό κρυφές ένα στοιχείο από το πρόγραμμα περιήγησης. Ωστόσο, το κρυφό στοιχείο εξακολουθεί να έχει χώρο στη διάταξη. Είναι σαν να κάνατε ουσιαστικά το στοιχείο αόρατο, αλλά παραμένει στη θέση του και καταλαμβάνει το χώρο που θα είχε πάρει αν είχε μείνει μόνος του.
Εάν τοποθετήσετε ένα DIV στη σελίδα σας και χρησιμοποιήσετε το CSS για να δώσετε διαστάσεις για να λάβετε 100x100 εικονοστοιχεία, η ιδιότητα ορατότητας: κρυφή θα κάνει το DIV να μην εμφανίζεται στην οθόνη, αλλά το κείμενο που ακολουθεί θα ενεργήσει σαν να είναι ακόμα εκεί, Απόσταση 100x100.
Ειλικρινά, η ιδιότητα ορατότητας δεν είναι κάτι που χρησιμοποιούμε πολύ συχνά, και σίγουρα όχι από μόνο του. Εάν χρησιμοποιούμε και άλλες ιδιότητες CSS, όπως η τοποθέτηση για να επιτύχουμε τη διάταξη που θέλαμε για ένα συγκεκριμένο στοιχείο, θα μπορούσαμε τότε να χρησιμοποιήσουμε την ορατότητα για την απόκρυψη αυτού του στοιχείου αρχικά, μόνο για να το ενεργοποιήσουμε ξανά. Αυτή είναι μια πιθανή χρήση αυτής της ιδιότητας, αλλά και πάλι, δεν είναι κάτι στο οποίο απευθυνόμαστε με οποιαδήποτε συχνότητα.
Απεικόνιση
Σε αντίθεση με την ιδιότητα ορατότητας, η οποία αφήνει ένα στοιχείο στην κανονική ροή εγγράφων, εμφανίζεται: κανένας δεν αφαιρεί πλήρως το στοιχείο από το έγγραφο. Δεν καταλαμβάνει καθόλου χώρο, παρόλο που το HTML είναι ακόμα στον πηγαίο κώδικα. Αυτό συμβαίνει επειδή απομακρύνεται από τη ροή εγγράφων. Για όλες τις προθέσεις και σκοπούς, το στοιχείο έχει φύγει. Αυτό μπορεί να είναι καλό ή κακό, ανάλογα με τις προθέσεις σας. Μπορεί επίσης να είναι επιζήμια για τη σελίδα σας, εάν καταχραστείτε αυτό το ακίνητο!
Συχνά χρησιμοποιούμε "display: none" κατά τη δοκιμή μιας σελίδας. Αν χρειαζόμαστε μια περιοχή για να "πάμε μακριά" για λίγο, ώστε να μπορούμε να δοκιμάσουμε άλλες περιοχές της σελίδας, μπορούμε να χρησιμοποιήσουμε την οθόνη: καμία για αυτό. Το πράγμα που πρέπει να θυμόμαστε, ωστόσο, είναι ότι το στοιχείο πρέπει να επιστραφεί στη σελίδα πριν από την πραγματική εκτόξευση αυτού του ιστότοπου. Αυτό οφείλεται στο γεγονός ότι ένα στοιχείο που αφαιρείται από τη ροή εγγράφων σε αυτήν τη μέθοδο δεν εμφανίζεται από τις μηχανές αναζήτησης ή τις συσκευές ανάγνωσης οθόνης, παρόλο που μπορεί να παραμείνει στη σήμανση HTML. Στο παρελθόν, αυτή η μέθοδος χρησιμοποιήθηκε ως μέθοδος μαύρης καπέλας για να επηρεάσει την κατάταξη των μηχανών αναζήτησης, επομένως τα στοιχεία που δεν εμφανίζονται θα μπορούσαν να είναι μια κόκκινη σημαία για την Google να εξετάσει γιατί χρησιμοποιείται αυτή η προσέγγιση.
Ένας τρόπος να βρούμε την εμφάνιση: κανένας δεν είναι χρήσιμος και όπου το χρησιμοποιούμε σε ζωντανές ιστοσελίδες παραγωγής, είναι όταν χτίζουμε έναν ανταποκρινόμενο ιστό που μπορεί να έχει στοιχεία που είναι διαθέσιμα για ένα μέγεθος εμφάνισης αλλά όχι για άλλα. Μπορείτε να χρησιμοποιήσετε την οθόνη: κανένα για να αποκρύψετε αυτό το στοιχείο και στη συνέχεια να το ενεργοποιήσετε ξανά με τα ερωτήματα μέσων αργότερα. Αυτή είναι μια αποδεκτή χρήση απεικόνισης: καμία, επειδή δεν προσπαθείτε να κρύψετε τίποτα για κακοήθεις λόγους, αλλά έχετε μια νόμιμη ανάγκη να το κάνετε.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 3/3/17