New CSS Features in Firefox 68

• Features, Firefox

5 min. (973 words)

new-css-features-in-firefox-68

Firefox 68 landed earlier this month with a bunch of CSS additions and changes. In this blog post we will take a look at some of the things you can expect to find, that might have been missed in earlier announcements.

CSS Scroll Snapping

The headline CSS feature this time round is CSS Scroll Snapping. I won’t spend much time on it here as you can read the blog post for more details. 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 lets you select 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. The following code will turn the bullet on unordered lists to hot pink, and make the number on an ordered list item larger and blue.

ul ::marker {
  color: hotpink;
}

ol ::marker {
  color: blue;
  font-size: 200%;
}

An ordered and unordered list with styled bullets

With ::marker we can style our list markers

See the CodePen.

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. You can also color the bullets as shown above, and insert generated content.

Using ::marker on non-list items

A marker can only be shown on list items, however you can turn any element into a list-item by using display: list-item. In the example below I use ::marker, along with generated content and a CSS counter. This code outputs the step number before each h2 heading in my page, preceded by the word “step”. You can see the full example on CodePen.

h2 {
  display: list-item;
  counter-increment: h2-counter;
}

h2::marker {
  content: "Step: " counter(h2-counter) ". ";
}

If you take a look at the bug for the implementation of ::marker you will discover that it is 16 years old! You might wonder why a browser has 16 year old implementation bugs and feature requests sitting around. To find out more read through the issue, where you can discover that it wasn’t clear originally if the ::marker pseudo-element would make it into the spec.

There were some Mozilla-specific properties that achieved the result developers were looking for with something like ::marker. The properties ::moz-list-bullet and ::moz-list-marker allowed for the styling of bullets and markers respectively, using a moz- vendor prefix.

The ::marker pseudo-element is standardized in CSS Lists Level 3, and CSS Pseudo-elements Level 4, and currently implemented as of Firefox 68, and Safari. Chrome has yet to implement ::marker. However, in most cases you should be able to use ::marker as an enhancement for those browsers which support it. You can allow the markers to fall back to the same color and size as the rest of the list text where it is not available.

CSS Fixes

It makes web developers sad when we run into a feature which is supported but works differently in different browsers. These interoperability issues are often caused by the sheer age of the web platform. In fact, some things were never fully specified in terms of how they should work. Many changes to our CSS specifications are made due to these interoperability issues. Developers depend on the browsers to update their implementations to match the clarified spec.

Most browser releases contain fixes for these issues, making the web platform incrementally better as there are fewer issues for you to run into when working with CSS. The latest Firefox release is no different – we’ve got fixes for the ch unit, and list numbering shipping.

Developer Tools

In addition to changes to the implementation of CSS in Firefox, Firefox 68 brings you some great new additions to Developer Tools to help you work with CSS.

In the Rules Panel, look for the new print styles button. This button allows you to toggle to the print styles for your document, making it easier to test a print stylesheet that you are working on.

The Print Styles button in the UI highlighted

The print styles icon is top right of the Rules Panel.

Staying with the Rules Panel, Firefox 68 shows an icon next to any invalid or unsupported CSS. If you have ever spent a lot of time puzzling over why something isn’t working, only to realise you made a typo in the property name, this will really help!

A property named flagged invalid in the console

In this example I have spelled padding as “pudding”. There is (sadly) no pudding property so it is highlighted as an error.

The console now shows more information about CSS errors and warnings. This includes a nodelist of places the property is used. You will need to click CSS in the filter bar to turn this on.

The console highlighting a CSS error

My pudding error is highlighted in the Console and I can see I used it on the body element.

So that’s my short roundup of the features you can start to use in Firefox 68. Take a look at the Firefox 68 release notes to get a full overview of all the changes and additions that Firefox 68 brings you.

Rachel Andrew is a front and back-end web developer, one half of the company behind Perch CMS, and Editor in Chief of Smashing Magazine. She is a Google Developer Expert for web technologies and a member of the CSS Working Group representing Fronteers, where she is co-editor of the Multi-column Layout spec. Author of 22 books, and a frequent public speaker at conferences worldwide, you can find out what she is up to at https://rachelandrew.co.uk.

More articles by Rachel Andrew…

84 comments

  1. My brother suggested I might like this website. He was once totally right.
    This publish truly made my day. You cann’t consider simply how much time I had spent for this info!
    Thank you!

  3. Nice post. I learn something new and challenging on websites I stumbleupon everyday.

    It’s always exciting to read content from other writers and use a little something from other websites.

  5. Thanks , I have just been searching for info about this topic for a while and yours is the best I have found out
    till now. But, what in regards to the conclusion? Are you certain concerning the supply?

  6. Can I simply just say what a relief to uncover a person that really understands what they
    are discussing on the web. You definitely know how to
    bring a problem to light and make it important.
    More people must check this out and understand this side of
    the story. I can’t believe you are not more popular since you surely possess
    the gift.

  7. hi!,I really like your writing so a lot! proportion we
    keep up a correspondence extra approximately your post on AOL?

    I require an expert in this area to unravel my problem.
    Maybe that’s you! Having a look forward to look you.

  8. Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your
    blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently
    quickly.

  9. Hi there great blog! Does running a blog such as this require a great deal of
    work? I’ve no understanding of programming but I was hoping to start my own blog in the
    near future. Anyways, should you have any suggestions or tips for new blog owners please share.
    I know this is off topic nevertheless I just wanted to ask.

    Thanks!

  12. I am curious to find out what blog platform you are working with?
    I’m experiencing some small security problems with my latest website and I would like to find something
    more safe. Do you have any suggestions?

  13. Whats up are using WordPress for your site
    platform? I’m new to the blog world but I’m trying to get started and set up
    my own. Do you require any coding expertise to make your own blog?
    Any help would be greatly appreciated!

  14. After I initially left a comment I seem to have clicked the -Notify me when new comments
    are added- checkbox and from now on every time
    a comment is added I receive 4 emails with the exact same comment.
    Is there a way you can remove me from that service? Thank you!

  16. Oh my goodness! Incredible article dude! Thank you,
    However I am having difficulties with your RSS.
    I don’t know why I am unable to join it. Is there anybody else having similar RSS problems?
    Anybody who knows the solution can you kindly respond?
    Thanks!!

  17. What’s up, for all time i used to check weblog posts here
    early in the daylight, for the reason that i love to find out
    more and more.

  18. I think that what you published made a bunch of sense. However,
    think on this, suppose you wrote a catchier title? I am not suggesting your
    information is not solid., but what if you added something to maybe grab people’s attention? I mean New CSS Features in Firefox 68 – Pavvy
    Designs is a little plain. You should peek at Yahoo’s home page and note how they write news headlines to get people interested.
    You might try adding a video or a related picture or two to get readers
    excited about what you’ve got to say. In my opinion, it would bring your posts
    a little bit more interesting.

  19. Thanks for one’s marvelous posting! I truly enjoyed reading it,
    you could be a great author. I will make certain to bookmark your
    blog and definitely will come back later in life. I want to encourage
    you continue your great job, have a nice weekend!

  20. Thank you for some other wonderful post. Where else may anybody get that
    type of info in such a perfect manner of writing?
    I’ve a presentation next week, and I’m on the look
    for such info.

  21. I’m impressed, I must say. Rarely do I come across a blog that’s equally educative and amusing, and without a doubt, you’ve hit the nail on the head.
    The problem is something too few people are speaking intelligently about.

    I am very happy I came across this in my hunt for something
    relating to this.

  23. I needed to thank you for this great read!! I definitely
    loved every bit of it. I have you saved as a favorite to look at new stuff you post…

  28. I’m not that much of a online reader to be honest
    but your sites really nice, keep it up! I’ll go ahead
    and bookmark your site to come back in the future.
    Many thanks

  29. Excellent post. I used to be checking continuously this
    blog and I’m impressed! Extremely helpful information specially the ultimate part 🙂 I deal with such info a lot.

    I used to be seeking this particular info for a long time.
    Thanks and good luck.

  30. What’s up to every single one, it’s actually a nice for me to
    pay a visit this website, it consists of helpful Information.

  31. Greetings from Colorado! I’m bored to tears at work so
    I decided to browse your blog on my iphone during
    lunch break. I really like the info you provide here and can’t wait to take
    a look when I get home. I’m surprised at how quick your blog loaded on my cell phone ..
    I’m not even using WIFI, just 3G .. Anyhow, wonderful site!

  33. Hey there I am so delighted I found your blog, I really found you by accident, while I was browsing on Aol for something
    else, Anyways I am here now and would just
    like to say thanks a lot for a tremendous post and
    a all round exciting blog (I also love the theme/design), I don’t have time to look over
    it all at the moment but I have saved it and also included your RSS feeds,
    so when I have time I will be back to read much more, Please do keep up the great work.

  41. I really like what you guys are usually up too. This type of clever work and reporting!

    Keep up the good works guys I’ve added you guys to my own blogroll.

  42. This article gives clear idea in favor of the new visitors of blogging,
    that genuinely how to do running a blog.

  43. Hey There. I found your blog using msn. This is a very well written article.
    I’ll be sure to bookmark it and come back to read
    more of your useful info. Thanks for the post. I’ll definitely return.

  44. What’s up, I log on to your new stuff daily.

    Your humoristic style is awesome, keep doing what you’re doing!

  45. Hello, Neat post. There is an issue along with your web site in internet explorer, might
    check this? IE nonetheless is the marketplace chief and a huge section of other people
    will miss your great writing due to this problem.

  46. Excellent blog! Do you have any tips for aspiring writers? I’m
    planning to start my own blog soon but I’m a little lost on everything.
    Would you advise starting with a free platform
    like WordPress or go for a paid option? There are so many choices out there that I’m completely overwhelmed ..
    Any suggestions? Bless you!

  47. Hey I know this is off topic but I was wondering if you
    knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward
    to your new updates.

  48. I’m truly enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more pleasant for me to come here
    and visit more often. Did you hire out a developer to create your theme?

    Superb work!

  52. Yesterday, while I was at work, my cousin stole my iPad and tested to see if it can survive a 30 foot drop,
    just so she can be a youtube sensation. My apple ipad is now broken and
    she has 83 views. I know this is totally off topic but I had to share it
    with someone!

  54. I have to thank you for the efforts you’ve put in writing this blog.
    I’m hoping to check out the same high-grade blog posts from you in the future as
    well. In fact, your creative writing abilities has motivated me to
    get my very own site now 😉

  62. Having read this I thought it was really enlightening.
    I appreciate you taking the time and effort to put this short
    article together. I once again find myself personally spending a lot of time both reading and commenting.
    But so what, it was still worthwhile!

  64. You really make it seem so easy with your presentation but
    I find this topic to be really something that I think I would never understand.
    It seems too complicated and extremely broad for me.
    I’m looking forward for your next post, I’ll try to
    get the hang of it!

  66. Excellent blog! Do you have any tips for aspiring writers?
    I’m planning to start my own blog soon but I’m a
    little lost on everything. Would you advise starting with a
    free platform like WordPress or go for a paid option? There are
    so many choices out there that I’m totally confused
    .. Any suggestions? Kudos!

  71. I like the helpful info you supply to your articles. I’ll
    bookmark your blog and check once more here frequently. I
    am moderately sure I will be informed lots of new stuff proper right here!
    Best of luck for the following!

  72. Hello there, just became alert to your blog through Google, and found that it’s really informative.

    I am going to watch out for brussels. I will appreciate if you continue this in future.
    Numerous people will be benefited from your writing.

    Cheers!

  76. You are so cool! I don’t suppose I’ve read through anything like that before.
    So wonderful to discover somebody with unique thoughts on this topic.
    Seriously.. thanks for starting this up. This site is one thing that is required on the web, someone with some
    originality!

  78. This design is wicked! You certainly know how to keep
    a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

Leave a Reply

Your email address will not be published.