poniedziałek,
Emoji i kaskadowe arkusze stylów
Robiące w Internecie coraz większą furorę emoji można wstawiać do strony internetowej również za pomocą stylów CSS.
W CSS3 pojawiły się możliwości pozwalające wstawiać do dokumentu dodatkową treść z poziomu arkusza stylów. Pseudo-elementy :before i :after dodane do selektora elementu stają się nową zawartością znajdującą się odpowiednio na początku i na końcu wewnątrz wskazanego znacznika. Kluczową własnością kaskadowych arkuszy stylów w tym przypadku jest „content”, która definiuje wstawianą treść. Najczęściej technika ta jest wykorzystywana do wprowadzania kosmetycznych zmian danego elementu.
Przykład emoji dołączonego za pomocą stylów CSS:
CKZiU
<span style="font-size:40px;">CKZiU</span>
Pierwszy sposób na zamieszczenie emoji w kodzie CSS jest prosty i sprowadza się do wklejania skopiowanego wcześniej symbolu.
span:before,
span:after {
content: "😉";
}
W niektórych sytuacjach prezentowany wcześniej sposób się nie sprawdzi, istnieje jednak bardzo proste alternatywne rozwiązanie. Znak Unicode w CSS można zapisać, posługując się jego kodem numerycznym zapisanym w systemie szesnastkowym (dec). Należy dodać na jego początku przedrostek „\” (backslash) tak jak w przykładowym kodzie. Ewentualnie przedrostkiem może być „\0”.
span:before,
span:after {
content: "\1F609";
}
Tabela wybranych symboli emoji
| Symbol | Nazwa | Kod hex | Kod dec |
|---|---|---|---|
| 🦄 | UNICORN FACE | 1F984 | 129412 |
| 🐮 | COW FACE | 1F42E | 128046 |
| 🐂 | OX | 1F402 | 128002 |
| 🐃 | WATER BUFFALO | 1F403 | 128003 |
| 🐄 | COW | 1F404 | 128004 |
| 🐷 | PIG FACE | 1F437 | 128055 |
| 🐖 | PIG | 1F416 | 128022 |
| 🐗 | BOAR | 1F417 | 128023 |
| 🐽 | PIG NOSE | 1F43D | 128061 |
| 🐏 | RAM | 1F40F | 128015 |
