Tag Archives: css3

Invest in the future: build for the web!

I spoke at GOTO Amsterdam a few weeks ago. I was really thrilled to be back in the Netherlands after so many years! So thanks to Sergi Mansilla, who curated the HTML5 track, and the organisation in general for bringing me there!

The talk wasn’t recorded, but I made a screencast just in case you really want to listen to me. I am also posting the outline/notes I wrote, and they differ in places because I don’t read them during the talk (I don’t even have them handy) and I sometimes went a bit off topic, but that’s the beauty of improvisation!

Here are the slides, and the slides source code just in case you wanted it too.

On to the notes-expect some MASSIVE GIFs and amazingly clever photomanipulation! tee hee hee!
Continue reading

Firefox, display: box, display: flex

Redesigning my 5013.es website to make it responsive and generally nice with mobile browsers and other small-screen devices, I stumbled upon some funny behaviour by Firefox, both in mobile and desktop.

Basically I wanted to have this sort of mark up:

<div id="wrapper">
  <div id="nav"></div>
  <div id="logo"></div>
  <div id="content"></div>
</div>

but if we’re in a mobile context, or simply anywhere where there’s hardly much space wide-wise speaking, I want the site navigation to go to the bottom, right under content.

This can be done with a combination of display: box and box-ordinal-group. So using media queries I could write something like this (NOTE: non-prefixed properties omitted for brevity):

@media screen and (max-width: 480px) {
        #wrapper {
                display: box;
                box-orient: vertical;
        }

        #logo {
                box-ordinal-group: 1;
        }

        #nav {
                box-ordinal-group: 3;
        }
               
        #content {
                box-ordinal-group: 2;
        }
}

and it works great…! But only until you start using percentages for dimensioning stuff inside the #content. Then Firefox starts producing some very strange results: even if it still reorders things as requested, it looks as if it’s using a wrong height for the reordered blocks.

In my case, I was using some img elements styled like this:

#content img {
  width: 100%;
  height: auto;
}

and it looked fine in Chrome mobile:

mobile chrome output

but it just created an absurdly tall white space block after #content when viewed in Firefox:

mobile firefox output

Realising I might be doing something really wrong by using display: box, which is meant not to be used anymore, since there’s a new and very much improved standard module candidate, I looked into implementing the new one, which basically follows the same idea but uses different property names, probably to prevent breaking websites which used the old property names.

So I tried the equivalent layout with display: flex:

@media screen and (max-width: 480px) {

        #wrapper {
                display: flex;
                flex-direction: column;
        }

        #logo {
                order: 1;
        }

        nav {
                order: 3;
        }
               
        #content {
                order: 2;
        }
}

… and it only worked on Chrome Desktop. What an improvement! With some work I enabled support for display: flex in Firefox (the layout.css.flexbox.enabled preference has to be set to true in about: config), and saw that it worked there too, without unexpected white spaces.

So to recap, support for display: flex works well when present, but it won’t be present in Firefox until version 20 is hopefully released to the general public in April (as this page says). No idea about support in Chrome mobile, maybe it’s already there or about to be.

Back to my web, I wanted to have the new design this week, not in April, so I took a pragmatic decision: use display: box AND avoid percentages.

Since I know the max-width will be 480px, I’m using values less than that for sizing the elements. Not very elegant, but works on the mobile browsers of today (event the somehow ancient default Android browser).

Hopefully all this will have been fixed by April and I’ll be able to get rid of the ‘pragmatic hack’!

Here are the test files I’ve used, for reference and future comparison:

animated_gif.js

Animated GIF

Past week I wanted to make an animated GIF – but didn’t want to use GIMP or ffmpeg for that. I wondered: can an animated GIF be made in the browser? Of course it can! There was a library (JSGIF) which was a port of the original ActionScript library, AS3GIF.

I built a bit of wrapping code around the library, and did some tests to see if the port worked, first by creating a canvas and painting random squares on it, and then using them as input frames and building the GIF with that. Secondly, I tried using images. It worked acceptably enough (the color quantizer could be better, but we’re not after photo-realistic animations, after all).

So I added the drag and drop + file api stuff, but there was still something missing… the look wasn’t 90s enough! It was all begging for a bit of outdated aesthetics, but done with CSS3 and HTML5. Hence, there are multicolour logos via CSS animations, eye-cancer phosphorescent pink that turns into X-Files green glow (via CSS animations too), an HTML5 <footer> element used just because, and even a modern, 21st century blink-kind effect thanks to more CSS animations. You can’t but love it. And those huge frames! They are done with an ingenious abuse of CSS borders, but that could be done with CSS five years ago already. Nothing new here, but all very funny in any case.

Note that even if I finished this yesterday –April’s Fools– it wasn’t originally intended to be an April’s Fools joke. Hopefully you can take it seriously, right?

Right!

PS I actually looked into making animated WebP’s but the library I found wasn’t fast enough so all the fun factor was lost :-(

Maybe in a couple of years, when WebP is retro already…