Içerik - CSS Hileleri

Anonim

CSS'deki contentözellik, sözde öğeler ::beforeve ::after. Kelimenin tam anlamıyla içerik eklemek için kullanılır. Sahip olabileceği dört değer türü vardır.

Dize

.name::before ( content: "Name: "; )

Sonra bunun gibi bir unsur:

 Chris

Şu şekilde işler:

Name: Chris

Ayrıca, açık düzeltme gibi şeylerde yaygın olarak görülen boş bir dize de olabilir.

Sayaç

div::before ( content: counter(my-counter); )

Bununla ilgili daha fazla bilgi.

Resim

div::before ( content: url(image.jpg.webp); )

Bu tam anlamıyla sayfadaki bir resim gibi . Aynı zamanda bir gradyan da olabilir. Bu şekilde eklendiğinde görüntünün boyutlarını değiştiremeyeceğinizi unutmayın. İçerik için boş bir dize kullanarak, bir display: blockşekilde yaparak , boyutlandırarak ve kullanarak da bir görüntü ekleyebilirsiniz background-image. Bu şekilde yeniden boyutlandırabilirsin background-size.

Öznitelik

Doğrudan HTML'deki özniteliklerden alınan değerleri (yine de dizeler) kullanabilirsiniz.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

attr()Şöyle bir şey değerini geçemez böylece fonksiyon, henüz “türleri” yok 20px(sadece dizeleri), ancak birgün!

alternatif metin

Spesifikasyon, /alternatif metni listelemek için sözdiziminde bir kullanabileceğinizi söylüyor . Örneğin…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Belki bunu şu şekilde kullanabilirsiniz ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Daha fazla bilgi

Bu şekilde eklenen içerik gerçekte DOM'da değildir, bu nedenle bazı sınırlamaları vardır. Örneğin, bir sözde öğelere doğrudan (yalnızca) bir olay ekleyemezsiniz. Bu şekilde eklenen metnin ekran okuyucular tarafından okunup okunmadığı (genellikle bu günlerde) veya seçip seçemeyeceğiniz (genellikle bu günlerde değil) tutarsızdır.

  • Pseuedo öğelerinin yapabileceği harika şeyler
  • Sözde öğeler hakkında sunum
  • MDN Belgeleri

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
4 2 9 12 3.1

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Opera için url()yalnızca 7+ sürümlerinde desteklenir.