CSS Articles
-
new CSS3 properties in Firefox 3.5 – *-of-type
In today’s feature post we’ll talk briefly about three new CSS3 pseudo-classes: only-of-type, first-of-type and last-of-type. These are all very similar to the *-nth classes we covered in an earlier post. first-of-type and last-of-type These two pseudo-classes allow you to select the first and last item in a list of siblings within a particular element. […]
-
Firefox 69 — a tale of Resize Observer, microtasks, CSS, and DevTools
For our latest excellent adventure, we’ve gone and cooked up a new Firefox release. Version 69 features a number of great new additions including JavaScript public instance fields, the Resize Observer and Microtask APIs, CSS logical overflow properties (e.g. overflow-block) and @supports for selectors.
-
Ruby support in Firefox Developer Edition 38
It was a long-time request from East Asian users, especially Japanese users, to have ruby support in the browser. Formerly, because of the lack of native ruby support in Firefox, users had to install add-ons like HTML Ruby to make ruby work. However, in Firefox Developer Edition 38, CSS Ruby has been enabled by default, […]
-
Application Layout with CSS3 Flexible Box Module
It has become very easy to create fluid application layouts thanks to the CSS3 Flexible Box Layout Module. In this article we are going to implement a simple application layout, which fills the whole screen, resizes with the browser window and comes with the additional bonus of a draggable splitter. Instead of the classic <div> […]
-
Mozilla Hacks Weekly, May 24th 2012
It’s Thursday and time for us in Mozilla’s Developer Engagement Team to share some great links!
-
Rofox, a CSS3 Animations demo
Firefox 5 was released last week. This release comes with CSS3 Animations. Here is a demo made by Anthony Calzadilla. To illustrate what you can achieve with CSS3 Animations, we have been working on demo with Anthony Calzadilla (@acalzadilla), famous for his awesome Animation projects. Check out the demo on the Mozilla Demo Studio. And […]
-
Zooming and rotating for video in HTML5 and CSS3
The source of the code examples in this post is available on GitHub and you can see the demo in action. There are dozens of video players that allow you to do all the normal things with videos: play, pause, jump to a certain time and so on. More advanced ones also allow you to […]
-
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-contrast
media query in Firefox, and look at why it's so exciting and important. -
Scroll Anchoring in Firefox 66
Firefox 66 was released last week with a new feature called scroll anchoring, based on a new CSS specification. Scroll anchoring works to anchor the user to the content they’re looking at. As this content is moved by ads, screen rotations, screen resizes, or other causes, the page now scrolls to keep you at the same relative position to it. Learn how our intervention works.
-
Drag Elements, Console History, and more – Firefox Developer Edition 39
Quite a few big new features, improvements, and bug fixes made their way into Firefox Developer Edition 39. Update your Firefox Developer Edition, or Nightly builds to try them out! Inspector The Inspector now allows you to move elements around via drag and drop. Click and hold on an element and then drag it to […]