A tartalom tulajdonsága • css-ről

előző ◈ a következő

A tartalom tulajdonsága

Az oldal CSS használatával olyan elemeket is hozzáadhat, amelyek nem léteznek az oldal elrendezésében. Ezt a: előtt és után: az ál-elemek használatával végezzük. de a tartalom tulajdonsága ugyanilyen fontos szerepet játszik ebben.

Meghatározza az ál-elemek tartalmát. És még inkább, az ál-elemek nem jelennek meg, ha nem rendelkeznek a tartalom tulajdonsággal. Elég ez a sor:

A példákban szereplő hóembereket pszeudo-elemekhez adják hozzá, a hóemberek maguk Unicode karakterek:

A lehetséges értékek a következők:

normális. none - a pszeudoelem tartalom nem jelenik meg. Hasznos, ha el szeretné rejteni egy korábban megadott ál-elemet.

- szöveges tartalom. A fenti példához hasonlóan egyszerű szövegeket és Unicode karaktereket is beilleszthet. Gyakorlati célokra a nyilak különböző változatai nagyon hasznosak. Unicode karakterek találhatók például itt vagy itt.

Itt azonban felmerül a felesleges kérések a szerverre.

  • sprite, az ikonok, amelyekből a hátteret beillesztik a linkbe vagy a pszeudo-elembe. A második előnyös, mert az ál-elem korlátozza a sprite hatókörét, így a sprite ikonok nemcsak függőlegesen, hanem sorokban is elhelyezhetők.
    A szerverre küldött kérelmek száma egy, de a kép a felhasználó gyorsítótárában tárolódik;
  • kódolja az egyes képeket a 64-es bázisban, és illessze be a tartalmat: url ();
  • kódolják a teljes sprite-et a 64-es bázisban, és használják a pszeudo-elem háttereként.

Az utolsó két változatban egyáltalán nem lesz kérelem a szerverre, de a képek nem kerülnek gyorsítótárba, és emellett a kódolt kép több, mint az eredeti kép. A módszer csak kis képek esetén érdemes.

A képet a base64-ben kódolhatja az online szolgáltatások használatával, például websemantics.co.uk/online_tools/image_to_data_uri_convertor/. Az így kapott kódot beillesztik az urlbe () a tartalomformátumra vonatkozó adatokkal, például adatokkal: image / png; base64.

Így néz ki az Instagram ikonjának kódja:

Hasonlóképpen az SVG beilleszthető.

Ez nagyon kényelmes, de eddig nem minden böngészőben működik. Például a Chrome meg fogja érteni és megjeleníti azt, de a Firefox nem.

- számláló. Ezzel az értékkel nemcsak a listákat, hanem az oldal bármely elemét is meg lehet számolni. Például a cikk egyes részei.

Az ellen-reset megadja a számláló nevét. a számláló növelése növeli a megadott számláló értékét. tartalom: a számláló (számláló neve) az ellenértéket az ál-elem tartalmaként jeleníti meg.

attr () - ez az érték megjeleníti a megadott attribútum tartalmát. Használható a href attribútumok kiadásához nyomtatáshoz és különböző érdekes effektekhez.

nyílt idézet. close-quote - a nyitó és záró idézetek kiadásának értékei. A használni kívánt szimbólumokat az idézőjelek tulajdonság határozza meg. Ha nincs beállítva, a böngészőtől függő alapértelmezett értékek lesznek használva.

nem-open-idézet. no-close-quote - az érték letiltja az idézőjelek megjelenítését, de a fészkelés szintje még mindig figyelembe veszi.

A specifikációban még mindig sok érdekes dolog van, például egy pszeudo elem, amely egy csomagot jelent az egész elem vagy több pszeudo-elem számára, de pillanatnyilag nem valósítható meg bárhol.

Kapcsolódó cikkek

előző ◈ a következő