CSS Articles
-
Firefox 52: Introducing WebAssembly, CSS Grid and the Grid Inspector
We cover some of the most innovative features to land in Firefox 52, including WebAssembly, CSS Grid, the CSS Grid Inspector Tool, an improved Responsive Design Mode, and Async and Await support for JavaScript.
-
CSS Grid and Grid Highlighter Now in Firefox Developer Edition
CSS Grid has just been uplifted to Firefox 52 Developer Edition. With Chrome (and hopefully Safari and Edge) implementations coming shortly, using grid to build websites will soon be possible in release browsers across the board. Grid allows users to decouple HTML from layout concerns, expressing those concerns exclusively in CSS. Reducing the risks of fragility, code bloat, and high maintenance costs inherent in how we currently build on the web, grid really does have the potential to change the way we do layouts.
-
Visualize animations easing in DevTools
The easing (or timing function) of an animation is what dictates the way it progresses through time. For example, a linear easing means that an animation runs at the same speed throughout its duration. This means that if an element isn’t moving at first and then starts to move, it will do so instantly, as […]
-
Firefox 49 fixes sites designed with WebKit in mind, and more
Several recent articles on the Hacks blog explain why web developers should care about cross-browser compatibility and how great web developers achieve it. Web developers have a critical role in making the web work for everyone. And so do browser makers. As of today we’re introducing a number of compatibility features to the Gecko rendering […]
-
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 […]
-
Web Font preloading for HTML5 games
In game development there are two methods of rendering text: via bitmap fonts and vector fonts. Bitmap fonts are essentially a sprite sheet image that contains all the characters of a given font. The sprite sheet uses a regular font file (traditionally .ttf). How does this apply to game development on the Web and HTML5 […]
-
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 […]
-
CSS coding techniques
Lately, we have seen a lot of people struggling with CSS, from beginners to seasoned developers. Some of them don’t like the way it works, and wonder if replacing CSS with a different language would be better—CSS processors emerged from this thinking. Some use CSS frameworks in the hopes that they will have to write […]
-
You might not need a CSS framework
CSS frameworks have been around for a while and they have gotten extremely popular in the front-end development scene. These frameworks provide snippets of code you can just copy and paste in your website to craft the whole layout and UI. You have already probably read a lot of articles about how they might be […]
-
Building RTL-Aware Web Apps & Websites: Part 2
Pushing the Web forward means making it better for developers and users alike. It means tackling issues that our present Web faces; this is especially true for making responsive RTL (right-to-left) design and development easier to achieve.