Obsah - Triky CSS

Anonim

contentNemovitost v CSS se používá ve spojení s pseudoprvky ::beforea ::after. Slouží k doslovnému vložení obsahu. Existují čtyři typy hodnot, které může mít.

Tětiva

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

Pak prvek jako je tento:

 Chris

Vykreslí se takto:

Name: Chris

Může to být také prázdný řetězec, který se běžně vyskytuje ve věcech, jako je clearfix.

Čelit

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

Více informací o tom.

obraz

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

Jedná se doslova o obrázek na stránce, jaký by byl. Může to být také přechod. Po vložení tímto způsobem nemůžete změnit rozměry obrázku. Můžete také vložit obrázek pomocí prázdného řetězce pro obsah, display: blocknějakým způsobem jej upravit, upravit jeho velikost a použít background-image. Tímto způsobem můžete změnit velikost background-size.

Atribut

Můžete použít hodnoty (řetězce), které jsou převzaty přímo z atributů v HTML.

 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()Funkce nemá „typy“ ještě ne, takže nelze předat hodnotu, jako je 20px(jen strun), ale jednoho dne!

Alternativní text

Specifikace říká, že /v syntaxi můžete použít seznam alternativního textu. Například…

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

Možná byste to mohli použít jako ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Více informací

Takto vložený obsah ve skutečnosti není v DOM, má tedy určitá omezení. Například nemůžete připojit událost přímo (pouze) k pseudoelementům. Rovněž je nekonzistentní, zda text vložený tímto způsobem čte čtečky obrazovky (obvykle je to dnes), nebo zda jej můžete vybrat (obvykle to dnes není).

  • Skvělé věci, které mohou prvky pseuedo dělat
  • Prezentace o pseudoprvcích
  • Dokumenty MDN

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
4 2 9 12 3.1

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Pro Opera je url()podporováno pouze ve verzi 7+.