Diakritika v názvu třídy

V dnešních prohlížečích fungují jako názvy tříd prakticky všechny znaky s výjimkou těch, které se používají jako řídicí v CSS (.#{}(),;/*~> a podobně).

Ve standardním režimu jsou ještě nefunkční názvy tříd začínající číslicí. V quirku v Explorerech a starších Operách funguje i to.

<style>
.růžovoučký {background: pink; font-size: small}
</style>
<p class=růžovoučký>Růžovoučký odstaveček

Růžovoučký odstaveček

Lepší bizarnosti ale začínají s dalšími speciálními znaky:

  1. Co třeba stylové pojmenování třídy stylující částku v EUR?
    .€ {color: blue}
  2. Nebo pojmenování stylu pro vypsání teploty?
    <span class=°C>21 °C</span>
  3. Proč používat pro zarovnání zdlouhavé třídy left nebo right?
    . {text-align: left}
    . {text-align: right}
  4. Podtrhávání odteď zásadně:
    ._ {text-decoration: underline}
  5. A třída pro citace může vypadat:
    <p class=„“>Citovaný text.
  6. A nakonec třeba třída bez třídy (pomocí nedělitelné mezery):
    . {padding: 1em}
    <p class= >Odstavec s paddingem.

Přestože to hezky funguje, asi není ideální takto třídy zapisovat. Jednak to může zaskočit HTML/CSS editor při obarvování syntaxe a jednak to může zaskočit člověka, co bude s kódem chtít pracovat, obzvláště nebude-li umět zapsat některé speciální znaky.

Test

Pokud daná třída funguje, bude zelená.

  • Zadaná třída je „zlutoucka“.
  • Zadaná třída je „1“.
  • Zadaná třída je „1zlutoucka“.
  • Zadaná třída je „žluťoučká“.
  • Zadaná třída je „1žluťoučká“.
  • Zadaná třída je „1_žluťoučká—třída“.
  • Zadaná třída je „zlut666oucka“.
  • Zadaná třída je „žluťo„uč“ká—třída“.
  • Zadaná třída je „žluťoučká-třída“.
  • Zadaná třída je „“.
  • Zadaná třída je „ “ (tvrdá mezera).
  • Zadaná třída je „.“.
  • Zadaná třída je „()“.
  • Zadaná třída je „~“.
  • Zadaná třída je „=“.
  • Zadaná třída je „_“.
  • Zadaná třída je „° C“.
  • Zadaná třída je „“.
  • Zadaná třída je „÷ד.
  • Zadaná třída je „_žluťoučká—třída“.
  • Zadaná třída je „#“.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Převod inline CSS na externí

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

Chyby při programování

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

Nový řádek v HTML a CSS

Odřádkování v HTML a CSS

Jak v HTML, HTML atributu nebo CSS vložit nový řádek.

Jak zakázat označování textu

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

Komentáře