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.

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ářů ↓

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Skrývání a odkrývání

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

Komentáře