CSS Articles
-
the tristan washing machine
This is another demo from Paul Rouget. It’s a very simple demonstration of what you can do when you combine video, SVG and some fun transformations. View the Demo in Firefox 3.5 This puts a HTML5-based <video> element into an SVG document like so: Lots of code and many attributes removed for clarity. Please view […]
-
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.
-
HTML5 context menus in Firefox (Screencast and Code)
You may not know it, but the HTML5 specifications go beyond what we put in the pages and also define how parts of the browser should become available to developers with HTML, CSS and JavaScript. One of these parts of the specs are context menus, or “right click menus”. Using HTML5 and a menu element […]
-
css backgrounds in Firefox 3.6
Firefox 3.6 allows you to do more with CSS backgrounds: you can use gradients, set a background size, and specify multiple backgrounds. Custom Background Size In Firefox 3.6, you can specify the size of a background image to scale it as a percentage of the element’s size, or to a specific length, using -moz-background-size. -moz-background-size: […]
-
CSS Grid for UI Layouts
In this article I’ll show you how to use CSS Grid to improve application layouts that need to respond and adapt to user interactions and changing conditions, and always have your panels scroll properly.
-
Single Div Drawings with CSS
Why A Single Div? In May of 2013 I attended CSSConf and saw Lea Verou speak about the humble border-radius. It was an eye-opening talk and I realized there was much about CSS behavior I did not fully understand. This reminded me of my time as a fine arts student where I was constantly pushed […]
-
bringing multi-touch to Firefox and the web
The ever-energetic Felipe Gomes was nice enough to intern with Mozilla this summer in between busy semesters in Brazil. During that time he’s been working on multi-touch support for Firefox on Windows 7. A nice result of that work is that he’s also found ways to bring multi-touch support to the web. He’s made a […]
-
Using Feature Queries in CSS
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS. Behold, the @supports rule. Also known as Feature Queries. With @supports, you can write a small test in your CSS to see […]
-
Exploring object-fit
On web documents, a common problem concerns the display of different sized images (or videos) in the same place. Perhaps you are writing a dynamic gallery app that accepts user submissions. You can’t guarantee that everyone will upload images of exactly the same aspect ratio, so what do you do? Letting the aspect ratio distort […]
-
Using window.matchMedia to do media queries in JavaScript
For people building web sites, Responsive Web Design has become a natural approach to making sure the content is available for as many users as possible. This is usually attended to via CSS media queries. However, there is a JavaScript alternative as well. Introducing window.matchMedia The way to approach media queries in JavaScript is through […]