Month: November 2008

Setting Opacity and Other Filters in Internet Explorer 8

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

It was expected that Internet Explorer 8 will support the standard “opacity” property of CSS, but it seems that its developers have decided not drop the support for filters yet, which is not that bad, though, as it still lacks support for <canvas> scripting.

However, there is a great difference between the filter support in IE8 and its previous versions. The CSS filters support in Internet Explorer 5.5 – 7.0 is added as follows:

element
{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

or

element
{
filter: alpha(opacity=80);
}

In Internet Explorer 8, the approach is already (finally!) vendor-specific (a lá -moz- for FireFox, -webkit- for Safari and -o- for Opera) and the value is a string in quotes:

element
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

The entire article on the new Microsoft vendor extensions can be found on the official Internet Explorer blog.

More Cool Stuff

Advertisements

The 32 External CSS Files Limitation of Internet Explorer and More

Recently, a client of mine complained that certain css files included in his webpage do not load in Internet Explorer. I took a look at his code and noticed that he had tried to register more than 40 external stylesheets in the <head>...</head> section of his webpage, which reminded me of a less known limitation in Internet Explorer. Some people call it a bug, but I prefer calling it a rational limitation, and here it goes:

The max number of external CSS files that can be loaded in a single webpage via the <link /> tag, or included via the @import url directive is 32. Any css file beyond this limit will not be parsed.

And yet another limitation, which is even less known – the max filesize of an external stylesheet that can be loaded by Internet Explorer should not exceed 288Kb.

These are not fixed in Internet Explorer 7 and 8 beta, and this gives me a reason to believe that IE developers are well aware of this, and such limitation is not a bug at all, but as I mentioned before – a rational limitation, as things in web development should be within reasonable limits.

So, please, please, avoid including that many files and keep the size of your stylesheets within a reasonable and maintainable length and size. The “cascading” in Cascading Style Sheets delivers all that is necessary to write reusable, scalable, maintanable and beautiful code.

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library

Acid.JS 2.4 is Out – With 4 New Additions

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file.

To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

SpinBox.JS 2.1 Released – With Keyboard Navigation and 3 New Modes

Version 2.1 of SpinBox.JS has arrived with:

  • keyboard up and down arrows navigation *
  •  four rendering modes – normal, months, monthsRomanUpper and monthsRomanLower all of which render localizable state-of-the-art month spinboxes at a killer speed
  • min and max value of the spinboxes

And yet more:

  • full browser support – Internet Explorer 6/7/8, Mozilla FireFox, Opera, Safari, Google Chrome, Netscape Navigator, K-Meleon
  • improved rendering and skinning mechanism with 10 preset skins ** – Acid, AcidMachine, Blue, Default, Green, Mac, Office2003, Office2007, Red and WeMakeSites
  • localization with 10 preset languages *** – Bulgarian (bg-BG), German (de-DE), English (en-US), Spanish (es-ES), French (fr-FR), Greek (gr-GR), Italian (it-IT), Romanian (ro-RO), Russian (ru-RU) and Turkish (tr-TR)

SpinBox.JS is an unobtrusive and almost codeless way to turn the ordinary input text boxes into cool looking, multifunctional and skinnable spin boxes.

All you have to do is to create a normal text input on the page, give it an ID, edit a few arguments, set a skin in the initialization script and hit F5 to view the amazing transformation.

On this demo page you will learn how to do this. Installing, configuring and running the script is a matter of minutes.

SpinBox.JS comes with a set of 10 predefined skins – Acid, AcidMachine, Blue, Default, Green, Mac, Office2003, Office2007, Red and WeMakeSites. Applying skins is done automatically after setting a skin name in the declaration of the spinbox, and you will not have to add manually style or link tags. SpinBox.JS supports multiple skins on a single page, and you may use a different skin for each SpinBox on the page, as shown below. Creating a custom skins does not require expert skills in CSS programming, and basically you have to change a couple of CSS properties in the skin files.

SpinBox.JS supports all properties that can be applied to a normal text input element – enabled, disabled, name, alt, title, id and readonly. You may also separately enable or disable the increase or decrease buttons.

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

Download SpinBox.JS.

View Online Demo of SpinBox.JS.
Visit the Webpage of SpinBox.JS.

Acid.JS 2.3 – The AJAX Tools and Widgets Library is Out

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file.

Download the latest version of Acid.JS

SpinBox.JS 1.1 Has Been Released

There is a new version of SpinBox.JS with support for Google Chrome and Safari, improved rendering and performance and a brand new killer feature. Take a look at it here.

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.