All posts tagged ‘CSS’

File Under: Browsers
Jul
9
2012

New Opera 12.50 Dons WebKit Disguise

By

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.

Tags: , ,
File Under: CSS, Humor, JavaScript
Jul
6
2012

Blow Up the Web With ‘Font Bomb’

By

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.

Tags: , ,
File Under: CSS, Software & Tools
Jun
21
2012

Clean Up Your CSS With ‘Dust Me Selectors’

By

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.

Tags:
File Under: CSS, Web Standards
Jun
20
2012

The iPhone in Pure CSS

By

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

Tags:
File Under: CSS, Web Standards
Jun
20
2012

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

By

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.

Tags: , ,
« OLDER POSTS