Replies: 1 comment
-
|
Hi! Here is the same code unminified and commented: <!--
The HTML parsing algorithm automatically inserts the <html> and <body> elements
even if there is no such tags, so the HTML tree is html > body > p > style
Lack of doctype means that the page is rendered in the so called "Quirks mode",
allowing some weird tricks that were needed for compatibility with old browsers.
E.g. the html element is automatically stretched to the height of the viewport
and the body element is stretched to the height of the html element,
without need to set "height: 100%" etc.
-->
<p>
<style>/* The * char is the universal selector,
i.e. these styles apply to all elements, including html */
* {
/* The border shorthand sets style, width and color of all 4 sides of the border,
so all elements get 5em = 80px wide solid light greenish blue border by default,
colors here are set in the hexadecimal RRGGBB format, each pair of hex digits
sets a red, blue, and green component in the range from 0 (00) to 255 (FF) */
border: solid 5em #A9FFFC;
/* Similarly, the bottom border is set to 48px solid dark
with two diagonal slopes where it meets side borders,
if the width is zero, the bottom border becomes an isosceles triangle */
border-bottom:solid 4em #1A353C;
/* Background of each element is set to medium color,
parts of background not covered by any border make the bottom "pillars" */
background: #31798F;
/* Vertical margins are negative and equal to 68% of the width of the parent
(for the html element — 68% of the viewport width), side margins are zero
it moves the top and bottom borders of the html element offscreen
(outside the viewport) and aligns side borders with viewport edges,
leaving 400 - 2*80 = 240px wide free space inside for the body element */
margin: -68% 0;
/* Here is a relatively new CSS feature — CSS nesting
you can write selectors inside style rules, similarly to CSS preprocessors.
in this case, a universal selector inside a universal selectors selects
any element inside any other element, i.e. any element that has a parent,
i.e. any element except html, i.e. body and p */
* {
/* The rarely used zoom property applies the zoom effect for the element
effectively resizing the pixels for it, so the "80px wide borders" are rendered
as 80 * 0.75 = 60px, bottom border is rendered as 64 * 0.75 = 48px,
and the free space inside HTML is interpreted as 240 / 0.75 = 320px */
zoom: 75%; /* values can be either a factor as a number or a percentage */
/* Margins get redefined to 53px ("px" can be omitted in Quirks mode),
because of zoom, they are rendered as 53 * 0.75 = 39.75 rounded to 40px,
making space for two outside "pillars".
The top and bottom borders of body are still offscreen,
and the inner space is 320 - 2*53 - 2*80 = 54px,
"zoomed" to 54 * 0.75 = 40.5 rounded to 40px, making the central "pillar" */
margin: 53;
/* The 3rd level of nesting means "anything inside anything inside anything",
i.e. all elements with at least 2 ancestors, so it applies only to the p element */
* {
/* The p element is zoomed to 2.5 times relatively to the body element,
so its bottom border is rendered as 48 * 2.5 = 120px
and other borders are rendered as 60 * 2.5 = 150px.
Its bottom border makes the triangle for "the roof" */
zoom:2.5;
/* Vertical margins of p are rededined to 1px
(rendered as 1 * 0.75 * 2.5 = 1.875 rounded to 2px),
and negative horizontal margins move its edges by 69 * 0.75 * 2.5 ≈ 130px
outside the inner space of body, resulting together in correct placing
of the triangle*/
margin: 1 -69
/* The closing curly brackets of all 3 style rules and the closing tags
of all open elements are implied, browser inserts them automatically.
But please don't do this outside CSSBattle! :) */You can find more info on Quirks mode, universal selector, color syntaxes, CSS nesting, and the zoom property in the MDN. Hope this helps! |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Beta Was this translation helpful? Give feedback.
All reactions