Vlajky států čistě s využitím CSS a jediného DIVu

Bez vlajek států se neobjede téměř žádný vícejazyčný web a mnohdy i běžné weby, které někam odkazují. Z toho důvodu by vás mohlo zajímat povedené řešení implementace vlajek na web, které spočítá jen a pouze v zápisu CSS k jediné HTML značce DIV.

Proč nepoužít obrázky? Inu, nenapadá mě pádný důvod, proč se vyhnout například ikonkám v SVG. Nicméně vezmeme-li v úvahu tradiční GIF nebo PNG, tak u nich je problém se škálovatelností a zachováním ostrého obrazu na Retina displejích.

U vektorové grafiky tvořené navíc jen odpovídajícím poskládáním prvků v HTML kódu, je vše ostré. A navíc je velice jednoduché prostě přiřadit nějakému DIVu příslušnou třídu a nechat CSS, ať vlajku vykreslí.

Co k tomu budete potřebovat? Vlajky států v CSS najdete na webu CSS Flags. Kouknete-li pozorně, najdete zde odkaz na Github, odkud si vše stáhnete.  Kvůli některým speciálním symbolům na vlajkách musel autor vytvořit vlastní font. Sada je zatím otestována v Safari a Chrome, ve Firefoxu se mi zdá také v pořádku. Tedy až na naši českou vlajku… Můžete ostatně vyzkoušet a posoudit sami.