Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to make CSS3 work in Internet Explorer

The article is oriented towards the working of CSS3 in Internet Explorer.

Let us see with the help of this article whether CSS3 can be performed in Internet Explorer without the help of complex programming languages such as JavaScript. We will make use the shadowed text examples in this tutorial to solve the purpose.

We can come up with lot of shadows that can be blurred or rather not blurred shadows and that too for a single block of text. The only thing that needs to be taken care of is that we would need to make the CSS selectors set. This needs to be done within the JavaScript file. This would make the code to be written in a very easy manner and you would see that it will be utmost easy to re-factor it. This will thereby turn into a plug-in for the CSS3 library class.

All that we need to do now is to incorporate some of the important <script> tags within the head and this would make the text shadow built in CSS3 work in Internet Explorer very smoothly. Assuming that we are seeing the web page in Internet Explorer, below are the attributes that would need to be followed in order to make the page visible properly and clearly in Internet Explorer.

Below lists the attribute of different sort of text shadow build in CSS and to be executed in internet Explorer:

Simple
Simple 2px 0 #E51919
Blurred Blurred 3px #B24C4C
Etched Etched 1px white
Flaming Flaming 0px white, -5px #FFFF33,-10px #FFDD33, -15px #FF8800, -25px #FF2200
Neon Neon 1px #ffffff, 2px #ffffff,3px #ffffff, 4px #ff00de,7px#ff00de,8px #ff00de,10px #ff00de,15px #ff00de;
Unfocused Unfocused 3px #fff
Glowing Glowing 60px yellow
Embossed  Embossed -1px white, #333333
Pillow Pillow 1px white, -1px #444
Fake 3D Fake 3D 1px rgba(255,128,0,.7), 2px rgba(255,128,0,.7), 3px rgba(255,128,0,.7), 4px rgba(255,128,0,.7),5px rgba(255,128,0,.7)

The point to note there is that the blur example that we have shown above will not be able to display properly or correctly in some version of Internet Explorer that includes IE7 and Ie8. The reason behind the same is the inability of the transparent colour support.

Let us go through some of the excellent examples that back the examples that we have displayed above.

Some of these examples include text shadowing, CSS3 making use of Photoshop etc.

Below lists the code that needs to be included as part of the document header for which you need to do a shadow on the text.

Listing 1: Code included as a part of document header

<script type=”text/css”src=”/path/to/EventAssist.js”>
</script>
<script type="text/css" src="/path/to/shadow-text.js">
</script>
<script type="text/css" src="/path/to/jQuery.js">
</script>
<script type="text/css" src="/path/to/cssQuery.js">
</script>

Now with the above code, it should definitely work properly in internet Explorer. With the help of the HTML5, the type="text/css" attributes can be removed.

Let us see the limitations or rather the points that we need to take care of while making use of the text-shadow in internet Explorer.

As we have seen in the above examples, there is a slight difference in the appearance of the shadowed text that is blurred. This is due to the reason that we have different sort of logical performed in Internet Explorer Filters when we compare the same with the CSS3 shadowed texts.This becomes very obvious in the shadowed texts that are more blurred in the same text. We may find these being accepted by majority of the applications. For developers that would like to make use of the pixel-bitch, we should be aware of the difference.

If we go ahead and create a shadowed text that is larger than 90px, this can lead to Internet Explorer engine performance to slow down to a good extent at the time of scrolling the text down.

At times you will see the Internet Explorer truncating the shadows at the time when height of the line is too much small.

Few alphabets that you are using and the alphabets that are descending may also get truncated in case the height of the line is not set to be larger. This needs to be set to a larger font than the actual size of the font.

Talking about the Internet Explorer 7version, the elements that are being displayed over the shadowed text and having a height of the line property that is measured in em units, this may affect the shadow of the text in Internet Explorer version 7 as well as 8. In case we see any issue around this, then the shadow of the text might get displace a pixel away from its normal position where it was expected to be.

As it can be clearly point out from the above discussion that the issue is much larger than we see. The biggest issue is that when we don’t have any sort of blur radius in the shadowed text, it will appear displaced from its normal or rather the regular position. We need to get the workaround for this problem and one such way is to do with the rounding errors at the time when we have Internet Explorer converting the em units into the required pixels.

Now assume that we have good amount of em units in the web page we are building, then we might need to take into consideration making use of the solution that will not be based on JavaScript. This is done particularly when we are using a shadowed text that would be not blurred and would be a single text-shadow.

At times you will see the when you are making the shadows of the text to appear in a proper manner making use of ClearType, you may need to take the help of override property of CSS3. This needs to be done on the HTML that is being applied on the text-shadow.The property is normally made use of by the Internet Explorer however it is required for this property to set the value of the text background and also there will be times when you would need to make the outline of the text. Also the need would be to make the shadows as solid as possible.Let us take the example of the below figure with the style text attributes shown in the below cod where in we have used the CSS. This is done so as to come up with a shadow on the CSS3 text:

CSS text-shadow

Figure 1: CSS text-shadow

Listing 2: text-shadow

-cssQuery-override: #77777;
text-shadow: 
	-4px 0px #0f1128,
	-8px 4px rgb(50, 250),
	-10px 4px rgba(50,250, 0.5),
	-8px 4px rgba(50, 250, 0.7),
	-8px 4px rgba(50, 250, 0.5);

The reason why we have used here#77777 is that it gives us with a greyscale colour. This colour usually falls in between the sharpness of the white text and the blue one. If we would have set the black colour then the text’s dark shadow of the text would seem to be blocked. This is shown below with the help of the code.

Listing 3: Using Greyscale Colour

-cssQuery-override: #000000
-cssQuery-override: #77777
Scale 200%		
Scale 500%	

The value that you will set for the above text will have a dependency on the shadow of the text you are making use of. This all depend on the interest of the developer and how much shadow you want to elongate on, accordingly the value of the text can be set on.

The script that we have displayed above gives a good amount of opportunity in order to style the text in different patterns and work them in Internet Explorer browser. Though we need to do a good amount of work so that the script can be made better and with maximum amount of defects resolved, but still this opens the gate for Internet Explorer compatibility.

There are some more changes that can be done, one of them comprises of the selection of the library for the css selector. We need to re-factor the css in order to make it use by the other selectors rather than just cssQuery. This is at present bundles with it and will jQuery as well. This will help the developers so as to minimise the amount of libraries in the documents. Also this will help in bringing down the load time to a good number.

The other modification that needs to be done is the css modularity. The very first thing that is required is the availability of own plug-ins. This is required so as to support the properties of CSS that are not currently supported by Internet Explorer browser.

The advantage of this modularity will be that the framework will let the developers to incorporate the properties of the CSS that is required to be used. Example includes the assumption that in case a developer that is not in a habit to make use of CSS transforms, this means that the code has not been included.

Conclusion

The article focussed on the working of CSS3 in Internet Explorer. We also saw how shadows can be included as a part of text in a web page. Hope this was useful.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login