All posts tagged ‘CSS’

File Under: CSS, Web Standards

Adobe’s CSS Shaders Now an Official W3C Editor’s Draft

Adobe’s CSS Shaders proposal, which will bring high-quality cinematic effects to the web through some new CSS tools, has been accepted by the World Wide Web Consortium (W3C).

That means CSS Shaders will become a web standard, though not on their own; instead the W3C is going to roll CSS Shaders into the CSS Filter Effects specification. The feature formerly known as Shaders will now be referred to as Custom Filters

The original name “Shader” has its roots in the 3-D graphics world and roughly describes what “Custom Filters” will do, namely create 3-D effects, like the rippling motion in a waving flag, by “shading” regions.

In the end the name isn’t that important; just know that Custom Filters will allow web developers to easily apply cinema-style filter effects to any HTML content. Think grayscale-to-color transitions, animated shadows, photo-realistic warping and other mainstays of the 3-D animation world.

You’ll still need a special build of WebKit that Adobe put together to see Custom Filters in action. You can grab the experimental browser from the GitHub page, where you’ll also find plenty of examples and sample code that show how shaders, er, Custom Filters work. Also be sure to check out Adobe’s earlier write-up on how Filters work and how you can use them.

Now that Shaders are an official part of CSS, hopefully web browsers will begin adding support.

[Update:The original title of this post was Adobe's CSS Shaders Now an Official Web Standard, wherein I intended "Official Web Standard" to mean "a part of the web standards process", not actually a published W3C recommendation. Judging by the comments that's how most of you took it, but of course it was definitely possible to read it as something more than it actually is, so the headline has been updated to clarify that point.]

File Under: Browsers

New Opera 12.50 Dons WebKit Disguise

Is it Opera or is it WebKit? Photo: Ariel Zambelich/Wired

 Opera software has made good on its controversial decision to support the -webkit CSS prefix. The browser maker has released a preview version of Opera 12.50 with support for a dozen -webkit prefixed CSS properties, including transforms, transitions and border-radius.

If you’re curious and want to see how Opera handles -webkit prefixes, head on over to Opera and download the latest version of Opera Next for Windows 32-bit, Windows 64-bit, Mac or Linux. (Keep in mind that 12.50 is still a very early release and contains some known bugs.)

Opera’s decision to support another browser’s CSS prefix code has caused considerable outcry among web developers and members of the CSS Working Group, which created vendor prefixes.

CSS vendor prefixes were designed to help web developers by giving them a way to target CSS to specific browsers and use proposed standards before they were finalized. The idea was to move the web forward without rushing the CSS standards process. Unfortunately, it hasn’t always worked out that way. In fact, web developers fell in love with the -webkit prefix and often forget that there are other prefixes as well: -o for Opera, -moz for Firefox and -ms for Internet Explorer.

The problem, in Opera’s view, is that instead of writing code that will work in any web browser, some of even the largest sites on the web are coding exclusively for WebKit (the rendering engine that powers web browsers on the iPhone, iPad and Android phones). Web developers have, the argument goes, created the same sort of monoculture that used to exist around Internet Explorer, with websites proudly proclaiming they “work best in WebKit.”

Opera decided that, in order to remain competitive, it needed to support -webkit in addition to its normal -o prefix.

The company previously updated its mobile emulator tool to support -webkit, but Opera 12.50 is the first actual browser release to do so.

Naturally the -webkit prefix support isn’t the only thing new in Opera 12.50. This release also manages to pack in an implementation of the Clipboard API, and Mac Opera users will find that Opera 12.50 uses Mac OS X 10.8’s coming Notification Center.

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.)