CSS Articles
-
And now for … Firefox 84
As December ushers in the final curtain for this rather eventful year, there is time left for one more Firefox version to be given its wings. Firefox 84 includes some interesting new features including tab order inspection, complex selector support in :not(), the PerformancePaintTiming API, and more!
-
To Eleventy and Beyond
Porting an established static website from one generator to another can be daunting. In this post, Add-ons Engineering Manager Stuart Colville recounts the experience of migrating Firefox Extension Workshop, Mozilla’s site for Firefox-specific extension development resources, from the Ruby-based site generator Jekyll to JavaScript-based Eleventy.
-
Adding prefers-contrast to Firefox
When we talk about the contrast of a page, or contrast between web elements, we’re assessing how color choices impact readability. For visitors with low vision, web pages with low or insufficient contrast can be hard to use. In this article, we’ll walk through the design and implementation of the
prefers-contrastmedia query in Firefox, and look at why it's so exciting and important. -
Learn web technology at “sofa school”
Here are some web development learning resources for kids of all ages. All you need is a web browser. This collection looks at social VR experiences using Hubs and Spoke, CSS coloring and games that teach Grid and Flexbox, and WebXR field trips that are out of this world.
-
Firefox 73 is upon us
Today we’ve released Firefox 73, with useful additions that include CSS and JavaScript updates, and numerous DevTools improvements. We’ve added to CSS logical properties, pushed performance forward in the Console and the Debugger, and improved the WebSocket inspector. Thanks to all for the ongoing DevTools feedback.
-
Firefox 72 — our first song of 2020
Though we are moving to a more frequent four-week browser release cycle, the Firefox 72 release is feature-rich and full of goodies. It includes many requested DevTools' updates and improvements. We also introduce Shadow Parts and the CSS Motion Path, and useful new JavaScript features. Plus, Picture-in-picture for video is now enabled for Mac and Linux users too!
-
Multiple-column Layout and column-span in Firefox 71
Firefox 71, now available in Developer Edition and Beta, is an exciting release for fans of CSS Layout. Recently, we covered the arrival of subgrid in Firefox, but there is another property that we've also been keeping an eye on. Firefox 71 implements column-span from Multiple-column Layout. In this post Rachel Andrew describes the progress of the Multiple-column Layout specification.
-
The two-value syntax of the CSS Display property
The display CSS property is how we change the formatting context of an element and its children. One of the first things you will learn about CSS is that some elements are block by default, and others are inline. The display property enables switching between these states. With support currently available only in Firefox 70, it is too early to start using these two-value properties in production. However, they are important to be aware of, in terms of what they mean for CSS.
-
Quickly Alter Typography with Firefox Font Editor
Have you ever landed on a web page and wondered what fonts are being used? Have you asked yourself where those fonts come from or why a particular font isn't loading? The font editor in Firefox provides answers and insights, and gives you the ability to make font changes directly, with a live preview.
-
Faster Layouts with CSS Grid (and Subgrid!)
CSS Grid has been available in most major browsers since early 2017, and it makes web layout more powerful than ever before. But complex-looking new syntax (line-names! grid-areas! minmax! fit-content! fr units!) and missing IE11 support can make it scary. Don’t let that stop you. Miriam Suzanne offers some basic approaches you can put to work today.
