Obsah - Triky CSS

Anonim

contentNehnuteľnosť v CSS sa používa v spojení s pseudoprvkov ::beforea ::after. Slúži na doslova vloženie obsahu. Existujú štyri typy hodnôt, ktoré môže mať.

String

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

Potom prvok ako tento:

 Chris

Vykreslí sa takto:

Name: Chris

Môže to byť tiež prázdny reťazec, ktorý sa bežne vyskytuje vo veciach ako clearfix.

Počítadlo

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

Viac informácií o tom.

Obrázok

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

Toto je doslova obrázok na stránke, aký by bol. Môže to byť aj gradient. Upozorňujeme, že po vložení týmto spôsobom nemôžete zmeniť rozmery obrázka. Obrázok môžete tiež vložiť pomocou prázdneho reťazca pre obsah, display: blocknejakým spôsobom ho vytvoriť, zmeniť jeho veľkosť a použiť background-image. Takto by ste to mohli zmeniť veľkosť background-size.

Atribút

Môžete použiť hodnoty (aj tak reťazce), ktoré sú prevzaté priamo z atribútov v kóde 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()Funkcia nemá "typy" ešte nie, takže nemožno odovzdať hodnotu, ako je 20px(len strún), ale jedného dňa!

Alternatívny text

Špecifikácia hovorí, že /v zozname syntaxe môžete použiť alternatívny text. Napríklad…

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

Možno by ste to mohli použiť ako ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Viac informácií

Takto vložený obsah sa v skutočnosti nenachádza v doméne DOM, má teda určité obmedzenia. Napríklad nemôžete pridať udalosť priamo (iba) k pseudoelementom. Takisto nie je konzistentné, či text vložený týmto spôsobom čítajú alebo nepoužívajú čítačky obrazovky (zvyčajne je to v dnešných dňoch), alebo či ho môžete zvoliť (zvyčajne to v súčasnosti nie je).

  • Skvelé veci, ktoré prvky pseuedo dokážu
  • Prezentácia o pseudoprvkoch
  • Dokumenty MDN

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
4 2 9 12 3.1

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Pre Opera je url()podporované iba vo verzii 7+.