Σήμερα θα βρείτε μια σημείωση από μια σειρά από συμβουλές σχεδιασμού. Και όχι γραφιστική, αλλά σχεδίαση διεπαφής. Νομίζω ότι πολλοί από εσάς εκτυπώσατε τουλάχιστον μία φορά μια σελίδα του ιστότοπου απευθείας από το πρόγραμμα περιήγησης. Η σειρά είναι συνήθως η εξής: πατήστε Ctrl + P, περιμένετε ένα λεπτό, μετά μαντέψτε να τοποθετήσετε χαρτί στον εκτυπωτή, πατήστε ξανά Ctrl + P, αναρωτηθείτε γιατί ήταν απαραίτητο να εκτυπώσετε τόσα πολλά πανό, μετρητές και το κύριο μενού. Το μόνο που χρειαζόσουν ήταν ένας χάρτης και επαφές.
Ορισμένοι σχεδιαστές επιλύουν αυτό το ζήτημα ως εξής: για κάθε σελίδα, δημιουργείται μια ξεχωριστή έκδοση εκτύπωσης. Τις περισσότερες φορές, αυτό είναι ένα έγγραφο στο οποίο δεν εισάγονται banner, μενού και άλλα στοιχεία σελίδας που δεν είναι απαραίτητα για εκτύπωση.
Γιατί να φτιάξετε μια ξεχωριστή έκδοση
Εάν η σελίδα είναι μεγάλη, τότε είναι πιθανό να μην χωράει σε Α4 και να εκτυπωθεί μόνο μέχρι το μισό, και το υπόλοιπο να βρίσκεται στο δεύτερο φύλλο. Αφαιρώντας επιπλέον μπλοκ πριν την εκτύπωση, θα εξοικονομήσουμε χώρο στο χαρτί, το μελάνι στον εκτυπωτή και τα νευρικά κύτταρα.
Επιπλέον, οι διαφορετικές αναλύσεις οθόνης των χρηστών δεν θα μας επιτρέψουν να γνωρίζουμε ακριβώς πώς θα εκτυπωθεί αυτό ή εκείνο το στοιχείο. Επομένως, θα σας συμβούλευα να αφαιρέσετε οτιδήποτε περιττό και να είστε σίγουροι ότι όλες οι εκτυπώσεις θα είναι ίδιες.
Πώς να καθορίσετε τι να εκτυπώσετε;
Συνήθως χάρη σε κλάσεις αντικειμένων και αναγνωριστικά μπορούμε να αποκρύψουμε σχεδόν οποιοδήποτε στοιχείο της σελίδας. Για να μην αποκρύψετε την περίσσεια, θα συνιστούσα να αποκρύψετε την κεφαλίδα πλοήγησης, το λογότυπο του ιστότοπου, την πλαϊνή γραμμή (αν υπάρχει) και το υποσέλιδο (κάτω μέρος της σελίδας).
Έτσι, ό,τι βρίσκεται στην περιοχή περιεχομένου θα εκτυπωθεί. Για όλα τα στοιχεία που θέλετε να αποκρύψετε κατά την εκτύπωση, αντιστοιχίστε τη δική σας τάξη, για παράδειγμα "no-print".
Μπορούμε επίσης να καθορίσουμε ότι οι εικόνες στο φάκελο banners δεν θα πρέπει να αποστέλλονται για εκτύπωση. Αυτό γίνεται με μάσκα. Για να το κάνετε αυτό, πρέπει να καθορίσετε στο CSS:
img (εμφάνιση: κανένα !σημαντικό; )
Με αυτόν τον κωδικό, θα κρύψουμε όλα τα banner που θα εμφανίζονται οπουδήποτε στη σελίδα. Με τον ίδιο τρόπο, πρέπει να κάνετε τα υπόλοιπα στοιχεία αόρατα.
Χωρίς εκτύπωση (οθόνη: καμία !σημαντικό; )
Εφαρμογή στην πράξη
Για το αρχείο print.cssυποβάλλεται σε επεξεργασία μόνο τη στιγμή της αποστολής για εκτύπωση, πρέπει να το προσδιορίσετε
έτσι:Εκτυπώστε αυτήν τη σελίδα
Πριν από μερικά χρόνια, εξεπλάγην ευχάριστα όταν έμαθα την ύπαρξη ενός τέτοιου χαρακτηριστικού. Είναι βολικό και αρκετά απλό, γι' αυτό σας συνιστώ να το χρησιμοποιήσετε.
Συχνά σε ιστότοπους μπορείτε να βρείτε εκτυπώσιμη έκδοση μιας σελίδας. Πολλοί άνθρωποι πιστεύουν ότι αυτό είναι κάτι ενσωματωμένο στο ίδιο το πρόγραμμα περιήγησης ή ότι είναι πολύ εύκολο να γίνει. Στην πραγματικότητα, αυτό δεν είναι καθόλου αλήθεια. Η έντυπη έκδοση είναι κανονική σελίδαπου χρειάζεσαι μόνος τουκάνω.
Μπορείτε να δείτε την εκτυπώσιμη έκδοση αυτού του άρθρου. Στην πραγματικότητα, τι πρέπει να εμφανίζεται εκεί; Τίτλος άρθρου, ενότητα, κατηγορία, συγγραφέας, κείμενο και ημερομηνία. Όλα αυτά εμφανίζονται σε αυτή τη σελίδα. Χρειάζεστε ένα μενού, μια φόρμα αναζήτησης, διάφορα μπλοκ; Δεν νομίζω ότι είναι ο λόγος που δεν το κάνουν.
Βεβαιωθείτε επίσης ότι το πλάτος της εκτυπωμένης έκδοσης είναι δεν υπερβαίνει τα 650 px, διαφορετικά το πρόγραμμα περιήγησης μπορεί να κόψει τις άκρες.
Άρα το καταλάβατε ήδη έντυπη έκδοσηΠρέπει να δημιουργήσετε το δικό σας, εμφανίζοντας ακριβώς αυτό που χρειάζεται ο χρήστης. Τώρα για το πώς να το κάνετε.
Υπάρχει 2 επιλογές: δημιουργήστε μια ξεχωριστή σελίδα και δημιουργήστε ένα ξεχωριστό φύλλο στυλ. Η πρώτη επιλογή, νομίζω, είναι ξεκάθαρη. Δημιουργήστε μια άλλη σελίδα με έντυπη έκδοσηκαι στην κεντρική σελίδα δίνετε έναν σύνδεσμο προς αυτήν την έντυπη έκδοση. Ο χρήστης το ακολουθεί και μέσα "Αρχείο"->"Εκτύπωση"θα το εκτυπώσει.
Η δεύτερη επιλογή περιλαμβάνει τη δημιουργία ενός ξεχωριστού φύλλου στυλ όπου κρύβετε όλα τα περιττά μπλοκ (μέσω οθόνη: καμία;) και ορίστε τις κατάλληλες διαστάσεις για το περιεχόμενο εξόδου. Στη συνέχεια, ένα τέτοιο αρχείο στυλ συνδέεται ως εξής:
Τώρα αν ο χρήστης θέλει να εκτυπώσει αυτή τη σελίδα, δεν θα εκτυπώσει αυτό που βλέπει, αλλά αυτό που είναι γραμμένο print.css. Στην πραγματικότητα, ο χρήστης βλέπει τη σελίδα με έναν τρόπο και τον εκτυπωτή με εντελώς διαφορετικό τρόπο.
Αυτός είναι ο τρόπος δημιουργείται μια εκτυπώσιμη έκδοσηοποιαδήποτε σελίδα του ιστότοπου.
Αυτό μπορεί να εκπλήξει ορισμένους, αλλά οι ιστοσελίδες εκτυπώνονται αρκετά συχνά.
Αυτή η σημείωση δείχνει Χρήσιμα κόλπα CSSγια να προετοιμάσετε τη σελίδα για εκτύπωση.
Προκαταρκτικές αλλαγές στα στυλ
Συνιστάται να χωρίσετε τα στυλ CSS σε ξεχωριστά αρχεία ανάλογα με τις μικρομορφές:
<σύνδεσμος rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection">
<σύνδεσμος rel="stylesheet" href="css/print.css" type="text/css" media="print">
<σύνδεσμος rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld">
Αυτό θα σας βοηθήσει να αποφύγετε τη σύγχυση στο μέλλον και θα εξοικονομήσετε χρόνο. Αξίζει να λάβετε υπόψη ότι οι γραμματοσειρές εκτύπωσης πρέπει να προσδιορίζονται σε σημεία (pt), ίντσες (in), picas (pc) ή εκατοστά/χιλιοστά (cm/mm).
Ορισμός χρώματος φόντου, ορισμός γεμίσματος
Αφαιρούμε τις εσοχές, ορίζουμε τη σελίδα σε λευκό χρώμα φόντου και μαύρη γραμματοσειρά (για αντίθεση), ορίζουμε τα περιθώρια σε 0,5 ίντσες. Αφαιρούμε επίσης την ιδιότητα float από τα αιωρούμενα στοιχεία, έτσι ώστε κατά την εκτύπωση μιας ιστοσελίδας, τα μπλοκ να μην απομακρύνονται.
Αφαίρεση επιπλέον στυλ
Κατά την εκτύπωση, πολλά στοιχεία του ιστότοπου είναι περιττά: πλοήγηση, διαφήμιση, πανό. Τα αφαιρούμε με οθόνη: κανένα.
Πήρα κάτι παρόμοιο:
Εργασία με υπερσυνδέσμους
Αφαιρούμε την υπογράμμιση από τους συνδέσμους, δεν θα τα χρειαστούμε για εκτύπωση. Εμφανίζουμε επίσης τη διεύθυνση URL (σε αγκύλες δίπλα στο κείμενο του συνδέσμου).
a( περίγραμμα : 0 ; διακόσμηση κειμένου : κανένα ; )
a img (περιθώριο: 0)
Σελιδοποίηση CSS
Ιδιοκτησία σελίδα-σπάσιμο-πρινσας επιτρέπει να ορίσετε τη θέση της αλλαγής σελίδας κατά την εκτύπωση.
Εάν είμαστε πολύ τεμπέληδες και όλα τα στυλ βρίσκονται σε ένα αρχείο css, τότε ο κώδικας θα μοιάζει με αυτό:
@μέσα όλα
{
.nextpage (εμφάνιση: καμία;)
}
@media print
{
.nextpage (εμφάνιση : αποκλεισμός ; αλλαγή σελίδας πριν : πάντα ; )
}
Λαμβάνουμε μια κλάση που δεν θα είναι ορατή στη σελίδα, αλλά θα εκπληρώσει το σκοπό της όταν εκτυπωθεί.
Παράδειγμα χρήσης:
<html xmlns= "http://www.w3.org/1999/xhtml">
<κεφάλι >
<meta http-equiv = περιεχόμενο "Τύπος περιεχομένου" = "text/html; charset=utf-8" >
<τίτλος >Παράδειγμα αλλαγής σελίδας πριν</τίτλος>
<styletype="text/css">
@media print(
.newpage(page-break-before: πάντα;)
}
</στυλ>
</κεφάλι>
<σώμα >
<h1 >Αλλαγές σελίδας CSS</h1>
<p >Προσπαθήστε να εκτυπώσετε αυτήν τη σελίδα (και να φάτε περισσότερα από αυτά τα μαλακά γαλλικά ρολά και να πιείτε τσάι).</p>
<p >Αυτή είναι η 1η παράγραφος και θα βρίσκεται στην πρώτη σελίδα όταν εκτυπωθεί.</p>
<div class="newpage">
<p >Αυτή είναι η 2η παράγραφος, θα βρίσκεται στη δεύτερη σελίδα όταν εκτυπωθεί.</p>
<div class="newpage">
<p >Αυτή είναι η 3η παράγραφος και θα βρίσκεται στη σελίδα 3 όταν εκτυπωθεί. Όλα είναι τόσο απλά.</p>
</σώμα>
</html>
Ιδιότητες CSS: χήρες, ορφανά
Ιδιοκτησία χήρεςΚαθορίζει τον ελάχιστο αριθμό γραμμών κειμένου που εμφανίζονται στην επόμενη σελίδα όταν εκτυπώνεται ένα έγγραφο.
Παράδειγμα:
Μια άλλη ιδιοκτησία css - ορφανά- ορίζει τον ελάχιστο αριθμό γραμμών που μπορούν να παραμείνουν στο κάτω μέρος της σελίδας χωρίς αλλαγή σελίδας.
Εάν η αξία των χήρων συγκρούεται με την τιμή των ορφανών, τότε οι χήρες θα έχουν προτεραιότητα.
Παράδειγμα χρήσης:
@media print(
p (χήρες: 3, ορφανά: 3;)
}
Ανακεφαλαίωση:
Ως αποτέλεσμα, πήρα κάτι σαν αυτό:
σώμα (περιθώριο: 0,5 in; γραμματοσειρά-οικογένεια: φορές)
* ( φόντο : #fff !σημαντικό; χρώμα: #000 !σημαντικό; float: κανένα !σημαντικό; πλάτος: αυτόματο !σημαντικό; ύψος: αυτόματο !σημαντικό; )
#context ( περιθώριο : 0 !important; padding : 0 )
#menu , #topmenu , #thedrot , .meta , #comments , #commentform , #postcomment , #resplink , #footer ( εμφάνιση : κανένα )
#zag h1 span (μέγεθος γραμματοσειράς: μικρό, οθόνη: μπλοκ)
a( περίγραμμα : 0 ; διακόσμηση κειμένου : κανένα ; )
a img (περιθώριο: 0)
a:after ( περιεχόμενο : " (" attr(href) ") " ; μέγεθος γραμματοσειράς : 90% ; )
a[ href^= "/" ] :after ( περιεχόμενο : " (http://www.site" attr(href) ") " ;)
Αυτό το φύλλο στυλ είναι αρκετά απλό και, κατά τη γνώμη μου, απαιτεί πιο λεπτομερή επεξεργασία μεμονωμένων στοιχείων, αλλά το αποτέλεσμα στην εκτύπωση είναι πολύ αισθητό σε σύγκριση με ένα κανονικό φύλλο στυλ. Φυσικά, το αρχείο CSS θα είναι αρκετά διαφορετικό ανάλογα με τη σχεδίαση, αλλά οι γενικές αρχές που περιγράφονται στο άρθρο ισχύουν σχεδόν για κάθε έργο.
Στην οποία επεσήμανε ότι οι σελίδες παραγγελίας λεπτομερειών τους ήταν άχρηστες σε έντυπη μορφή.
Έμεινα έκπληκτος όταν είδα αυτό το tweet - συνειδητοποίησα ότι είχα πολύ καιρό να βελτιστοποιήσω τα στυλ για εκτύπωση και δεν σκέφτηκα καν να τα ελέγξω.
Ίσως οφείλεται στο ότι ξοδεύω πολύ χρόνο αλλάζοντας το μέγεθος του παραθύρου του προγράμματος περιήγησής μου για να διασφαλίσω ότι οι ιστότοποί μου λειτουργούν άψογα σε όλα τα μεγέθη και σχήματα ή ίσως επειδή σπάνια εκτυπώνω σελίδες για τον εαυτό μου. Όποιος κι αν είναι ο λόγος, ξέχασα τελείως τα στυλ εκτύπωσης και αυτό είναι κακό.
Η βελτιστοποίηση ιστοσελίδων για εκτύπωση είναι σημαντική γιατί εκτυπώνοντας σελίδες κάνουμε τον ιστότοπο όσο το δυνατόν πιο προσβάσιμο, ανεξάρτητα από το περιβάλλον. Δεν πρέπει να κάνουμε υποθέσεις σχετικά με τους χρήστες μας και τη συμπεριφορά τους. Οι άνθρωποι συνεχίζουν να εκτυπώνουν ιστοσελίδες. Σκεφτείτε άρθρα, αναρτήσεις ιστολογίου, συνταγές, στοιχεία επικοινωνίας, ιστότοπους χαρτών ή καταχωρίσεις ακινήτων. Κάποιος θα προσπαθήσει να εκτυπώσει κάποια από τις σελίδες σας κάποια στιγμή.
Έχω εγκαταλείψει τους οικιακούς εκτυπωτές εδώ και πολύ καιρό, καθώς πάντα πίστευα ότι έσπασαν μετά από 10 λεπτά δουλειάς. Αλλά δεν είναι όλοι σαν εμένα. - Haydon Pickering (Μοτίβα σχεδίασης χωρίς αποκλεισμούς)
Αν βρεθείτε σε παρόμοια θέση, αυτή η ανάρτηση θα σας βοηθήσει να ανανεωθείτε γρήγορα. Εάν δεν έχετε βελτιστοποιήσει τις σελίδες σας για εκτύπωση, οι παρακάτω συμβουλές θα σας βοηθήσουν να ξεκινήσετε.
1. Σύνδεση στυλ για εκτύπωση
Ο καλύτερος τρόπος για να συμπεριλάβετε στυλ εκτύπωσης είναι να δηλώσετε την οδηγία @media στο CSS σας.
Σώμα (μέγεθος γραμματοσειράς: 18 εικονοστοιχεία; ) Εκτύπωση @media ( /* τα στυλ εκτύπωσης πηγαίνουν εδώ */ σώμα (μέγεθος γραμματοσειράς: 28 εικονοστοιχεία; ) )
Εναλλακτικά, μπορείτε να συμπεριλάβετε τα στυλ στο HTML, αλλά αυτό θα απαιτήσει ένα επιπλέον αίτημα HTTP.
2. Δοκιμές
Δεν χρειάζεται να εκτυπώνετε μια σελίδα κάθε φορά που κάνετε μια μικρή αλλαγή στυλ. Ανάλογα με το πρόγραμμα περιήγησης, μπορείτε να εξαγάγετε τη σελίδα σε PDF, να χρησιμοποιήσετε προεπισκόπηση εκτύπωσης ή να κάνετε εντοπισμό σφαλμάτων απευθείας στο πρόγραμμα περιήγησης.
Για εντοπισμό σφαλμάτων στυλ εκτύπωσης στον Firefox, ανοίξτε τη γραμμή εργαλείων προγραμματιστή (Shift + F2 ή Εργαλεία > Προγραμματιστής Ιστού > Γραμμή εργαλείων προγραμματιστή), πληκτρολογήστε media emulate print στο πλαίσιο εισαγωγής και πατήστε enter . Η ενεργή καρτέλα θα λειτουργεί σαν να εκτυπώνεται ο τύπος μέσου μέχρι να επαναφορτωθεί.
Εξομοίωση στυλ εκτύπωσης στον Firefox
Στο Chrome, ανοίξτε τα εργαλεία προγραμματιστή (CMD + Opt + I (macOS) ή Ctrl + Shift + I (Windows) ή μενού Προβολή > Προγραμματιστής > Εργαλεία προγραμματιστή) και εμφανίστε την κονσόλα, ανοίξτε τον πίνακα απόδοσης και επιλέξτε Εκτύπωση από την Εξομοίωση CSS Μενού πολυμέσων.
Εξομοίωση στυλ εκτύπωσης στο Chrome
3. Απόλυτες μονάδες μέτρησης
Οι απόλυτες μονάδες είναι κακές στην οθόνη, αλλά ιδανικές για εκτύπωση. Είναι απολύτως ασφαλές να τα χρησιμοποιείτε σε στυλ εκτύπωσης και συνιστάται ακόμη η χρήση μονάδων όπως cm , mm , in , pt ή pc .
Τομή ( περιθώριο-κάτω: 2 cm; )
4. Ειδικοί κανόνες για σελίδες
Μπορείτε να ορίσετε ιδιότητες ειδικά για την εκτυπωμένη σελίδα, όπως το μέγεθος σελίδας, τον προσανατολισμό και το padding, χρησιμοποιώντας την οδηγία @page. Αυτό είναι πολύ βολικό εάν θέλετε όλες οι σελίδες να έχουν συγκεκριμένες εσοχές.
Εκτύπωση @media ( @page ( περιθώριο: 1cm; ) )
Η οδηγία @page είναι μέρος της προδιαγραφής Paged Media Module, η οποία έχει εξαιρετικά χαρακτηριστικά, όπως τη δυνατότητα επιλογής της πρώτης σελίδας για εκτύπωση ή λευκών σελίδων, τοποθέτηση στοιχείων στη γωνία της σελίδας και πολλά άλλα. Αυτό μπορεί να χρησιμοποιηθεί ακόμη και για την εκτύπωση βιβλίων.
5. Διαχειριστείτε αλλαγές σελίδας
Δεδομένου ότι οι εκτυπωμένες σελίδες, σε αντίθεση με τις ιστοσελίδες, δεν είναι ατελείωτες, το περιεχόμενο θα σπάσει μεταξύ των σελίδων. Έχουμε 5 ιδιότητες για να ελέγξουμε πώς συμβαίνει αυτό.
Αλλαγή σελίδας πριν από το στοιχείο.
Εάν θέλουμε ένα στοιχείο να βρίσκεται πάντα στην αρχή της σελίδας, μπορούμε να επιβάλουμε μια αλλαγή σελίδας χρησιμοποιώντας τον κανόνα αλλαγής σελίδας πριν.
Ενότητα (διάλειμμα σελίδας-πριν: πάντα; )
Αλλαγή σελίδας μετά από στοιχείο.
Ο κανόνας αλλαγής σελίδας μας επιτρέπει να επιβάλουμε ή να απενεργοποιήσουμε αλλαγές σελίδας μετά από ένα στοιχείο.
H2 (διάλειμμα σελίδας μετά: πάντα; )
Αλλαγή σελίδας σε ένα στοιχείο
Αυτή η ιδιότητα είναι χρήσιμη εάν πρέπει να αποφύγετε αλλαγές σελίδας μέσα σε ένα στοιχείο.
Ul (διάλειμμα σελίδας: αποφυγή; )
Χήρες και ορφανά (κρεμασμένα κορδόνια)
Μερικές φορές δεν χρειάζεστε έλεγχο στις αλλαγές σελίδας, αλλά είναι σημαντικός ο έλεγχος του πόσες γραμμές θα εμφανίζονται στην τρέχουσα σελίδα και πόσες στην επόμενη σελίδα. Για παράδειγμα, εάν η τελευταία γραμμή μιας παραγράφου δεν χωράει στην τρέχουσα σελίδα, θα αναδιπλωθεί στην επόμενη σελίδα μαζί με την προτελευταία. Αυτό συμβαίνει επειδή η αντίστοιχη ιδιότητα widows είναι από προεπιλογή 2. Μπορούμε να την αλλάξουμε.
P ( χήρες: 4; )
Εάν συναντήσουμε την άλλη πλευρά αυτού του προβλήματος και έχουμε μόνο την πρώτη γραμμή μιας παραγράφου στην τρέχουσα σελίδα, τότε ολόκληρη η παράγραφος θα ξεκινήσει στην επόμενη σελίδα. Η ιδιοκτησία ορφανών είναι υπεύθυνη για αυτό και η προεπιλεγμένη τιμή της είναι 2.
P (ορφανά: 3;)
Αυτός ο κωδικός σημαίνει ότι τουλάχιστον 3 γραμμές πρέπει να χωρούν στην τρέχουσα σελίδα, έτσι ώστε η παράγραφος να μην αναδιπλώνεται στην επόμενη.
Δεν λειτουργούν όλες αυτές οι ιδιότητες και τιμές σε κάθε πρόγραμμα περιήγησης, θα πρέπει να ελέγξετε τα στυλ εκτύπωσης σε διαφορετικά προγράμματα περιήγησης.
6. Επαναφορά στυλ
Είναι λογικό να επαναφέρετε ορισμένα στυλ όπως το χρώμα φόντου , το πλαίσιο-σκιά και το χρώμα για εκτύπωση.
*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( φόντο: διαφανές !σημαντικό; χρώμα: #000 !important; box-shadow: κανένας !important; text-shadow: κανένας !important; )
Τα στυλ εκτύπωσης είναι μία από τις λίγες εξαιρέσεις όπου η χρήση της λέξης-κλειδιού !important είναι καλή.
7. Αφαίρεση προαιρετικού περιεχομένου
Για να αποφύγετε τη σπατάλη μελανιού, θα πρέπει να αφαιρέσετε περιττά αντικείμενα όπως τυπογραφία, διαφημίσεις, πλοήγηση κ.λπ. με την οθόνη: καμία ιδιοκτησία.
Μπορείτε βασικά να εμφανίσετε μόνο το κύριο περιεχόμενο και να αποκρύψετε όλα τα άλλα:
Σώμα > *:not(main) (εμφάνιση: κανένα;)
8. Εκτύπωση διευθύνσεων συνδέσμων
A:after ( περιεχόμενο: " (" attr(href) ")"; )
Φυσικά, όλα θα εμφανίζονται με αυτόν τον τρόπο: σχετικοί σύνδεσμοι, απόλυτοι σύνδεσμοι, άγκυρες και ούτω καθεξής. Η παρακάτω επιλογή θα λειτουργήσει καλύτερα:
A:not():after ( περιεχόμενο: " (" attr(href) ")"; )
Φαίνεται τρελό, το ξέρω. Ο τρόπος με τον οποίο λειτουργούν αυτές οι γραμμές είναι να εμφανίζει την τιμή του χαρακτηριστικού href δίπλα σε οποιονδήποτε σύνδεσμο που έχει έναν, εάν ξεκινά με http αλλά δεν οδηγεί στον mywebsite.com .
9. Εκτύπωση μεταγραφών συντομογραφιών
Οι συντομογραφίες πρέπει να είναι τυλιγμένες σε ένα στοιχείο με περιγραφή στο χαρακτηριστικό τίτλος. Είναι λογικό να το εκτυπώσετε.
Abbr:after ( περιεχόμενο: " (" attr(title) ")"; )
10. Εκτύπωση φόντου
Συνήθως τα προγράμματα περιήγησης δεν εκτυπώνουν έγχρωμες εικόνες φόντου και φόντου, εκτός εάν τους το δηλώσετε ρητά. Υπάρχει μια μη τυποποιημένη ιδιότητα print-color-adjust που σας επιτρέπει να παρακάμψετε τις προεπιλεγμένες ρυθμίσεις σε ορισμένα προγράμματα περιήγησης.
Κεφαλίδα ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )
11. Ερωτήματα μέσων
Εάν γράφετε ερωτήματα πολυμέσων όπως στο παρακάτω παράδειγμα, να γνωρίζετε ότι τα στυλ σε αυτό το ερώτημα πολυμέσων δεν θα εφαρμοστούν κατά την εκτύπωση.
Οθόνη @media και (ελάχ. πλάτος: 48 εκ.) ( /* μόνο οθόνη */ )
Θα ρωτήσετε γιατί; Επειδή οι κανόνες CSS ισχύουν μόνο όταν πληρούνται και οι δύο προϋποθέσεις: το ελάχιστο πλάτος είναι 48 cm, ο τύπος μέσου είναι οθόνη . Εάν απαλλαγούμε από τη λέξη-κλειδί οθόνης, τότε το ερώτημα πολυμέσων θα λάβει υπόψη μόνο την τιμή ελάχιστου πλάτους.
@media (ελάχ. πλάτος: 48 εκ.) ( /* όλοι οι τύποι μέσων */ )
12. Εκτύπωση καρτών
Οι τρέχουσες εκδόσεις του Firefox και του Chrome είναι σε θέση να εκτυπώνουν χάρτες, αλλά το Safari δεν είναι. Ορισμένες υπηρεσίες παρέχουν στατικούς χάρτες που μπορούν να εκτυπωθούν αντί για τον πρωτότυπο.
Χάρτης ( πλάτος: 400 px; ύψος: 300 px; φόντο-εικόνα: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadpreshet "); -webkit-print-color-adjust: ακριβής; print-color-adjust: ακριβής; )
13. Κωδικοί QR
Addon 2: Gutenberg
Αν ψάχνετε για ένα πλαίσιο, τότε μπορεί να σας αρέσει το Gutenberg, το οποίο κάνει τη βελτιστοποίηση σελίδας λίγο πιο εύκολη.
Addon 3: Hartija
Αυτό είναι ένα άλλο πλαίσιο στυλ εκτύπωσης από
Φαίνεται ότι είναι δύσκολο να δημιουργήσετε μια σελίδα για εκτύπωση; Απλώς δημιουργούμε το ίδιο έγγραφο με κείμενο αλλά χωρίς κανένα σχέδιο και συνδέσουμε σε αυτό από μια κανονική σελίδα. Ωστόσο, οι μηχανές αναζήτησης έχουν εισαγάγει ένα φίλτρο για διπλό περιεχόμενο και οι webmasters πρέπει να αποκρύπτουν εκτυπώσιμες σελίδες από τη δημιουργία ευρετηρίου. Επιπλέον, οι επισκέπτες του ιστότοπου δεν είναι επίσης πολύ βολικοί, επειδή πρέπει πρώτα να πάνε σε ένα αντίγραφο της σελίδας που χρειάζονται, στο οποίο δεν υπάρχουν στοιχεία σχεδίασης και, στη συνέχεια, να κάνουν κλικ στο κουμπί "Εκτύπωση".
Εδώ μπορεί να βοηθήσει το CSS, το οποίο όχι μόνο μειώνει τον όγκο εργασίας για τους webmasters και διευκολύνει τους επισκέπτες να χρησιμοποιούν τον ιστότοπο, αλλά σας επιτρέπει επίσης να αποφύγετε τις κυρώσεις από τις μηχανές αναζήτησης για διπλότυπο περιεχόμενο.
Δομή σελίδας
Λοιπόν, ας χρησιμοποιήσουμε πρώτα HTML για να δημιουργήσουμε τη δομή του εγγράφου μας. Για παράδειγμα, αποφάσισα να χρησιμοποιήσω μια διάταξη σε πίνακα για να γίνει πιο κατανοητό:
| Πλοήγηση Κύρια σελίδα Άρθρα Επαφές |
Τίτλος άρθρουΑυτή η σελίδα μπορεί να εκτυπωθεί. Θα εκτυπωθεί μόνο το κείμενο του άρθρου. |
Η διαφήμισή σας θα μπορούσε να είναι εδώ |
Όπως μπορείτε να δείτε, έχουμε έναν πίνακα με τρία κελιά που είναι διατεταγμένα οριζόντια. Όλα είναι σαν έναν κανονικό ιστότοπο: πλοήγηση στα αριστερά, περιεχόμενο στη μέση και μπλοκ διαφημίσεων ή ειδήσεις στα δεξιά. Σε κάθε κελί έχει εκχωρηθεί το δικό του αναγνωριστικό. Για την αριστερή πλευρά είναι η αριστερή στήλη, για τη δεξιά είναι η δεξιά στήλη και για το μεσαίο κελί περιεχομένου είναι το περιεχόμενο.
Προσθήκη CSS
Τώρα, χρησιμοποιώντας το CSS, πρέπει να πείτε στο πρόγραμμα περιήγησης ποια στυλ πρέπει να χρησιμοποιεί για να εμφανίζει στοιχεία σελίδας στην οθόνη και ποια πρέπει να χρησιμοποιεί κατά την εκτύπωση. Δημιουργήστε style.css και γράψτε εκεί τα εξής:
Οθόνη @media ( σώμα (χρώμα φόντου: #0B73BD; γραμματοσειρά-οικογένεια: tahoma; χρώμα: #FFFFFF; ) πίνακας (πλάτος: 600 εικονοστοιχεία; ) #αριστερή στήλη (πλάτος: 140 εικονοστοιχεία; κατακόρυφη στοίχιση: επάνω; μέγεθος γραμματοσειράς: 15 εικονοστοιχεία . ) ) @media print ( body ( χρώμα φόντου: #FFFFFF; γραμματοσειρά-οικογένεια: tahoma; χρώμα: #000000; ) #content (χρώμα φόντου: #FFFFFF; padding: 5px; μέγεθος γραμματοσειράς: 15px; χρώμα: # 000000; πλάτος: 600 εικονοστοιχεία; ) #αριστερή στήλη (εμφάνιση: καμία; ) #δεξιά στήλη (εμφάνιση: καμία; ) )Το πρώτο μπλοκ κώδικα CSS περιγράφει πώς πρέπει να εμφανίζονται τα στοιχεία της σελίδας στο πρόγραμμα περιήγησης. Το μπλοκ λήφθηκε σε πρόσθετα σγουρά άγκιστρα πριν από τα οποία προσθέσαμε την οθόνη @media. Αυτό λέει στο πρόγραμμα περιήγησης ότι αυτά τα στυλ πρέπει να εφαρμοστούν για εμφάνιση:
Αυτή είναι η εμφάνιση της σελίδας όταν προβάλλεται σε ένα πρόγραμμα περιήγησης
Το δεύτερο μπλοκ περιγράφει την εμφάνιση των ίδιων στοιχείων σελίδας με το πρώτο, αλλά σε αυτήν την περίπτωση με τη μορφή που θα φαίνεται το έγγραφο κατά την εκτύπωση και υποδεικνύεται από την παράμετρο εκτύπωσης @media. Εφόσον θέλουμε να εκτυπώνεται μόνο χρήσιμο περιεχόμενο, απενεργοποιούμε την εμφάνιση του αριστερού (#leftcolumn) και του δεξιού κελιού (#rightcolumn) ορίζοντας τα να εμφανίζονται: κανένα.
Αυτή είναι η έντυπη έκδοση της σελίδας του ιστότοπου
Ξεχωριστά αρχεία στυλ
Δεν είναι απαραίτητο να συνδυάσετε τα πάντα σε ένα αρχείο στυλ. Αντίθετα, μπορείτε να χρησιμοποιήσετε δύο αρχεία στυλ και, όταν τα συνδέετε με τις σελίδες του ιστότοπου, να πείτε στο πρόγραμμα περιήγησης ποιο αρχείο στυλ να χρησιμοποιήσει κατά την εκτύπωση και ποιο για εμφάνιση στην οθόνη. Το πρώτο (για έξοδο οθόνης) ορίζεται από την παράμετρο media="screen" και το δεύτερο θα χρησιμοποιηθεί για εκτύπωση και ορίζεται από την παράμετρο media="print":
Τα στυλ για εκτύπωση πρέπει να περιγράφονται μετά από όλα τα άλλα, διαφορετικά η Opera θα εκτυπώσει το μπλοκ περιεχομένου μαζί με το έγχρωμο φόντο που προορίζεται για έξοδο στο πρόγραμμα περιήγησης και όχι το λευκό χρώμα που επιλέξαμε για εκτύπωση.
Επίσης, κατά την εκτύπωση, μειώνουμε αυστηρά το πλάτος του μπλοκ περιεχομένου στα 600 εικονοστοιχεία, γιατί σε 100% πλάτος, ο εκτυπωτής «κόβει» μια μικρή λωρίδα κειμένου στη δεξιά πλευρά της σελίδας. Επίσης, δώστε προσοχή στο γεγονός ότι κατά την εκτύπωση από την Opera, η εσοχή κατά μήκος των άκρων του φύλλου είναι ελαφρώς μικρότερη από ό,τι στον Internet Explorer και οι γραμμές κειμένου στο φύλλο χαρτιού είναι ευρύτερες.
Τώρα δεν χρειάζεται πλέον να δημιουργείτε πρόσθετες σελίδες για εκτύπωση. Μπορείτε να ενημερώσετε τους χρήστες σχετικά με τη δυνατότητα εκτύπωσης μιας σελίδας, για παράδειγμα, χρησιμοποιώντας έναν σύνδεσμο με το κείμενο "εκτύπωση", όταν κάνετε κλικ, θα εμφανιστεί μια επεξήγηση εργαλείου με ένα μήνυμα σχετικά με τη δυνατότητα απευθείας εκτύπωσης της τρέχουσας σελίδας χωρίς σχέδιο.
Απαγορεύεται η αντιγραφή του άρθρου.
Φόρτωση...