CSS BATTLE No.1

[wanxingliu94]

CSS BATTLE is a website on which people compete for the shortest possible code to realize a given CSS effect, and I have decided to start a series of articles trying to polish (or rather pick up) my CSS skills by learning from the battles on it. Nonetheless, I will only aim at implementing the effects with relatively clean codes.

The Challenge

Battle #1 is asking one to realize the following effect:

with the starting code

<div></div>
<style>
  div {
    width: 100px;
    height: 100px;
    background: #dd6b4d;
}
</style>

and notice that the size of the rectangle is given by 400px * 300px.

Solution using box-shadow

Let me actually start with the approach that is probably most difficult to come up with for beginners like myself:

 div{
    margin: -8px;
    width: 200px;
    height: 200px;
    background: #b5e0ba;
    box-shadow: 0 0 0 200px #5d3a3a;
}

1. we need to set the margin to -8px, because the body element has a default margin of 8px;
2. we can guess that the width is of 200px, because the rectangle is of size 400px * 300px;
3. just a reminder that the first five parameters of the box-shadow refer to(see here for a more detailed explanation):
   • offset-x
   • offset-y
   • blur-radius
   • spread-radius: the width of the resulting shadow = spread-radius + 200px, and the length of the resulting shadow = spread-radius + 200px
   • color of the shadow

So the answer basically says that we want a shadow with length 400px and width 300px(should be 400 really, but the body is of 300px height). Now we just need to set the shadow's color to the desired one.

If you are interested, the shortest answer is based on this same reasoning:

<img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>

, which is equivalent to:

img {
	box-shadow: 0 0 0 2in #b5e0ba, 0 0 0 5in #5d3a3a
}

where in refers to the unit inch. It is written in this strange form because as I mentioned the competition is ultimately decided by the length of the code.

Straightforward Solution

Now Let me give another simple-minded way to solve this problem

body{
    margin: 0;
    background: #5d3a3a;
}
div{
    width: 200px;
    height: 200px;
    background: #dd6b4d;
}

There is nothing more that I can say about this code but after I wrote this down, I realized there is something that does not feel quite right though. We know that body usually comes with a default margin of around 8px, and that is why we need to first set the margin to zero, but in the meantime, when we set the background color of a box, it will not set any color to the margin. I am confused because if you get rid of margin: 0 in the above code, the black background will still fill in the whole rectangle.

html and body

In short, if type in the following code:

body{
    background: black;
}

, then I will end up with a full screen of black background with no margin, but that does not make any sense because background does not apply to the margin and the body comes with a default margin of 8px(I know this because if you try to set the background color to a div element, it will not affect its margin).

Here comes the real content of this blog, how does one explain the above-mentioned phenomenon? I found this post on stackoverflow answering it:

This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent).

It is quoting CSS 2.1 specification, but I think it still applies. Basically, if the html is not activated(both its background color and image is not set), then the browser will automatically capture the background color of the body element. That being said, if we do something like:

html{
	background: green;
}

body{
	background: black;
}

Then you will be able to see the margin of body not colored by black. Let us try this code out then

well, that does not work out as expected either. The issue here is that the default height of body is set to auto which means that its height is going to be spanned by its children element, and in this case we have no children at all, so the height of the body element is going to be 0. This explains why we cannot see any sign of black.

What if we try to set the height of the body element to be 100% then? Unfortunately, that is still a dead end. The reason is that when we set the height of an element to a relative height then its height is going to be dependent on its parent container, and in this case the parent container of the body is the html element whose height is also default to auto. In order to use relative height on the body tag, we should set the height of the html tag by using either relative height(the height of the html tag will be relative to the height of the browser) or absolute height.

In conclusion if we do the following we will get the expected effect:

  body{
            background: black;
            height: 100%;
}

  html{
            background: green;
            height: 100%;
}

, and that concludes the content of this blog.

References

CSS BATTLE: https://cssbattle.dev/

stack overflow: https://stackoverflow.com/questions/17806691/background-color-of-body-tag-applied-to-the-whole-html