Responsivní komentáře

V případě, že při tvorbě responsivního webu skrýváme větší množství obsahu přes CSS (nepoužijeme detekci na straně serveru), většinou to nepřinese takovou výkonovou úsporu, jakou by mohlo v případě, že by se zbytečný kód nevyhodnocoval.

Typicky třeba obrázky vložené značkou <img> se načtou, ať mají třeba display: none. Podobně v některých prohlížečích budou stažena obrázková pozadí skrytých elementů. Taktéž nepotřebné JS soubory budou stále ke stránce připojeny.

ResponsiveComments

Web

Nástroj ResponsiveComments se tento problém snaží řešit tak, že se obsah obalí do <div>u s nějakou podmínkou a obsah se skryje do HTML komentáře. Pokud se podmínka splní, JavaScript obsah komentáře přidá do stránky.

<div data-responsive-comment-media="(min-width: 769px)">
  <!-- <div>Obsah se zobrazí jen při splnění podmínky ↑.</div> -->
</div>

Dle mého názoru je tento postup na hlavu postavený, protože veškerý obsah bude ve skutečnosti v komentáři (tj. pro vyhledávače a návštěvníky bez JavaScriptu nepřístupný.)

Lepší řešení

Naštěstí existují různá řešení, jak vytvořit přístupný obsah, který se při zapnutém JavaScriptu nebude vyhodnocovat.

Značka <noscript>

Při zapnutém skriptování se obsah ignoruje, ale není problém se k němu v JS dostat a vložit ho viditelně do stránky. Tedy kromě IE 7, kde se dá maximálně vydolovat jeho atribut.

Skript s nesmyslným typem vypsaný skriptem

Chamurappi přišel na to, že pokud se kolem obsahu vypíše značka <script> s nesmyslným MIME typem, kterou ale vypíše JavaScript, takový obsah se nezpracuje, půjde napříč prohlížeči obnovit a bez podpory JS se kolem něj značka nevypíše, takže bude normálně viditelný.

<script>document.write("<script type='text/skryt'>")</script>
<p>Obsah skrytý JavaScriptem.</p>
<script>document.write("<\/script>")</script>

Značka <template>

V některých prohlížečích už značka <template> nyní funguje, je otázka, jak se k jejímu obsahu budou stavět vyhledávače.