CSS Articles
-
Building RTL-Aware Web Apps & Websites: Part 1
Making the web more accessible to more people, in more languages, is an ongoing effort and a mission we take very seriously at Mozilla. This post is the first of a series of articles to explain one of the most neglected and least well-known corners of web development: RTL (right-to-left) development. In a web development […]
-
The future of layout with CSS: Grid Layouts
In this article we’ll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the day in some browsers. But before we dive into what this new CSS technique is all about and how to use it, let’s quickly review grid theory. […]
-
Scroll snapping explained
Have you ever tried to snap your page’s contents after scrolling? There are many JavaScript libraries out there providing this functionality. Here are a few examples: https://github.com/peachananr/purejs-onepage-scroll http://wtm.github.io/jquery.snapscroll/ http://guidobouman.github.io/jquery-panelsnap/ http://alvarotrigo.com/fullPage/ As this is a common use case related to page layout and behavior, the W3C has published a pure CSS approach to scroll snapping. CSS […]
-
Making and Breaking the Web With CSS Gradients
What is CSS prefixing and why do I care? Straight from the source: “Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don’t break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.” As […]
-
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 […]
-
Understanding the CSS box model for inline elements
In a web page, every element is rendered as a rectangular box. The box model describes how the element’s content, padding, border, and margin determine the space occupied by the element and its relation to other elements in the page. Depending on the element’s display property, its box may be one of two types: a […]
-
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, […]
-
Introducing @counter-style
Introduction The characters that indicate items in a list are called counters — they can be bullets or numbers. They are defined using the list-style-type CSS property. CSS1 introduced a list of predefined styles to be used as counter markers. The initial list was then slightly extended with addition of more predefined counter styles in CSS2.1. Even with […]
-
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 […]
-
Pseudo elements, promise inspection, raw headers, and much more – Firefox Developer Edition 36
Firefox 36 was just uplifted to the Developer Edition channel, so let’s take a look at the most important Developer Tools changes in this release. We will also cover some changes from Firefox 35 since it was released shortly before the initial Developer Edition announcement. There is a lot to talk about, so let’s get […]