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%;
}
With ::marker
we can style our list markers
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.
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!
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.
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.
84 comments
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!
There is certainly a lot to learn about this issue.
I love all of the points you’ve made.
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.
Good blog post. I certainly appreciate this website. Keep writing!
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?
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.
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.
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.
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!
Pretty! This has been a really wonderful post. Thanks for providing this info.
Hello, I want to subscribe for this blog to obtain hottest updates, so where can i do it please help.
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?
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!
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!
Appreciation to my father who told me regarding this
web site, this website is actually remarkable.
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!!
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.
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.
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!
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.
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.
Hello, I enjoy reading all of your post. I wanted to write a little
comment to support you.
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…
Awesome post.
Everyone loves it whenever people come together and share views.
Great site, continue the good work!
This post is priceless. When can I find out more?
It’s remarkable for me to have a web site, which is
valuable in favor of my know-how. thanks admin
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
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.
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.
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!
I know this web page gives quality based posts and extra stuff,
is there any other web site which offers such things
in quality?
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.
Thanks for finally talking about > New CSS Features in Firefox 68 – Pavvy Designs < Loved it!
Hey! I’m at work browsing your blog from my new apple iphone!
Just wanted to say I love reading your blog and look forward to all your posts!
Carry on the outstanding work!
Do you have any video of that? I’d like to find out some additional information.
I am regular reader, how are you everybody? This paragraph posted at
this site is truly nice.
Thanks for sharing such a fastidious idea, post is nice, thats why i have read it
completely
Take a look at my website; https://pokerpulsa388.xyz/
Great information. Lucky me I came across your site by chance (stumbleupon).
I’ve bookmarked it for later!
I am regular visitor, how are you everybody? This paragraph posted at this website is in fact
pleasant.
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.
This article gives clear idea in favor of the new visitors of blogging,
that genuinely how to do running a blog.
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.
What’s up, I log on to your new stuff daily.
Your humoristic style is awesome, keep doing what you’re doing!
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.
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!
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.
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!
Hi there, its fastidious article concerning media print, we all be familiar with
media is a fantastic source of data.
Hello there! Do you use Twitter? I’d like to follow you if that
would be okay. I’m absolutely enjoying your blog and look forward to new posts.
I was able to find good info from your content.
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!
Great article! We will be linking to this great article on our website.
Keep up the good writing.
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 😉
I used to be able to find good info from your blog articles.
Excellent blog here! Also your web site loads up fast!
What host are you using? Can I get your affiliate link to
your host? I wish my web site loaded up as quickly as yours lol
I know this web site presents quality based articles or reviews and additional data, is
there any other website which presents these kinds of stuff in quality?
This piece of writing will assist the internet visitors for creating new web site or even a blog from start
to end.
Outstanding story there. What happened after? Thanks!
It’s remarkable designed for me to have a web site, which is beneficial
in favor of my knowledge. thanks admin
Very good article! We will be linking to this particularly great post
on our site. Keep up the great writing.
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!
Remarkable! Its really awesome post, I have got much clear idea about from this post.
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!
This is my first time go to see at here and i am in fact happy to read all at single place.
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!
It’s very easy to find out any topic on web as compared to textbooks, as I found
this post at this web page.
I am really thankful to the owner of this site who has shared
this impressive paragraph at at this time.
My family all the time say that I am wasting my time here at web, but I know I am getting familiarity daily by reading such good articles.
you’re in point of fact a good webmaster. The web site loading speed is amazing.
It sort of feels that you are doing any unique
trick. Furthermore, The contents are masterwork. you have
performed a great activity on this subject!
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!
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!
Yes! Finally someone writes about situs judi slot online.
In fact no matter if someone doesn’t understand afterward its up to
other people that they will assist, so here it occurs.
Its not my first time to pay a visit this web
page, i am visiting this web site dailly and get pleasant data from here everyday.
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!
Thanks for sharing your thoughts on slot pulsa axis. Regards
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!
I pay a visit daily some websites and blogs to read articles, however this weblog provides feature based writing.
Hi! This post could not be written any better! Reading this post reminds me of my previous room mate!
He always kept chatting about this. I will forward this post to him.
Fairly certain he will have a good read. Many thanks for sharing!
I have read so many content on the topic of the blogger lovers but this paragraph is actually a pleasant post,
keep it up.
Very descriptive post, I liked that a lot. Will there be a part 2?
Thanks for finally writing about > New CSS Features in Firefox 68 – Pavvy Designs < Loved it!
Excellent post. I certainly appreciate this website.
Thanks!