CSS Articles
-
Mozilla developer preview (Gecko 1.9.3a1) available for download
Editor’s note: Today, Mozilla released a preview of the Gecko 1.9.3 platform for developers and testers. Check out the Mozilla Developer News announcement reposted below. A Mozilla Developer Preview of improvements in the Gecko layout engine is now available for download. This is a pre-release version of the Gecko 1.9.3 platform, which forms the core […]
-
css transforms: styling the web in two dimensions
One feature that Firefox 3.5 adds to its CSS implementation is transform functions. These let you manipulate elements in two dimensional space by rotating, skewing, scaling, and translating them to alter their appearance. I’ve put together a demo that shows how some of these functions work. There are four animating objects in this demo. Let’s […]
-
new CSS3 properties in Firefox 3.5 – nth-*
Firefox 3.5 supports several new CSS3 selectors. In this post we’ll talk about four of them: :nth-child, :nth-last-child, :nth-of-type and :nth-last-of-type. Each of these is called a Pseudo-class and can be used to apply styles to existing selectors. The best way to describe how this works is with some examples. :nth-child This pseudo-class lets you […]
-
Web Design Survey Findings and Next Steps
In November, I wrote about my team’s work on experimental new web design tools and introduced a survey to rank the challenges of web design and development. The insights you shared continue to inform priorities for the Firefox DevTools' 2019 roadmap. Our main takeaway: developers and designers of every experience level want a better understanding of CSS debugging. We're on it.
-
Replace Bootstrap Layouts with CSS Grid
In March, Mozilla released Firefox 52, which added support for CSS Grid Layout. If you aren’t familiar with CSS Grid, it is a two-dimensional layout system for the web that allows us to create layout patterns natively in the browser. This means we can easily recreate familiar grids using just a few lines of CSS. […]
-
Learning to code for the Web: The MDN Learning Area welcomes you!
As an aspiring developer or as a teacher looking to extend your knowledge of code, it can be difficult to know where to start with web technologies. In this blog post, we’ll be discussing why we have created the Mozilla Developer Network Learning Area to help solve common learning challenges and get you up and […]
-
(r)evolution number 5
We’ve just launched Firefox 3.5, and we’re incredibly proud. Naturally, we have engaged in plentiful Mozilla advocacy — this site is, amongst other things, a vehicle for showcasing the latest browser’s new capabilities. We like to think about this release as an upgrade for the whole World Wide Web, because of the new developer-facing features […]
-
using svg filters to display 3D data
This demo is from Hans Schmucker, who has made a large number of interesting demos using Firefox 3.5 features. Tomorrow we’ll also have another neat demo from him as well. Hans has used the CSS filter property and an SVG filter to do something really interesting – rendering a 3D perspective from Voxel data. Hans’ […]
-
Why is CSS So Weird?
CSS is the design language of the web — one of three core web languages — but it also seems to be the most contentious and often perplexing. It's too easy and too hard, too fragile and too resilient. Love it or hate it, CSS is weird: not quite markup, not quite programming in the common (imperative) sense, and nothing like the design programs we use for print. How did we get here?
-
Firefox 65: WebP support, Flexbox Inspector, new tooling & platform updates
Firefox 65 ships today with some notable Firefox Devtools updates, including the release of the CSS Flexbox Inspector, a new changes panel, and more. We're shipping CSS platform improvements and updates to a variety of JavaScript APIs. Firefox 65 supports the WebP image format, and support for AV1, an open and royalty-free video compression format, is shipping now in Firefox 65 for Windows.