planet.webcompat.com

otsukare by Karl Dubost at

So by now, you all know that Mozilla turned twenty. What was March 31, 1998 in California, for this news was April 1st in France when we arrived at the office. The April fool day is not a very trustable day in term of news (which is kind of ironic where the expression fake news took another meaning.); Meanings are fluid.

So I sent an email to an alumni mailing-list of work colleagues from our previous workplace (A French Web agency where we all started to code websites in between 1995 and 1997. There are stories) on April 1st, 1998.

La vraie nouvelle du jour

c'est le code source de Netscape.

http://www.mozilla.org/download.html

Which can be roughly translated as "The real news today. It's the Netscape source code." The answer to my message arrived a bit later that day with a very prosaic and down to earth question from one of my ex-colleagues.

My question might be a bit dumb, but what is the purpose of having Netscape source code?

This is a difficult question to answer. Specifically 20 years ago. There were plenty of open source projects already. But the concept of open source was not as known or marketed as it is today. Now, most of the major browsers have their code opensource and the topics related to "open source" have moved from the technology sphere to the society sphere.

And for most of the people behind a computer moving the cursor toward a button and clicking, the relevance of open source is as distant as the concept of nuclear fission when they push the switch to put the light on. And probably, it's fine… until something bad is happening and it's too late.

It was a good reminder for me today on what we often assume to be natural today where not just a quarter of a lifetime ago. This goes along with a younger generations of Web developers who were born after the Web and don't have the same assumptions about Web architecture ideas.

Happy anniversary Mozilla.

Otsukare!

otsukare by Karl Dubost at

Yet another Webcompat issue with the characters being cut in the bottom, this will join the other ones, such as cross characters not well centered in a rounded box and many other cases. What about it?

The sans-serif issue

All of these have the same pattern. They rely on the intrinsic font features to get the right design. So… this morning was another of this case. Take this very simple CSS rule:

.gsc-control-cse, .gsc-control-cse .gsc-table-result {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

Nothing fancy about it. It includes Arial, a widely used font and it gives a sans-serif fallback. It seems to be a sound and fail-safe choice.

Well… meet the land of mobile and your font declaration doesn't seem to be that reliable anymore. Mobile browsers have different default fonts on Android.

The sans-serif doesn't mean the same thing in all browsers on the same OS.

For example, for sans-serif and western languages

  • Chrome: Roboto
  • Firefox: Clear Sans

If you use Chinese or Japanese characters, the default will be different.

Fix The Users Woes On Mobile

Why is it happening so often? Same story, the web developers didn't have time, budget to test on all browsers. They probably tested on Chrome and Safari (iOS) and they decided to make a pass on Firefox Android. And because fonts have different features, they do not behave the same to line-height, box sizes and so on. Clear Sans and Roboto are different enough that it creates breakage on some sites.

If you test only on Chrome Android (you should not), but let says we reached the shores of Friday… and it's time to deploy at 5pm. This is your fix:

.gsc-control-cse, .gsc-control-cse .gsc-table-result {
    width: 100%;
    font-family: Arial, Roboto, sans-serif;
    font-size: 13px;
}

Name the fonts available on mobile OS, you expect the design to be working on. It's still not universally accessible and will not make it reliable in all cases, but it will cover a lot of cases. It will also make your Firefox Android users less grumpy and your Mondays will be brighter.

Otsukare!

When Can I Use updates by Alexis Deveria at

Caniuse has added new options to select exactly which browser versions you're interested in seeing support data for. By default, displayed versions on caniuse are based solely on usage, which is what matters in most cases.

But in some cases you may be specifically interested in supporting browser version ranges starting at a given version, or from a specific date. Your company may have policies on exactly how far back browsers should be supported. The new browser set feature should help in showing you just the information you need.

To get started, look in the Settings panel, find the "browser set" section and click "Add new set".

A browser set is a list of rules (based on browserslist) that determines which browser versions appear in support tables. For example you can now select "last 5 Firefox versions" or "Edge versions > 14" or even "All browser versions released since 2016".

Sets can be imported & exported, and links can be generated that include selected browser set settings so you can share a feature table that includes the exact browsers you care about. If you find any issues with this new tool, please file an issue. Thanks!

Subscriptions