CSS Articles
-
WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34
A new set of Firefox Developer Tools features has just been uplifted to the Aurora channel. These features are available right now in Aurora, and will be in the Firefox 34 release in November. This release brings new tools (storage inspector, WebIDE), an updated profiler, and handy enhancements to the existing tools: WebIDE WebIDE, a […]
-
Single Div Drawings with CSS
Why A Single Div? In May of 2013 I attended CSSConf and saw Lea Verou speak about the humble border-radius. It was an eye-opening talk and I realized there was much about CSS behavior I did not fully understand. This reminded me of my time as a fine arts student where I was constantly pushed […]
-
Live Editing Sass and Less in the Firefox Developer Tools
Sass and Less are expressive languages that compile into CSS. If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Luckily you can now do this in the Firefox 29 developer tools using source maps. The Firefox developer tools use […]
-
HTML5, CSS3, and the Bookmarklet that Shook the Web
On Valentine’s Day last year we released a bookmarklet that went viral riding the popularity of the Harlem Shake meme. On the anniversary of its release we’d like to take a moment look back at the technical nuts and bolts of the bookmarklet as a case study in applying HTML5. In fact, the HTML, JavaScript, […]
-
Application Layout with CSS3 Flexible Box Module
It has become very easy to create fluid application layouts thanks to the CSS3 Flexible Box Layout Module. In this article we are going to implement a simple application layout, which fills the whole screen, resizes with the browser window and comes with the additional bonus of a draggable splitter. Instead of the classic <div> […]
-
CSS Variables in Firefox Nightly
As reported by Cameron McCormack, Firefox Nightly (version 29) now supports CSS variables. You can get a quick overview in this short screencast: You can define variables in a context with a var- prefix and then implement them using the var() instruction. For example: :root { var-companyblue: #369; var-lighterblue: powderblue; } h1 { color: var(companyblue); […]
-
CSS Length Explained
When styling a web site with CSS you might have realised that an inch on a screen is not an actual inch, and a pixel is not necessarily an actual pixel. Have you ever figured out how to represent the speed of light in CSS pixels? In this post, we will explore the definition of […]
-
Capturing – Improving Performance of the Adaptive Web
Responsive design is now widely regarded as the dominant approach to building new websites. With good reason, too: a responsive design workflow is the most efficient way to build tailored visual experiences for different device screen sizes and resolutions. Responsive design, however, is only the tip of the iceberg when it comes to creating a […]
-
Firefox Development Highlights – H.264 & MP3 support on Windows, scoped stylesheets + more
Time for the first look this year into the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change). H.264 & MP3 support on Windows Firefox for Android and Firefox OS already support H.264 and […]
-
The Web We Lost, Heroku Automates Automation, Why moving elements with translate() is better – Hacks Weekly
The Web We Lost, Heroku Automates Automation, Why moving elements with translate() is better and more this week from Mozilla’s Developer Engagement team!