CSS Tutorials
Looking Into the Future of Sass
Sass is a CSS preprocessor. This is now common knowledge. First commit in 2007 by Hampton Catlin. Now the most used CSS preprocessor. Sass has come a long way since its beginning. In case you are not very familiar with this stuff, I highly recommend you
9 Mind-Blowing Canvas Demos
The
<canvas>
element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...Create a 3D Animating Sidebar
Mozilla's Christian Heilmann is an evangelist that knows how to walk the walk as well as talk the talk. You'll often see him creating sweet demos on his blog or the awesome Mozilla Hacks blog. One of my favorite pieces...
Serving Fonts from CDN
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
Using CSS attr and content for Tooltips
I've found myself in love with CSS
content
andattr
; I've recently written about how you can use the property and expression on a basic level, how you can implement CSS counters, and use for the sake of localization. I wanted to share...How to Design Responsively
Introduction In this article I want to share my thoughts regarding responsive design. I made several talks on this subject and this post is some kind of summary. The article presents concepts like mobile first and design in the browser. What is responsive web design Scott Kellum...
Prism Line Number Plugin
The Mozilla Developer Network (MDN) is in the midst of a remodel (sorry for the spoiler) and we've been implementing features incrementally. One larger front-end change we'll be implementing is using the PrismJS for document code syntax highlighting. One requirement of MDN's syntax highlighter...
CSS attr, content, and L10N
I have the privilege of working for Mozilla on the Mozilla Developer Network (MDN). As with any Mozilla-made website, localization is paramount to MDN, so we must be mindful of that when we put text anywhere on the site. I was recently working on a feature which made...
CSS content and attr
CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily. There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content. You saw a...
Firefox Button Height Fix
One problem I've seen on occasion is that button heights in Firefox are a few pixels larger than in other browsers. This can be a nightmare when trying to unify the size of buttons with an
A
elements, as we found out when implementing a new...