
New CSS Features in Firefox 68 - bzbarsky
https://hacks.mozilla.org/2019/07/new-css-features-in-firefox-68/
======
hedora
I viewed the code pen example on my phone, and the bottom of the sections are
cut off in each of the snapped positions. So, even the canonical example is
making a ton of content inaccessible to people with minor motor control (that
allow them to swipe and tap, but not keep their finger in a one pixel radius
for extended periods of time).

Such issues tend to crop up later in life, precisely when you need to start
cranking the font size up (and therefore get outside of the configurations
checked during usability testing), so this is not only hitting a big
percentage of the population, it will eventually hit a sizable fraction of the
currently-healthy people reading this comment.

Which circle of Dante’s guide to web development in the inferno are we in
again? I’m having trouble keeping track.

~~~
lucideer
The important line here is this:

> _The update in Firefox 68 brings the Firefox implementation in line with
> Scroll Snap as implemented in Chrome and Safari_

While " _and Safari_ " is a less-relevant detail here, the general point is:
where there is a monopoly, minority browsers will often need to implement
user-hostile features in order to remain relevant/up-to-date/compatible.

Web devs today don't test in Firefox, they test in Chrome. They might have a
webdriver/saucelabs/etc. setup with Firefox/IE/Edge thrown in but in terms of
day-to-day these are afterthoughts.

~~~
KamBha
I only test in Firefox, because FF is my browser of choice. Everyone else in
the office only tests on Chrome because that is their browser of choice. We
all know it is wrong, but cross browser compatibility makes it so much easier
to forget that there are subtle differences.

Fun fact, we recently found a performance issue on one of our products which I
was completely unaware of because it didn't affect. Even now, we cannot get
Chrome to match FF's performance especially (of all things) for Google maps.
Just goes to show that basic assumptions that Chrome is faster than Firefox
are not 100% accurate. Like most things, it depends.

------
zazaraka
I want to use Firefox on my phone, but it's UI is just so confusing -
specifically the tab switching flow. When you try to switch tabs, the whole
screen is replaced, the typically white background is replaced with a dark
background, and the tabs are shown as tiny rectangles. And a very fast
animation which makes my head spin. Why don't they just copy the tab switching
from mobile Chrome?

They also have a new version of mobile Firefox, which will replace the current
one at some point in the future. It's called Firefox Preview. I tried it, tab
switching is acceptable, but now they moved the URL bar to the bottom of the
screen. Why????? So I've uninstalled it and I'm back to Chrome.

Nobody is going to switch from Chrome to Firefox if the UI is radically
different.

~~~
onion2k
_Nobody is going to switch from Chrome to Firefox if the UI is radically
different._

You could easily make the argument that no one is going to switch from Chrome
if Firefox is very similar too because there'd be no good reason to.

Guessing what users will do is a waste of time. You have to do experiments and
actually measure it.

~~~
pygy_
Anecdata:

I switched back almost 10 years ago (because Google creeps me out), and the UI
differences made it much harder.

I ended up tweaking firefox with extensions to make it look and behave like
Chrome as much as possible, then gradually turned it back to the default UI.
It made the switch far more pleasant.

------
sroussey
OMG, why so long for ::marker ? Finally! :)

~~~
thoughtpalette
Seriously. This seems underrated. Very excited!

------
codedokode
Pretty useless features. Don't you think that HTML is getting too complicated?
This often happens with open source projects, when everyone starts adding
features for themselves and the program ends up as a monster that nobody can
maintain (see: openvpn, x11vnc and so on).

But on the scale of uselessness this cannot be even compared with dark mode
support. Never needed it.

~~~
untog
Scroll snap is a useful feature. The way you can tell that it's useful is
because a ton of sites are already doing it, but in a manual, hacky way with
JavaScript. This works better and uses less code and CPU. A win all round.

~~~
aarmenaa
> Scroll snap is a useful feature. The way you can tell that it's useful is
> because a ton of sites are already doing it, but in a manual, hacky way with
> JavaScript. This works better and uses less code and CPU. A win all round.

Useful in the same way that popup windows are. Developers certainly liked
those - they were such a useful tool to annoy users with! And now "real" popup
windows are blocked and developers create them the hacky way with JavaScript.
The circle of life.

~~~
untog
What a silly comparison. Are you suggesting users find swipeable photo
galleries as irritating as popup windows? Because they really don't. If they
did then the photos app in both major mobile OSes would be _infuriating_.

------
fastball
I'm excited that scroll snapping has been implemented in Chrome, Safari, and
now Firefox.

~~~
vehemenz
If the browser is going to allow scrolljacking, then I understand the case for
it being implemented in the browser's CSS engine. But on so many sites it's a
usability issue because space, pgup/pgdn, arrow keys (not to mention Vimium
navigation) do not behave predictably.

~~~
Andrex
Thankfully CSS rules can be overridden by the user. :)

Takes a bit of hoop jumping though.

------
Aardwolf
How about a simple, single, CSS property that can simply say:

"horizontally center this text inside its rectangular element"

And another one for:

"vertically center this text inside its rectangular element"

The issue of centering wrapped multiline text has been solved in many UI
libraries.

~~~
butz
display: flex; justify-content: center; align-items: center;

~~~
silverwind
Those will clip child content when they overflow. There is a fix, but only
supported by Firefox currently:

justify-content: safe center; align-items: safe center;

------
chadlavi
The css debugging sounds great. I've never understood why there isn't a
console for css debugging in dev tools.

