Let It Snow! Let It Snow! Let It Snow! 🌨️
It’s Christmas time, so I decided to slightly change the style of the web page. Falling snowflakes ❄️!
How to detect if it is Christmas time?
It can’t be done with HTML and CSS. With CSS it is possible to query for media types, like print (@media print), and if the users prefer a light or dark theme, for example with @media (prefers-color-scheme: light).
But it is not possible to query the current time.
As I want to avoid adding javascript the suboptimal "solution" is to use a CSS file that unconditionally adds the snow effect.
How to handle browser cache
CSS files generally do/should not change often (compared to the content that appears on a webpage), so it is considered a good practice to set an expiration date in the distant future.
This makes it hard to change a stylesheet just for Christmas.
People who have visited the website before Christmas will probably not see the snow effect. Not nice, but also not problematic.
But those people who will get the stylesheet with the snow effect might retain it for a long time after Christmas. This is more problematic.
It is possible to clear the cache manually, but it’s just a bad user experience.
The easiest solution is to create two stylesheets.
One without and the other with the snow effect and then change in the HTML files in which one is included.
HTML files are cached too, but normally for a shorter period, a .htaccess file might look like this:
ExpiresByType text/html "now plus 1 week"
ExpiresByType text/css "now plus 6 month"Thus a browser following those guidelines would cache HTML files for one week and CSS files for one month. Browsers are free to cache content for much longer, thus also the change in the HTML file might go unnoticed.
For this reason, not using Javascript is a suboptimal solution.
If it would be possible to somehow query the time, one could even archive the website locally and have the snow effect at Christmas time.
How to add the CSS effect
In my case, it was just adding an image with a transparent background and some white snowflakes, and the following snippet of CSS that sets this image as the background and moves it.
@media not print {
body {
background: url(/multimedia/snow.png);
animation: snow_frames 10s infinite linear;
}
@keyframes snow_frames {
0%{background-position: 0px 0px;}
100%{background-position: 100px 750px;}
}
}There are more realistic and complex implementations free to use on the web.
After changing the CSS file, replace <link rel="stylesheet" href="/style.css"> with <link rel="stylesheet" href="/style-snow.css">.
As I "compile" all pages this is a change I currently need to do only in one location.
Do you want to share your opinion? Or is there an error, some parts that are not clear enough?
You can contact me anytime.