Add CSS to a page using HTTP headers

Tue 28, Apr 2020

Hey y'all,

I just read about the Link header at Impressive Webs. It works just like the <link> HTML tag. That means that you can use it to add stylesheets to a website! Below is a PHP-based demo:

The page:

<?php
header('Link: <styles.css>; rel=stylesheet');
echo '<p>Some text here. This will get displayed using a sans-serif font if your browser supports the Link header. If not, your browser\'s default font will be used.</p>';

The stylesheet (named styles.css):

html,
body {
    font-family: sans-serif
}

The header will look like this:

Link: <styles.css>; rel=stylesheet

You can add multiple stylesheets by adding multiple Link headers, btw.

Browser support

Even though this is a standardized feature that has been around since HTML4, it seems to work in Firefox only. It is not deprecated, though. This is what the HTML4 spec says about it:

This section only applies to user agents conforming to versions of HTTP that define a Link header field. Note that HTTP 1.1 as defined by [RFC2616] does not include a Link header field (refer to section 19.6.3).

Why bother if it's only supported in Firefox?

I think it's just something really cool to look at. If you use it in a project, I'd highly recommend you to use <link> in addition, because otherwise most users probably won't see your stylesheets.

If you want to find out more about it, I'd highly recommend you to read this article at Impressive Webs and look at the Link header's MDN page.

YouTube-like page loading bar animation in CSS

Sat 04, Jan 2020

Thought this might be worth sharing.

The animation

I just figured out how to create that YouTube loading bar at the top of the page. It's actually really simple! Here's how:

The HTML is just one element:

<div class="anim"></div>

The CSS:

html,
body {
    z-index: 0;
    margin: 0 auto;
}

.anim {
    z-index: 1000;
    animation-name: fill;
    animation-duration: 1s;
    background-color: red;
}

@keyframes fill {
    0% {
        width: 0%;
        padding: 2px;
    }

    75% {
        width: 100%;
        padding: 2px;
    }

    100% { padding: 0px; }
}

Snowflakes in pure CSS

Mon 11, Nov 2019

Hi :)

Today I was trying out some stuff in CSS to create a simple snow animation for Christmas and winter in general.

The demo isn't available anymore

CSS: iOS-like blurred backgrounds

Fri 20, Sep 2019

I recently found out about the CSS property backdrop-filter. It's used to apply various filters to backgrounds. This can be really useful in some occasions. After playing around with it, I figured out how to create iOS-like blurred backgrounds using this property. Here's how:

Note: not every browser supports this property currently. Check caniuse to see if your browser supports it!

  1. Set up some basic markup

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>CSS: backdrop-filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="blur">
    <p>Some text</p>
    </div>
    </body>
    </html>
  2. The CSS

Some basic stuff first:

html,
body {
    margin: 0 auto;
    background: url('/path/to/some/background.jpg') no-repeat center center fixed;
    background-size: cover;
}

div#blur {
    font-family: sans-serif;
    margin: 0 auto;
    margin-top: 10px;
    background-color: rgba(234, 234, 234, .25);
    border-radius: 5px;
    padding: 5px;
    max-width: 600px;
    text-align: center;
}

And now add the filters to blur the background of the box:

div#blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

That's it! You should now see a blurred background, just like this: Screenshot of Safari Technology Preview showing the rendered code

A really minimal example of the code above:

body {
    background: url('/path/to/some/background.jpg');
}

div#blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

blur() isn't the only effect possible with backdrop-filter. There are many more:

If you want more information on this property, check its MDN site.

You are on page 1 right now.


Back to top