{"id":344147,"date":"2021-07-16T07:43:01","date_gmt":"2021-07-16T14:43:01","guid":{"rendered":"https:\/\/css-tricks.com\/?p=344147"},"modified":"2021-07-16T07:43:04","modified_gmt":"2021-07-16T14:43:04","slug":"of-course-we-can-make-a-css-only-clock-that-tells-the-current-time","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time\/","title":{"rendered":"Of Course We Can Make a CSS-Only Clock That Tells the Current Time!"},"content":{"rendered":"\n<p>Let\u2019s build a fully functioning and settable \u201canalog\u201d clock with <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\">CSS custom properties<\/a> and <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-calc-in-css\/\">the <code>calc()<\/code> function<\/a>. Then we\u2019ll convert it into a \u201cdigital\u201d clock as well. All this with no JavaScript!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Here\u2019s a quick look at the clocks we\u2019ll make:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"HTML and CSS only Clock Demo, Settable, Analog and Digital\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Wzi2ogTMhqE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/github.com\/webondevices\/html-css-wizardry\" rel=\"noopener\">GitHub repo<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-brushing-up-on-the-calc-function\">Brushing up on the <code>calc()<\/code> function<\/h3>\n\n\n<p>CSS preprocessors teased us forever with the ability to calculate numerical CSS values. The problem with pre-processors is that they lack knowledge of the context after the CSS code has compiled. This is why it\u2019s impossible to say you want your element width to be 100% of the container minus 50 pixels. This produces an error in a preprocessor:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">width: 100% - 50px;\n\/\/ error: Incompatible units: 'px' and '%'<\/code><\/pre>\n\n\n\n<p>Preprocessors, as their name suggests, preprocess your instructions, but their output is still just plain old CSS which is why they can\u2019t reconcile different units in your arithmetic operations. Ana has gone into great detail on <a href=\"https:\/\/css-tricks.com\/when-sass-and-new-css-features-collide\/\">the conflicts between Sass and CSS features<\/a>.<\/p>\n\n\n\n<p>The good news is that native CSS calculations are not only possible, but we can even combine different units, like pixels and percentages with the <code>calc()<\/code> function:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">width: calc(100% - 50px);<\/code><\/pre>\n\n\n\n<p><code>calc()<\/code> can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed. <a href=\"https:\/\/css-tricks.com\/complete-guide-to-css-functions\/#calc\">Check out the CSS Guide to CSS Functions<\/a> for a complete overview.<\/p>\n\n\n\n<p>What makes this even more powerful is the fact that you can combine <code>calc()<\/code> with CSS custom properties\u2014something preprocessors are unable to handle.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-hands-of-the-clock\">The hands of the clock<\/h3>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"Image of a round clock with a light grey background. The hours hand is dark blue pointed at 2, the minutes are light blue pointed at 9 and the seconds are yellow and pointed at 2.\" class=\"wp-image-344151\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Let\u2019s lay out the foundations first with a few custom properties and the animation definition for the hands of the analog clock:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  --second: 1s;\n  --minute: calc(var(--second) * 60);\n  --hour: calc(var(--minute) * 60);\n}\n@keyframes rotate {\n  from { transform: rotate(0); }\n  to { transform: rotate(1turn); }\n}<\/code><\/pre>\n\n\n\n<p>Everything starts in the root context with the <code>--second<\/code> custom property where we defined that a second should be, well, one second (<code>1s<\/code>). All future values and timings will be derived from this.<\/p>\n\n\n\n<p>This property is essentially the heart of our clock and controls how fast or slow all of the clock\u2019s hands go. Setting <code>--second<\/code> to <code>1s<\/code> makes the clock match real-life time but we could make it go at half speed by setting it to <code>2s<\/code>, or even 100 times faster by setting it to <code>10ms<\/code>.<\/p>\n\n\n\n<p>The first property we are calculating is the <code>--minute<\/code> hand, which we want equal to 60 times one second. We can reference the value from the <code>--second<\/code> property and multiply it by 60 with the help of <code>calc()<\/code> :<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--minute: calc(var(--second) * 60);<\/code><\/pre>\n\n\n\n<p>The <code>--hour<\/code> hand property is defined using the exact same principle but multiplied by the <code>--minute<\/code> hand value:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--hour: calc(var(--minute) * 60);<\/code><\/pre>\n\n\n\n<p>We want all three hands on the clock to rotate from 0 to 360 degrees\u2014around the shape of the clock face! The difference between the three animations is how long it takes each to go all the way around. Instead of using <code>360deg<\/code> as our full-circle value, we can use the perfectly valid CSS value of <code>1turn<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes rotate {\n  from { transform: rotate(0); }\n  to { transform: rotate(1turn); }\n}<\/code><\/pre>\n\n\n\n<p>These <code>@keyframes<\/code> simply tell the browser to turn the element around once during the animation. We have defined an animation named <code>rotate<\/code> and it is now ready to be assigned to the clock\u2019s second hand:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.second.hand {\n  animation: rotate steps(60) var(--minute) infinite;\n}<\/code><\/pre>\n\n\n\n<p>We\u2019re using the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\">animation<\/a><\/code> shorthand property to define the details of the animation. We added the name of the animation (<code>rotate<\/code>), how long we want the animation to run (<code>var(--minute)<\/code>, or 60 seconds) and how many times to run it (<code>infinite<\/code>, meaning it never stops running). <code>steps(60)<\/code> is the animation timing function which tells the browser to perform the 1-turn animation in 60 equal steps. This way, the seconds hand ticks at each second rather than rotating smoothly along the circle.<\/p>\n\n\n\n<p class=\"is-style-explanation\">While we are discussing CSS animations, we can define an animation delay (<code>animation-delay<\/code>) if we want the animation to start later, and we can change whether the animation should play forwards or backwards using <code>animation-direction<\/code>. We can even pause and restart the animations with <code>animation-play-state<\/code>.<\/p>\n\n\n\n<p>The animation on the minute and hour hands will work very much like on the second hand. The difference is that multiple steps are unnecessary here\u2014these hands can rotate in a smooth, linear fashion.<\/p>\n\n\n\n<p>The minute hand takes one hour to complete one full turn, so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.minute.hand {\n  animation: rotate linear var(--hour) infinite;\n}<\/code><\/pre>\n\n\n\n<p>On the other <em>hand<\/em> (pun intended) the hour hand takes twelve hours to go around the clock. We don\u2019t have a separate custom property for this amount of time, like <code>--half-day<\/code>, so we will multiply <code>--hour<\/code> by twelve:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hour.hand {\n  animation: rotate linear calc(var(--hour) * 12) infinite;\n}<\/code><\/pre>\n\n\n\n<p>You probably get the idea of how the hands of the clock work by now. But it would not be a complete example if we didn\u2019t actually <em>build the clock<\/em>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-clock-face\">The clock face<\/h3>\n\n\n<p>So far, we\u2019ve only looked at the CSS aspect of the clock. We also need some HTML for all that to work. Here\u2019s what I\u2019m using:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;main>\n  &lt;div class=\"clock\">\n    &lt;div class=\"second hand\">&lt;\/div>\n    &lt;div class=\"minute hand\">&lt;\/div>\n    &lt;div class=\"hour hand\">&lt;\/div>\n  &lt;\/div>\n&lt;\/main><\/code><\/pre>\n\n\n\n<p>Let\u2019s see what we have to do to style our clock:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock {\n  width: 300px;\n  height: 300px;\n  border-radius: 50%;\n  background-color: var(--grey);\n  margin: 0 auto;\n  position: relative;\n}<\/code><\/pre>\n\n\n\n<p>We made the clock 300px tall and wide, made the background color grey (using a custom property, <code>--grey<\/code>, we can define later) and turned it into a circle with a 50% border radius.<\/p>\n\n\n\n<p>There are three hands on the clock. Let\u2019s first move these to the center of the clock face with absolute positioning:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hand {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}<\/code><\/pre>\n\n\n\n<p>Notice the name of this class (<code>.hands<\/code>) because all three hands use it for their base styles. That\u2019s important because any changes to this class are applied to all three hands.<\/p>\n\n\n\n<p>Let\u2019s define the hand dimensions and color things up:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5,6,7\"><code markup=\"tt\">.hand {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 10px;\n  height: 150px;\n  background-color: var(--blue);\n}<\/code><\/pre>\n\n\n\n<p>The hands are now all in place:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1s12PKQGGxQSFDegWPqjQig.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"A round clock with just one light blue hand pointing directly at 6.\" class=\"wp-image-344154\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1s12PKQGGxQSFDegWPqjQig.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1s12PKQGGxQSFDegWPqjQig.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1s12PKQGGxQSFDegWPqjQig.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-getting-proper-rotation\">Getting proper rotation<\/h3>\n\n\n<p>Let\u2019s hold off celebrating just a moment. We have a few issues and they might not be obvious when the clock hands are this thin. What if we change them to be 100px wide:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1swICUl3MpEhdPNGIvbmp1g.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"A round clock with a light grey background. The light blue hand is thick and still pointed at 6, but \" class=\"wp-image-344155\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1swICUl3MpEhdPNGIvbmp1g.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1swICUl3MpEhdPNGIvbmp1g.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1swICUl3MpEhdPNGIvbmp1g.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We can now see that if an element is positioned 50% from the left, it is aligned to the center of the parent element\u2014but that\u2019s not exactly what we need. To fix this, the left coordinate needs to be 50%, minus half the width of the hand, which is 50px in our case:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/19Rpb9cadRf-84jFYzkVchw.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"Grey circle with a red vertical line bisecting it in the center. Two red arrows are on the clock, one labeled 50% pointing at the red line and another labeled negative 50 pixels pointing away from the red line.\" class=\"wp-image-344157\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/19Rpb9cadRf-84jFYzkVchw.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/19Rpb9cadRf-84jFYzkVchw.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/19Rpb9cadRf-84jFYzkVchw.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Working with multiple different measurements is a breeze for the <code>calc()<\/code> function:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3\"><code markup=\"tt\">.hand {\n  position: absolute;\n  left: calc(50% - 50px);\n  top: 50%;\n  width: 100px;\n  height: 150px;\n  background-color: var(--grey);\n}<\/code><\/pre>\n\n\n\n<p>This fixes our initial positioning, however, if we try to rotate the element we can see that the transform origin, which is the pivot point of the rotation, is at the center of the element:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1N9CIWA5uBoyJGT2XB6mLFw.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"Grey circle showing a blue rectangle on top rotated counter-clockwise.\" class=\"wp-image-344158\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1N9CIWA5uBoyJGT2XB6mLFw.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1N9CIWA5uBoyJGT2XB6mLFw.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1N9CIWA5uBoyJGT2XB6mLFw.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We can use the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform-origin\/\">transform-origin<\/a><\/code> property to change the rotation origin point to be at the center of the x-axis and at the top on the y-axis:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"8\"><code markup=\"tt\">.hand {\n  position: absolute;\n  left: calc(50% - 50px);\n  top: 50%;\n  width: 100px;\n  height: 150px;\n  background-color: var(--grey);\n  transform-origin: center 0;\n}<\/code><\/pre>\n\n\n\n<p>This is great, but not perfect because our pixel values for the clock hands are hardcoded. What if we want our hands to have different widths and heights, and scale with the actual size of the clock? Yes, you guessed right: we need a few CSS custom properties!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.second {\n  --width: 5px;\n  --height: 140px;\n  --color: var(--yellow);\n}\n.minute {\n  --width: 10px;\n  --height: 90px;\n  --color: var(--blue);\n}\n.hour {\n  --width: 10px;\n  --height: 50px;\n  --color: var(--dark-blue);\n}<\/code><\/pre>\n\n\n\n<p>With this, we\u2019ve defined custom properties for the individual hands. What\u2019s interesting here is that we gave these properties the same names: <code>--width<\/code>, <code>--height<\/code>, and <code>--color<\/code>. How is it possible that we gave them different values but they don\u2019t overwrite each other? And which value will I get back if I call <code>var(--width)<\/code>, <code>var(--height)<\/code> or <code>var(--color)<\/code>?<\/p>\n\n\n\n<p>Let\u2019s look at the hour hand:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"hour hand\">&lt;\/div><\/code><\/pre>\n\n\n\n<p>We assigned new custom properties to the <code>.hour<\/code> class and they are <a href=\"https:\/\/css-tricks.com\/breaking-css-custom-properties-out-of-root-might-be-a-good-idea\/\">locally scoped to the element<\/a>, which includes the element and all its children. This means any CSS style applied to the element\u2014or its children accessing the custom properties\u2014will see and use the specific values that were set <strong>within their own scope<\/strong>. So if you call <code>var(--width)<\/code> inside the hour hand element or any ancestor elements inside that, the value returned from our example above is 10px. This also means that if we try using any of these properties outside these elements\u2014for example inside the body element\u2014they are inaccessible to those elements outside the scope.<\/p>\n\n\n\n<p>Moving on to the hands for seconds and minutes, we enter a different scope. That means the custom properties can be redefined with different values.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"19,20,21,22\"><code markup=\"tt\">.second {\n  --width: 5px;\n  --height: 140px;\n  --color: var(--yellow);\n}\n.minute {\n  --width: 10px;\n  --height: 90px;\n  --color: var(--blue);\n}\n.hour {\n  --width: 10px;\n  --height: 50px;\n  --color: var(--dark-blue);\n}\n.hand {\n  position: absolute;\n  top: 50%;\n  left: calc(50% - var(--width) \/ 2);\n  width: var(--width);\n  height: var(--height);\n  background-color: var(--color);\n  transform-origin: center 0;\n}<\/code><\/pre>\n\n\n\n<p>The great thing about this is that the <code>.hand<\/code> class (which we assigned to all three hand elements) can reference these properties for the calculations and declarations. And each hand will receive its own properties from its own scope. In a way, we\u2019re personalizing the <code>.hand<\/code> class for each element to avoid unnecessary repetition in our code.<\/p>\n\n\n\n<p>Our clock is up and running and all hands are moving at the correct speed:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"The finished clock. Grey background, with minutes and hours pointing to 6 and seconds pointing to 7.\" class=\"wp-image-344160\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We could stop here but let me suggest a few improvements. The hands on the clock start at 6 o\u2019clock, but we could set their initial positions to 12 o\u2019clock by rotating the clock 180 degrees. Let\u2019s add this line to the <code>.clock<\/code> class:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock {\n  \/* same as before *\/\n  transform: rotate(180deg);\n}<\/code><\/pre>\n\n\n\n<p>The hands might look nice with rounded edges:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hand {\n  \/* same as before *\/\n  border-radius: calc(var(--width) \/ 2);\n}<\/code><\/pre>\n\n\n\n<p>Our clock looks and works great! And all hands start from 12 o\u2019clock, exactly how we want it!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-setting-the-clock\">Setting the clock<\/h3>\n\n\n<p>Even with all these awesome features, the clock is unusable as <strong>it fails terribly at telling the actual time<\/strong>. However, there are some hard limitations to what we can do about this. It\u2019s simply not possible to access the local time with HTML and CSS to automatically set our clock. But we can prepare it for manual setup.<\/p>\n\n\n\n<p>We can set the clock to start at a certain hour and minute and if we run the HTML at exactly that time it will keep the time accurately afterwards. This is basically how you set a real-world clock, so I think this is an acceptable solution. &#x1f605;<\/p>\n\n\n\n<p>Let\u2019s add the time we want to start the clock as custom properties inside the <code>.clock<\/code> class:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock {\n  --setTimeHour: 16;\n  --setTimeMinute: 20;\n  \/* same as before *\/\n}<\/code><\/pre>\n\n\n\n<p>The current time for me as I write is coming up to 16:20 (or 4:20) so the clock will be set to that time. All I need to do is refresh the page at 16:20 and it will keep the time accurately.<\/p>\n\n\n\n<p>OK, but\u2026 <em>how can we set the time to these positions and rotate the hands if a CSS animation is already controlling the rotation?<\/em><\/p>\n\n\n\n<p>Ideally, we want to rotate and set the hands of the clock to a specific position when the animation starts at the very beginning. Say you want to set the hour hand to 90 degrees so it starts at 3:00 pm  and initialize the rotation animation from this position:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* this will not work *\/\n.hour.hand {\n  transform: rotate(90deg);\n  animation: rotate linear var(--hour) infinite;\n}<\/code><\/pre>\n\n\n\n<p>Well, unfortunately, this will not work because the <code>transform<\/code> is immediately overridden by the animation, as it modifies the very same <code>transform<\/code> property. So, no matter what we set this to, it will go back to 0 degrees where the first keyframe of the animation starts.<\/p>\n\n\n\n<p>We can set the rotation of the hand independently from the animation. For example, we could wrap the hand into an extra element. This extra parent element, the \u201csetter,\u201d would be responsible for setting the initial position, then the hand element inside could animate from 0 to 360 degrees independently. The starting 0-degree position would then be relative to what we set the parent setter element to.<\/p>\n\n\n\n<p>This would work but luckily there\u2019s a better option! <strong>Let me amaze you!<\/strong> &#x1fa84;&#x2728;&#x2728;<\/p>\n\n\n\n<p>The <code>animation-delay<\/code> property is what we usually use to start the animation with some predefined delay.<\/p>\n\n\n\n<p>The trick is to <strong>use a negative value,<\/strong> which starts the animation immediately, but from a specific point in the animation timeline!<\/p>\n\n\n\n<p>To start 10 seconds into the animation:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">animation-delay: -10s;<\/code><\/pre>\n\n\n\n<p>In case of the hour and minute hands, the actual value we need for the delay is calculated from the <code>--setTimeHour<\/code> and <code>--setTimeMinute<\/code> properties. To help with the calculation, let\u2019s create two new properties with the amount of time shifting we need:<\/p>\n\n\n\n<ul><li>The hour hand needs to be the hour we want to set the clock, multiplied by an hour.<\/li><li>The minute hand shifts the minute we want to set the clock multiplied by a minute.<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">--setTimeHour: 16;\n--setTimeMinute: 20;\n--timeShiftHour: calc(var(--setTimeHour) * var(--hour));\n--timeShiftMinute: calc(var(--setTimeMinute) * var(--minute));<\/code><\/pre>\n\n\n\n<p>These new properties contain the exact amount of time we need for the <code>animation-delay<\/code> property to set our clock. Let\u2019s add these to our animation definitions:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"6,10\"><code markup=\"tt\">.second.hand {\n  animation: rotate steps(60) var(--minute) infinite;\n}\n.minute.hand {\n  animation: rotate linear var(--hour) infinite;\n  animation-delay: calc(var(--timeShiftMinute) * -1);\n}\n.hour.hand {\n  animation: rotate linear calc(var(--hour) * 12) infinite;\n  animation-delay: calc(var(--timeShiftHour) * -1);\n}<\/code><\/pre>\n\n\n\n<p>Notice how we multiplied these values by -1 to convert them to a negative number.<\/p>\n\n\n\n<p>We have almost reached perfection with this, but there\u2019s a slight issue: if we set the number of minutes to 30, for example, the hour hand needs to already be halfway through to the next hour. An even worse situation would be to set the minutes to 59 and the hour hand is still at the beginning of the hour.<\/p>\n\n\n\n<p>fix this, all we need to do is add the minute shift and the hour shift values together for the hour hand:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hour.hand {\n  animation: rotate linear calc(var(--hour) * 12) infinite;\n  animation-delay: calc(\n    (var(--timeShiftHour) + var(--timeShiftMinute)) * -1\n  );\n}<\/code><\/pre>\n\n\n\n<p>And I think with this we have fixed everything. Let\u2019s admire our beautiful, pure CSS, settable, analog clock:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"\" class=\"wp-image-344160\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1qWEFlUBZvC8ZMJ9cpMGrcA.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-s-go-digital\">Let\u2019s go digital<\/h3>\n\n\n<p>In principle, an analog and a digital clock both use the same calculations, the difference being the visual representation of the calculations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/16T6dmJao-Jx84zfRaGK_2w.jpeg?resize=802%2C320&#038;ssl=1\" alt=\"Clock with a rectangular light grey background with the numeric time reading 14 45 18 in 24-hour format.\" class=\"wp-image-344161\" width=\"802\" height=\"320\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Here\u2019s my idea: we can create a digital clock by setting up tall, vertical columns of numbers and animate these instead of rotating the clock hands. Removing the overflow mask from the final version of the clock container reveals the trick:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1vLofuBX4JkaUOjDG4k9Qew.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"\" class=\"wp-image-344162\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1vLofuBX4JkaUOjDG4k9Qew.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1vLofuBX4JkaUOjDG4k9Qew.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1vLofuBX4JkaUOjDG4k9Qew.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The new HTML markup needs to contain all the numbers for all three sections of the clock from 00 to 59 on the second and minute sections and 00 to 23 on the hour section:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;main>\n  &lt;div class=\"clock\">\n    &lt;div class=\"hour section\">\n      &lt;ul>\n        &lt;li>00&lt;\/li>\n        &lt;li>01&lt;\/li>\n        &lt;!-- etc. -->\n        &lt;li>22&lt;\/li>\n        &lt;li>23&lt;\/li>\n      &lt;\/ul>\n    &lt;\/div>\n    &lt;div class=\"minute section\">\n      &lt;ul>\n        &lt;li>00&lt;\/li>\n        &lt;li>01&lt;\/li>\n        &lt;!-- etc. -->\n        &lt;li>58&lt;\/li>\n        &lt;li>59&lt;\/li>\n      &lt;\/ul>\n    &lt;\/div>\n    &lt;div class=\"second section\">\n      &lt;ul>\n        &lt;li>00&lt;\/li>\n        &lt;li>01&lt;\/li>\n        &lt;!-- etc. -->\n        &lt;li>58&lt;\/li>\n        &lt;li>59&lt;\/li>\n      &lt;\/ul>\n    &lt;\/div>\n  &lt;\/div>\n &lt;\/main><\/code><\/pre>\n\n\n\n<p>To make these numbers line up, we need to write some CSS, but to get started with the styling we can copy over the custom properties from the <code>:root<\/code> scope of the analog clock straight away, as time is universal:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:root {\n  --second: 1s;\n  --minute: calc(var(--second) * 60);\n  --hour: calc(var(--minute) * 60);\n}<\/code><\/pre>\n\n\n\n<p>The outermost wrapper element, the <code>.clock<\/code>, still has the very same custom properties for setting the initial time. All that\u2019s changed is that it becomes a flexbox container:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.clock {\n  --setTimeHour: 14;\n  --setTimeMinute: 01;\n  --timeShiftHour: calc(var(--setTimeHour) * var(--hour));\n  --timeShiftMinute: calc(var(--setTimeMinute) * var(--minute));\n\n  width: 150px;\n  height: 50px;\n  background-color: var(--grey);\n  margin: 0 auto;\n  position: relative;\n  display: flex;\n}<\/code><\/pre>\n\n\n\n<p>The three unordered lists and the list items inside them that hold the numbers don\u2019t need any special treatment. The numbers will stack on top of each other if their horizontal space is limited. Let\u2019s just make sure that there is no list styling to prevent bullet points and that we center things for consistent placement:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.section > ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.section > ul > li {\n  width: 50px;\n  height: 50px;\n  font-size: 32px;\n  text-align: center;\n  padding-top: 2px;\n}<\/code><\/pre>\n\n\n\n<p>The layout is done!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"400\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1Jxj_DXVTuvQC86pYsWBF2w.jpeg?resize=1000%2C400&#038;ssl=1\" alt=\"\" class=\"wp-image-344163\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1Jxj_DXVTuvQC86pYsWBF2w.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1Jxj_DXVTuvQC86pYsWBF2w.jpeg?resize=300%2C120&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1Jxj_DXVTuvQC86pYsWBF2w.jpeg?resize=768%2C307&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Outside each unordered list is a <code>&lt;div&gt;<\/code> with a <code>.section<\/code> class. This is the element that wraps each section, so we can use it as a mask to hide the numbers that fall outside the visible area of the clock:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.section {\n  position: relative;\n  width: calc(100% \/ 3);\n  overflow: hidden;\n}<\/code><\/pre>\n\n\n\n<p>The structure of the clock is done and the rails are now ready to be animated.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-animating-the-digital-clock\">Animating the digital clock<\/h4>\n\n\n<p>The basic idea behind the whole animation is that the three strips of numbers can be moved up and down within their masks to show different numbers from 0 to 59 for seconds and minutes, and 0 to 23 for hours (for a 24-hour format).<\/p>\n\n\n\n<p>We can do this by changing the <code>translateY<\/code> transition function in CSS for the individual strips of numbers from 0 to -100%. This is because 100% on the y-axis represents the height of the whole strip. A value of 0% will show the first number, and 100% will show the last number of the current strip.<\/p>\n\n\n\n<p>Previously, our animation was based on rotating a hand from 0 to 360 degrees. We now have a different animation that moves the number strips from 0 to -100% on the y-axis:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes tick {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\n}<\/code><\/pre>\n\n\n\n<p>Applying this animation to the seconds number strip can be done the same way as the analog clock. The only difference is the selector and the name of the animation that\u2019s referenced:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.second > ul {\n  animation: tick steps(60) var(--minute) infinite;\n}<\/code><\/pre>\n\n\n\n<p>With the <code>step(60)<\/code> setting, the animation ticks between numbers like we did for the second hand on the analog clock. We could change this to <code>ease<\/code> and then the numbers would smoothly slide up and down as if they were on a ribbon of paper.<\/p>\n\n\n\n<p>Assigning the new tick animation to the minute and hour sections is just as straightforward:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.minute > ul {\n  animation: tick steps(60) var(--hour) infinite;\n  animation-delay: calc(var(--timeShiftMinute) * -1);\n}\n.hour > ul {\n  animation: tick steps(24) calc(24 * var(--hour)) infinite;\n  animation-delay: calc(var(--timeShiftHour) * -1);\n}<\/code><\/pre>\n\n\n\n<p>Again, the declarations are very similar, what\u2019s different this time is the selector, the timing function, and the animation name.<\/p>\n\n\n\n<p>The clock now ticks and keeps the correct time:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/17uKiR2Kn5_PoXCIGvXGqvQ.jpeg?ssl=1\" alt=\"Time reading 14 1 10 in 24-hour format.\" class=\"wp-image-344164\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-one-more-detail-the-blinking-colon\">One more detail: The blinking colon (<code>:<\/code>)<\/h4>\n\n\n<p>Again we could stop here and call it a day. But there\u2019s one last thing we can do to make our digital clock a little more realistic: make the colon separator between the minutes and seconds blink as each second passes.<\/p>\n\n\n\n<p>We could add these colons in the HTML but they are not part of the content. We want them to be an enhancement to the appearance and style of the clock, so CSS is the right place to store this content. That\u2019s what the <code>content<\/code> property is for and we can use it on the <code>::after<\/code> pseudo-elements for the minutes and hours:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.minute::after,\n.hour::after {\n  content: \":\";\n  margin-left: 2px;\n  position: absolute;\n  top: 6px;\n  left: 44px;\n  font-size: 24px;\n}<\/code><\/pre>\n\n\n\n<p>That was easy! But how can we make the seconds colon blink too? We want it animated so we need to define a new animation? There are many ways to achieve this but I thought we should change the <code>content<\/code> property this time to demonstrate that, quite unexpectedly, it is possible to change its value during an animation:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes blink {\n  from { content: \":\"; }\n  to { content: \"\"; }\n}<\/code><\/pre>\n\n\n\n<p>Animating the <code>content<\/code> property is not going to work in every browser, so you could just change that to <code>opacity<\/code> or <code>visibility<\/code> as a safe option\u2026<\/p>\n\n\n\n<p>The final step is to assign the blink animation to the pseudo-element of the minute section:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.minute::after {\n  animation: blink var(--second) infinite;\n}<\/code><\/pre>\n\n\n\n<p><strong>And with that, we are all done!<\/strong> The digital clock keeps the time accurately and we even managed to add a blinking separator between the numbers.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-book-all-you-need-is-html-and-css\">Book: All you need is HTML and CSS<\/h3>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"542\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/front.png?resize=911%2C542&#038;ssl=1\" alt=\"\" class=\"wp-image-344446\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/front.png?w=911&amp;ssl=1 911w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/front.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/front.png?resize=768%2C457&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>This is just one example project from my new book, <em>All you need is HTML and CSS<\/em>. It\u2019s available on Amazon in both the <a href=\"https:\/\/www.amazon.com\/All-you-need-HTML-CSS\/dp\/B08ZQ3NSYF\/ref=sr_1_2\" rel=\"noopener\">U.S<\/a> and <a href=\"https:\/\/www.amazon.co.uk\/dp\/B08ZQ3NSYF\/ref=sr_1_1\" rel=\"noopener\">U.K.<\/a><\/p>\n\n\n\n<p>If you are just getting started with web development, the ideas in the book will help you level up and build interactive, animated web interfaces without touching any JavaScript.<\/p>\n\n\n\n<p>If you are a seasoned JavaScript developer, the book is a good reminder that many things can be built with HTML and CSS alone, especially now that we have a lot more powerful CSS tools and features, like the ones we covered in this article. There are many examples in the book pushing the limits including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There\u2019s even a fully working star rating widget and a shopping basket.<\/p>\n\n\n\n<p>Thanks for spending the <em>time<\/em> to build clocks with me!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s build a fully functioning and settable \u201canalog\u201d clock with CSS custom properties and the calc() function. Then we\u2019ll convert it into a \u201cdigital\u201d clock as well. All this with no JavaScript!<\/p>\n","protected":false},"author":284389,"featured_media":344151,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"No, it won't get the time dynamically, but we can still get a highly accurate clock with just some HTML and CSS, courtesy of @MateMarschalko.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1219,708,1036],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?fit=1000%2C400&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/1fpsekfFXE-vE42JrzL_uuA.jpeg?fit=1000%2C400&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344147"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/284389"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=344147"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344147\/revisions"}],"predecessor-version":[{"id":344856,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344147\/revisions\/344856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/344151"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=344147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=344147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=344147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}