Pradinis laiškas - CSS-gudrybės

Anonim

initial-letter yra CSS ypatybė, kuri pasirenka pirmąją elemento raidę, kur ji taikoma, ir nurodo raidės užimamų eilučių skaičių.

Kažką panašaus galėjote pamatyti naujienų svetainėse, kur pirmajame pastraipos pirmoji raidė yra didesnė už likusį turinį.

„New Yorker“ svetainė sutvarko pradinį laišką

Pirmojo turinio raidės stiliaus gudrybė buvo naudojama šiek tiek nulaužti, kai įvyniojote raidę į a ir pritaikykite klasę, kad ją stilizuotumėte :

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Tai veikia, bet tai yra daugiau HTML žymėjimo, nei mes norime, ir sugadina mūsų turinį. Be to, skaudu, kai tą klasę reikia taikyti rankiniu būdu bet kada, kai norite ją naudoti.

Tai, kur initial-letterateina:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Tai švariau! Kitas būdas yra taikyti jį „ ::first-letterpsuedo-selector“:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Ar tu tai matei? initial-letterNuosavybė automatiškai apskaičiuoja tiek šrifto dydį ir linijų, kurių reikia siekiant sukurti mūsų stilizuotas lašas dangtelį skaičių! Norite, kad jis užimtų tiksliai 2, 3, 4 ar daugiau eilučių? Pasakykite turtui ir jis sunkiai pakels.

Nuosavybės keitimas užimant 1, 2 ir 4 eilutes

Sintaksė ir vertybės

initial-letter: normal | ( );

initial-letter priima šias vertes:

  • normal: Netaikomas mastelio efektas pirmajai raidei. Tai gali būti naudinga iš naujo nustatant vertę, kur ji gali būti paveldėta iš kaskados.
  • : Kiek eilučių raidė turėtų užimti ten, kur neigiamos reikšmės neleidžiamos.
  • : Kiek eilučių raidė turėtų nuskęsti ten, kur neigiamos reikšmės neleidžiamos. Tai yra patogu, jei raidę reikia išdėstyti žemiau, kad būtų atsižvelgta į sudėtingas tarpų problemas, tačiau, jei nenurodyta, ji reikalauja

Pavyzdžiai

Nuleiskite dangtelį, pakelkite dangtelį ir užblokuokite dangtelį naudodami pradinį laišką

Pradinės raidės stilius gali būti naudojamas norint pasiekti keletą išgalvotų tipografinių projektavimo metodų. Atminkite, kad šiuos pavyzdžius šiuo metu palaiko tik „Safari“.

Drop Caps yra turbūt labiausiai žinomas naudojimo atvejis:

Žr. Rašiklio rašto pradinį laišką: „CodePen“ „Geoff Graham“ (@geoffgraham) „Drop Cap“.

Pakeltos kepurės yra dar vienas pavyzdys:

Žr. Rašiklio rašto pradinį laišką: Geoff Graham (@geoffgraham) pakeltas dangtelis „CodePen“.

„Block Caps“ grįžta prie senų pasakų:

Žr. „Pen“ pradinį laišką: „Block Cap“, kurį sukūrė Geoffas Grahamas (@geoffgraham) „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
Ne Ne Ne Ne TP *

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
Ne Ne Ne 14,0–14,4 *

Susijęs

  • ::first-letter
  • „Drop Caps“ fragmentas

Daugiau informacijos

  • 3 lygio CSS vidinio išdėstymo modulis: oficialios specifikos
  • Jen Simmons Labs: Demonstracijos ir naudojimo atvejų pavyzdžiai
  • „Firefox“ bilietas: atviras bilietas, skirtas palaikyti šią funkciją
  • „Internet Explorer“ bilietas: atidarykite bilietą, kad palaikytumėte šią funkciją