Sözde öğeler

CSS Podcast - 014: Sözde öğeler

Bir makaleniz varsa ve ilk harfin çok daha büyük bir büyük harf olmasını istiyorsanız bunu nasıl yaparsınız?

CSS'de bu tür bir tasarım ayrıntısı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;
}

Sanal öğe, daha fazla HTML eklemek zorunda kalmadan ek bir öğe ekleme veya hedefleme gibidir. ::first-letter kullanılan bu örnek çözüm, birçok sözde öğeden biridir. Bu öğelerin çeşitli rolleri vardır. Bu derste, hangi sözde öğelerin mevcut olduğunu ve bunları nasıl kullanabileceğinizi öğreneceksiniz.

::before ve ::after

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

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

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

content, boş dize de dahil olmak üzere herhangi bir dize olabilir ancak boş dize dışındaki tüm öğelerin ekran okuyucu tarafından okunacağını unutmayın. Resim ekleyebilirsiniz url. Bu durumda resim orijinal boyutlarında eklenir ve yeniden boyutlandıramazsınız. counter de ekleyebilirsiniz.

Oluşturulan ::before veya ::after öğelerine sınırsız şekilde istediğiniz stili uygulayabilirsiniz. Yalnızca alt öğeleri kabul eden bir öğeye (belge ağacı içeren öğeler) ::before veya ::after öğesi ekleyebilirsiniz. Bu nedenle <img />, <video> ve <input> gibi öğeler kullanılamaz.

::first-letter

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

• color
• background mülkleri (background-image gibi)
• border mülkleri (border-color gibi)
• 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 ise metnin ilk satırını biçimlendirmenize olanak tanır.

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

::first-letter sözde öğesinde olduğu gibi, yalnızca bir CSS özelliği alt kümesini kullanabilirsiniz:

• color
• background tesis
• font tesis
• text tesis

::backdrop

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

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

::marker

::marker sözde öğesi, bir liste öğesinin veya <summary> öğesinin okunun simgesini ya da numarasını biçimlendirmenize 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 yalnızca CSS özelliklerinin küçük bir alt kümesi desteklenir:

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

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

::selection

::selection sözde öğesi, seçili metnin görünümünü biçimlendirmenize olanak tanır.

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

Bu sözde öğe, seçili tüm metne yukarıdaki demoda olduğu gibi stil uygulamak 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, yalnızca CSS özelliklerinin bir alt kümesine izin verilir:

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

::placeholder

Form öğelerine yardımcı ipucu ekleyebilirsiniz (ör. placeholder özelliğine sahip <input>). ::placeholder sözde öğesi, bu metne stil uygulamanıza olanak tanır.

input::placeholder {
  color: darkcyan;
}

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

• color
• background tesis
• font tesis
• text tesis

::cue

Sözde öğe turumuzun sonu ::cue sözde öğesiyle geliyor. Bu sayede, <video> öğesinin altyazılarını oluşturan WebVTT işaretlerine stil uygulayabilirsiniz.

Bir seçiciyi ::cue içine de iletebilirsiniz. Bu, bir altyazıdaki belirli öğelere stil uygulamanıza olanak tanır.

video::cue {
  color: yellow;
}

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

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

Öğrendiklerinizi test etme

Sözde öğelerle ilgili bilginizi test edin