Ilk harf - CSS Hileleri

Anonim

initial-letter uygulandığı öğenin ilk harfini seçen ve harfin kapladığı satır sayısını belirten bir CSS özelliğidir.

Baştaki bir paragrafın ilk harfinin içeriğin geri kalanından daha büyük olduğu haber sitelerinde buna benzer bir şey görmüş olabilirsiniz.

New Yorker'ın sitesi ilk mektuba stil veriyor

İçeriğin ilk harfini şekillendirmenin püf noktası, mektubu a harfine sardığınız ve onu şekillendirmek için bir sınıf uyguladığınız küçük bir kesmek için kullanılır :

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


Once upon a time in a faraway land…

Bu işe yarıyor, ancak istediğimizden daha fazla HTML biçimlendirmesi ve içeriğimizi bölüyor. Ayrıca, kullanmak istediğiniz herhangi bir zamanda bu sınıfı manuel olarak uygulamak zorunda kalmak acıdır.

Nerede initial-lettergelir:

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


Once upon a time in a faraway land…

Bu daha temiz! Başka bir yaklaşım, ::first-letterbunun yerine onu psuedo-selector'a uygulamaktır :

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

Şunu gördün mü? initial-letterMülkiyet otomatik yazı tipi boyutu ve bizim stilize Gömmeyi oluşturmak için gerekli satır sayısını hem hesaplar! Tam olarak 2, 3, 4 veya daha fazla satır kaplamasını mı istiyorsunuz? Mülke söyle ve ağır işi o halledecek.

Özelliği 1, 2 ve 4 satır işgal edecek şekilde değiştirme

Sözdizimi ve Değerler

initial-letter: normal | ( );

initial-letter aşağıdaki değerleri kabul eder:

  • normal: İlk harfe ölçekleme efekti uygulamaz. Bu, basamaktan miras alınabilecek değerin sıfırlanması için yararlı olabilir.
  • : Negatif değerlere izin verilmeyen harfin kaç satır kaplaması gerektiği.
  • : Negatif değerlere izin verilmeyen yerlerde harfin kaç satır batması gerektiği. Bu, karmaşık boşluk sorunlarını gidermek için harfi daha aşağı konumlandırmanız gerektiğinde kullanışlıdır, ancak belirtilmezse, değerini alır

Örnekler

İlk Harf kullanarak Düşürme, Yükseltilmiş Kapak ve Blok Kapak

İlk mektubu şekillendirmek, bazı süslü tipografik tasarım yöntemleri elde etmek için kullanılabilir. Lütfen aşağıdaki örneklerin şu anda yalnızca Safari tarafından desteklendiğini unutmayın.

Düşürme Başlıkları muhtemelen en bilinen kullanım durumudur:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Pen baş harfine bakın: Drop Cap.

Yükseltilmiş Kapaklar başka bir örnektir:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Kalem baş harfine bakın: Raised Cap.

Blok Kapaklar eski masallara geri dönüyor:

CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Pen baş harfine bakın: Block Cap.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
Hayır Hayır Hayır Hayır TP *

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
Hayır Hayır Hayır 14.0-14.4 *

İlişkili

  • ::first-letter
  • Gömme pasajı

Daha fazla bilgi

  • CSS Satır İçi Mizanpaj Modülü Seviye 3: Resmi özellikler
  • Jen Simmons Labs: Demolar ve kullanım senaryoları örnekleri
  • Firefox Bileti: Özelliği desteklemek için bilet açın
  • Internet Explorer Bileti: Özelliği desteklemek için bilet açın