CSS: belirli öğelere içerik eklemedikten sonra

Question 1

CSS :afterözelliğinin davranışını anlamada sorun yaşıyorum . Spesifikasyona göre ( burada ve burada ):

Adlarından da anlaşılacağı gibi, :beforeve :aftersözde öğeler, bir öğenin belge ağacı içeriğinden önce ve sonra içeriğin konumunu belirtir.

Bu, hangi öğelerin bir :after(veya :before) özelliğe sahip olabileceği konusunda kısıtlamalar getirmiyor gibi görünüyor . Ancak, sadece belirli unsurlarla<p> çalışıyor gibi görünüyor ... işe yarıyor, <img>çalışmıyor <input>, <table>yaramıyor. Daha fazlasını test edebilirim, ama önemli olan nokta. Bunun tarayıcılar arasında oldukça tutarlı göründüğünü unutmayın. Bir nesnenin bir :beforeve :afterözelliğini kabul edip edemeyeceğini ne belirler ?

Question 2

imgve inputher ikisi de değiştirilen öğelerdir .

Değiştirilen öğe, görünümü ve boyutları bir dış kaynak tarafından tanımlanan herhangi bir öğedir. Örnekler görüntüleri (dahil <img>etiketleri), eklentileri ( <object>etiketleri) ve form elemanları ( <button>, <textarea>, <input>, ve <select>etiketleri). Diğer tüm eleman türleri, değiştirilmemiş elemanlar olarak adlandırılabilir.

:beforeve :afteryalnızca değiştirilmemiş elemanlarla çalışın.

Gönderen spec :

Not. Bu belirtim, aşağıdakilerin etkileşimini tam olarak tanımlamaz :before ve :after(HTML olarak IMG) ikame elemanları. Bu, gelecekteki bir spesifikasyonda daha ayrıntılı olarak tanımlanacaktır.

İle span:before, span:after böyle DOM görünüyor,:

<span><before></before>Content of span<after></after></span>

Açıkça, bu işe yaramayacak <img src="" />.

Question 3

:beforeve gerekli:after değil yerini elemanları işe, ve CSS özellikleri onlar için çalışacak ve değiştirilen eleman kavramı biraz muğlak nasıl belirtmez.

CSS 2.1 spesifikasyonu açıkça anlaşılacağı onlar olabilir sadece nasıl “tam tanımlamak” olmadığını söyleyerek, değiştirilen elemanlar için çalışıyorum. Bu, değiştirilen bir öğenin CSS tarafından kontrol edilmeyen kendi görsel sunumuna sahip olmasının beklendiği, oysa sözde öğelerin öğenin içeriğine bir şeyler eklemesi gerektiği sorunuyla ilgilidir. Spesifikasyon, bunun gelecekteki bir spesifikasyonda "daha detaylı" tanımlanacağını eklemektedir, ancak bu şimdiye kadar gerçekleşmemiştir.

Tarayıcı satıcıları, bu sözde öğeleri bazı öğeler için uygulamayarak sorunlardan kaçınmaya karar verdiler.

“Değiştirilen öğenin” ne anlama geldiği hiç de net değil ve anlam bir şekilde değişmiş gibi görünüyor. Genellikle boş öğe ile aynı anlama geldiği şeklinde yorumlanır ( EMPTYbildirilen içeriğe sahip bir öğe , yani herhangi bir içeriğe sahip olamayan bir öğe), ancak CSS 2.1 , seçici ile birlikte örnek bir stil sayfası gösterir br:before(tarayıcılar bunu görmezden gelip brkendi yol). En azından kısmen CSS oluşturma kapsamına giderek daha fazla sayıda öğenin taşındığı iddia edilebilir. Örneğin, inputmodern tarayıcılarda bir öğe (yazı tipi, renkleri vb. Dahil) büyük ölçüde CSS ile kontrol edilebilir.

Mevcut tarayıcılar (Firefox, IE, Chrome), dışındaki boş öğeler için :afterve :beforesözde öğeleri desteklemiyor gibi görünüyor hr. İçin hr, IE ve Chrome uygulanmasıdır bir sınırlanmıştır kutu, içinde oluşturulan içeriği yerleştirmek hr; içerik kutuyu daha uzun hale getirir. Firefox, her iki (!) Sözde öğenin içeriğini, uygulaması olan yatay kuralın sonrasına yerleştirir hr. Bu varyasyon, CSS 2.1'de atıfta bulunulan “etkileşim” problemlerinin türlerini göstermektedir.

Genellikle bu sözde öğelerin, HTML tanımları herhangi bir içeriğe izin vermediği için boş öğeler için kullanılamayacağı iddia edilir. Bu bir kategori hatasıdır. Bir biçimlendirme dilinin sözdizimi kuralları, CSS'de yapabileceklerinizi kısıtlamaz

Sonuç olarak, :afterve :beforeşu anda boş elemanlar için kullanılamazlar (marjinal olarak hariç hr), ancak bu esas olarak uygulamalardan kaynaklanmaktadır ve gelecekte değişebilir.

Question 4

Kapanış etiketi olmayan öğeler geçersiz öğelerdir ve içlerindeki içeriği görüntüleyemezler:

https://www.w3.org/TR/html5/syntax.html#void-elements

Tüm Blink, Webkit ve Quantum tarayıcıları, yalnızca onay kutularında sözde öğeler oluşturmanıza izin verir, ancak bu, hiçbir özellik bu davranışa izin vermediğinden tartışmalıdır.

İşte bir örnek: https://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}