Mike Riethmuller explains how to get the best out of CSS variables. I particularly like his idea that:

media queries should not be required except for changing CSS variables

Read the article to find out what he means.

Microsoft Edge @font-face not displaying all fonts

At Doepud we rarely find annoying bugs with browsers these days, partly because we like to keep our CSS and JavaScript simple, but mainly because browser vendors do a great job sticking to standards and delivering a consistent experience across a wide range of devices. It was a surprise then to find, when showing a client a demo version of their new site, and on a web browser that we normally consider to be pretty decent (Microsoft Edge) a very unusual bug feature. The issue was related to @font-face, or more specifically @import, with the main headings not displaying the embedded font as expected.

Firefox, Chrome and Opera all ok... but not Edge

Everything was working fine in Firefox, Chrome and Opera but not Microsoft's Edge browser (as it happened, we also found the issue extended to Internet Explorer 11).

Media Queries

Turns out that within our CSS file, when requesting fonts (using @import) inside a media query, like this:

@charset "utf-8";

@media screen {
    //imports
        @import 'normalise';
        @import 'fonts';
...

...Microsoft Edge (and IE11 let's not forget) opted to ignore them entirely. So, moving the @import rule up and outside the @media screen resolved the issue:

@charset "utf-8";
@import 'fonts';

@media screen {
    //imports
        @import 'normalise';
...

Some things never change eh? Microsoft have always liked to do things their own way.

Keeping aspect ratio of YouTube videos

Experiments in fixed aspect ratios is a handy CSS technique from Stephanie Liu for displaying video embeds in a responsive website without losing their aspect ratio.

The HTML:

<div class="container">
  <iframe class="embed"></iframe>
</div>

The CSS:

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25% // 9 / 16 * 100%
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS Grid lands in Firefox 52 - the Firefox web browser, made by the Mozilla Foundation, is the first major browser to provide full support for the CSS Grid Layout module. This should become the defacto layout technique for most of our work going forward. Exciting times!

CSS ICON, not just a decent sized collection of icons made entirely with CSS but also a very slick animated function to swap between two icons.

Pure CSS Tooltip and Pure CSS Dropdown Menu.

CSSCO demonstrates how to use CSS to create some very nifty filters for images.

Is it time to take CSS Variables seriously now that Chrome 49 has started to provide support?

In The Future of Loading CSS, Jake Archibald takes a look at how best to load CSS. Up to now, as CSS normally blocks page rendering, we've usually combined all styles into one file and loaded them after the main content has been downloaded. However, an update to the Chrome browser, bringing it into line with Microsoft's Edge browser, could help to change CSS loading best practise. The general idea is that we load multiple smaller CSS files that in turn render the content that directly follows it, resulting in a more progessive page render.

Need some simple CSS loading elements? Try these CSS spinners and throbbers.