Sözde öğeler

CSS Podcast - 014: Sözde öğeler

Bir içerik makaleniz varsa ve ilk harfin çok daha büyük bir düşüş olmasını istiyorsanız bunu nasıl yapabilirsiniz?

Mavi kapaklı birkaç paragraftan oluşan metin

CSS'de bu tür tasarım ayrıntılarına ulaşmak için ::first-letter sözde öğesini kullanabilirsiniz.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Sözde öğe, daha fazla HTML eklemek zorunda kalmadan fazladan bir öğe eklemeye veya hedeflemeye benzer. ::first-letter kullanan bu örnek çözüm, birçok sözde öğeden biridir. Bunların bir dizi rolü vardır. Bu derste hangi sahte öğelerin mevcut olduğunu ve bunları nasıl kullanabileceğinizi öğreneceksiniz.

::before ve ::after

Hem ::before hem de ::after sözde öğeleri, yalnızca bir content özelliği tanımlarsanız bir öğenin içinde bir alt öğe oluşturur.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content, boş bir dize de dahil olmak üzere herhangi bir dize olabilir. Ancak ekran okuyucuların boş dize dışındaki tüm dizeleri dinleme ihtimalinin yüksek olduğunu unutmayın. Bir resim url ekleyebilirsiniz. Bu işlem, resmi orijinal boyutlarında ekleyerek yeniden boyutlandıramazsınız. counter da ekleyebilirsiniz.

Bir ::before veya ::after öğesi oluşturulduktan sonra, hiçbir sınırlama olmadan istediğiniz gibi stilini belirleyebilirsiniz. ::before veya ::after öğelerini yalnızca alt öğeleri (doküman ağacı olan öğeler) kabul edecek bir öğeye ekleyebilirsiniz. Bu nedenle <img />, <video> ve <input> gibi öğeler çalışmaz.

::first-letter

Bu sözde öğeyle dersin başında tanıştık. ::first-letter hedeflenirken tüm CSS özelliklerinin kullanılamayacağını unutmayın. Kullanılabilir özellikler şunlardır:

  • color
  • background mülkleri (ör. background-image)
  • border mülkleri (ör. border-color)
  • float
  • font mülkleri (font-size ve font-weight gibi)
  • metin özellikleri (text-decoration ve word-spacing gibi)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line sözde öğesi, yalnızca ::first-line uygulanmış öğenin display değeri block, inline-block, list-item, table-caption veya table-cell olduğunda metnin ilk satırının stilini belirlemenize olanak tanır.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

::first-letter sözde öğesi gibi, CSS özelliklerinin yalnızca bir alt kümesini kullanabilirsiniz:

  • color
  • background tesis
  • font tesis
  • text tesis

::backdrop

Tam ekran modunda sunulan <dialog> veya <video> gibi bir öğeniz varsa arka planı (öğe ile sayfanın geri kalanı arasındaki boşluk) ::backdrop sözde öğesiyle biçimlendirebilirsiniz:

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker sözde öğesi, bir liste öğesi için madde işareti veya sayı ya da <summary> öğesindeki ok stilini belirlemenize olanak tanır.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker için CSS özelliklerinin yalnızca küçük bir alt grubu desteklenir:

  • color
  • content
  • white-space
  • font tesis
  • animation ve transition mülkleri

content özelliğini kullanarak işaretçi simgesini değiştirebilirsiniz. Örneğin, bunu bir <summary> öğesinin kapalı ve boş durumları için artı ve eksi simgesi ayarlamak üzere kullanabilirsiniz.

::selection

::selection sözde öğesi, seçilen metnin görünümünü şekillendirmenize olanak tanır.

::selection {
  background: green;
  color: white;
}

Bu sözde öğe, seçili tüm metni yukarıdaki demoda olduğu gibi biçimlendirmek için kullanılabilir. Daha spesifik bir seçim stili için diğer seçicilerle birlikte de kullanılabilir.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Diğer sözde öğelerde olduğu gibi, CSS özelliklerinin yalnızca bir alt kümesine izin verilir:

  • color
  • background-color ancak background-image değil
  • text tesis

::placeholder

Tarayıcı Desteği

  • 57
  • 79
  • 51
  • 10.1

Kaynak

placeholder özelliğiyle form öğelerine <input> gibi bir yardımcı ipucu ekleyebilirsiniz. ::placeholder sözde öğesi, bu metni biçimlendirmenize olanak tanır.

input::placeholder {
  color: darkcyan;
}

::placeholder, CSS kurallarının yalnızca bir alt kümesini destekler:

  • color
  • background tesis
  • font tesis
  • text tesis

::cue

Tarayıcı Desteği

  • 26
  • 79
  • 55
  • 7

Kaynak

Sözde öğelerle ilgili bu turun sonuncusu ::cue sözde öğedir. Bu, <video> öğesinin altyazıları olan WebVTT ipuçlarının stilini belirlemenize olanak tanır.

Seçiciyi ::cue öğesine de aktarabilirsiniz. Böylece, altyazının içindeki belirli öğeleri biçimlendirebilirsiniz.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Öğrendiklerinizi sınayın

Sözde öğeler bilginizi test etme

Aşağıdakilerden hangisi sözde öğe değildir?

::before
content: ''; eklemeyi unutmayın.
::first-paragraph
Bu öğe CSS'de mevcut değildir.
::after
content: ''; eklemeyi unutmayın.
::marker
Bu, liste öğesi veya görüntüleme türü kullandığınızda madde işareti öğesidir.
::pencil
Bu öğe CSS'de mevcut değildir.
:active
Bu, sözde öğe değil, gerçek bir sınıftır.

Sözde öğeler, bir HTML dosyasında bulunabilir.

Doğru
Geliştirici Araçları, Öğeler panelinde sözde öğeler gösterebilir, ancak sözde öğeler HTML'de bulunmaz, tarayıcıya aittir.
Yanlış
Bunlar CSS tarafından hedeflenebilir, ancak HTML'de bulunamaz.