Screencast: Was macht animation-fill-mode: forwards und wieso ist es cool?

In diesem Screencast geht es um animation-fill-mode: forwards; Was ist es? Was kann es? Wieso ist es cool?

Euch hat das Video gefallen und ihr wollt mehr sehen? Dann nicht vergessen das Video zu liken. Schreibt auch gerne einen Kommentar mit Themenwünschen, Fragen, Ideen, und so weiter.

Und nicht vergessen den YouTube Channel für mehr Screencasts zu abonnieren.

Weekly Recap

Hello and welcome to another Weekly Recap. This week is a nice mix of CSS, Javascript and general topics. Let’s dive in:

  • Responsive Javascript
    Most of us know a lot more about responsive CSS than about responsive Javascript. So go ahead and have a look at this one-pager that answers questions like „What is Responsive Javascript?“ and „What are the Browser APIs?“.

  • Use zero-width spaces to stop annoying Twitter users
    Harry Roberts has a simple trick for you how to write @import or other @-statements in tweets without mentioning users.

  • CSS animation-fill-mode
    I recently searched for exactly that: Being able to stop an animation at 100% and don’t have it going back to 0%. Works in IE10 and newer and all the cool kids on the block. I also created a CodePen.

  • Adaptive Backgrounds
    Cool jQuery plugin that extracts dominant colors from images and applies them to their parent elements.

  • Single Line Comments (//) in CSS
    I’m writing CSS on a daily basis for years now and I wasn’t aware of CSS not really supporting single line comments. Probably because it always worked for me because I either didn’t minify my CSS in the past or Sass is now doing some magic for me which allows me to use single line comments. Either way, necessary read.

  • DevSwag
    Need some new webdev related stickers or T-Shirts? Here you go.

  • 30 years of Macintosh
    On Friday, January 24th 2013, the Macintosh turned 30. This is the video and page Apple put together to celebrate. Well done.

  • Sitespeed.io
    This is an awesome tool to analyze your sites performance and get helpful tips how to improve it. You need to handle it via the command line but it’s really worth to learn it.

Avoid loading unnecessary CSS background images

While working on a responsive website the question came up whether CSS background images are being loaded by the browser if the element they are applied to is set to display: none;

My initial reaction was that I thought they will be loaded even though they aren’t rendered by the browser. After creating a test case on CodePen (see the code below), I was proven right – sadly. All CSS background images will be loaded by the browser no matter if they are rendered on the page or not.

BUT this isn’t true for Firefox, which is much smarter and always only loads the images that are actually rendered.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>
.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  background: url(s.gif);
  
  @media (min-width: 499px) {
    display: none;
  }
}

.box--m {
  display: none;
  background: url(m.gif);
  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
  }
}

.box--l {
  display: none;
  background: url(l.gif);

  @media (min-width: 800px) {
    display: block;
  }
}

Test it yourself with this CodePen.
Let’s have a look at what we can do to avoid loading unnecessary CSS background-images.

Instead of creating three different elements and using display: none; to hide them you can just change the background image according to media queries. This will only load the image that is actually displayed.

<div class="box box--s-m-l"></div>
.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s-m-l {
  margin-bottom: 40px;
  background: url(s.gif);
  
  @media (min-width: 500px) {
    background: url(m.gif);
  }
  
  @media (min-width: 800px) {
    background: url(l.gif);
  }
}

CodePen Testcase.

In this special case this will work, but let’s say you have three boxes with different content and different background images and want to show either one according to viewport size, just using display: none; won’t do the trick. That’s sad, but it’s the way it is, at least for now.

What you can do is set all boxes to display: none; and only when the media query applies show the box and set the background image. This way you only load the image you are actually showing and you can have different boxes.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>
.box {
  display: none;
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  @media (max-width: 499px) {
    display: block;
    background: url(s.gif);
  }
}

.box--m {  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
    background: url(m.gif);
  }
}

.box--l {
  @media (min-width: 800px) {
    display: block;
    background: url(l.gif);
  }
}

Try it with this CodePen.

Using Icon Fonts with the CSS content property and a simple Sass Mixin

Although I’m not the biggest fan of Icon Fonts and am having a closer look at svg at the moment, I used Icon Fonts a lot in the past. Mostly custom ones created by a Designer for me. At superReal we created a pretty nice Sass Mixin which helps using icons across your project in the same way and having an overview over all your icons in one place.

Every icon in an Icon Font is basically a character of the font. In our example writing a t with the Icon Font as the font-family will result in a twitter icon. But because icons are just graphics that would leave screen readers and search engines clueless because t doesn’t mean anything to them. So you should also provide a text version of every icon which can be indexed by search engines and used by screen readers. So to accomplish that I use pseudo elements with the content property to display the icons and hide the standard text with CSS.
The HTML looks like follows:

<a class="twitter-icon" href="http://twitter.com/_martinwolf">
    <span>Twitter</span>
</a>

With CSS we can than hide the span and only show the icon.
Our Mixin has three options. The first one is the $type and is the most important one and is mandatory because it defines which Icon is used from the if statement below. The second one is the pseudo element which by default is :before and the third is the display option which by default is block. We also define the font size (in the case of an icon font the size of the icon) and the line height in the Mixin for each icon individually within the if statement.
At last we hide the span element.

@mixin icon($type, $pseudo: before, $display: block) {
    &:#{$pseudo} {
        color: inherit;
        display: $display;
        font-family: 'Icons';
        -webkit-font-smoothing: antialiased;

        @if $type == burger {
            content: 'b';
            font-size: 70px;
            line-height: 37px;
        } @else if $type == facebook {
            content: 'f';
            font-size: 24px;
            line-height: 24px;
        } @else if $type == twitter {
            content: 't';
            font-size: 24px;
            line-height: 24px;
        } @else if $type == youtube {
            content: 'y';
            font-size: 24px;
            line-height: 24px;
        }
    }

    span {
        display: none;
    }
}

With this Mixin in place we can just call it and create our Twitter icon like that:

.twitter-icon {
    @include icon(twitter);
}

Be default the before pseudo element and display block is used. If we would want to change that we can do it like this:

.twitter-icon {
    @include icon(twitter, after, inline-block);
    margin-left: 10px;
}

This would result in the following CSS code:

.twitter-icon {
    margin-left: 10px;
}

.twitter-icon:after {
    color: inherit;
    display: inline-block;
    font-family: 'Icons';
    -webkit-font-smoothing: antialiased;
    content: 't';
    font-size: 24px;
    line-height: 24px;
}

.twitter-icon span {
    display: none;
}

If you want to use Entypo for example, a very popular Icon Font, you have to watch out for a little thing. Entypo and a lot of other Icon Fonts don’t give you a simple text for the content property, they instead give you a Unicode. But you can still use this Mixin you just have to escape the code it.

This is what you get from Entypo:

Screen-Shot-2014-01-04-at-14.19.42

And this is how you need to write your SCSS Mixin it to make it work:

content: '\1F50D';

I hope this helps you using Icon Fonts in your projects and makes your life a little bit easier.

Resetting min-height and min-width

W3C cheatsheet

Also a nice reference for looking up CSS values is the official W3C cheatsheet. It even offers more infos on the properties. Sadly there are no CSS3 properties like border-radius or box-shadows and the like. (via)

CSS Values

Great overview over all CSS values. Just type a CSS property in the input field on top and see all possible values. (via)

Clarity over brevity in variable and method names

David on Signals vs. Noise:

At times being exceedingly clear will seem almost silly at first glance. The name of the method or variable can be longer than the operation being performed! But the silliness quickly dissipates the first time you return to a piece of code and know exactly what it does.

Same goes for CSS class names. At times I think it’s totally stupid how long a class name can get but it almost always pays off in understanding my code even months later.

Big CSS – Slides from Harry Roberts‘ talk

You remember Harry Roberts? Sure you do. He recently was at Canvas Conf in Birmingham and talked about ‚Big CSS‘. It’s sad that there won’t be a video, but Harry put up his slides from the talk on Speakerdeck and I encourage you to click through them, read them and think about them. Even without him talking you can learn some things. Gogogo!

position: sticky lands in WebKit

Eric Bidelman for HTML5Rocks:

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

I’d love to see this implemented in every browser and without vendor prefixes as soon as possible with a real spec. At the moment it just works in Chrome 23.0.1247.0+ and WebKit nightly.
I had to build the same behavior with JS for the QUOTE.fm Labs and CSS would make it much easier and faster.