---
title: "Snyggt sätt att dölja ikoner"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/177205-snyggt-sätt-att-dölja-ikoner"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "rhdf"
published: "2009-02-26T23:58:09.000Z"
updated: "2009-02-27T09:24:26.000Z"
replies: 4
views: 628
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/177205-snyggt-sätt-att-dölja-ikoner"
---

# Snyggt sätt att dölja ikoner

## #1 — rhdf, 2009-02-26T23:58Z

Jag sitter o funderar över hur man snyggast döljer/visar en flaggikon
som sidan ser ut nu så visas en flagga baserat på landskoden som hämtas från databasen, så Sverige har då se.gif med alt="SE"

Visst, ser skitsnyggt ut MEN inte särskilt bra i vissa lägen. Därför funderade jag på att ha flaggan som bakgrundsbild  i en liten div, landskoden i en span i den diven och helt enkelt styra detta med css. Frågan är hur man styr detta snyggast i såfall? det blir ju lite bökigt att ha 200+ flaggklasser i sin css
alternativet är ju inline-css  x(

detta gör att man kan få en helt textbaserad  version vid tex utskrift

Nu har jag en fullösning där jag har en klass på img-taggen för flaggan  som jag sätter till display:none i min print.css och "SE" ligger i en span som då är dold i "normalfallet". Denna lösning gör ju dock att man får dubbelinfo om man stänger av css (=textbaserad browser)

Är kanske den bästa lösningen en kombination av de ovanstående? :l
dvs nånting i stil med

```
<style>
.flag{
background-repeat:no-repeat;
width:20px;
height:16px;
}
.flag span{display:none}
</style>

<div class="flag" style="background-image:url(se.gif);"><span>SE</span></div>
```

Permalänk: https://www.webforum.nu/p/177205

## #2 — doggelito, 2009-02-27T06:59Z

> **rhdf skrev:**
>
> Visst, ser skitsnyggt ut MEN inte särskilt bra i vissa lägen

Varför är det inte bra?

> **rhdf skrev:**
>
> detta gör att man kan få en helt textbaserad version vid tex utskrift

Jag vet inte om flaggor har så stor betydelse vid utskrift!?

Du kanske har en viktig poäng med detta men för mig känns det som om du har för mycket tid över och lägger den på fel saker! :)

Permalänk: https://www.webforum.nu/p/2173585

## #3 — Fredde Mannen, 2009-02-27T07:32Z

> **[rhdf skrev:](https://www.webforum.nu/p/1458245)**
>
> Jag sitter o funderar över hur man snyggast döljer/visar en flaggikon
> som sidan ser ut nu så visas en flagga baserat på landskoden som hämtas från databasen, så Sverige har då se.gif med alt="SE"
> 
> Visst, ser skitsnyggt ut MEN inte särskilt bra i vissa lägen. Därför funderade jag på att ha flaggan som bakgrundsbild  i en liten div, landskoden i en span i den diven och helt enkelt styra detta med css. Frågan är hur man styr detta snyggast i såfall? det blir ju lite bökigt att ha 200+ flaggklasser i sin css
> alternativet är ju inline-css  x(
> 
> detta gör att man kan få en helt textbaserad  version vid tex utskrift
> 
> Nu har jag en fullösning där jag har en klass på img-taggen för flaggan  som jag sätter till display:none i min print.css och "SE" ligger i en span som då är dold i "normalfallet". Denna lösning gör ju dock att man får dubbelinfo om man stänger av css (=textbaserad browser)
> 
> Är kanske den bästa lösningen en kombination av de ovanstående? :l
> dvs nånting i stil med
>
>
> ```
> <style>
> .flag{
> background-repeat:no-repeat;
> width:20px;
> height:16px;
> }
> .flag span{display:none}
> </style>
> 
> <div class="flag" style="background-image:url(se.gif);"><span>SE</span></div>
> ```

Tycker din lösning med: 

```
<div class="flag" style="background-image:url(se.gif);"><span>SE</span></div>
```

 är bra.

Skulle nog göra det själv på ett sådant sätt. Fast, jag skulle nog välja att göra lite ändringar.

```
<style>
.flag{
background-repeat:no-repeat;
width:20px;
height:16px;
}
.flag span{display:none}

/* språk */
.se{ background-image:url(se.gif);}
.no{ background-image:url(no.gif);}
</style>

<div class="flag se"><span>SE</span></div>
<div class="flag no"><span>SE</span></div>
```

Just för att jag ogillar inline-css. :)

Permalänk: https://www.webforum.nu/p/2173587

## #4 — rhdf, 2009-02-27T09:05Z

> **[doggelito skrev:](https://www.webforum.nu/p/1458251)**
>
> > **rhdf skrev:**
> >
> > Visst, ser skitsnyggt ut MEN inte särskilt bra i vissa lägen
>
> Varför är det inte bra?

För att synskadade får läsa en alt-text till en bild som egentligen är en representation av information, dvs lika dumt som att ha sidrubriker som bilder.

> > **rhdf skrev:**
> >
> > detta gör att man kan få en helt textbaserad version vid tex utskrift
>
> Jag vet inte om flaggor har så stor betydelse vid utskrift!?
> Du kanske har en viktig poäng med detta men för mig känns det som om du har för mycket tid över och lägger den på fel saker! :)

Vid utskrift blir flaggorna i bästa fall nästan tydliga, och har inget "värde" på en utskrift. Dock måste landsinformationen följa med eftersom flaggorna ligger i en tabell med tävligsresultat

jag vet inte om det är felprioritering att försöka komma fram till en vettig lösning för att få  en sida både tillgänglig för alla.

@Fredde Mannen
jag gillar inte heller inline css
men i detta fallet så vet jag inte om det är nån höjdare att lägga 200 "flagg-klasser" i min stackars css fil men eftersom jag inte VET vilka länder som kommer dyka upp i listan så har jag då en massa oanvända klasser

iofs kan jag ju lägga flagg-klasserna i en egen css som jag bara lägger med på de sidor där den skall finnas, men fortfarande så har jag oanvända klasser som bara finns "utifall att". Därav min idé om att ha just den lilla raden som inline

Permalänk: https://www.webforum.nu/p/2173596

## #5 — Fredde Mannen, 2009-02-27T09:24Z

> **[rhdf skrev:](https://www.webforum.nu/p/1458263)**
>
> För att synskadade får läsa en alt-text till en bild som egentligen är en representation av information, dvs lika dumt som att ha sidrubriker som bilder.
> 
> 
> Vid utskrift blir flaggorna i bästa fall nästan tydliga, och har inget "värde" på en utskrift. Dock måste landsinformationen följa med eftersom flaggorna ligger i en tabell med tävligsresultat
> 
> jag vet inte om det är felprioritering att försöka komma fram till en vettig lösning för att få  en sida både tillgänglig för alla.
> 
> @Fredde Mannen
> jag gillar inte heller inline css
> men i detta fallet så vet jag inte om det är nån höjdare att lägga 200 "flagg-klasser" i min stackars css fil men eftersom jag inte VET vilka länder som kommer dyka upp i listan så har jag då en massa oanvända klasser
> 
> iofs kan jag ju lägga flagg-klasserna i en egen css som jag bara lägger med på de sidor där den skall finnas, men fortfarande så har jag oanvända klasser som bara finns "utifall att". Därav min idé om att ha just den lilla raden som inline

Nåja, det funkar utmärkt.

Sen tycker jag det är vettigt att du plockar bort bilderna från utskriften, så vida det nu inte är en bild som har stor betydelse så att säga. :) 

För vi vet ju att en del människor har svartvita skrivare, och då säger flagorna inte så mycket. :) 

Visst nog kan du alltid sätta en inline-css, för att slippa ha en css-fil med språken. Så det är bara att rocka på. :)

Permalänk: https://www.webforum.nu/p/2173599

---

Tråden på webben: https://www.webforum.nu/amne/html-css/177205-snyggt-sätt-att-dölja-ikoner