We hebben hier een kleine discussie over wat beter zou zijn. We hebben bijvoorbeeld een italiaanse vlag. Daar hebben we een balk van gemaakt. Hoe zouden jullie dat via css doen?

Drie lege <div> elementen en via css de background op de desbetreffende kleur zetten?

Of liever één div en via de css de background image instellen

Of via een image tag de afbeelding inladen.

Waar zouden jullie voor kiezen en waarom? Oja, het is hier vrijdag. :)

Ligt het er ook niet aan waar het voor bedoeld is?
Zo heeft iedereen onderdeel zn eigen beste methode.

3 divs onder of naast elkaar zou ik sowieso nooit doen. Of er moet een bepaald doel zijn waardoor dat handig is.

Ik zou zeggen, in bijna alle gevallen een afbeelding inladen via de image tag.

Edit: overheen gelezen, gaat dus om een balk. Dan een afbeelding als repeatende achtergrond.

Gewoon afbeelding van 1px breed herhalen inderdaad...

Ik zou sowieso niet gaan voor de drie divs. Dan kan je net zo goed elke pixel apart een kleur geven. Als het een echte balk is dan zou ik in css de afbeelding op repeat zetten. Als het een Italiaanse vlag is die bijvoorbeeld als button naar een pagina over dat lang gaat, zou ik voor de image gaan.

Wat si trouwens het standpunt van jou en je collega's? Gaat er iemand voor de 3 divs?

Persoonlijk zou ik gaan voor een div met een 1px background image op repeat.

Ik zou zelf gaan voor één div met css background ( repeat ). Eventueel met de tekst Italiaanse vlag of iets dergelijks met text-indent op -9999px. Voor Google lijkt het mij niet prettig om drie lege divjes in je code te hebben, terwijl het makkelijk met één kan.

Hij is van mening dat die afbeelding ook weer extra ruimte kost en daarom liever drie lege divjes heeft.

Daarom was ik wel benieuwd wat jullie daar van vinden.

De drie lege divjes hebben voor Google geheel geen waarde, daar hoef je het niet voor te laten.
Maar een achtergrondafbeelding zou ook mijn voorkeur hebben.

Een vlaggetje maken met 3 divjes?
ik hoop voor jou dat je site nooit te internationaal wordt, want anders wordt het echt een circus van divjes!

Maak gewoon kleine afbeeldingen. Repeaten heeft geen zin, denk maar eens aan de engelse vlag.

Als het een grote vlag moet worden waar er toch maar 1 van is, maak dan wel 3 divjes met een achtergrondkleur (afbeeldingen zijn overbodig??)

@RubenP

Het gaat niet om een normaal vlaggetje, maar een lijn over de gehele breedte in de kleuren van de italiaanse vlag. Daarnaast gaat het dus ook niet om een engelse vlag. Waarschijnlijk begrijp je niet helemaal wat ik bedoel :)

Ik zou gaan voor de 3 div'jes.

Waarom?
Omdat net zoals u collega het zegt, plaatje inladen kost dataverkeer en tijd. En ik denk dat het laden van een plaatje meer tijd kost dan het gewoon een achtergrond kleur bepalen. (weet dit niet zeker).

Dus als dat klopt, en je wilt gaan voor prestatie, dan zou ik 3 div'jes doen. Wil je net coderen, dan zou ik voor 1 div gaan.

Groeten,
Tim

Voor preformance denk ik dat de 3 divjes oplossing het snelste laad. Of het het meest praktisch is is een ander verhaal. Stel je moet een vlag hebben van 400 x 400 pixels. Dan is een afbeelding van dat formaat waarschijnlijk groter dan de tekst die je nodig hebt om het met divjes te maken.

een afbeelding van 1px breed op repeat is misschien 1-2kb? de dial-up tijden zijn over hoor :-)

Inderdaad gewoon één div gebruiken met een background van 1px en die herhalen.

Hey Alex,

Ik heb het even voor je uitgerekend:

Jouw html en css (samen)

Code:

#italia { background: url(images/vlag.png) repeat-y; text-indent: -9999px; }
<div id="italia">Italiaanse vlag</div>

En dan komt er nog een gif (in het optimaalste geval bij) van 960px x 1px (want de vlag moet 960px breed zijn). Deze gif is 1319 bytes. De HTML + CSS van jou is 115bytes, samen dus 1434bytes

Mijn code is dit:

Code:

.bg-groen {background: #336667;}
.bg-wit {background: #ffffff;}
.bg-rood {background: #cc0001;}
<div id="italia"><div class="bg-groen"></div><div class="bg-wit"></div><div class="bg-rood"></div></div>

Dat is alles wat ik nodig heb, en is totaal 200bytes, met andere woorden dat van jou is 700% groter!

Enige wat mij rest te zeggen is:

In the face!