Anne van Kesteren

Dutch flag in CSS

I saw someone doing the Canadian flag in CSS pointing to a British flag in CSS. These experiments are of course quite useless and the Dutch flag is worse, since it is quite an easy flag to make. (Basically three bars; red, white, blue.) Since our flag has only three bars I directly thought it would be nice to try doing it with a single element and some generated content. Quickly the empty element dutch-flaq in the null namespace was created and I started playing with CSS.

To make it a bit of fun I decided to make one full screen flag and one centered. The full screen flag became the alternate style sheet as it had even more browser issues than the centered flag had. Oh, you want to see it? View the Dutch CSS flag.

Opera seems to handle the default style sheet pretty well. (If not perfect.) I did not have a chance to test in Safari, but Opera manages to center the flag. Mozilla does not. Apparently Mozilla has some issues with centering the root element. (Or at least, positioning it.) The full screen alternate stylesheet is worse. If you have some free time to debug it, feel free to do so. Note that it inherits quite some styles from the default stylesheet.

Comments

  1. Via Anne van Kesteren (again), I have found a site with a pure-CSS rendition of the Canadian flag (the image here in my blog is a screenshot, not the live CSS). It’s a little squished, granted, but at least it’s the right way up.

    Now, let’s see the XSL-FO version of the Canadian flag: any volunteers?

    Posted by Quoderat » Canadian Flag in CSS at

  2. Nit: Britisch?

    Posted by Laurens Holst at

  3. I was able to reduce the amount of CSS to this and didn't require the use of ::before and ::after pseudo-elements

     dutch-flag {  display: block;  height: 100px;  width: 500px;  margin: auto;  border-top: 100px solid red;  border-bottom: 100px solid blue; } 

    However, in order for it to avoid filling the entire viewport vertically, I had to enclose <dutch-flag/> in a parent (root) element. Although it does work perfectly in both Firefox and Opera.

    Posted by Lachlan Hunt at

  4. Safari screenshot

    Posted by Philippe at

  5. Nice, but not entirely correct. The colors of our national flag are officially bright vermilion (rgb: 255, 77, 0) and cobalt (rgb: 0, 71, 171). There don’t seem to be any officially written guidelines on the dimensions, but 3 : 2 is commonly practiced.

    Posted by ACJ at

  6. Nit: dutch-flaq?

    Cool idea, I'm working on a Belgian flag as we speak :)

    Posted by Mathias Bynens at

  7. There you have it: the Belgian flag in CSS. Oh, and the German one is in there, too.

    Posted by Mathias Bynens at

  8. ACJ, I somehow knew I messed the colors up.

    Posted by Anne at

  9. Firefox DOES center is here (WinXP, FF 1.0.1)

    Giving the body the 'text-align:center;' micht help though

    Posted by Niky at

  10. Mathias, you are using markup to design, not CSS. (Although I guess there are some small points to be made from a semantical point of view.)

    Niky, also vertically?

    Posted by Anne at

  11. Mathias, you are using markup to design, not CSS. (Although I guess there are some small points to be made from a semantical point of view.)

    Let's discuss these then, shall we? To be honest, I don't quite get it. How can a flag be designed using only CSS, and no markup? You mean I should create an element in the null namespace, like you do? By the way, aren't Stu's British flag and Matt's Canadian flag doing the same?

    Questions, questions...

    Posted by Mathias Bynens at

  12. It is of course irrelevant how other flags are created. If Google uses invalid markup, do you? Anyway, there should be markup of course, but not more than absolutely necessary. Since the representation of a flag should actually be an image using CSS is already incorrect, but creating a lot of elements for every single color is just not needed. Especially if the flag in question is designed using horizontal or vertical bars.

    Philippe, is that Safari rendering the alternate stylesheet? Or does Safari not recognize it as an alternate stylesheet?

    Posted by Anne at

  13. I don't see what the problem is with using markup for the flags, it's not like it matters much since this is all just playing with CSS and markup.

    You wouldn't sriously want layout to affect content, would you? (Something you'd get if you were to replace images with CSS things)

    Posted by Björn at

  14. Anyway, there should be markup of course, but not more than absolutely necessary. Since the representation of a flag should actually be an image using CSS is already incorrect, but creating a lot of elements for every single color is just not needed. Especially if the flag in question is designed using horizontal or vertical bars.

    I have a container div with the class belgian-flag. Then, I only have one element per colour, i.e. three spans in total, with the classes black, red and red. Is that too much? What do you suggest? Is it even possible to get rid of some code here?

    Posted by Mathias Bynens at

  15. Mathias, my Belgian flag. (It also links, like yours, but uses a single element.) It only works correctly in Opera though, but browsers suck.

    Posted by Anne at

  16. why is your flag experiment any less "useless" than the links you provided? that's a pretty harsh statement you made.

    Posted by flump at

  17. flump, could you perhaps quote the section where I said that? (Perhaps rereading the post before making such a comment would be better.)

    Posted by Anne at

  18. These experiments are of course quite useless and the Dutch flag is worse, since it is quite an easy flag to make.

    I think what Anne said was more like the Dutch flag being more and not less useless than the Canadian and British flags.

    Everything depends on what you think is useless of course. The flag things make you think more about things you can do with CSS, which is good. But you won't get anything directly useful from making a flag in CSS.

    I hope I'm not the only one who thinks making flag element and then style it to look like a flag is not something you would want to do on anything but a play/test page.

    Posted by Björn at

  19. I think I won't use any of this techniques in the future but I learned more and more about the possibilities of CSS.

    It was a fun thing making this Surinam flag with CSS.

    Posted by Ischa Gast at

  20. Cool! Someone also did a Brazil Flag.

    Posted by Anne at