Είχα παλιά αυτό το αφεντικό που αγάπησε, αγάπησε, αγάπησε, αγάπησε να τονίζει τις λέξεις. Αυτό ήταν πολύ πριν χρησιμοποιήσουμε συντάκτες WYSIWYG και θα έπρεπε να κωδικοποιήσω με το χέρι αυτό το χάλι.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(Ας μην μπούμε στα χρώματα που χρησιμοποίησε ακόμη ΜΟΑΡ έμφαση.)
Η σύνταξη όλης αυτής της σήμανσης δεν ήταν ποτέ υπέροχη. Η προσπάθεια που χρειάστηκε, σίγουρα, ό,τι κι αν είναι. Είναι όμως καλή ιδέα να προσθέσετε περιεχόμενο υπερφόρτωσης με διπλό — ή περισσότερο! — τονίζει;
Διαφορετικές ετικέτες δίνουν διαφορετική έμφαση
Για αρχάριους, το <strong>
και <em>
Οι ετικέτες έχουν σχεδιαστεί για διαφορετικές χρήσεις. Τα πήραμε ξανά σε HTML5, όπου:
Έτσι <strong>
δίνει στο περιεχόμενο μεγαλύτερη βαρύτητα με την έννοια ότι υποδηλώνει ότι το περιεχόμενο σε αυτό είναι σημαντικό ή επείγον. Σκεφτείτε μια προειδοποίηση:
Προειδοποίηση: Το παρακάτω περιεχόμενο έχει επισημανθεί ως εκπληκτικό.
Μπορεί να είναι δελεαστικό να προσεγγίσετε <em>
να κάνει το ίδιο πράγμα. Το πλάγιο κείμενο μπορεί τελικά να τραβήξει την προσοχή. Αλλά πραγματικά προορίζεται ως υπόδειξη για να δοθεί περισσότερη έμφαση κατά την ανάγνωση του περιεχομένου σε αυτό. Για παράδειγμα, εδώ είναι δύο εκδοχές της ίδιας πρότασης με έμφαση σε διαφορετικές τοποθεσίες:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Και τα δύο παραδείγματα τονίζουν την έμφαση, αλλά σε διαφορετικές λέξεις. Και θα ακούγονταν διαφορετικά αν τα διάβαζες δυνατά. Που κανει <em>
ένας πολύ καλός τρόπος για να εκφράσετε τον τόνο στη γραφή σας. Αλλάζει το νόημα της πρότασης με τρόπο που <strong>
δεν.
Οπτική έμφαση έναντι σημασιολογικής έμφασης
Αυτά είναι δύο πράγματα που πρέπει να σταθμίσετε όταν δίνετε έμφαση στο περιεχόμενο. Όπως, υπάρχουν πολλές περιπτώσεις όπου μπορεί να χρειαστεί να κάνετε πλάγιους χαρακτήρες στο περιεχόμενο χωρίς να επηρεάζετε το νόημα της πρότασης. Αλλά αυτά μπορούν να αντιμετωπιστούν με άλλες ετικέτες που αποδίδουν πλάγιους χαρακτήρες:
<i>
: Αυτό είναι το κλασικό! Πριν από την HTML5, αυτό χρησιμοποιήθηκε για να τονίσει την έμφαση με πλάγιους χαρακτήρες παντού. Τώρα, χρησιμοποιείται καθαρά για την οπτική πλάγια γραφή του περιεχομένου χωρίς να αλλάζει το σημασιολογικό νόημα.<cite>
: Υποδεικνύοντας την πηγή ενός γεγονότος ή ενός αριθμού. ("Πηγή: CSS-Κόλπα")<address>
: Χρησιμοποιείται για τη σήμανση στοιχείων επικοινωνίας, όχι μόνο φυσικών διευθύνσεων, αλλά και πράγματα όπως διευθύνσεις email και αριθμούς τηλεφώνου. (
)
Θα του πάει το ίδιο πράγμα με <strong>
. Αντί να το χρησιμοποιείτε για στυλ κειμένου που θέλετε να φαίνεστε πιο βαρύ, είναι καλύτερη ιδέα να χρησιμοποιήσετε το κλασικό <b>
ετικέτα για έντονους χαρακτήρες για να αποφύγετε να δίνετε επιπλέον σημασία σε περιεχόμενο που δεν το χρειάζεται. Και να θυμάστε, ορισμένα στοιχεία όπως οι επικεφαλίδες έχουν ήδη αποδοθεί με έντονη γραφή, χάρη στα προεπιλεγμένα στυλ του προγράμματος περιήγησης. Δεν χρειάζεται να προσθέσουμε ακόμη μεγαλύτερη έμφαση.
Χρήση πλάγιων χαρακτήρων σε περιεχόμενο με έμφαση (και αντίστροφα)
Υπάρχουν νόμιμες περιπτώσεις όπου μπορεί να χρειαστεί να γράψετε πλάγια γράμματα σε μέρος μιας γραμμής που έχει ήδη τονιστεί. Ή ίσως να προσθέσετε έμφαση σε ένα κομμάτι κειμένου που έχει ήδη πλάγια γράμματα.
Ένα μπλοκ απόσπασμα μπορεί να είναι ένα καλό παράδειγμα. Έχω δει πολλές φορές όπου έχουν πλάγια γράμματα για το στυλ, παρόλο που τα προεπιλεγμένα στυλ προγράμματος περιήγησης δεν το κάνουν:
blockquote { font-style: italic;
}
Τι γίνεται αν χρειαστεί να αναφέρουμε έναν τίτλο ταινίας σε αυτό το μπλοκ; Αυτό πρέπει να είναι πλάγιο. Δεν χρειάζεται έμφαση στο άγχος, επομένως <i>
ετικέτα θα κάνει. Αλλά είναι ακόμα περίεργο να γράφεις κάτι με πλάγια γραφή όταν έχει ήδη αποδοθεί με αυτόν τον τρόπο:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
Σε μια κατάσταση όπου κάνουμε πλάγια γραφή σε κάτι μέσα σε περιεχόμενο με πλάγια γραφή όπως αυτό, υποτίθεται ότι αφαιρέστε τους πλάγιους χαρακτήρες από το ένθετο στοιχείο… <i>
σε αυτήν την περίπτωση.
blockquote i { font-style: normal;
}
Ερωτήματα στυλ κοντέινερ θα είναι πολύ χρήσιμο να εντοπίσουμε όλες αυτές τις περιπτώσεις αν τις λάβουμε:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Αυτό το μικρό απόσπασμα αξιολογεί το blockquote για να δει αν είναι font-style
έχει οριστεί σε italic
. Εάν είναι, τότε θα βεβαιωθεί ότι <em>
, <i>
, <cite>
, να <address>
Τα στοιχεία αποδίδονται ως κανονικό κείμενο, ενώ διατηρούν τη σημασιολογική σημασία εάν υπάρχει.
Αλλά πίσω στην έμφαση μέσα στην έμφαση
Δεν θα φώλιαζα <strong>
μέσα <em>
σαν αυτό:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…ή φωλιά <em>
μέσα <strong>
αντι αυτου:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Η απόδοση είναι μια χαρά! Και δεν έχει σημασία με ποια σειρά έχουν… τουλάχιστον στα σύγχρονα προγράμματα περιήγησης. Η Jennifer Kyrnin το αναφέρει Ορισμένα προγράμματα περιήγησης αποδίδουν μόνο την ετικέτα που βρίσκεται πιο κοντά στο κείμενο, αλλά δεν το συνάντησα πουθενά στις περιορισμένες δοκιμές μου. Αλλά κάτι που πρέπει να προσέξετε!
Ο λόγος που δεν θα έδινα μια μορφή έμφασης σε μια άλλη είναι επειδή απλά δεν χρειάζεται. Δεν υπάρχει κανένας γραμματικός κανόνας που να το απαιτεί. Όπως τα θαυμαστικά, μια μορφή έμφασης είναι αρκετή και θα πρέπει να χρησιμοποιήσετε αυτήν που ταιριάζει με αυτό που αναζητάτε είτε πρόκειται για οπτική, είτε για βάρος είτε για ανακοινωμένη έμφαση.
Και παρόλο που ορισμένα προγράμματα ανάγνωσης οθόνης είναι σε θέση να ανακοινώνουν περιεχόμενο με έμφαση, δεν θα διαβάσουν τη σήμανση με πρόσθετη σημασία ή έμφαση. Επομένως, ούτε πρόσθετα προνόμια προσβασιμότητας, όσο μπορώ να πω.
Αλλά θέλω πραγματικά όλη την έμφαση!
Αν είσαι στη θέση που το αφεντικό σου είναι σαν το δικό μου και θέλει ΌΛΟΙ ο έμφαση, θα ήθελα να αναζητήσω τη σωστή ετικέτα HTML για τον τύπο έμφασης και, στη συνέχεια, να εφαρμόσω τα υπόλοιπα στυλ με έναν συνδυασμό ετικετών που δεν επηρεάζουν τη σημασιολογία με το CSS για να βοηθήσω να λάβουμε υπόψη οτιδήποτε δεν χειρίζονται τα στυλ του προγράμματος περιήγησης.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
Ίσως το κάνω ακόμη και με το <strong>
επισημάνετε επίσης ως αμυντικό μέτρο:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Όσο παίζουμε άμυνα, μπορούμε να εντοπίσουμε λάθη όπου οι τονισμοί είναι ένθετοι μέσα στις τονίσεις επισημαίνοντάς τες με κόκκινο ή κάτι τέτοιο:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
Στη συνέχεια, πιθανότατα θα χρησιμοποιούσα αυτό το απόσπασμα από την τελευταία ενότητα που αφαιρεί το προεπιλεγμένο πλάγιο στυλ από ένα στοιχείο όταν είναι ένθετο σε άλλο στοιχείο με πλάγια γραφή.
Τίποτα άλλο;
Mayyyyybe:
- SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
- Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
- πηγή: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- προσιτότητα
- Λογαριασμός
- Πρόσθετος
- διεύθυνση
- διευθύνσεις
- επηρεάζουν
- συγκινητικός
- Μετά το
- Όλα
- alone
- ήδη
- Αμερική
- και
- ανακοίνωσε
- Ανακοίνωση
- Άλλος
- οπουδήποτε
- Εφαρμογή
- avatar
- πίσω
- φόντο
- επειδή
- πριν
- είναι
- Καλύτερα
- Κομμάτι
- σύνορο
- ΑΦΕΝΤΙΚΌ
- Κουτί
- εκδοτήριο
- πρόγραμμα περιήγησης
- browsers
- προϋπολογισμός
- κλήσεις
- ικανός
- περίπτωση
- περιπτώσεις
- Αλλαγές
- αλλαγή
- κλασικό
- χρώμα
- επικοινωνήστε μαζί μας
- Περιέχει
- περιεχόμενο
- CSS
- Προεπιλογή
- Άμυνα
- αμυντικός
- σχεδιασμένα
- διαφορετικές
- Όχι
- Μην
- διπλασιαστεί
- προσπάθεια
- είτε
- στοιχεία
- ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ
- έμφαση
- τονίζω
- τόνισε
- τεράστιος
- αρκετά
- Ολόκληρος
- λάθη
- Even
- παράδειγμα
- παραδείγματα
- ρητή
- επιπλέον
- αγώνες
- Εικόνα
- Όνομα
- σημαία
- Εξής
- μορφή
- από
- παίρνω
- δίνει
- Δίνοντας
- Παγκόσμια
- Go
- μετάβαση
- καλός
- εξαιρετική
- λαβή
- βοήθεια
- εδώ
- Επισημάνετε
- επισήμανση
- HTML
- HTTPS
- ιδέα
- προσδιορίσει
- σπουδαιότητα
- σημαντικό
- in
- πληροφορίες
- διορατικότητα
- αντί
- IT
- Τζένιφερ
- Επίθετο
- Περιωρισμένος
- γραμμή
- λίγο
- θέσεις
- Μακριά
- ματιά
- που
- κάνω
- ΚΑΝΕΙ
- σημάδι
- ύλη
- νόημα
- μέτρο
- αναφέρει
- ενδέχεται να
- εκατομμύριο
- ΜΟΝΤΕΡΝΑ
- ορμή
- περισσότερο
- ταινία
- Κινηματογράφος
- NAB
- Ανάγκη
- Nest
- κανονικός
- Βόρειος
- Βόρεια Αμερική
- αριθμοί
- προσφορές
- Office
- ONE
- άνοιγμα
- τάξη
- ΑΛΛΑ
- μέρος
- επίδοση
- προνόμια
- τηλέφωνο
- φυσικός
- Μέρος
- Πλάτων
- Πληροφορία δεδομένων Plato
- Πλάτωνα δεδομένα
- παιχνίδι
- Αφθονία
- σημεία
- θέση
- πιθανώς
- προστατεύονται
- καθαρώς
- φθάσουν
- Διάβασε
- αναγνώστες
- λόγος
- Red
- θυμάμαι
- απόδοση
- ΠΕΡΙΦΕΡΕΙΑ
- συγκράτησης
- Άρθρο
- ίδιο
- Οθόνη
- αναγνώστες οθόνης
- Τμήμα
- σημασιολογία
- αίσθηση
- ποινή
- σειρά
- θα πρέπει να
- απλά
- κατάσταση
- So
- μερικοί
- κάτι
- Ήχος
- Πηγή
- Ακόμη
- στρες
- ισχυρός
- στυλ
- Προτείνει
- Σούπερ
- υποτιθεμένος
- TAG
- δοκιμές
- Η
- Η Πηγη
- πράγμα
- πράγματα
- φορές
- Τίτλος
- προς την
- TONE
- πολύ
- αληθής
- επείγων
- χρήση
- προειδοποίηση
- Δες
- σαββατοκύριακο
- ζυγίζω
- βάρος
- Τι
- αν
- ενώ
- Ο ΟΠΟΊΟΣ
- θα
- εντός
- χωρίς
- λόγια
- θα
- γραφή
- Εσείς
- Σας
- zephyrnet