initial-letter είναι μια ιδιότητα CSS που επιλέγει το πρώτο γράμμα του στοιχείου στο οποίο εφαρμόζεται και καθορίζει τον αριθμό των γραμμών που καταλαμβάνει το γράμμα.
Μπορεί να έχετε δει κάτι τέτοιο σε ειδησεογραφικούς ιστότοπους, όπου το πρώτο γράμμα μιας αρχικής παραγράφου είναι μεγαλύτερο από το υπόλοιπο περιεχόμενο.
Το τέχνασμα με το στυλ του πρώτου γράμματος περιεχομένου που χρησιμοποιείται για να πάρει λίγο χάκερ όπου τυλίγετε το γράμμα σε ένα και εφαρμόστε μια τάξη για να το στυλ:
/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )Once upon a time in a faraway land…
Αυτό λειτουργεί, αλλά είναι περισσότερο σήμανση HTML από ό, τι θέλουμε και διαλύει το περιεχόμενό μας. Επιπλέον, είναι οδυνηρό να πρέπει να εφαρμόσετε αυτήν την τάξη χειροκίνητα όποτε θέλετε να το χρησιμοποιήσετε.
Αυτό που initial-letterέρχεται:
/* Style that first letter! */ .subhead ( initial-letter: 2; )Once upon a time in a faraway land…
Αυτό είναι καθαρότερο! Μια άλλη προσέγγιση είναι να το εφαρμόσετε στον ::first-letterεπιλογέα psuedo:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )Το είδες αυτό? Η initial-letterιδιότητα υπολογίζει αυτόματα τόσο το μέγεθος της γραμματοσειράς όσο και τον αριθμό των γραμμών που απαιτούνται για τη δημιουργία του στυλιζαρισμένου καπάκι! Θέλετε να καταλάβει ακριβώς 2, 3, 4 ή περισσότερες γραμμές; Πείτε στο ακίνητο και θα κάνει τη βαριά ανύψωση.
Σύνταξη και τιμές
initial-letter: normal | ( );initial-letter αποδέχεται τις ακόλουθες τιμές:
normal: Δεν εφαρμόζεται εφέ κλιμάκωσης στο πρώτο γράμμα. Αυτό μπορεί να είναι χρήσιμο για την επαναφορά της τιμής όπου μπορεί να κληρονομηθεί κάποιος από τον καταρράκτη.: Πόσες γραμμές πρέπει να καταλαμβάνει το γράμμα όπου δεν επιτρέπονται αρνητικές τιμές.: Πόσες γραμμές θα πρέπει να βυθιστεί το γράμμα όπου δεν επιτρέπονται αρνητικές τιμές. Αυτό είναι βολικό σε περίπτωση που χρειαστεί να τοποθετήσετε το γράμμα χαμηλότερα για να αντιμετωπίσετε δύσκολες αποστάσεις, αλλά, αν δεν διευκρινιστεί, παίρνει την αξία του
Παραδείγματα
Το στυλ του αρχικού γράμματος μπορεί να χρησιμοποιηθεί για την επίτευξη ορισμένων φανταχτερών τυπογραφικών μεθόδων σχεδίασης. Λάβετε υπόψη ότι τα ακόλουθα παραδείγματα υποστηρίζονται μόνο από το Safari.
Τα Drop Caps είναι ίσως η πιο γνωστή περίπτωση χρήσης:
Δείτε το αρχικό γράμμα Pen: Drop Cap από τον Geoff Graham (@geoffgraham) στο CodePen.
Τα αυξημένα καπάκια είναι ένα άλλο παράδειγμα:
Δείτε το αρχικό γράμμα Pen: Raised Cap από τον Geoff Graham (@geoffgraham) στο CodePen.
Το Block Caps επιστρέφει στα παλιά παραμύθια:
Δείτε το αρχικό γράμμα Pen: Block Cap από τον Geoff Graham (@geoffgraham) στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| Οχι | Οχι | Οχι | Οχι | TP * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Οχι | Οχι | Οχι | 14.0-14.4 * |
Σχετιζομαι με
::first-letter- Απόσπασμα Drop Caps
Περισσότερες πληροφορίες
- CSS Inline Layout Module Level 3: Οι επίσημες εξειδικεύσεις
- Jen Simmons Labs: Επιδείξεις και παραδείγματα περιπτώσεων χρήσης
- Firefox Ticket: Ανοίξτε το εισιτήριο για την υποστήριξη της δυνατότητας
- Εισιτήριο Internet Explorer: Ανοίξτε το εισιτήριο για την υποστήριξη της δυνατότητας