Below is an example for defining a vendor-specific property:

div
{
<? css3('transition', 'opacity 200ms linear'); ?>
}

… Which will output:

div
{
-moz-transition: opacity 200ms linear;
-webkit-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}

And here’s an example for defining the CSS3 function element():

div
{
<? css3('background', 'element(#background-div)'); ?>
}

… Which will give you:

div
{
background: -moz-element(#background-div);
background: -webkit-element(#background-div);
background: -o-element(#background-div);
background: -ms-element(#background-div);
background: element(#background-div);
}

* As of January 2012, the element() function is supported only by Mozilla FireFox, so you may consider using normal CSS to define that function.

All Features:

• Detects and renders both vendor-specific properties and vendor-specific values, such as CSS3 functions;
• Combines multiple CSS files into one;
• If GZIP is available, the output stylesheet is gzipped and its size is much smaller than the size of all CSS files;
• Supports multiple CSS3 property values, such as:
  

  div
  {
  <? css3('background', 'url("background.png") no-repeat center, linear-gradient(#ccc, #333)'); ?>
  }
  

Requirements:

• Web-server with PHP support;

Usage:

1. Register the script the way you normally register style sheets on the page:
   

   <link rel="stylesheet" href="css3.php?files=" />
   

2. In the files parameter, define the path to all of the stylesheets that you want to merge:
   

   <link rel="stylesheet" href="css3.php?files=Styles/styles-01.css,Styles/styles-02.css" />
   

   The order in which you define them is going to be their inclusion order in the final PHP-processed file. Make sure that URLs, pointing to external assets such as background images and fonts are set relatively to the css3.php file, otherwise, they will not be requested correctly.

3. In each of the CSS files, use the css3($property, $value) function to define CSS3 properties:
   

   div
   {
   <? css3('background', 'element(#background-div)'); ?>
   }
   

4. If you wish to exclude some specific vendor properties, you can just remove them from the $prefixes array in the css3.php file:
   

   $prefixes = array('-moz-', '-webkit-', '-o-', '-ms-');
   

   The script can be easily changed to allow passing of prefixes as a function argument, if you wish to define the properties per function usage. Even better – the third argument can be an exclusion array, which will be checked against the vendor-specific array in the script itself (in_array()). Basically, you can change the function to this:

   div
   {
   <? css3('background', 'element(#background-div)', array('-moz-', '-webkit-')); ?>
   }
   

5. Is is recommended to extend the script so it checks for already existing processed file on the server, instead of processing and merging it each time the page is requested. If the file does not exist, then the result of the PHP processing can be output to a static file that will be served.

The script can be downloaded from here. Other cool HTML5, CSS3 and JavaScript experiments can be found on this page.

Here’s an excerpt:

The Louvre Museum has 8.5 million visitors per year. This blog was viewed about 180,000 times in 2011. If it were an exhibit at the Louvre Museum, it would take about 8 days for that many people to see it.

Click here to see the complete report.

This tutorial also assumes the YUI JavaScript library and its code is in the same namespace as the HTML5 Details Element Enabler I wrote about last week.

According to WhatWG, “The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.“.  As of October 2011 it is not yet supported by Internet Explorer.

The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it. In order to achieve similar appearance as the real placeholder element we will also add or respectively remove a special CSS class name:

In short, the feature detection is:

var textarea = document.createElement("textarea");

if(undefined === textarea.placeholder) {
// execute code only for browsers that do not support placeholder
}

The _bind() method is pretty straightforward – we assign handlers for the focus() and blur() events, and according to the value of the input we set or unset the placeholder text:

_enable = function(e) {

var
element = e.currentTarget,
type = e.type;

switch(type){
case "focus":
if(element.get("value") === element.getAttribute("placeholder")) {
_set(element, false);
}
break;
case "blur":
if(element.get("value") === "") {
_set(element, true);
}
break;
}
}

The Markup:

<input type="text" placeholder="my placeholder text" />
<textarea placeholder="my placeholder text"></textarea>
<input type="password" placeholder="my placeholder text" />

The CSS Emulating the System Placeholder Style:

.placeholder-enabler
{
color: #ccc;
}

The demo is available on this page or you can download the code straight away from here. If you are curious about more HTML5, CSS3 and JavaScript experiments, bookmark this page.

The implementation I am going to present today assumes YUI library, but it can also be accomplished easily with jQuery or with pure JavaScript. Basically, the most important part of the script is the feature detection:

if (!(OPEN in document.createElement("details"))) {
// enable expand / collapse with JavaScript for unsupported browsers
}

The code above will check for native availability of expand / collapse functionality, and if it is not present in the browser, it will bind click event to the <summary /> element that will toggle the open attribute of it’s parent – the <details /> element:

Y.one("body").delegate("click", function() {
var details = this.get('parentNode');

details.getAttribute(OPEN) ? details.removeAttribute(OPEN) : details.setAttribute(OPEN, OPEN);
}, "summary");

And the rest is just CSS:

details:not([open]) > div
{
display: none;
}

details[open] > div
{
display: block;
}

By using the :not() selector we make sure that if the open attribute is added by default to the <details /> element, its content will be expanded.

In case we need a custom expand / collapse arrow instead of the default one provided in Google Chrome we can hide it by using a proprietary pseudo element:

details summary::-webkit-details-marker
{
display: none;
}

… And then play with the ::before pseudo element of the <summary /> tag like this:

summary::before
{
content: "+";
}

details[open] summary::before
{
content: "-";
}

How to Use the HTML5 Details Enabler:

Script Assets:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script src="html-5-details-element-enabler/html-5-details-element-enabler.js"></script>

Stylesheet:

<link rel="stylesheet" href="html-5-details-element-enabler/html-5-details-element-enabler.css" />

Initializer:

YUI().use("html5-details", function (Y) {
var details = new Y.HTML5.Details();
details.enable();
});

The possibilities are numerous – you can apply cool transition effects for the expand / collapse, play with gradients and shadows, CSS3 makes most of the stuff really easy to achieve.

The HTML5 Details enabler is available for download from this link, the demo is here, and if you want to check other cool experiments, go to this page.

According to Paul Irish “FOUT is what I’m calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.” and this could be quite annoying. Fortunately, on the Internet there are a few good solutions. The issues with the correct (expected) and timely download and application of web-fonts are three:

1. The actual download of an embedded font starts after the load event of the page;
2. The downloading of the font will not start until the browser parser encounters elements on the page that atually need this font regardless of the fact that the font is registered in the stylesheet using the @font-face directive.
3. The font downloading will not start on elements with initial display: none.

Recently I was working on a web project that required the use of embedded fonts, and as the design guys needed a really bullet-proof solution, none of the articles I found was really suitable. Luckily, the project was fully ajax-driven and the embedded fonts were used on elements that were not initially on the page, so the solution I came up with was pretty obvious and easy to achieve – I created a few hidden elements (one for each font), whose font properties required the embedded fonts when page is initially loaded and in this manner the browser was forced to start downloading the font files, so they were available for the “real” elements that needed them later.

The Markup:

<span class="font-loader">
<span class="embedded-font-regular"><!-- / --></span>
<span class="embedded-font-bold"><!-- / --></span>
</span>

The @font-face Directives:

@font-face
{
font-family: "EmbeddedFontRegular";
src: url("../fonts/embedded-font-regular.eot?") format("eot"),
url("../fonts/embedded-font-regular.woff") format("woff"),
url("../fonts/embedded-font-regular.ttf") format("truetype"),
url("../fonts/embedded-font-regular.svg#webfontPPfl10JY") format("svg");
font-weight: normal;
font-style: normal;
}

@font-face
{
font-family: "EmbeddedFontBold";
src: url("../fonts/embedded-font-bold.eot?") format("eot"),
url("../fonts/embedded-font-bold.woff") format("woff"),
url("../fonts/embedded-font-bold.ttf") format("truetype"),
url("../fonts/embedded-font-bold.svg#webfontV2lCDIXN") format("svg");
font-weight: normal;
font-style: normal;
}

The .font-loader rules:

.font-loader
{
visibility: hidden;
position: absolute;
}

.font-loader .embedded-font-regular
{
font-family: EmbeddedFontRegular, Arial, Sans-serif;
}

.font-loader .embedded-font-bold
{
font-family: EmbeddedFontBold, Arial, Sans-serif;
}

Notice that I used position: absolute and visibility: hidden instead of just display: none, because affected browsers would not start downloading the font resources for elements with display: none;

Finally, if you don’t want to add meaningless and non-semantic empty elements on the page, you can easily recreate the solution I have offered with JavaScript that will create the markup on the client from a simple array.

More CSS3, HTML5 and JavaScript experiments on this page.

The Markup

Actually we need just a single element. A <div /> will do the job:

<div class="css-reflection"></div>

The CSS

In order to save myself from using nested tags, I decided to utilize the ::before and ::after pseudo elements. The ::before element will hold the actual reflection, and the ::after – the gradient blur.

The Reflection

In the ::before element, I set border and background to inherit, so the properties get their values from the parent element. Then I just flipped the element and offest it to 100% top:

transform: scaley(-1);
top: 100%;

The Reflection Gradient

In the first implementation I used CSS3 gradients to achieve the gradient blur, but since the application was supposed to run only on latest browsers, I decided to switch to SVG and keep the gradient definitions in a single place rather than boosting my CSS with vendor-specific -bula-bula-linear-gradients:

The SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="gradient-to-white" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0" stop-color="#fff" stop-opacity=".7"/>
            <stop offset="60%" stop-color="#fff" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill:url(#gradient-to-white); " />
</svg>

The CSS

.css-reflection::after
{
background: url("gradient-to-white.svg");
}

The above is pretty straightforward – we create a rectangle that occupies 100% of its parent, then define a white semi-transparent to fully opaque white gradient. The SVG file is then set as background image to the ::after pseudo element of .css-reflection. Actually in the SVG file we can define any gradient color(s) that will match the parent of the element with reflection.

Displaying Pictures as Background Images

In order to display different images, I set a secondary class name to the .css-reflection reflection element:

<div class="css-reflection kitten-01"></div>

… And the following CSS:

.kitten-01
{
background: url("images/kitten-01.jpg");
}

So, that was it – quick and dirty. And a few ideas for consideration and maybe inspiration:

• You can set the border-radius of the ::before and ::after elements to inherit, so the reflection will get the border-radius of the parent.
• If you wish to have text which can be also flipped, you can use two nested elements with the same content, and flip vertically the second one and position it according to the reflection.
• You may play with the -moz-element() property of Firefox to draw arbitrary elements as background to other elements, it’s very cool and can also be used to create CSS-only reflections.
• You can use <img /> tag, clone it, and then flip the clone and again play with the SVG/CSS3 gradients if you wish to have a real image reflection.

The demo is available on this page, or you can download the example from this link. Find more experiments here.

Enjoy your time there and feel free to contact me if you have questions or comments.

CSS3 Treeview. No JavaScript.

Today I’m going to show you a really easy and absolutely JavaScript-less solution for creating multi-level treeviews with minimal markup and with the power of CSS3. Basically what we need is a simple list:

<div class="css-treeview">
<ul></ul>
</div>

… With any number of nested items and subtrees. Each item that is going to be a container of a subtree should be supplied with a label and a checkbox.

Normal (non-clickable) item:

<li><a href="./">item</a></li>
<li><a href="./">item</a></li>

Expandable (clickable) submenu item:

<li><input type="checkbox" id="item-0" /><label for="item-0">folder</label>
<ul>
<li><input type="checkbox" id="item-0-0" /><label for="item-0-0">folder</label>
<ul>
<li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">folder</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

Making it work is pretty simple and straightforward. All we need is to query the normal and :checked states of the checkboxes and set the adjacent <ul /> element to visible or hidden in the stylesheet:

Unchecked checkbox:

.css-treeview input + label + ul
{
display: none;
}

Selected checkbox:

.css-treeview input:checked + label + ul
{
display: block;
}
<pre>

For aesthetic purposes we hide the checkboxes like this:

.css-treeview input
{
position: absolute;
opacity: 0;
}

It is recommended to hide the checkbox with position/opacity rather than with display: none, otherwise you will have problems with certain browsers.

If your treeview is going to contain disabled subtrees, you can utilize the :not() selector, so disabled items with submenus will not be clickable:

.css-treeview input:checked:not(:disabled) + label + ul
{
display: block;
}

The visual representation of the disabled items can be accomplished by changing the opacity and the cursor of the label element:

.css-treeview input:disabled + label
{
cursor: default; /* or no-drop */
opacity: .6;
}

Finally, for the +/- buttons on the left, we can use generated content with the :before pseudo element:

.css-treeview label,
.css-treeview label::before
{
background: url("icons.png") no-repeat;
}

.css-treeview label::before
{
content: "";
width: 16px;
margin: 0 22px 0 0;
vertical-align: middle;
background-position: 0 -32px;
}

.css-treeview input:checked + label::before
{
background-position: 0 -16px;
}

All of the icons that have been used in the example are in the icons.png sprite. The solution will work with any browser supporting the adjacent element selector (E + E) and the attribute selectors of CSS3. Do not forget that the values of the for/id attribute pairs for the label and checkbox elements should be unique, otherwise the treeview will not work. Tab/Spacebar navigation is supported natively. The demo is availble on this page, or you can download it straight away from this link.

Of course this is just the basic concept that you can use for inspiration. A few ideas that can bring you even further:

- By adding the disabled attribute to a checkbox in your markup, the nested subtree will become expanded by default.
- You can use the cool CSS3 transitions to achieve cool behaviors.
- You can use additional classes to display different “folder” items.
- You can use :hover in order to show the pluses and minuse only when the treeview is hovered.
- You can use an additional class name that will show the pluses and minuses only when applied.
- You can use the attribute selectors to display different icons for each normal item according to the extension in the href attribute, for example:

li a[href$=".js"]
{
background: url("js.png") no-repeat center;
}

li a[href$=".css"]
{
background: url("css.png") no-repeat center;
}

View the demo or download it here. Find more experiments here.

GuitarChords.JS

And this is just the Beta release! Even more to come in the official release soon.

BETA Release Features:

• Ability to play the current chord from small external .mp3 or .ogg sounds (no Flash, but real HTML5 audio) depending on the browser support.
• Cool and friendly stompbox-like interface with LED display, knobs and large play button.
• Chord data is stored in easy to understand json file(s) that can be easily edited.
• User-defined chords data files.
• User-defined chord types.
• Any chord can be added and played.
• Sounds are loaded on demand.
• Incredibly small footprint.
• Ability to display 3 inversions for each chord.
• Customizable backlit color of the LED display.
• Fully localizable.
• Easy to install, setup and use on any standards-compliant website.
• Fully AJAX driven.

Planned Features for the Official Release

• Support for multiple chord data files that can be changed on the fly.
• Add more chords and inversions.
• Add flat and sharp variants of the current chord.
• All sounds will be embedded as base64-encoded data in a cacheable json file.
• Convenient tuner.
• Volume control.
• Continuous chord playing.
• Highlighting of the currently played note.
• UI improvements.
• Export of the current chord in text format.

Supported Browsers:

• Internet Explorer 9+
• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera

GuitarChords.JS does not initialize on older versions of Internet Explorer.

Technologies Used:

JavaScript, CSS3, HTML5 Audio, JSON and SVG. SVG has been used in Internet Explorer to achieve consistent gradients instead of using the classic filter gradient that bleeds through on elements with rounded borders.

Requirements:

• Standards-compliant webpage (XHTML, HTML5) or optionally Skinny DTD. GuitarChords.JS will not initialize on pages with non-standards compliant DTDs and will display a warning.
• Web server.

Screenshots

Visit the info page for GuitarChords.JS, view the demo or download it straight away. The component is included in the latest version of Acid.JS Web UI too.

Here are some of the highlights:

• The Personal Bar at the top of each page allows you to:
• Use Google to search Acid.JS.
• Add pages to your very own bookmarks directly on the page that will be accessible when you return back to the site.
• Add your very own notes in cool PostIt notes fashion which will be available after you return back to the site and will never expire unless you delete them.
• New component purchase system for buying single components or component bundles via PayPal.
• Improved user experience on component information pages with convenient tabs and direct access to the component demo, news, help page, purchase page, etc.
• Tag cloud to see what is currently trending on Acid.JS.

The website is making heavy use of HTML5, CSS3, JavaScript, offline storage and client/server-side JSON and XML.

Below are a few screenshots from the new website, or you can just go and give it a try!

Supported Browsers

• Mozilla FireFox
• Google Chrome
• Apple Safari
• Opera
• Microsoft Internet Explorer 9

Go directly to the demo or download the example straight away. Find more experiments here.

Really, all you need is markup like this:

<div class="iphone-toggle-buttons">
    <ul>
        <li><label for="checkbox-0"><input type="checkbox" name="checkbox-0" id="checkbox-0" /><span>checkbox 0</span></label></li>
        <li><label for="checkbox-1"><input type="checkbox" name="checkbox-1" id="checkbox-1" checked="checked" /><span>checkbox 1</span></label></li>
    </ul>
</div>

… And the rest will be done with the magic of CSS3′s generated content, attribute selectors and gradients.

Supported browsers:

• Mozilla FireFox
• Opera
• Google Chrome
• Apple Safari
• Internet Explorer 9 (not fully supported)
• Internet Explorer 10 Beta

Older browsers that do not support CSS generated content, gradients and attribute selectors fall back nicely showing the normal checkboxes and radio buttons.

Go and check it out here… Find more experiments here.

Key Features

• Extremely fast and responsive with a small footprint
• Imageless CSS3 skins with fallback for older browsers
• Powerful and convenient client API
• Easy setup and customization

What’s Next?

More information about the control is available on the home page of SplitButton.JS. You can also download the component, visit the online demos or get it with the latest version of Acid.JS Web 2.0 Component Library.

What is AJAX Hotel Reservation Form.AJAX?

HotelReservationForm.AJAX is a full featured AJAX solution for websites that provide online room reservations. It is elegant, skinnable, highly customizable, localizable, crossbrowser and ultra fast. The installation and the configuration of the script is easy, and your form can be up and running on your website within minutes.

What’s New in Version 7.0

• Full control over the form fields in the public page
• HTML5 pricing support for selectboxes, radio buttons and checkboxes
• Improved validation routines
• Realtime calculator of the total price
• New JSON response structure
• New set of 12 cool looking imageless CSS3 skins with nice fallback for older browsers
• Optimized and even faster performance
• Improved localization support for the public page and the admin
• Improved emailing system
• Easier and more intuitive deployment, customization and use
• Improved user experience
• A number of previous issues have been addressed and fixed

Key Features

• Fully AJAX driven admin and public part
• Fully customizable public part – any type and number of fields can be added to the form
• Fully localizable public and admin pages
• User-friendly wizard-like tabbed interface
• User-friendly system messages in the admin
• Reliable, unobtrusive and user-friendly as-you-type form field validation
• User-defined required fields
• Synchronized check-in and check-out datepickers
• Fast and responsive with extremely small footprint
• JSON response structure
• Currency and pricing support
• Seamless PayPal payment integration
• Realtime calculator of the total price
• 12 cool-looking CSS3 skins with nice fallback for older browsers that will fit virtually to any design
• Easy to deploy, customize and use
• Fully customizable confirmation and notification emails with HTML support
• Public access to the confirmed reservation from the customer
• Reservation print option
• Built on top of jQuery JavaScript library

What’s Next?

Please, visit this page for detailed info about AJAX Hotel Reservation Form, download the component or go directly to the demo!

TabStrip.XML is a powerful lightweight component providing tabbed interfaces for websites. It is easy to configure by simply adding a few lines of code and defining placeholder element with an ID at the place where the tabstrip should render. The latest version of the control comes with new client API allowing total control over the tabstrips in runtime.

Key Features

• Extremely fast and responsive with small footprint
• Four types for content loading – from a template on the page (excellent if you care about your SEO), static, external and via AJAX
• Rich and powerful client API
• Convenient custom events
• Various customization options
• Fully cross-browser, nicely falling back for older browsers
• 12 CSS3 skins that will virtually fit any design and will degrade gracefully on older browsers
• Support for icons
• Load on demand
• Support for tab closing
• Four types of positioning of the tab buttons – top, right, bottom and left

What’s New in the Latest Version:

• Improved and even faster rendering
• Custom events
• Improved client API
• Completely new set of skins
• New content loading mode – from an on-page template
• Two new types for positioning of the tab buttons – right and left
• Built on top of jQuery JavaScript library

Sounds cool? Then you can…

• Visit the official page of TabStrip.XML on Acid.JS
• Download the component, or get it with the latest version of Acid.JS Web 2.0 Component Library
• Go straight to the demos of the component
• Check the online help and manual page for TabStrip.XML

ImageSlider.JS is extremely fast, responsive and so Web 2.0!

Key Features

• Rich client API.
• Various customization options.
• Slideshow view.
• Thumbnail view.
• Album info view.
• Cool sliding and fading transitions.
• Two types of source data – json or declarative.
• Two operational modes – ajax and local.
• Extremely fast with a small footprint.
• Pageload or lazy (on demand) initialization.
• Built on top of the jQuery JavaScript library.

Links

• ImageSlider.JS demo
• Download the component

The component is included in the latest version of Acid.JS Web 2.0 Component Library.

It is flexible, easy to install and fully customizable featuring rich client API, custom events and imageless purely CSS3-driven skins and cool animations.

Key Features

• Rich client API.
• Convenient custom events.
• Extremely fast with a small footprint.
• Skinnable – the full version includes the full set of 12 skins that will virtually fit any design.
• Platform-independent – can work with any server platform (PHP is required for the demos).
• Pageload or lazy initialization
• Crossbrowser – all major browsers are supported.
• Imageless CSS3 skins and animations where available.
• Animated CSS3 stripes where available.
• Built on top of jQuery JavaScript library.

Links

• View live demo of Progressbar.JS
• Download the component

Older browsers that do not support the adjacent elements selector (E + E), :checked and :disabled pseudo classes or generated CSS content (via ::before, ::after and content:) will degrade gracefully to the default checkboxes and radio buttons. As the approach for checkboxes and radiobuttons is essentially the same, for the explanations we will use radio buttons only. On the provided demo page examples with both checkboxes and radio buttons are shown, though.

In order to capture the change event of the checkbox or radio button without JavaScript, we will wrap the control in a <label>...</label> tag instead of placing it adjacent to the label. This approach is valid and is actually recommended as more semantic and accessible than the classic approach for creating label-input box pairs and does not require the setting of a for attribute to the label:

<label> <input type="radio" name="radio-group-1" /> </label> 

For the second step we need to create an element which we will manipulate with CSS depending of the checked state of the form control. This element will also be used as a text container for the label text associated with the radio button. So, we create a <span>...</span> next to the radio button:

 <label> <input type="radio" name="radio-group-1" />  <span>my custom radio button 1</span>
</label> 

In order to query the <span>...</span> element depending on the checked state of the radio button we will use the adjacent element selector. In order to prevent the image sprite that contains the normal and checked states for our custom checkboxes and radio buttons from showing entirely (for example on multiline label texts) we will render a pseudo element in the beginning of our span, which dimensions will be equal to the height and width of the default browsers’ radio buttons and checkboxes and thus we will clip the sprite:

input[type="radio"] + span::before { content: ""; display: inline-block; width: 20px; height: 20px; background: url("sprite.png") no-repeat -20px 0; vertical-align: middle; }

For the checked state we will use the :checked pseudo class of the checkbox or radio button and will set new coordinates for the sprite where the “checked” image is:

input[type="radio"]:checked + span::before { background-position: -20px -20px; }

Finally, we need to hide browser’s default radiobuttons. Using display: none or visibility: hidden will not work in this case, because when hidden in this manner, form controls cannot get focus and thus – will not get checked, so we set position: absolute and opacity: 0:

input[type="radio"] { position: absolute; -moz-opacity: 0; -webkit-opacity: 0; opacity: 0; }

Styling The Disabled, Hover, Active and Focus States

By using the :disabled pseudo class we can style the disabled state of our skinned form elements. And why not add some mouseover effect by using the :hover pseudo class? Or apply focus dots for usability purposes via :focus and :active?

/* disabled form elements */ input[type="radio"]:disabled + span, input[type="checkbox"]:disabled + span, input[type="radio"]:disabled + span::before, input[type="checkbox"]:disabled + span::before { -moz-opacity: .4; -webkit-opacity: .4; opacity: .4; } /* focused and active form elements */ input[type="checkbox"]:focus + span::before, input[type="radio"]:focus + span::before, input[type="checkbox"]:active + span::before, input[type="radio"]:active + span::before { outline: dotted 1px #ccc; }

Wrapping Things Up

And finally, to wrap things up and to be able to have different checkbox and radio button “skins” on a single page we can apply a compound common class (.skinned-form-controls.skinned-form-controls-[skin-name]) name to the controls’ parent element – one that contains the layout settings (.skinned-form-controls) and the other – the actual skin settings (.skinned-form-controls-mac):

<form method="post" action="./" id="form-1" class="skinned-form-controls skinned-form-controls-mac"> <h2>Checkboxes</h2> <ul> <li><label><input type="checkbox" /><span>unchecked checkbox</span></label></li> <li><label><input type="checkbox" checked="checked" /><span>checked checkbox</span></label></li> <li><label><input type="checkbox" disabled="disabled" /><span>unchecked and disabled checkbox</span></label></li> <li><label><input type="checkbox" checked="checked" disabled="disabled" /><span>checked and disabled checkbox</span></label></li> </ul> <h2>Radio Buttons</h2> <ul> <li><label><input type="radio" name="radio-button-group-1" /><span>radio button 1</span></label></li> <li><label><input type="radio" name="radio-button-group-1" checked="checked" /><span>radio button 2</span></label></li> <li><label><input type="radio" name="radio-button-group-1" checked="checked" /><span>radio button 4</span></label></li> <li><label><input type="radio" name="radio-button-group-1" disabled="disabled" /><span>radio button 4 (disabled)</span></label></li> </ul> </form>

Taking Care of the pre-Internet Explorer 9 Versions

To make sure that older versions of Internet Explorer degrade gracefully, we will apply the infamous \9 hack to set position: static real checkboxes and radio buttons so the layout does not break. No version prior to IE9 supports opacity, so we do not have override it in our special rule.

.skinned-form-controls input[type="checkbox"], .skinned-form-controls input[type="radio"] { position: static\9; }

Supported Browsers

• Internet Explorer 9
• FireFox
• Opera
• Google Chrome
• Apple Safari

Demo and Download

• View demo of the solution on this page
• Download the examples page
• Find more experiments here.

The Blog-Health-o-Meter™ reads Wow.

Crunchy numbers

The Louvre Museum has 8.5 million visitors per year. This blog was viewed about 130,000 times in 2010. If it were an exhibit at The Louvre Museum, it would take 6 days for that many people to see it.

In 2010, there were 40 new posts, growing the total archive of this blog to 135 posts. There were 33 pictures uploaded, taking up a total of 632kb. That’s about 3 pictures per month.

The busiest day of the year was December 2nd with 886 views. The most popular post that day was Creating a Web 2.0 Button with CSS3 and Minimal Markup.

Where did they come from?

The top referring sites in 2010 were scriptandstyle.com, en.wordpress.com, devsnippets.com, mtnconcept.com, and google.com.

Some visitors came searching, mostly for ie8 css hack, fakepath, c:fakepath, ie8 hack, and hack ie8.

Attractions in 2010

These are the posts and pages that got the most views in 2010.

Creating a Web 2.0 Button with CSS3 and Minimal Markup November 2010
16 comments

CSS Hack for Internet Explorer 8 June 2009
2 comments

The Mystery of c:\fakepath Unveiled June 2009
6 comments and 3 Likes on WordPress.com

Using the IE8 X-UA Compatibility Meta Tag Properly March 2009
10 comments

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome July 2009
5 comments

The following markup:

<p>Lorem ipsum dolor sit amet...</p>

…And this CSS:

p
{
    text-shadow: 0 0 8px #000;
    color: transparent;
    /* other properties */

}

… Will produce this:

… And we can use it to add cool a lá Vista and Windows 7 blur effects to our Web 2.0 dialog boxes as you shown below:

A few notes:

You can control the smoothing of the blur via the spread value of the text-shadow property (in our example it is set to 8 pixels).

Internet Explorer 5.5-8 does not have native support for RGBA colors, but you can use the properietary gradient filter to emulate RGBA:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";

On the other hand, in IE you do not have to emulate Gaussian blur, because it supports it since version 5.5 – again via the proprietary blur filter:

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";

The demo does not work properly with Opera, because that browser does not seem to support RGBA colors applied to elements that have a position different than static, however with a different setup it can be put to work. IE6 and IE7 fail to execute the blur filter, because it is applied to a relatively positioned element (yes, that’s the weird CSS hack for stopping the propagation of transparency from parent to child elements), but again – this can be solved with a different setup, markup and CSS.

The entire example is available on this page, or you can download it straight away from this link. Find more experiments here.

Merry Christmas and a Happy New Year everyone!

If you are tired and bored of browsers’ default tooltips and look for an easy way to display important information in a stylish manner Tooltip.JS is a component that you will love.

It is skinnable, fully customizable and can display not only the text found in the title attribute in the elements of your markup, but also rich HTML enhanced with JavaScript and CSS or load its contents from external sources via AJAX.

Key Features:

• Extremely fast with a small footprint.
• Imageless CSS3 skins.
• Support for minimize zones.
• Tooltips operate on the title attribute of the elements or can be loaded via AJAX.
• You can specify regions on the page that will be tooltipified or just tootipify the entire page.
• Skinnable – the full version includes the full set of 12 skins that will virtually fit any design.
• Platform-independent – can work with any server platform.
• Can be initialized either on page load or on demand.
• Crossbrowser – All major browsers are supported.
• Comprehensible and easy to use client API.
• Tooltipifying of newly added elements on the age after AJAX or user interaction.
• Tooltips can contain HTML and JavaScript, not just simple text.
• Smart flipping when the tooltip is beyond the viewport.

You can visit the demo page or download the component straight away from this link. It is also included in the latest version of Acid.JS Web 2.0 Component Library.

The deployment of Captcha.AJAX on your website is a matter of minutes and it can be easily integrated to your existing forms regardless of how are they rendered – on the server or via JavaScript / AJAX.

Key Features

• Extremely fast with a very small footprint.
• Does not require any PHP knowledge, as the setup logic is the in the front-end.
• Built on top of jQuery.
• Fully customizable.
• Inherits the styles of the form it is integrated to or applies its own styles.
• Easy to integrate into existing forms.
• Two initialization modes – on page load and on demand.

Take a look at the demo or download the component right away! Captcha.AJAX is also included in the latest version of Acid.JS Web 2.0 Component Library.

The solution demonstrated on this page utilizes border and box-shadow with shadow blur turned off in order to create a double border with two different colors and can save us from adding an extra element in order to fulfill some design. It works with Mozilla FireFox, Google Chrome, Opera and Internet Explorer 9. Older versions of Internet Explorer will display just the normal border:

The HTML:

<div class="double-border">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

… And the CSS:

.double-border
{
 padding: 8px;
 border: solid 6px #ff8000;
 -moz-box-shadow: 0 0 0 6px #0f0;
 -webkit-box-shadow: 0 0 0 6px #0f0;
 box-shadow: 0 0 0 6px #0f0;
 width: 200px;
 float: left;
 margin: 8px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}

What we actually do is to set shadow’s x-offset, y-offset and the shadow blur to zero and set color for the shadow and in this manner to emulate a solid color border to the element:

-moz-box-shadow: 0 0 0 6px #0f0;

This will render a solid color 6-pixel wide shadow that can be used as an outer border of the element. The inner border is set via the classic:

border: solid 6px #ff8000;

What is important in this solution is that we also need to set margin to the element that is equal or bigger than the shadow spread, otherwise the adjacent elements will be overlapped by the border we have emulated from a box-shadow.

If you like the example you can download it too. Find more experiments here.

… Produced by the following markup:

<ul>
<li><a href=”#” title=”RSS”>RSS</a></li>
<li><a href=”#” title=”Blogger”>Blogger</a></li>
<li><a href=”#” title=”MSN”>MSN</a></li>
</ul>

… And the CSS explained in brief (on the demo page you can view the complete stylesheet or download the example):

1. The normal state of the buttons:

ul.menu a
{
 -moz-border-radius: 9px;
 -webkit-border-radius: 9px;
 border-radius: 9px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65a5ed", endColorstr="#aeeaff"); /* Internet Explorer */
 background: #65a5ed; /* Opera and really old browsers */
 background: -moz-linear-gradient(
        center bottom,
        rgb(150,238,255) 11%,
        rgb(131,178,229) 41%,
        rgb(85,155,229) 54%,
        rgb(194,204,234) 94%
    ); /* FireFox 3.x */
 background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.11, rgb(150,238,255)),
        color-stop(0.41, rgb(131,178,229)),
        color-stop(0.54, rgb(85,155,229)),
        color-stop(0.94, rgb(194,204,234))
    ); /* Chrome and Safari */
 background: linear-gradient(top, #65a5ed, #aeeaff); /* Support for W3C CSS gradients */
 -moz-box-shadow: 0 0 4px #000; /* FireFox */
 -webkit-box-shadow: 0 0 4px #000; /* Chrome and Safari */
 box-shadow: 0 0 4px #000; /* FireFox, Chrome, Safari, Opera, IE9 */
 }

Since no browser supports the official W3C background gradient properties yet, we define them separately for each browser, making sure that we put a fallback alternative for browsers that do not support gradients before all other gradient properties. Our solution will support gradients for IE5.5-9, Mozilla FireFox 3x, Apple Safari and Google Chrome. Opera will display a solid color background, as it still does not support CSS3 gradients.

2. For the :hover state we just change the properties we need to look different:

ul.menu a:hover
{
border-color: #000062;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#dbdbdb”, endColorstr=”#ffffff”);
background: #dcdcdc;
background: -moz-linear-gradient(
center bottom,
rgb(255,255,255) 0%,
rgb(214,214,214) 50%,
rgb(235,235,235) 71%,
rgb(248,248,248) 85%
);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(0.5, rgb(214,214,214)),
color-stop(0.71, rgb(235,235,235)),
color-stop(0.85, rgb(248,248,248))
);
background: linear-gradient(top, #dbdbdb, #fff);
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;
}

3. The :active state is even skinnier:

ul.menu a:active
{
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
}

And now the most interesting part. CSS3 supports multiple backgrounds on a single element, but still no browser provides means to inherit certain common properties from a parent element, so in order to apply icons we should use the :before pseudo element instead of definining multiple backgrounds (the gradient plus the icon) separately for each button:

1. Create a common :before rule that will be the same for all buttons in the menu:

ul.menu a:before
{
 content: "";
 margin: 4px;
 display: inline-block;
 height: 24px;
 width: 24px;
 background-repeat: no-repeat;
 background-position: center;
 float: left;
}

The above instructs the browser to render a pseudo element before the actual content of the element with the properties we define. Now we have a square 24 x 24 pixels inline-block element, which can accept a background image (the icon). To have a different icon for each button we apply classes to out <a>…</a> tags and then use this simple rule for each button:

ul.menu a.rss:before
{
 background-image: url("pages/creating-a-web-2-0-button-with-css3-and-minimal-markup/images/rss.png");
}
ul.menu a.blogger:before
{
 background-image: url("pages/creating-a-web-2-0-button-with-css3-and-minimal-markup/images/blogger.png");
}
ul.menu a.msn:before
{
 background-image: url("pages/creating-a-web-2-0-button-with-css3-and-minimal-markup/images/msn.png");
}

To optimize even more out menu we can use a single sprite for all icons in the menu or embed the images directly in the stylesheet as bas64 encoded data.

On this page you can see a working demo of the example and you can download it in case you need it. The example works with FireFox, Chrome, Safari, Internet Explorer and Opera. Internet Explorer 5.5 6 and 7 will not display the icons, because these browsers do not support generated CSS content, but still the gradients will work. Internet Explorer will not render the shadows and the rounded corners, but IE9 will.

Find more experiments here.

Say goodbye to the boring default browser dialog boxes you are using on your website or online applications, here is Dialogs.JS!

The component comes with custom alert, confirm and prompt boxes, a couple of handy JavaScript methods that emulate the behavior of the “real” browser dialogs, really small footprint and 12 skins that will fit virtually any design. You get lightbox-style modal overlay, cool buttons, keyboard navigation (Enter, Spacebar and ESC keys), rounded corners input for the prompt… Everything so Web 2.0!

What’s New:

• Improved performance and smaller footprint.
• Built on top of jQuery.
• Completely new set of (almost) imageless CSS3 skins.
• Cool animations.
• More customization options.
• Option for setting the dialogs draggable.

Take a look at the demo or download the component right away! Dialogs.JS 7.0 is also included in the latest version of Acid.JS Web 2.0 Component Library.

All you need is a <div />:

<div class="speech-bubble">This speech bubble is created entirely with CSS, without any images or additional markup.</div>

… And the following CSS:

.speech-bubble
  {
   width: 200px;
   padding: 10px;
   background: #404040;
   color: #fff;
   font: normal 12px "Segoe UI", Arial, Sans-serif;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
  }
  .speech-bubble:after
  {
   content: "";
   border: solid 10px transparent; /* set all borders to 10 pixels width */
   border-top-color: #404040; /* the callout */
   border-bottom: 0; /* we do not need the bottom border in this case */
   width: 0;
   height: 0;
   overflow: hidden;
   display: block;
   position: relative;
   bottom: -20px; /* border-width of the :after element + padding of the root element */
   margin: auto;
  }

The CSS is pretty self-explanatory, so lets not go into details. In a few words – we use the :after pseudo element to generate a new block element inside the <div>…</div>, and leave the rest to the magic of the borders of the HTML elements. Probably the most important thing for this solution is the bottom position, which equals the border-width of the :after element plus the padding of the root element. Obviously, with some more tweaking you can position the callout anywhere we need relative to the root element according to the design requirements. The only caveat I’ve noticed is that you cannot adequately apply box-shadow to the generated element, because the shadow wraps around the transparent borders and the result it pretty ugly.

This is just a simple illustration of what can be done with the polygonal oddities of CSS, and in fact there are numerous similar solutions around.

Here is the demo, and here is the download file in case you need it. Find more experiments here.

1. Create an empty <div class=”outer”>…</div>, and assign the following CSS to it:

.outer
{
   position: absolute;
   top: 24px;
   left: 24px;
   border: solid 1px #000;
   padding: 24px;
   background: rgba(64, 64, 64, 0.5); /* R, G, B, A */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040); /* AA, RR, GG, BB */
}

The RGBA background property requires the setting of four values for red (0-255), green (0-255), blue (0-255) and alpha transparency (0-1). Currently it is fully supported by FireFox, Opera, Chrome and Safari. Internet Explorer 9 is planned to support it. As a fallback for older versions of these browsers you may specify:

background: rgb(64, 64, 64);

… Before the rgba property, but keep in mind that Internet Explorer actually supports the RGB module and you will need to remove the background for that browser before or after the filter roperty by targetting all of its versions with the \9 hack:

background: none\9;

Now, let’s add support for RGBA for Internet Explorer 5.5-9. We are going to use the vendor-specific CSS extension gradient filter:

filter: progid:DXImageTransform.Microsoft.gradient();

It’s startColorstr and endColorstr properties allow the setting of both alpha channel and RGB color in hex format:

startColorstr=#AARRGGBB, endColorstr=#AARRGGBB

… Where the permitted values range from 00 to ff. In order to create a solid background we will use identical values for both the start- and end color strings:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

… Where 7f represents 127, i.e. 50% opacity, and 404040 is the background color of the element (whose RGB representation is 64, 64, 64 as in background: rgba(64, 64, 64, 0.5)).

2. In the <div class=”outer”>…</div> nest a new <div class=”inner”>Lorem ipsum dolor sit amet.</div> and associate it with the following CSS, for example:

.inner
  {
   padding: 12px;
   width: 120px;
   background: #fff;
   border: solid 1px #404040;
  }

Hit F5 to reload the page and you will see that the opacity from div.outer is not inherited by div.inner. Cool, isn’t it? Here’s a link to the online demo. In case you want to keep the file, here’s the download link as well. Keep in mind that the absolute position I have set on the demo page is for display purpose only – to prove the semi-transparency of the div.outer.

Find more experiments here.

Have you ever wanted to create your own portal website, design page wizards or put your forms into order? Ever needed a cool and lightweight component that is created entirely with JavaScript that mimics the behavior of the real windows but circumvents pop-up blockers?

Window.JS has it all. And even more – it comes with rich and easy to use client API, set of 12 cool skins and may be up and running on your project in a few easy steps in the course of several minutes.

Key Features

• Mimics the behavior of the real windows – move, drag, resize, minimize, maximize, restore, close, etc.
• Features cool animations.
• Support for minimize zones.
• 3 types of content loading – from an on-page template, via ajax and in an iframe.
• SEO-friendly if on-page templates are used.
• Extremely fast with a very small footprint.
• Platform-independent – can work with any server platform.
• Skinnable – the full version includes the full set of 12 skins that will virtually fit any design.
• Crossbrowser – All major browsers are supported.
• Comprehensible and easy to use client API.
• Multiple instances with different skins on a single page are supported.
• Circumvents pop-up blockers.

Take a look at the demo or download the component right away! Window.JS 1.0 is also included in the latest version of Acid.JS Web 2.0 Component Library.

What’s New in the Latest Version

• Automatic styling of dynamically added form elements in the specified region.
• Just one image sprite per skin and extensive use of CSS3.
• Faster and seamless initialization.
• Optional CSS3 support for IE7 and IE8 via CSS3Pie.
• Internet Explorer 9 ready.
• Selectboxes animations.
• Built on top of jQuery.
• New set of skins.
• Improved client API.
• Support for for the size property of selectboxes (expanded dropdowns).
• Platform-independable – PHP, .NET, JAVA, etc.
• Multiple skins on a single page.
• Additional markup not required – just your form elements.

Check out the demo? And maybe download? Forms.JS 4.0 is also available in the latest version of Acid.JS Web 2.0 Component Library.

ACC.Checker.JS is a free tool designed to evaluate page markup and help you identify accessibility errors. According to the selected options and stringness, ACC.Checker.JS will look for missing alt attrbiutes on <img /> tags, title attributes on anchors and accesskeys. The tool will also check if your readiobuttons or checkboxes are supplied with label tags and if the fieldsets in your forms are described with a legend.

ACC.Checker.JS has two modes of operation – automatic (when page loads) or manual (upon user click action). The manual mode can be used to detect accessibility flaws on markup generated on the client with JavaScript, after AJAX, DOM changes and actually any modifications to the source code after page load.

When evaluation is finished, ACC.Checker.JS displays the report in a convenient Web 2.0 way and provides link with additional information about every accessibility error it has encountered.

List of Detected Common Accessibility Errors

• Missing or empty alt attribute on images.
• Missing or empty title attribute for links and button elements.
• Missing label tags for radio buttons and checkboxes.
• Missing legend tags for fieldsets.
• Missing summary attribute on tables.
• Missing or empty title element on the page.
• Missing or empty accesskey attribute for button elements.
• Obtrusive JavaScript event handlers (onclick, onmouseover, etc) in markup.

View ACC.Checker.JS demo or download it. The tool is also included in the latest version of Acid.JS Web 2.0 Component Library. User’s manual and help is available on this page.

Editor.BB is a fast, fully customizable and skinnable editor for BBCode (Bulletin Board Code) that can be easily integrated as a replacement for the default editor of an existing message board or forum system.

It is platform-independent and does not require any additional markup or sophisticated JavaScript. All you need is a textarea and to set a few properties and skin, then reload the page and leave Editor.BB do its magic.

View demo of Editor.BB or download it straight away. Manual and hel topics are available on this page.

1. Change your current doctype to <!DOCTYPE html>. It is easy to remember, and although it is not associated with a schema, namespace and subset, it does not trigger quirks mode in Internet Explorer and your page will look exactly as it was before with the XHTML DTD.
2. According to the specifications, HTML5 does not require the implicit setting of mime types when you register external style sheets or JavaScript, so you can safely remove type="text/css" from your <script /> and <link /> tags. Be aware that you shouldn’t remove rel="stylesheet", otherwise the browser will not know what type of linked document is dealing with and won’t be able to parse it correctly, i.e. your CSS rules will not be applied.
3. Remove the xmlns="http://www.w3.org/1999/xhtml" attribute from the <html /> tag. As we mentioned already, namespace is not required anymore.
4. If you are using <meta http-equiv="content-language" content="en"/>, you can safely remove it, and add put your language code in a lang attribute directly in the <html /> tag:

<html lang="en-US">

1. HTML5 does not allow stray-end tags for <link /> tags, as it was required in XHTML1.1, so you need to change:

<link rel="stylesheet" src="styles.css"></link>
To:

<link rel="stylesheet" src="styles.css" />

1. You can safely remove the meta charset tag:

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

… And use:

<meta charset="utf-8" />

At this stage your website is already HTML5, but in order to start using the new tags and bring semantics to your code you should enable them in Internet Explorer 6-8.

Enabling HTML5 in Internet Explorer

One of the persistent issues with Internet Explorer is that it cannot style elements it does not recognize. The problem is as early as IE5.5 – although the <abbr /> tag was part of the official specification of HTML, IE5.5 did not recognize it, and thus – did not style it. The solution was to create the element with JavaScript, and then everything was worked. The other issue is that IE collapses unknown tags at parse time. This means that the children of your, let’s say <aside /> tag will actually become children of the parent of <aside />. Fortunately, this can be fixed with the same JavaScript approach. More about it is available on the MSDN official blog, and the solution that is widely accepted and used is called HTML5Shiv and has been created by Remy Sharp.

Start Using HTML5

If you have added HTML5Shiv to your webpage you are good to start using HTML5 elements and replace the semantically void <div /> and <span /> tags with <header />, <footer />, <aside />, etc.

Below is a list of websites that provide detailed information, cheatsheets, sample code and tutorials on HTML5:

• http://html5tutorial.net/
• http://html5gallery.com/
• http://html5doctor.com/
• http://www.w3schools.com/html5/default.asp
• http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets

Happy coding!

Acid.RSS is a complete all-in-one suite for RSS authoring, publishing and syndication for your website. It features seamless and fully localizable AJAX driven admin panel with WYSIWYG editor, item sorting via drag and drop and friendly system messages. And that’s not all…

The public side of the component is fully customizable and comes with 12 cool looking Web 2.0 skins that will virtually fit any design. Despite of its rich functionality, Acid.RSS is extremely fast even with big feed files and is very small in footprint.

Key Features

• Crossbrowser WYSIWYG news editor in the admin.
• Fully AJAX driven.
• Easy installation, setup and customization.
• News items in the admin can be rearranged via drag and drop.
• 12 cool CSS3 skins cool Web 2.0 looks.
• Internet Explorer 9 ready.
• Optional CSS3 styling for Internet Explorer 7-8.
• Fully customizable public page – you choose what to display.
• User defined default number of shown items on the public page.
• Cool animations on the public page and in the admin.
• Friendly system messages and confirmations in the admin panel.
• Fully localizable and easy to use admin panel.
• Small footprint.

Visit the home page for Acid.RSS for detailed information, demo, screenshots and download. The component is included in the latest version of Acid.JS Web 2.0 Component Library as well.

More information on the available licenses is available on this page.

I am happy to announce that the new, fully reworked and reconsidered version of LoadingPanel.JS is already available online and for download and is included in version 6.2 of Acid.JS Web 2.0 Component Library.

What’s new and cool:

• Full CSS3 support for Internet Explorer 6-8.
• Users are now able to set any radius to the borders, and apply really fancy shapes to the loading message box.
• Loading message dropshadow.
• Loading message dropshadow spread.
• Improved performance and crossbrowser compliance.
• Internet Explorer 9 ready.
• Smaller footprint.
• Easier installation, setup and customization.
• More customization options.

Visit the home page for LoadingPanel.JS for demo or download it right away. The full documentation about the setup, customization, client API, troubleshooting and everything else is availabe on this page.

The new website will be updated with the latest changes to the manual anytime a new version of a control is released, so make sure you bookmark it.

Browsers marked with [P] are portable editions and can be used along with other versions. [L] means the latest (as of July 2010) official release.

• Internet Explorer 5.5 via IE tester
• Internet Explorer 6.0 via IE tester
• Internet Explorer 7.0 via IE tester
• Internet Explorer 8.0 [L] or via IE Tester
• Internet Explorer 9.0 Platform Preview [P] or via IE Tester
• Mozilla FireFox 1.x
• Mozilla FireFox 1.5.x
• Mozilla FireFox 2.x 
• Mozilla FireFox 3.x [L]
• Mozilla FireFox 4 Beta [P]
• Opera 8.x
• Opera 9.x [P]
• Opera 10.x [L]
• Google Chrome [L]
• Goolge Chrome Dev [P] via PortableApps
• Apple Safari
• Netscape 9.0.0.6 [L][Officially discontinued in March 2008]
• Netscape 4.x – 9.x [P]

You may also visit http://browsershots.org/ or http://crossbrowsertesting.com/ for detailed online compatibility tests with 50+ websites.

Happy testing!

Take the survey today.

Download the latest version of Acid.JS or take a look what’s new. To stay updated you may also like to subscribe to my blog RSS or Acid.JS Feed.

RibbonBar.XML is a state-of-the-art, skinnable and fully AJAX driven component that is ready for use on any website. What you can you do with a MS Office like ribbon bar in web environment? Whether use it for navigation, associate it with your WYSIWYG editor, display links to your favorite social websites or simply build your entire webpage around it – this depends only on you.

The control has it all – cool looks, comprehensive and easy API, set of 12 skins that will virtually fit any design. And at last, but not least – deploying and configuring it is a matter of minutes.

View demo, skin screenshots and more information about RibbonBar.XML or download it now. Check out what is new in the latest version of Acid.JS Web 2.0 Component Library.

And finally, if you decide to purchase the entire suite including all 11 components with total price of USD 360, the price will be automatically cut into half, and you will be able to get them all of them for USD180.

By purchasing a control you are elligible to free lifetime upgrades whenever a new version is available and to dedicated and adequate support within 24 hours on business days.

Read more about the Web 2.0 Creative Bundle or purchase a single component. If you would like to purchase the entire Acid.JS suite and save USD165, simply go to the Web 2.0 Creative Bundle page, select all components and continue to PayPal.

In brief, the specificity of CSS selectors is a simple calculation of values on the basis of the type of elements that a rule consists of – HTML elements, class names, IDs, attribute selectors ([attr="value"]), pseudo classes (:hover, :link), pseudo elements (:first-letter in CSS2, ::first-letter in CSS3, the difference between the two is the double colon, and was introducedd by W3C in order to clearly distinguish between pseudo-classes and pseudo-elements), inline styles etc. The maths will be explained later in this article.

Below is a simple example of CSS specificity:

div
{
	color: black;
}

div.red
{
	color: red;
}

div.red selector will override the more common setting of div, because it is more ”specific”. According to W3C, specificity is calculated by counting various components of the CSS and expressing them in a four letter form (A, B, C, D):

Element, Pseudo Element: D = 1 – (0, 0, 0, 1)

Class, Pseudo Class, Attribute: C = 1 – (0, 0, 1, 0)

ID: C = 1 – (0, 1, 0, 0)

Inline CSS: A = 1 – (1, 0, 0, 0)

The example above clearly explains the concept of selectors weight, and div.red is more specific than div, because:

div
{
 /* specificity = 1 (0, 0, 0, 1),
 because the selector consists of 1 element */
 color: black;
}

div.red
{
 /* specificity = 11 (0, 0, 1, 1),
 because the selector consists of 1 element + class name */
 color: red;
}

A more complex and not so obvious example may be:

div p.info
{
 /* specificity = 12  - (0, 0, 1, 2),
 because the selector consists of two html elements + class name */
 font-size: 14px;
}

#content p
{
 /* specificity = 101 (0, 1, 0, 1),
 because the selector consists of 1 ID + 1 element */
 font-size: 12px;
}

According to the specifications, an ID selector has a specificity of 100, and in the example above the second selector will take precedence despite its position in the stylesheet, because 101 > 12.

Finally, a word about inline CSS and the magical !important flag:

<div style="color: lime">lorem ipsum...</div>

Adding CSS inline by using the style attribute directly in the HTML tag will override everything that has been set so far (unless there are no property values forced with !important) because the specificity of the inline CSS is 1000. !important should be used sparingly and only as a last resort, because its excessive usage will imminently end up to a point where we are unable to set any style, even with JavaScript because:

element.style.color = "pink !important";

… is not part of the DOM specification, and if we try to override:

#div-1
{
 color: red !important;
}

by

document.getElementById("div-1").style.color = "green !important";

… this will throw an exception in Internet Explorer (“Invalid property value.”). Opera and WebKit will actually turn the color to green, while FireFox will not produce any errors but will not apply the new color value either. If we try to override the value without the !important flag, this will not have any effect because red has been already hardcoded in the CSS.

Possible solutions if you are stuck in the above:

document.getElementById('div-1').setAttribute('style','color:green !important');
document.getElementById('div-1').setAttribute('class','sec');
.sec {color:green !important}

The jQuery addClass method.

Internet Explorer 6

* html .elementOrClassName
{
	property: value;
}
.elementOrClassName
{
	_property: value;
}

Internet Explorer 7

* + html .elementOrClassName
{
	property: value;
}

Internet Explorer 8 in Standards Compliance Mode

.elementOrClassName
{
	property /*\**/: value\9;

}

\9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

All versions of Internet Explorer

.elementOrClassName
{
	property: value\9;
}

\9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

Turn on Image Scaling and Resampling in Internet Explorer

Funny enough, but unlike other browsers, Internet Explorer comes with bicubic interpolation mode turned off, and this is why sometimes images look frayed without an obvious reason. To fix this, you can use the following:

img
{
	-ms-interpolation-mode: bicubic;
}

Turn on CSS background-image caching in IE6

To avoid flicker of elements with background images when hovered, you may use the Microsoft-proprietary BackgroundImageCache Exec Command, for example:

$(document).ready(function()
{
 if(window.attachEvent)
 {
  document.execCommand("BackgroundImageCache", false, true);
 }
});

Emulate border-color: transparent in Internet Explorer 6

IE6 does not support border-color: transparent, here’s how this can be emulated. First you need to set some exotic border-color value (named or hex), then hide it with the chroma CSS filter of Internet Explorer. Of course you need to use the star hack for IE6:

* html .elementOrClassName
{
	border-color: pink;
	filter: chroma(color=pink);
}

Goolge Chrome and Apple Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	.elementOrClassName
	{
		property: value;
	}
}

Mozilla FireFox

@-moz-document url-prefix()
{
 .elementOrClassName
 {
  property: value;
 }
}

Tantek Celik’s Box Model Hack for Internet Explorer 5

Rarely used today, but still useful if you care about the wrong box model of IE5.

Opera 7x – 9x

This one should be used very carefully, as it targets older versions of Opera (circa 2005-2007) with CSS properties that already implemented in WebKit browsers.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body .elementOrClassName
	{
		property: value;
	}
}

Proprietary CSS extensions

Below is a list of vendor-specific CSS extensions, which are valid CSS according to W3C.

Opera (prefixed with -o-)

Mozilla FireFox (prefixed with -moz-)

Internet Explorer 8 and greater (prefixed with -ms-)

WebKit Browsers – Google Chrome, Apple Safari, etc (prefixed with -webkit- or -khtml-)

2. Use shorthand properties, instead of separately defining each property for font, margin, padding, border, background, etc: 

element
{
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
	font-family: Arial, Verdana, Sans-serif;
	line-height: 22px;
}

… Is the same as: 

element
{
	font: normal italic 11px/22px Arial, Verdana, Sans-serif;
}

3. Don’t apply property values that are native to the element, for example: 

h1
{
	font-weight: bold;
}

4. Use CSS sprites to reduce the number of server requests. 

5. If you are using CSS reset, it is needless to reset border, margin or padding on elements that do not have such by default, for example: 

div, span
{
	padding: 0;
	margin: 0;
}

6. Learn CSS specificity and make full use of it. Writing CSS with cascade in mind will both reduce your stylesheets and markup. 

7. Crunch your stylesheets on the server or manually. This can decrease their size up to 30-40% or even more depending on how the original stylesheet has been organized. 

8. Arguable: Remove the semi-column at the end of the last property value of the selector. This does not have negative implications on any browser, but spoils the normal flow of the code. 

9. Arguable: Do not use single or double quotes when specifying URLs for background, @import or @font-face. According to some, using quotes for specifying URLs may trigger issues with IE. 

10. If your website utilizes a couple of stylesheets, merge them before sending to the client in order to reduce server requests. If you cannot merge them, deploy them on the page with a single .css file that registers the rest of stylesheets via the @import url directive. 

11. If a property value is 0 you do not need to specify unit, as null is null in any language and measurement system: 

padding: 0; is the same as padding: 0px;

12. Optimize hex color values when possible, for example: 

#000 is the same as #000000
#369 is the same as #336699
red is the same as #ff0000

… But also have in mind that: 

#cf is not the same as #cfcfcf

13. Do not use element types for class and ID selectors, for example: 

div#mydiv is the same as #mydiv
div.myclass is the same as .myclass

14. Do not redeclare inherited values. 

15. Use descendant selectors rather than specifying classes for the children. 

16. Combine property values, for example: 

element
{
	padding: 10px 10px 10px 10px; /* top right bottom left */
}

… Is the same as: 

element
{
	padding: 10px;
}

If horizontal and vertical values differ, like: 

element
{
	padding: 4px 8px 4px 8px;
}

… You can couple them like that: 

element
{
	padding: 4px 8px; /* top|bottom - left|right */
}

If left and right values are the same, but top and bottom differ: 

element
{
	padding: 4px 6px 8px 6px;
}

… You can optimize the selector even further like: 

element
{
	4px 6px 8px; /* top left|right bottom */
}

17. Don’t use images for elements that can be styled with pure CSS. 

18. If you comment your code, keep comments short and up to the point. Don’t comment what is obvious. 

19. If an element (such as <td /> or <option />) normally resides in the context of certain parent (such as <table /> or <select />) you can save a couple of bytes if you change your selector from:

table tr td
{
 /* properties */
}

… To simply:

td
{
 /* properties */
}

12. Do not evaluate JavaScript expressions in CSS a lá IE style, e.g:

element
{
 width: expression(document.documentElement.offsetWith > 600 ? "600px" : "auto" ); /* This may stall or even crash the browser. */
}

13. Create your own CSS reset and add only elements that you are actually using on the website instead of all possible tags.

14. If you don’t care about IE6, use the CSS3 attribute selectors, for example:

input[type="text"]
{
 color: green;
}
input[type="password"]
{
 color: red;
}

15. Always register external stylesheets or add the <style /> tag in the <head /> section of the page.

16. Avoid using inline styles.

17. If you have version-specific styles for IE, use conditional comments to load these as external stylesheets instead of using CSS hacks.

18. Refrain from using the Microsoft proprietary CSS filters unless this is really needed. These are tightly connected with Direct X and users with older machines, OS or video cards may have serious problems when viewing pages with IE.

1. All versions of IE prior to 8 trigger quirks mode despite of the DTD you are using if the XML prolog is added above it, so add it *:

<?xml?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Open IE Deveoper Toolbar and switch the rendering engine from IE8 to IE7 in order to trigger quirks mode via XML prolog.

3. Now your IE8 will behave exactly like IE6 with all its quirky stuff and you are ready to start fighting the hell out of it.

* Instead of adding the XML prolog, you can also switch the document mode from IE8 to Quirks Mode using IE Developer Toolbar.

A minor update of AJAX Hotel Reservation Form (5.0.1) has just been released. If you have downloaded the latest version of the entire Acid.JS Web 2.0 Component Library, you do not need to update, however if you have downloaded just AJAX Hotel Reservation Form 5.0, released a couple of days ago, it is crucial that you update your software.

Read more about the latest version on this page or try the demo here.

I am happy to announce that the new version of AJAX Hotel Reservation Form has been released and is included in the latest version of Acid.JS Web 2.0 Component Library.

What is HotelReservationForm.AJAX?

HotelReservationForm.AJAX is a full featured AJAX solution for websites that provide online room reservations. It is elegant, skinnable, highly customizable, localizable, crossbrowser and ultra fast. The installation and the configuration of the script is easy, and your form can be up and running on your website within minutes.

What’s New in the Latest Version?

• Seamless PayPal integration
• New wizard-like step-by-step interface
• Improved and more reliable administration panel with tabbed interface
• Easier setup of the script – it may be up and running in a couple of minutes
• Tabs for New, Confirmed, Reservations Archive and Recycle Bin in the administration panel
• Fully localizable administration panel
• Improved User Experience of administration panel
• User-friendly system messages in the administration panel
• Fully AJAX-driven administration panel
• Cool Web 2.0 animations in the administration panel
• New PayPal link generation routine
• Statistics panel in the admin (Number of new, confirmed, archived and deleted reservations)
• New Mac skin for the public page

Screenshots of the New Admin Panel

View demo and further information about AJAX Hotel Reservation Form or download it now.

There is an update for the Mac skin of Forms.JS available for download. If you are using VotingPoll.AJAX, ContactForm.JS or TourDates.AJAX, this update is for you as well. Click here to get it.

This update is not included in Acid.JS yet, but it will be in one of the upcoming updates.

Say goodbye to the boring default browser dialog boxes you are using on your website or online applications, here is Dialogs.JS!

The component comes with custom alert, confirm and prompt boxes, a couple of handy JavaScript methods that emulate the behavior of the “real” browser dialogs, really small footprint and 12 skins that will fit virtually any design. You get lightbox-style modal overlay, cool buttons, keyboard navigation (Enter and ESC keys), rounded corners input of the prompt… Everything so Web 2.0 and easy to use!

What’s new in the latest version:

• Easy on-page setup instead of external .xml configuration file.
• Improved rendering speed and smaller footprint.
• User-defined selection of default focused button.
• Fully customizable fade animation of the modal background.
• New customization options.
• Improved crossbrowser compliance.
• Custom exception and error handling for easier debugging and troubleshooting.

View more info and demo of Dialogs.JS or download it here.