Archive for the ‘CSS’ Category

File Under: CSS, Humor, JavaScript

Blow Up the Web With ‘Font Bomb’

Wired.com Font Bombed. Image: Screenshot/Webmonkey.

We’ve already showed you how to turn any webpage into a game of Asteroids; now you can add Font Bomb to the list of ways to destroy text of the web.

Font Bomb is a fun little JavaScript bookmarklet you can use to plant bombs all around a webpage. Just drag the bookmarklet to your bookmarks bar and then head to a page you want to destroy. Click the bookmarklet and then start clicking anywhere on the page to plant bombs.

Then, thanks to a little magic from CSS 2D Transforms, the text starts flying — perfect for a little Friday afternoon amusement. (It’s also not a half-bad way to take out some frustration on trolls: Don’t feed them, just blow up what they wrote and move on.)

Font Bomb was created by Philippe-Antoine Lehoux. The code is available on GitHub (CoffeeScript) and there’s some discussion on Hacker News if you’d like to know more.

File Under: CSS, Software & Tools

Clean Up Your CSS With ‘Dust Me Selectors’

If you stop building they will come. Or something like that. Image: Winchester Mystery House, Wikimedia

In a perfect world, lost somewhere in a parallel universe, websites are designed, built and then run smoothly forever and nothing ever changes.

In this world sites are built, iterated, added onto, redesigned, extended, partially rebuilt and tweaked until they resemble the Winchester mansion. Instead of doors that open into space or stairs that go nowhere, websites are littered with commented-out HTML, inline styles and unused CSS rules.

We all try to write better CSS, but at some point it seems to end up a tangled mess that needs refactoring.

Refactoring stylesheets can be difficult, especially when it comes to pruning the old, unused styles — how do you know which rules your sprawling labyrinth of HTML is actually using?

That’s where the Firefox/Opera add-on Dust Me Selectors can help. Dust Me Selectors grabs your stylesheets, looks at all your selectors and then starts parsing HTML to find out which ones you’re actually using. Dust Me Selectors makes the process of refactoring a stylesheet much easier and definitely deserves a spot in the savvy developer’s toolkit.

You can grab Dust Me Selectors from the developer’s website or from the Mozilla Add-ons site. Opera fans can install Dust Me Selectors from the Opera extension gallery.

Dust Me Selectors can crawl individual pages or you can take the more useful approach — point it to a sitemap and sit back and wait while it looks at your entire website.

Armed with the output from Dust Me Selectors (which can be exported as a CSV file), you can start pruning out those unused selectors, paring down your stylesheets and making them smaller as well as easier to read and maintain. Naturally you’ll want to do some testing before you permanently delete anything, and hopefully you’ve got everything in version control just in case you need to roll back your changes.

File Under: CSS, Web Standards

The iPhone in Pure CSS

That's not an iPhone, just some fancy CSS. Image: Screenshot/Webmonkey

If the new Twitter bird logo can be rendered in pure CSS, why not trying making an iPhone out of nothing more than web standards like HTML and CSS?

The image above is a screenshot of an iPhone rendered in pure CSS. It’s true there probably isn’t much use for an iPhone rendered in pure CSS, but it’s an impressive feat and testament to the power of CSS today.

The very well done iPhone in CSS demo is the work of developer Dylan Hudson, who’s head of user experience over at AppStack (@dyln_hdsn on Twitter). If you’d like to have a look at the code behind it, head on over to Codepen.io, a new site for sharing code snippets.

While you’re there have a look around Codepen.io; it just launched as a public beta and looks like a really nice way to share code — something of a cross between JSFiddle and Dribbble. It has a nice code editor, the ability to fork and share code as well as social aspects like following people, marking items as favorites and leaving comments.

Codepen.io is the brainchild of developers Alex Vazquez, Tim Sabat and CSS guru Chris Coyer. Check out Coyer’s site for some more background info. (Among other things, Coyer says Codepen’s nice editor interface may be open sourced as a stand alone app at some point.)

File Under: CSS, Web Standards

It’s Official, CSS Media Queries Are a Web Standard

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

The W3C, the group charged with overseeing the creation of web standards like HTML and CSS, has given its official blessing to one of the cornerstones of responsive web design — CSS Media Queries.

Media queries allow web developers to change the layout of a page based on the media that’s displaying it — whether that means adapting it to fit a smaller screen or just stripping it down to the essentials before it heads to a printer.

Chances are you’ve been using at least the print media query on websites for ages, but now media queries have gone legit, becoming an official W3C recommendation (and yes, that is as strongly-worded as the W3C ever gets).

That may not mean much for developers who long ago embraced media queries to serve print stylesheets, but making media queries a recommendation means web browsers need to support it. The backing of the W3C is also often a requirement before large corporate or government organizations will even consider “new” ideas like responsive web design.

Media queries are the cornerstone of responsive design, which, at its simplest, just means building websites that work on any device. That way, when a dozen new tablets suddenly appear on the scene — Microsoft Surface anyone? — you can relax knowing your site will look and perform as intended, no matter which devices your audience is using.

Indeed while Microsoft’s new tablet isn’t yet storming the web, if you’ve been using media queries and following the best practices of future-friendly design then you don’t need to worry when the Surface finally does start showing up in your server logs.

File Under: CSS

CSS Variables: WebKit Brings the CSS Jackalope to Life

The mythical Jackalope surrounded by CSS bunnies. Image: Wikimedia

The mythical beast known as the CSS Variable is about to be released into the wild.

The WebKit team, which builds the browsing engine that powers both the Safari and Chrome web browsers, recently landed preliminary support for CSS Variables, which means variables will likely turn up soon in Chrome/Chromium and Safari nightly builds.

Variables used to be one of the most requested features for CSS, particularly from programmers accustomed to languages with variables. But, between then and now, CSS preprocessors like SASS and LESS have largely filled the role by offering variables (and more). Still SASS and LESS are not CSS, and do require compiling, so there may still be a place for variables in CSS.

There’s nowhere to actually test out CSS variables yet, but you can read up on the proposed variable syntax at the W3C. The spec is currently a working draft and may change considerably before it is finalized, but the proposed syntax looks like this:

:root {
    var-header-color: #06c;
}
h1 { background-color: var(header-color); }

The first rule is the new variable syntax and defines a property named “var-header-color” on the root element. Then you can use that variable throughout your stylesheets with the var(header-color) syntax. Also note that you can use variables within variables like this:

:root {
    var-my-color: #06c;
    var-background: linear-gradient(left, var(my-color), white);
}

There are some more examples of how to use variables on the W3C page, as well as in WebKit’s test suite.

The bad news is that variables aren’t backwards-compatible at all. Older browsers will simply ignore them (right now all browsers will ignore them) and if you’re defining key elements like background colors with variables the results in older browsers won’t be pretty. Eventually old browsers will fade away and CSS variables will probably become commonplace, but for the next few years at least we suggest looking to a preprocessor if you simply must have your variables.