Scroll Snapping and other cool CSS features come to Firefox 68

Yesterday, the Firefox team announced details of the new CSS features added to the Firefox 68. Earlier this month they had announced the release of Firefox 68 with a bunch of CSS additions and changes. Let us take a look at each:

CSS Scroll Snapping

The update in Firefox 68 brings the Firefox implementation in line with Scroll Snap as implemented in Chrome and Safari. In addition, it removes the old properties which were part of the earlier Scroll Snap Points Specification.

The ::marker pseudo-element

The ::marker pseudo-element helps in selecting the marker box of a list item. This will typically contain the list bullet, or a number. If you have ever used an image as a list bullet, or wrapped the text of a list item in a span in order to have different bullet and text colors, this pseudo-element is for you! With the marker pseudo-element, you can target the bullet itself.

There are only a few CSS properties that may be used on ::marker. These include all font properties. Therefore you can change the font-size or family to be something different to the text.

Using ::marker on non-list items

A marker can only be shown on the list items, however you can turn any element into a list-item by using display: list-item. The official blog post covers a detailed example with codes on how you can perform this functionality.

The ::marker pseudo-element is standardized in CSS Lists Level 3, and CSS Pseudo-elements Level 4, and currently implemented in Firefox 68 and Safari.

CSS fixes in Firefox 68

Web developers suffer when a supported feature works differently in different browsers. These interoperability issues are often caused by the age of the web platform. Hence, the Firefox team has made many changes to the CSS specifications. Developers depend on the browsers to update their implementations to match the clarified spec. In the latest Firefox release, the team has got fixes for the ch unit, and list numbering shipping.

In addition to changes to the implementation of CSS in Firefox, Firefox 68 brings some great new additions to Developer Tools to work with CSS. Take a look at the Firefox 68 release notes to get a full overview of all the changes and additions in Firefox 68.