CSS Embed

All flags into a single file

I know, I know. Some people will think I'm about to build a sprite, SVG or CSS, it does not matter. Well, actually I've been testing SVG with #id calls (sort of a SVG sprite) and the performance was abysmal. And yet, how do I reduce the calls on the server to a bare minimum? I have reduced the size of the flags in incredible ways, but there are still +250 requests. How can I sort those out? In short: You can't. Try me, I've tested SVG sprites, PNG sprites and came to the conclusion that nothing beats CSS in sheer performance, caching an gzipping.

Yeah, you heard right. We're gonna put all 250+ flags into a single CSS file and call our objects from there. The CSS file (which you can download at the bottom) is generated on-the-fly with the current flags. That means that from here and on this file will only get better. Come back to check on it whenever you want.
For this example, we're gonna use the flags of Angola, Australia, South Africa and Venezuela.

CSS to embed in a DIV


background-size: 100% 100%;
background-repeat: no-repeat;}
img.tut2{background-size:640px 480px;}
object.tut2{font-size: 2em; color:skyblue;}


<div class="tut2" id="ao"></div>
<div class="tut2" id="au"></div>
<div class="tut2" id="za"></div>
<div class="tut2" id="ve"></div>

What is happening here? Well, the CSS defines the flags as background of the div and they both inherit the size of 240x180 pixels. Pretty cool hey? Anyways, the other very cool thing happening is that the flags are actually inside the CSS as base64 embedded images. They look like what you are seeing above.

CSS to embed in a SPAN


<span class="tut2" id="ao"></span>
<span class="tut2" id="au"></span>
<span class="tut2" id="za"></span>
<span class="tut2" id="ve"></span>

What is the diference between span/div? The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code. Here in my example they are stacked side-by-side but that is me. If you want to stack vertically, div is a really good option.

CSS to embed in an OBJECT (Image + Text)

AO A South A. VNZ


<span class="tut2" id="ao"></span><object class="tut2" id="ao"">AO</object>
<object class="tut2" id="au"">A</object>
<object class="tut2" id="za"">South A.</object>
<object class="tut2" id="ve"">VNZ</object>

As you can see, object actually gets rid of most of our stuff and just displays the flags as a background to the text. With more text it streches and with less it contracts. Not very useful imho but... one more use.

CSS to embed in IMG (Image + Filter)


<img class="tut2" id="ao" src="/tutorials/img/skyblue.svg" />
<img class="tut2" id="au" src="/tutorials/img/yellow.svg" />
<img class="tut2" id="za" src="/tutorials/img/red.svg" />
<img class="tut2" id="ve" src="/tutorials/img/limegreen.svg" />

WTF happened? Well, I'm using some small SVG's with a color like yellow, set to fill-opacity: 0.3. This creates the effect you can see here. This is very cool if you need to do something drastic like making all flags a bit diferent in color. Darkening them by putting a black blank svg with 0.5 opacity in front of it or whatever. The code for the colors follows here: (Just change the color to whatever you feel like)


<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480"><path fill="skyblue" d="M0 0h640v480H0z" fill-opacity="0.3"/></svg>

CSS Shapes (All-in-one combos)

You should better check this article on the page, but here is a little show for you to enjoy ;-)



<img class="tut2 circle" id="ao" src="/tutorials/img/red.svg" /> <!-- IMG Circle + Red color filter -->
<div class="tut2 square" id="au"/></div> <!-- DIV Square -->
<span class="tut2 rombus" id="za"/></span> <!-- SPAN Rombus -->
<object class="tut2 markerrect" id="ve"/>Venezuela</object> <!-- OBJECT Rectagle Marker -->

Limitations & Conclusions

Sometimes <object> does not work well in some navigators. It's normal because some browsers do not support everything yet and some treat them differently. If you want cross-browser support sometimes you'll have to go the JS way.

Benji Frugoni

If you liked this tutorial and want more, consider becoming my Patreon :-)