ιστοσελίδες προορίζονται να προβληθούν σε μια οθόνη. Ενώ υπάρχει μια μεγάλη ποικιλία πιθανών συσκευών που μπορούν να χρησιμοποιηθούν για την προβολή ενός ιστότοπου (επιτραπέζιοι υπολογιστές, φορητοί υπολογιστές, tablet, τηλέφωνα, φορητά, τηλεοράσεις κ.λπ.), όλα περιλαμβάνουν μια οθόνη κάποιου είδους. Υπάρχει ένας άλλος τρόπος με τον οποίο κάποιος μπορεί να δει τον ιστότοπό σας, έναν τρόπο που δεν περιλαμβάνει οθόνη. Αναφερόμαστε σε μια φυσική εκτύπωση των ιστοσελίδων σας.
Πριν από χρόνια, θα διαπιστώσετε ότι οι άνθρωποι που εκτυπώνουν ιστότοπους ήταν ένα πολύ κοινό σενάριο. Θυμόμαστε τη συνάντησή μας με πολλούς πελάτες που ήρθαν νέοι στον Ιστό και αισθανόμασταν πιο άνετοι με την εξέταση εκτυπωμένων σελίδων του ιστότοπου. Στη συνέχεια μας έδωσαν σχόλια και τροποποιήσεις σε αυτά τα κομμάτια χαρτιού αντί να κοιτάξουμε στην οθόνη για να συζητήσουμε τον ιστότοπο. Καθώς οι άνθρωποι έχουν γίνει πιο άνετοι με τις οθόνες στη ζωή τους, και καθώς αυτές οι οθόνες έχουν πολλαπλασιαστεί πολλές φορές, έχουμε δει όλο και λιγότερους ανθρώπους να προσπαθούν να εκτυπώσουν ιστοσελίδες σε χαρτί, αλλά εξακολουθεί να ισχύει συμβεί. Ίσως θελήσετε να εξετάσετε αυτό το φαινόμενο όταν σχεδιάζετε τον ιστότοπό σας. Θέλετε οι άνθρωποι να εκτυπώσουν τις ιστοσελίδες σας; Ίσως όχι. Εάν συμβαίνει αυτό, έχετε κάποιες επιλογές.
Πώς να αποκλείσετε μια ιστοσελίδα από την εκτύπωση με CSS
Είναι εύκολο στη χρήση CSS για να αποτρέψετε την εκτύπωση από τις ιστοσελίδες σας. Απλώς πρέπει να δημιουργήσετε ένα φύλλο στυλ 1 γραμμής με το όνομα "print.css" που περιλαμβάνει την ακόλουθη γραμμή CSS.
body {display: none; }
Αυτό το μοναδικό στυλ θα μετατρέψει το στοιχείο "σώμα" των σελίδων σας δεν εμφανίζεται - και δεδομένου ότι τα πάντα στις σελίδες σας είναι θυγατρικό στοιχείο του σώματος, αυτό σημαίνει ότι δεν θα εμφανίζεται ολόκληρη η σελίδα / ιστότοπος.
Μόλις έχετε το φύλλο στυλ "print.css", θα το φορτώσατε στο δικό σας HTML ως φύλλο στυλ εκτύπωσης. Δείτε πώς μπορείτε να το κάνετε αυτό - απλώς προσθέστε την ακόλουθη γραμμή στο στοιχείο "head" στις σελίδες HTML σας.
Αυτές οι πληροφορίες ενημερώνουν το πρόγραμμα περιήγησης ότι εάν αυτή η ιστοσελίδα έχει οριστεί να εκτυπώσει, να χρησιμοποιήσει αυτό το φύλλο στυλ αντί για το προεπιλεγμένο φύλλο στυλ που χρησιμοποιούν οι σελίδες για προβολή στην οθόνη. Καθώς οι σελίδες αλλάζουν σε αυτό το φύλλο "print.css", το στυλ που κάνει ολόκληρη τη σελίδα να μην εμφανίζεται θα ανοίξει και ό, τι θα εκτυπωθεί θα ήταν μια κενή σελίδα.
Αποκλεισμός μίας σελίδας κάθε φορά
Εάν δεν χρειάζεται να αποκλείσετε πολλές σελίδες στον ιστότοπό σας, μπορείτε να αποκλείσετε την εκτύπωση ανά σελίδα προς σελίδα με τα ακόλουθα στυλ επικολλημένα στην κεφαλή του HTML σας.
Αυτό το στυλ στη σελίδα θα είχε υψηλότερη ειδικότητα από οποιοδήποτε στυλ μέσα στο δικό σας εξωτερικά φύλλα στυλ, που σημαίνει ότι η σελίδα δεν θα εκτυπώθηκε καθόλου, ενώ άλλες σελίδες χωρίς αυτήν τη γραμμή θα εκτυπώνονταν κανονικά.
Αποκτήστε πιο φανταχτερά με τις αποκλεισμένες σελίδες σας
Τι γίνεται αν θέλετε να αποκλείσετε την εκτύπωση, αλλά δεν θέλετε οι πελάτες σας να απογοητευτούν; Εάν βλέπουν μια εκτύπωση κενής σελίδας, μπορεί να αναστατωθούν και να πιστεύουν ότι ο εκτυπωτής ή ο υπολογιστής τους είναι κατεστραμμένος και δεν συνειδητοποιούν ότι έχετε ουσιαστικά απενεργοποιήσει την εκτύπωση!
Για να αποφύγετε την απογοήτευση των επισκεπτών, μπορείτε να πάρετε λίγο πιο φανταχτερό και να βάλετε ένα μήνυμα που θα εμφανίζεται μόνο όταν οι αναγνώστες σας εκτυπώσουν τη σελίδα - αντικαθιστώντας το άλλο περιεχόμενο. Για να το κάνετε αυτό, δημιουργήστε την τυπική σας ιστοσελίδα και στο επάνω μέρος της σελίδας, αμέσως μετά την κύρια ετικέτα, τοποθετήστε:
Και κλείστε αυτήν την ετικέτα αφού γραφτεί όλο το περιεχόμενό σας, στο κάτω μέρος της σελίδας:
Στη συνέχεια, αφού κλείσετε το div "noprint", άνοιξε ένα άλλο div με το μήνυμα που θέλετε να εμφανιστεί κατά την εκτύπωση του εγγράφου:
Αυτή η σελίδα προορίζεται για προβολή στο Διαδίκτυο και ενδέχεται να μην εκτυπωθεί. Παρακαλώ δείτε αυτή τη σελίδα στο http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm
Συμπεριλάβετε έναν σύνδεσμο για το έγγραφο εκτύπωσης CSS με το όνομα print.css:
Και σε αυτό το έγγραφο περιλαμβάνονται τα ακόλουθα στυλ:
#noprint {display: none; }
#print {display: block; }
Τέλος, στο τυπικό φύλλο στυλ (ή σε ένα εσωτερικό στυλ στην κεφαλή του εγγράφου σας), γράψτε:
#print {display: none; }
#noprint {display: block; }
Αυτό θα διασφαλίσει ότι το μήνυμα εκτύπωσης εμφανίζεται μόνο στην εκτυπωμένη σελίδα, ενώ η ιστοσελίδα εμφανίζεται μόνο στην ηλεκτρονική σελίδα.
Εξετάστε την εμπειρία χρήστη
Εκτύπωση ιστοσελίδων είναι γενικά μια κακή εμπειρία, καθώς οι σημερινοί ιστότοποι συχνά δεν μεταφράζονται καλά στην έντυπη σελίδα. Εάν δεν θέλετε να δημιουργήσετε ένα εντελώς ξεχωριστό φύλλο στυλ για να υπαγορεύσετε τα στυλ εκτύπωσης, μπορείτε να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε τα βήματα από αυτό το άρθρο για να "απενεργοποιήσετε" την εκτύπωση σε μια σελίδα. Λάβετε υπόψη σας τον αντίκτυπο που μπορεί να έχει στους χρήστες που βασίζονται στην εκτύπωση ιστότοπων (ίσως επειδή έχουν κακή όραση και δυσκολία στην ανάγνωση κειμένου στην οθόνη) και να λαμβάνετε αποφάσεις που θα λειτουργούν για τον ιστότοπό σας κοινό.
Πρωτότυπο άρθρο της Jennifer Krynin. Επεξεργασία από τον Jeremy Girard.