Tag: CSS3

Categories
Web development

Big “When Can I Use” update!

UPDATE: The Android 2.2 browser has now also been included.

I’m happy to announce a number of new changes to caniuse.com, providing all sorts of new information for your feature support needs:

Mobile browser information

Preview of mobile browser columnsThe most popular WCIU request has been to add tables for support for mobile web browsers. This is now available together with the desktop browsers, including for now: iOS (iPhone/iPad/iPod touch) browsers, Opera Mini, Opera Mobile and the Android browser. These are known to be the most popular mobile browsers, so I thought I’d start with them. You can view each type as a set by using the URL caniuse.com/#agents=desktop or caniuse.com/#agents=mobile. In the future more mobile browsers are likely to be added, with the grade A browsers on this chart having priority.

Browser usage statistics

Preview of global usage statisticsIf you’d like to know just what percentage of users can use a given feature, you can now get a rough idea from the “Global user stats” displayed in the upper-right hand corner of a feature. Of course your audience may be very different, so this should just be used as a guide. Mobile browser statistics are not currently included, but hopefully I can find some way to include them in the future.

Single feature pages

Each feature has its own non-hash URL now, (i.e. caniuse.com/webworkers) which is useful when sharing a feature table with others or looking up a feature quickly. These pages are designed to load quickly, with a link back to their interactive versions.

Search from address field

This previously existing feature has now been improved: Type in your query directly after http://caniuse.com/ and you will be directed either to the related feature page or (if multiple results are found) to the search results page. For example, caniuse.com/corner will redirect you to the caniuse.com/border-radius page.

Feature index

Preview of feature indexA full overview of all features mentioned on WCIU listed by category is now available by clicking on the big “Index” tab. The same overview is available on each single feature page too.

Feedback buttons

Each feature now includes a “Feedback” button, which you can use to quickly send me a correction/link suggestion, etc.

More browser features

Five new features have been added:

Also, thanks to the site’s restructuring, I plan on adding many more features in the future.

Bug fixes and minor improvements

I have fixed a number of bugs related to the working of the option checkboxes and URL hash, so things should work more as you’d expect them to. A number of links/notes/descriptions have also been updated. I’ve also added a “Three versions back” era (hidden by default) in case you need to go back even further in time.

So that’s it! The remaining request I’ve had is for a public API, which is something I’m still looking into but should be in my next big update.

Enjoy the new features, and let me know if you run into any bugs or mistakes.

Categories
Web development

Browser Comparison on When Can I Use

Snippet of browser version options

I have added a new mode of displaying feature support information on “When Can I Use” resulting in the ability to select two browsers and only see what the differences are in feature support.

This allows you to pit two different browsers against each other to see which one outdoes which in what areas, but it is also useful to get a quick overview on which new features can be used in an upcoming release. For example, selecting Chrome 1 and 2 will let you see which new features are now available in Chrome 2.

This new mode will also tell you how much better one browser version is than another, note this is highly unscientific and doesn’t take into account support of features not mentioned on When Can I Use. Still, it’s kind of entertaining. Also, the mode generates URLs from your selection, so feel free to share your results with others.

Currently it only shows differences in support, I plan on also providing the option of displaying support common in both versions, as well as missing support. There may be a few other rough edges that need fixing, please let me know if you see anything that looks odd.

Categories
Web development

Ready for use: CSS3 Template Layout

Example of template layout system

I’m happy to announce the latest project I’ve been working on:

A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”.

The spec is still a “working draft”, so it can still change significantly. But while that status hasn’t stopped browsers from implementing other CSS3 modules, so far none have tried implementing this one.

Inspired by Eric Meyer‘s Call for a layout system as well as his suggestion that many CSS features can be made to work using JavaScript, I went to work. Why wait for browsers to implement something when we can have JavaScript take care of it today?

The advantages to using this system include:

  • Source independence, so there’s lots of possibilities with the same markup
  • All the benefits of a table-like design without the drawbacks
  • Instant overview of how the basic layout works just by looking at the CSS
  • No need for div-heavy CSS frameworks just to accomplish a simple design
  • Easy rearranging for different media (print, mobile)

The disadvantage to using JS rather than native support means of course that those with JavaScript disabled won’t see the intended layout. However, considering the HTML content can me put in almost any order, there is still a lot of flexibility in how it will appear to non-JS users.

The script has been tested and confirmed to work in the following browsers:

  • Internet Explorer 7+
  • Firefox 2+
  • Opera 9.6+
  • Safari 3.1+
  • Chrome 1+

For download, demos, and usage, see the Project page. Contributions welcome!

Categories
Web development

border-radius for all!

Screenshot of rounded corner generator

One of CSS3’s most popular features is border-radius. The ease of just being able to specify your rounded corners in CSS is very appealing compared to using JavaScript or a bunch of bloated HTML to accomplish a simple effect. So here I will describe a CSS-only method we can use today that works in all four major browsers. Sadly, this does not include Internet Explorer, so I will include an alternative solution for it too.

Continue reading “border-radius for all!”