CSS Articles
-
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.
-
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. […]
-
A call for quality HTML5 demo markup
HTML5 is a necessary evolution to make the web better. Before the HTML5 specs were created we used (and still use) a hacked together bunch of systems meant for describing and linking documents to create applications. We use generic elements to simulate rich interaction modules used in desktop development and we make assumptions as to […]
-
slick tables with css 3 selectors
This article and demo come to us courtesy of Ivan Enderlin, author of the HOA Framework and longtime web developer. This is the article that accompanies the demo below, showing the use of CSS3 selectors implemented in Firefox 3.5 for easy and stylish tables. See this demo step by step. Basic HTML Table First, we […]
-
taming long words with word-wrap
This post is from Les Orchard, who works on Mozilla’s web development team. Web browsers have a long history of sharing features between them. The word-wrap CSS property is a feature that originally came from Microsoft and is included in CSS3. Now available in Firefox 3.5, this CSS property allows the browser to arbitrarily break […]
-
add some ambiance to your videos
Note: this post was originally posted to the silverorange labs blog and was written by Mike Gauthier. Mike and other people at silverorange put this demo together for the 35 days project and we thank them. Also note that the demo below is extremely CPU-intensive. If you’re interested in the effect and you don’t have […]
-
A simple image gallery using only CSS and the :target selector
Back in the old days of web development and when CSS2 got support I always cringed at “CSS only” demos as a lot of them were hacky to say the least. With CSS growing up and having real interaction features it seems to me though that it is time to reconsider as – when you […]
-
Advanced animations in Aurora with CSS3 Animations
Firefox 4 came with CSS3 Transitions (ability to animate CSS properties from an initial value to a final one). In Firefox Aurora, we are experimenting with CSS3 Animations: a more powerful way to animate your content with CSS. Defining the animation The first thing is to define the intermediary CSS values of the properties to […]
-
Spirit of Indiana (Jones) – syncing HTML5 Video with Maps
I’ve always been a big fan of the travel/flight sequences in the Indiana Jones movies and judging by the amount of copy attempts on YouTube I am not alone in this. As I don’t own any video editing software I thought it should be possible to create the same effect with web technologies and Google […]