Month: July 2010

Acid.JS Components Help and Manuals are now Available Online

I am happy to announce that the installation and  customization instructions, troubleshooting tips, API references and user / developer manuals of all Acid.JS Web 2.0 components are now available online at http://help.acidjs.wemakesites.net/.

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.

Advertisements

Portable Editions of Legacy, Current and Upcoming Popular Browsers

If you are careful of how your new website looks on legacy, current or upcoming browsers, below is a list containing download links to past, current and upcoming versions of several popular browsing platforms.

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.

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

Happy testing!

Win a Free Component From Acid.JS

Would you like to participate in the new Acid.JS survey and maybe win a free component of your choice? All you have to do is to visit this page and answer a few questions. It won’t take more than three minutes and the results will be of great importance for the further development of Acid.JS Web 2.0 Component Library. The winner will be contacted via email during the week after August 01, 2010.

Take the survey today.

Version 6.0 of Acid.JS Web 2.0 Component Library is Out

I am happy to announce that the vew major version of Acid.JS Web 2.0 Component Library has been released with important updates – performance improvements, skin tweaks, addressed and fixed bugs, etc. of all included controls. There’s also a brand-new one – the state-of-the art AJAX ribbon bar.

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 AJAX Web Component

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.

Summer Discounts on Scripts and Components from Acid.JS

Are you planning to purchase more than one component from Acid.JS? If you choose to buy three or more you can save roughly 50% on each component if you order your personalized Creative Web 2.0 Bundle. And more – with each purchase (including the Creative Web 2.0 Bundle) you will receive one free component as usual.

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.

A Brief Guide to CSS Specificity

Specificity, also known as ”selectors weight”, is the very emanation of the ”cascadingness” of CSS. A better understanding of this concept will help avoid frustration and solve problems related to inability to override property values without using the magic of the !important flag.

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.