Vendor-prefixed CSS Property Overview

Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines. The latest update on this page occurred on 2011-11-14


http://peter.sh/experiments/vendor-prefixed-css-property-overview/

Mozilla Firefox 4.0 Final

It seems that Mozilla has been busy seeding its FTP servers because Firefox 4 FINAL is now available for download.

• Windows download (US version)
• Mac OS X download (US version)
• Linux download (US version)

CodeMirror

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a parser has been written for the language you are editing (see below for a list of supported languages), the code will be coloured, and the editor will help you with indentation.

Try the parser test pages:

• JavaScript
• XML/HTML
• CSS
• HTML mixed-mode
• SPARQL
• HTML+PHP mixed-mode (courtesy of Yahoo!)
• Python (by Timothy Farrell)
• Lua (by Franciszek Wawrzak)
• Ruby (by Michal Hantl, unfinished)
• SQL (by John Benediktsson)
• PLSQL (by Peter Raganitsch)
• diff (courtesy of Liran Nuna)
• Groovy (by eXo Platform)
• C# (by Boris Gaber and Christopher Buchino)
• Scheme (by Danny Yoo)
• Java (by Patrick Wied)
• XQuery (by Mike Brevoort)
• OmetaJS (by Eric KEDJI)
• Freemarker (by Magnus Ljung)

Some real-world uses:

• Google Earth KML sampler
• Eloquent JavaScript's console
• The qooxdoo playground
• A cool tutorial about the <canvas> element
• An online IDE for the Orc programming language
• Google's API playground
• Raphaël Live
• JS Bin
• The RokPad plugin for Joomla
• The scraperwiki editor
• jsLinb UI Builder
• ZK CodeMirror component (demo)

Supported browsers

The following browsers are able to run CodeMirror:

• Firefox 1.5 or higher
• Internet Explorer 6 or higher
• Safari 3 or higher
• Opera 9.52 or higher
• Chrome

http://codemirror.net/

CSS Data URIs – Use Them In All Browsers Now!

Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests.
HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules.
Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let’s walk through how to use them in all major browsers.

• When To Use Data URIs
• How To Use Data URIs
• Supporting Data URIs in IE
• Using Data URIs For Fonts

When To Use Data URIs

When used instead of an image sprite, data URIs save a single HTTP request, and every little bit counts. However they are even more useful for images that are difficult to include in sprite sheets, for instance custom list bullets that need a varying amount of whitespace.
Although data URIs are an excellent way to reduce HTTP requests, it doesn’t make sense to use them in every situation. Since they embed the raw file data directly in the stylesheet, data URIs can lead to stylesheet bloat if they are used heavy-handedly.
Data URIs are great for any imagery that is repeated on all the pages of your site. However, for page-specific images it is usually better to reference an external image in the stylesheet. Since the file data is embedded directly in the stylesheet, data URIs will be downloaded by all your site’s visitors, regardless of whether they hit the page with that particular image. That said, you can feel free to embed page-specific data URIs on the individual page, just take care not to include them in a site-wide stylesheet.

How To Use Data URIs

Fortunately embedding data URIs is relatively simple. First you’ll need to generate a text string of the raw image data. For this I like to use the Base64 Online Generator.
Once you have the image data, simply place it directly in your stylesheet as an inline background image:

blah {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANS ...
UhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");
}

Here we’ve used image/png to specify the content type, but make sure to change this to image/jpg or image/gif depending on the MIME type of the image you’re embedding. Additionally make sure to keep the data URI all on one line without line-breaks.

Supporting Data URIs in IE

Firefox, Chrome, Safari and Opera all support data URIs. However, as you may have guessed data URIs are not fully supported in IE, so special accommodations need to be made for everyone’s favorite browser.

Data URIs in IE8

IE8 mostly supports data URIs with a few minor caveats. The main problem is that IE8 data URIs cannot exceed 32kb, however this is not a huge issue, since embedded images rarely exceed this limit.
Additionally, data URIs can only be used for a handful of HTML elements in IE8: <object>, <img>, <input type="image"> & <link>. But this only concerns markup, and when it comes to CSS, IE8 allows data URIs on any element. Finally, IE8 data URIs can only be used in CSS declarations that accept a url() parameter, however since data URIs are rarely used differently, this is basically a non-issue.

Data URIs in IE6 and IE7

While IE6 and IE7 don’t technically support data URIs, we can achieve something similar using MHTML and a technique pioneered by Stoyan Stefanov.
First include the images as MIME data within a stylesheet:

/*
Content-Type: multipart/related; boundary="MYSEPARATOR"

--MYSEPARATOR
Content-Location: image1
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg==
--MYSEPARATOR
Content-Location: image2
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg==
--MYSEPARATOR--
*/

Be careful with the separators here, or you will have issues with Vista / Windows 7. The boundary declaration can be used to define any separator string you want, however be sure to start each new data block with --MYSEPARATOR and end the MIME data with --MYSEPARATOR--.
Next, reference the MHTML images in your stylesheet:

/*
The MIME data from above goes here
*/

.image1 {
  background-image: url("data:image/png;base64,[raw data here]");
  *background-image: url(mhtml:http://mysite.com/styles.css!image1);
}

.image2 {
  background-image: url("data:image/png;base64,[raw data here]");
  *background-image: url(mhtml:http://mysite.com/styles.css!image2);
}

Here we’re first including the standard data URI for most browsers, then using the star hack to define the MHTML image data for IE6 and 7. Note the url in the mhtml declaration; it uses the stylesheet’s url followed by the Content-Location defined in the MIME data section.
However this technique has one clear drawback, which is that we are now including the image data twice on one page. Considering the large size of raw image data, it doesn’t make sense to include it twice unless you’re embedding very small images.
Fortunately this issue can be avoided in a number of ways. One approach might be to use server side browser sniffing to only enable the MIME data for the affected browsers.
Alternately, you can use browser conditionals to include a separate stylesheet for IE7 and lower. This has several advantages, including being able to attach other browser-specific styling without relying on CSS selector hacks.
However, don’t include an IE7 stylesheet on top of your main stylesheet, or you’ll defeat the purpose of reducing HTTP requests. Instead include separate stylesheets for both:

<!--[if !(IE)|(gt IE 7)]><!-->
<link rel="stylesheet" type="text/css" href="main-styles.css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-styles.css" />
<![endif]-->

Here we’ve included the stylesheet main-styles.css for IE8 and non-IE browsers, as well as ie7-styles.css for IE7 and below. Although somewhat more difficult to maintain, this approach ensures the lowest number of HTTP requests (and these stylesheets can be built dynamically as part of a build process).

Using Data URIs For Fonts

Data URIs aren’t only useful for images, they’re also a great way to reduce HTTP requests for fonts embedded with @font-face.
Embedding fonts with data URIs is the same as embedding images, except with a different MIME type:

@font-face {
    font-family: "My Font";
    src: url("data:font/opentype;base64,[base-encoded font here]");
}

To generate the raw font data, you can use the base64 generator we discussed earlier, or better yet use Font Squirrel’s @font-face generator.
Simply use the “expert” mode and enable the “Base64 encode” option:

Unfortunately there are a few notable drawbacks to using @font-face data URIs. First, Font Squirrel states that SVG and EOT file types do no support data URIs. However as Aaron Peters proves, EOT can be supported (although SVG is still not an option).
Additionally, unlike images which use the same data URI across all browsers, @font-face uses several different browser-specific implementations. Considering the relatively large size of font files, it would be a mistake to embed all these font files in a single stylesheet. So similar to the MHTML example above, use server side browser sniffing, or a similar method to serve the data to only the appropriate browsers.
Thanks to Stoyan Stefanov for all his wonderful posts on Data URIs.

http://jonraasch.com/blog/css-data-uris-in-all-browsers

20 Things I Learned about Browsers and the Web

Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. Called “20 Things I Learned about Browsers and the Web“, this online guidebook is built in HTML5, JavaScript and CSS3.
The app utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines. The HTML5 canvas element is used to enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas.

http://www.20thingsilearned.com
http://www.webappers.com/2010/11/24/20-things-i-learned-about-browsers-and-the-web

MarkUp

Draw on any webpage. Share your ideas
Capture your thoughts quickly and easily by drawing on any webpage. Share your ideas with coworkers, colleagues, and friends. MarkUp works in your browser, so there’s nothing to download and install; just drag the Get MarkUp icon into your bookmarks bar. When you want to make notes on a webpage, click your bookmarklet to load the MarkUp toolbar. Publish when you’re ready to share your thoughts.

• Draw on any webpage with MarkUp
• Stay in your browser; nothing to download
• Get MarkUp by bookmarking this icon
• Make shapes with the Magic Marker
• Write with the Text tool
• Publish to share your ideas

http://markup.io/

HTML5 Local Storage – Complete Guide

HTML5 is one of the most fashionable topics in today’s web programming world. HTML5 contains lots of new features that allege to change the web face, big players like Google and Apple are pushing for it and browsers competes to implement more and more html5 features. In this conditions there is no surprise that everyone is talking about it.
In this post we are going to analyse exhaustively an HTML5 simple feature which is already implemented in all the modern browsers: local storage. Local Storage is just a part of the Web Storage api. It is already defined in the HTML5 specifications and it’s implemented in all the modern browsers:

IE	Firefox	Safari	Chrome	Opera	IPhone	Android
8+	3.5	4.0+	4.0+	10.5+	2.0+	2.0+

Local Storage is intended to be used for storing and retrieving data in html pages from the same domain. The data can be retrieved from all the windows in the same domain even if the browser is restarted. The Session Storage is the other Web Storage option and the data is available only in the window it was stored in and is lost when the browser window is closed.
Local Storage along with Session Storage aims to be a replacement of the cookies, defining a more consistent API. There are a few differences from the cookies:
- While the cookies are accessible from both client and server side, Web Storage in general and Local Storage in particular is accessible only from client side.
- Enhanced capacity(official for cookies is 4 kbytes) to more than 5Mb per domain(Firefox, Google Chrome, and Opera and 10MB in IE).
The local storage is a simple javascript api that you can use inside html5 pages if it’s supported by the browser. The Local Storage implements the same interface that can be used for Session Storage as well. Here is the interface as it is defined by :

1. interface Storage {  
2.   readonly attribute unsigned long length;  
3.   getter DOMString key(in unsigned long index);  
4.   getter any getItem(in DOMString key);  
5.   setter creator void setItem(in DOMString key, in any value);  
6.   deleter void removeItem(in DOMString key);  
7.   void clear();  
8. };  

interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any value);
  deleter void removeItem(in DOMString key);
  void clear();
};

Testing if the browser supports Local Storage

When you intend to use Local Storage you have to take in consideration that it is not supported by all the browsers. If the correct run of your application depends on the local storage functionality you have find other features to rely if it’s not supported, or to inform the user that the application doesn’t run properly on his browser. In order to check if it’s supported you have to check if the localStorage instance exists.

1. function testSupport()  
2. {  
3.     if (localStorage)  
4.         return "Local Storage: Supported";  
5.     else  
6.         return "Local Storage: Unsupported";  
7. }  

function testSupport()
 {
  if (localStorage)
   return "Local Storage: Supported";
  else
   return "Local Storage: Unsupported";
 }

How to Store a Value

Storing values is very simple, all you have to do is to invoke the setItem method, providing a key and a value, or to use use the localStorage object as an associative array:

1. localStorage.setItem("key1", "value1");  
2. localStorage["key1"] = "value1";  

localStorage.setItem("key1", "value1");
 localStorage["key1"] = "value1";

How to Retrieve a Value

Retrieving stored values is as simple as possible:

1. alert(localStorage.getItem("key1"));  
2. alert(localStorage["key1"]);  

alert(localStorage.getItem("key1"));
 alert(localStorage["key1"]);

List all stored values

If you need to check all the values stored in local storage you can iterate through the keys, listing the values accordingly.

1. function listAllItems(){  
2.     for (i=0; i<=localStorage.length-1; i++)  
3.     {  
4.         key = localStorage.key(i);  
5.         val = localStorage.getItem(key);  
6.     }  
7. }  

function listAllItems(){
 for (i=0; i<=localStorage.length-1; i++)
 {
  key = localStorage.key(i);
  val = localStorage.getItem(key);
 }
}

Remove a Value

Compared to cookies, html5 local storage has a much bigger capacity. However, it doesn't mean it's unlimited. If you application uses intensively the local storage, you have to take care to remove the objects you don't need anymore.

1. void removeItem("key1");  

void removeItem("key1");

Clear all the values

When the web application is "closed" or "started" you can clean all the stored values:

1. localStorage.clear(); 

An (Almost) Complete Guide to CSS3 Multi-column Layouts

One of the defining features of print design is the ubiquity of multi-column layouts. And there are a couple of good reasons why this is the case.

First of all, it’s generally easier to read lines of text between 8 and 12 words long. Second, it’s easier to control the amount of negative space in a layout with columns. For a long time, this was the primary advantage of print but CSS3 makes multi-column layouts possible online (and without the need for JavaScript).
W3C Specification: http://www.w3.org/TR/css3-multicol/

Browser Specific Support

WebKit support: Strong
Firefox support: Strong
IE9 support: None

The multi-column model

The WC3 specification introduces a number of new properties that allow us to define columns in HTML layouts. Just like print designs of old, we’re able to define the number of columns, column width, column gaps, and even rules governing overflow.
Essentially, the specification states that a multi-column element needs to have either a defined column width or column count. Browsers are supposed to render these elements similar to the way they render tables – but the content in a column layout is dynamically split into blocks.
At the moment, we’re not able to define certain properties about columns (like column-specific backgrounds), but it’s possible this might change.

The number and width of columns

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

column-count

By default, column-count is set to auto. This means that if we explicitly define the column-width, the browser will sort out for itself how many columns are necessary to populate the content in the multi-column element. Obviously, that’s not always desirable so we’ll want to explicitly define the number of columns to span the content across. And it’s easy to do:

1	#multicolumnElement {

2	-webkit-column-count: 2;

3	-moz-column-count: 2;

4	column-count: 2;

5

}

column-width

As I mentioned, we can define column-width without defining the number of columns, and the browser will render our content dynamically (there are some fine controls available too – keep reading for those). To define column-width, we can use any of the units regularly available to CSS properties (em, px, %, etc).

1	#multicolumnElement {

2	-webkit-column-width: 15em;

3	-moz-column-count: 15em;

4	column-count: 15em;

5

}

Of course, we can always combine column-width and column-count:

1	#multicolumnElement {

2	-webkit-column-count: 2;

3	-moz-column-count: 2;

4	column-count: 2;

5	-webkit-column-width: 15em;

6	-moz-column-width: 15em;

7	column-width: 15em;

8

}

Column gaps and rules

All print designers are familiar with column widths and gaps, but web designers are addicted to the language of margins and padding.

But column gap is exactly as it sounds – the size of the space between columns defined in any unit regularly available in CSS (em, pixel, etc).

column-gap

The WC3 specification defines 1em as the default column-gap value, so we’ll use it in this example:

1	#multicolumnElement {

2	-webkit-column-gap: 1em;

3	-moz-column-gap: 1em;

4	column-gap: 1em;

5

}

column-rule

Column rule is another throwback to the print era. Basically, column rules are thin lines between the columns, to further aid readibility and/or to distinguish between separate stories. CSS3 gives us three different properties for the column rule: column-rule-size, column-rule-style, and column-rule-color, but we can use the shorthand column-rule to declare values for all three at once.
As you might have guessed, the regularly available units, styles, and color values can all be used:

1	#multicolumnElement {

2	-webkit-column-rule: 1em solid #000;

3	-moz-column-rule: 1em solid #000;

4	column-rule: 1em solid #000;

5

}

Column breaks

What if I want to break the column before an h3 tag, you ask? Well, that’s easy too. CSS3 gives us the column-break property with a number of possible related properties and values, including: auto, always, avoid, left, right, page, column, avoid-page, and avoid-column.

column-break

So if we want to break the content before every h3 tag we simply include the column-break-before property in our stylesheet:

1

h2 {

2	-webkit-column-break-before:always;

3	-moz-column-break-before:always;

4	column-break-before:always;

5

}

Spanning columns

If we want an element, say a headline, to span across multiple columns we can make use of the new column-span property.

column-span

column-span has two possible values: all, and regular numbers (e.g. 1,2,3). Defining column-span as all means that the given element will span across the whole multi-column block, while assigning it a regular number will limit its span to that number of columns:

01

h2 {

02	-webkit-column-span:all;

03	-moz-column-span:all;

04	column-span:all;

05

}

06

07

h3{

08	-webkit-column-span:2;

09	-moz-column-span:2;

10	column-span:2;

11

}

Filling columns

Just like print design, we might want some finer control over how columns are filled with content. CSS3 introduces column-fill to give us that kind of control.

column-fill

We can either define a value of auto or balanced. The former will sequentially fill columns with content, while the latter evenly distributes the content.

1	#multicolumnElement {

2	-webkit-column-fill:auto;

3	-moz-column-fill:auto;

4	column-fill:auto;

5

}

Demo!

To cap things off, I’ve created a quick demo project based on the first few paragraphs of Moby Dick. It should display correctly in both WebKit and Mozilla based browsers (though it’s not formatted properly for mobile).

http://www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

The HTML5 test – how well does your browser support HTML5?

1. Parsing rules
2. Canvas
3. Video
4. Audio
5. Local devices
6. Elements
7. Forms
8. User interaction
9. Microdata
10. Web applications
11. Geolocation
12. Communication
13. Files
14. Storage
15. Workers

http://www.html5test.com/