Internet Explorer | Web development blog, news and tutorials

Home > Tags > Internet Explorer

Page 1

Legacy Browser Compatibility for HTML5

HTML5 Oct 11, 2012 3 comments

As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you’ll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and 8. We have had a ray of hope with the shunning of Internet Explorer 6 as it has now begun to join Netscape in the graveyard of browsers past.

I understand, getting Internet Explorer to comply can be infuriating at times. And I’ve had to take a stance against developing in Internet Explorer 6, as we all should, but there is help and I hope this article points you where you need to go. One of the first steps when putting the project together is figuring out what browsers you need to develop for. If you ask the client, 9 times out of 10 they’ll say “All the browsers!”. You’ll need to take a step back and examine who their target audience is. Are most of their users tech savvy and use modern browsers like chrome? OR will their users be accessing the site, often at work, behind some sort of firewall system, and forced to endure a browser like Internet Explorer 7 or 8 due to corporate security reasons?

Chrome, while great, at times can make us see our sites through rose colored glasses. It understands HTML5 tags, has little to no compliance issues, and makes everything right the first time. A lot like a warm development security blanket. Depending on how you built your site, particularly in this case dealing with WordPress, there is a good chance that everything will not be as kosher when you view it in Internet Explorer 7/8. That doesn’t mean you’ll have to toil day and night trying to sort out all of the compatibility issues, trust me I’ve been there and done that. Then there is that eureka moment where it all starts to come together.

I will admit it did take some honest feedback and a hard look at how my code was structured and a fair amount of research on a previous project to get it to even look half way decent in Internet Explorer. Instead of sweating the details over positioning and floats, IE likes elements that stack well together. In this case it was a background image in a featured area. I was trying to wrap everything under one .container class when I should have created 3 different stackable divs with a width of 100% and margins left and right to auto. That being said, if your audience will be viewing the site in IE 8 or 7 it might be a good idea to tackle building for those browsers first, then branching out into Firefox, Safari, and Chrome.

In this article, I will be showing you how to make your conditional statements, transparencies, and fonts renderings help make Internet Explorer 7/8 more compliant browsers. The use of conditional tags to target specific browser cannot be stressed enough in this article. Much like media queries, the conditional tags that can be found in your <head> section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:

/*This is where your HTML tags for modern browsers would go*/ <style type="text/css"> #browserWarning { display: none; } </style> ...

Robertoblake says: I disagree with the premise of Designing around internet explorer 6-8 at this point. For one thing most of those older browsers...

Carrying Out Tasks in the Background with HTML5 Web Workers

HTML5 Jun 25, 2012 3 comments

HTML5 offers a range of improved options for executing JavaScript functions. With Web Workers, you can execute scripts in the background, so that intensive processing need not interfere with the main functionality of your page. Of course this is most useful for complex tasks, but in this tutorial we will demonstrate the basics of using Web Workers with your pages using a simple example.

At the moment the most recent versions of all major browsers, except Internet Explorer, support Web Workers – you can’t rely on them just yet.

Create a Page

Let’s get stuck in and create an HTML5 page using the following outline:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have our script section ready for the JavaScript code and will also create a separate script in which the Web Worker will run. Add the following elements to the body section of your page:

<input type="button" value="GO!" onclick="startWorking()"/> <input type="button" value="Stop" onclick="stopWorking()"/> <p>Here is your random word: <span id="random"></span></p>

Our Web Worker script is going to choose random words to display to the user at specified intervals. Notice that the two buttons for starting and stopping the Web Worker call different functions.

Start the Work

In the script section of your page head, add the outline of the function to start the Web Worker, as specified in your start button click listener:

//Web Worker variable var myWorker; //function to start the Web Worker function startWorking() { //function content here }

We declare the Worker variable outside the function so that we can refer to it in the stop function as well, which we will do later. Inside the “startWorking” function, first add the following checks to determine whether we have browser support:

//check for browser support if(typeof(Worker)!=="undefined") { //Web Worker is supported - call the script } else document.getElementById("random").innerHTML = "Oops! Your browser doesn't support this.";

We will add code inside the “if” statement to call the Web Worker script, with the “else” statement executing if support is not present, in which case we simply output an error message to the user. In the “if” statement block, add the following to instantiate the Web Worker:

//instantiate the Web Worker object if(typeof(myWorker)=="undefined") myWorker...

Dominik Werner says: Hum, I'm still searching for a way to prevent my js/html5-based experimental metronome from losing its beat when changing tabs....

Allowing Users to Resize Web Page Elements with CSS3

CSS Jun 13, 2012 3 comments

With CSS3 you can give your users a greater level of control over how they view your pages without having to employ complex JavaScript functions. Using the resize property in CSS3, you can set elements to be automatically resizable. These elements appear within the browser with a subtle indicator at the bottom right corner letting users know that the element is resizable. On clicking and dragging the corner, the user can resize your element.

The resize property in itself is not complex, but can have complex effects on your other elements and on the content of the element being dragged. In this tutorial we will run through the basics of using the CSS3 resize property, looking at how it functions in a page with multiple elements and using it for an image. CSS3 resizing does not have full browser support yet, but functions with varying degrees of success in recent versions of Firefox, Safari and Chrome. Internet Explorer and Opera are not yet supporting the property.

Create a Web Page

Since we are using CSS3 properties, let’s go ahead and create an HTML5 page using the following structure:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

We will place HTML elements in the body and a style section in the head.

Add Some Elements

Let’s start with a few simple elements, adding the following markup to your page body section:

<div class="textContent"> <div>CONTENT A</div> <div>CONTENT B</div> <div>CONTENT C</div> <div>CONTENT D</div> <div>CONTENT E</div> <div>CONTENT F</div> </div>

As you can see these elements contain some simple text indicating which is which, so that you can get a good sense of what the browser does when you resize. The container element is just there so that we can identify the group of elements within our CSS code using the class attribute.

Add Some Style

Style the “div” elements with the following declarations in your head CSS code:

.textContent div { background-color:#dedede; float:left; margin:10px; padding:10px; resize:both; overflow:auto; }

We set a variety of default styling properties in addition to the resize property – you must set the overflow property to a value other than “visible” for resizing to function correctly. The other properties are just there to make the demonstration clearer.

Open your page in a browser and experiment with clicking and dragging to resize the elements. Notice what happens when you resize an element so that it prevents the other elements from fitting alongside it horizontally. The float property will determine how the browser rearranges the elements to fit on the page.

Options

In certain browsers, the default behavior is to prevent you from resizing the elements so that they become smaller, but in others you can resize larger and smaller. The support level for the property will of course change in the near future.

Notice that in the code above, we used the “both” value, meaning that the element can be resized by the user both horizontally and vertically. You can optionally choose to specify “horizontal” or “vertical” if you only want the element to resize along one axis. This can be helpful when attempting to strike a balance between allowing the user to customize the appearance of your page and still remaining faithful to your original visual design.

Resizing Images

Strictly speaking, the resize property is not really designed to be used with images. However, using a combination of CSS properties we can begin to see how this level of customization may develop. Add an image inside a “div” element in your page body as follows:

In this case we are assuming the image is 400 pixels wide and 300 pixels in height. You can of course alter the file-name to point to an image of your own. Now style the containing element for the image in your CSS area:

.imgContent { width:400px; height:300px; resize:both; overflow:hidden; background-color:#ffff99; padding:5px; }

We set the dimensions of the containing “div” to match the dimensions of the image. By setting the resize property, overflow to hidden and adding a small padded area, the user will be able to resize the containing div element. Now we style the image:

img { width:100%; height:100%; }

Using relative size values for the image means that its size will stretch and scale to fill the specified percentage of the parent element. The parent element can be resized, so the image will automatically resize along with it. Test your page in a browser to see the effect. Adding a small amount of padding on the parent element makes dragging the element easier.

Conclusion

CSS3 resizing is one of the many techniques that is not being widely used yet, mainly due to a poor level of support. Although it’s early days to start relying on this function, it does give us an exciting glimpse into the level of customization future Web users will enjoy while browsing.

See what the finished product looks like here.

...

Godonholiday says: Thats a great tip, thanks. I know you mention support being an issue in the conclusion, but it would be nice to have a little...

Allowing Users to Edit Text Content with HTML5

HTML5 Jun 6, 2012 14 comments

With HTML5, you can set any of your Web page text elements to be editable by users. Using the “contenteditable” attribute, you can instruct the browser to allow users to insert, delete and alter the text your page contains as they view it. There are many possible uses for this technique, such as allowing users to customize the way your pages appear to them each time they visit. In this tutorial, we will run through the basics of letting users edit your text content, including saving their edits for future reference using the HTML5 storage model.

Create a Page

You can add the techniques in this tutorial to any existing HTML5 pages you have. Otherwise, create your HTML5 Web page using the following structure:

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> </head> <body> </body> </html>

You don’t actually need a script section to make elements editable but we are going to demonstrate storing the user edits, for which need some JavaScript.

Add an Editable Element

Add an editable element in the body section of your page using the following markup:

<div id="edit" contenteditable="true"> Here is the element's original content </div>

The “contenteditable” attribute is all the browser needs to know that users should be able to alter the content of the element. The ID attribute is for our JavaScript function. If you save and open your page in a browser now you will see that you can delete and edit the text content. Most browsers display a dotted border around an editable element while it is being edited.

Save User Edits

Let’s assume that we are making the element editable to allow users to dictate what text should appear within it when they next visit the page. Add a button in the body of your page, calling a JavaScript function to save whatever the element contains after user edits:

Once the user has edited the element, they can press this button to save their changes. You could alternatively carry out the saving automatically, detecting key presses and saving whenever the user edit occurs. Let’s also include an element to provide confirmation that the changes have been saved. On initially viewing the page, this element will display instructions:

<div id="update"> - Edit the text and click to save for next time</div>

When the edits are saved to HTML5 storage, we will update this text to let the user know.

In the script section in your page head, add the following function to process saving the user edits:

function saveEdits() { //get the editable element var editElem = document.getElementById("edit"); //get the edited element content var userVersion = editElem.innerHTML; //save the content to local storage localStorage.userEdits = userVersion; //write a confirmation to the user document.getElementById("update").innerHTML="Edits saved!"; }

This code retrieves the element content before saving it to the Local Storage object. The Local Storage object stores data that remains accessible on subsequent user visits. This will allow us to retrieve the information again if the user re-visits the page in future. If you only want to save the user edits for the current session, use the Session Storage object instead. Finally, the function writes a confirmation message to the page, to let the user know that their edits have been saved.

Now we need to handle the situation in which the user has visited before and has edits saved. Extend your page opening body tag as follows:

<body onload="checkEdits()">...

Travis Michael Heller says: I am trying to get store multiple values from different inputs with no successs.I have tried this many times and i just get more...

Hot deals

See all deals →

Create an HTML5 Browser Game from Scratch - only $19!

Beautiful Solomon Font Family (12 fonts) - only $9!

WordPress Shortcodes Plugin + 3 Premium WP Themes - only $19!

Hiruko: Japanese Inspired Font Family - only $9!

Rotating Web Page Elements Using The CSS3 Rotate Transform

CSS May 14, 2012 one comment

With CSS3, you can rotate Web page elements by a specified number of degrees, clockwise or anti-clockwise. With a small amount of HTML and JavaScript code in conjunction with CSS declarations, you can also animate these rotations. In this tutorial we will work through the process of rotating an image element by varying amounts as well as animating the function, initiating the rotation on user interaction with the page.

Create a Page

Save a new HTML file in your chosen editor, using the following outline code for HTML5:

<!DOCTYPE HTML> <html> <head> <style type="text/css"> /*style declarations*/ </style> </head> <body>  </body> </html>

We will add the page elements in the body and the rotation style declarations within the dedicated CSS section in the page head.

Add Images to the Page

Add one or more images to your page. To demonstrate multiple amounts of rotation in CSS3, we can include the same image element multiple times, as follows:

Alter the image source attributes to suit an image file of your choice. The first image will be displayed as normal, with the remaining three displaying varying degrees of rotation. Notice that each image to be rotated has a unique ID attribute, so that the CSS code can identify it in order to apply the transform effect.

Style the Elements

Within your style section, add the following default styling declarations:

img { float:left; margin:50px; } .pics { clear:both; }

This styling will apply to all of the relevant page elements independently of any transform effects. Depending on the dimensions of your own image elements, you may need to alter the margin declaration so that the full image is still visible within the page after rotation.

Rotate the Image Elements

Add the following declaration to apply a rotate transform to the image element in your page with “rotate30″ as its ID:

/*rotate 30 degrees*/ #rotate30 { /*General*/ transform: rotate(30deg); /*Firefox*/ -moz-transform: rotate(30deg); /*Microsoft Internet Explorer*/ -ms-transform: rotate(30deg); /*Chrome, Safari*/ -webkit-transform: rotate(30deg); /*Opera*/ -o-transform: rotate(30deg);...

Daniel Thompson says: This is fantastic! And exactly something I've been searching for. I do have a question though, how would you allow it to be...

Transforming Elements in 3D Using CSS3

CSS Apr 30, 2012 one comment

With CSS3, you can apply animated effects on Web page elements in 3D as well as 2D.

In this tutorial we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page.

Create a Page with an Image Element

Create a basic page with a CSS section in the head area, as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> /*CSS here*/ </style> </head> <body>  </body> </html>

We will use an image to demonstrate the effects. Add the following code to the body section of your page, altering the source attribute to use your own image file:

The click listener JavaScript function is purely for demonstration, so that you can see the effect as it happens. In your own pages you will of course need to incorporate the transform effects with any other functionality you have in place.

Style the Page

Add the following CSS code in the style section to apply default styling to your image element:

img { margin:50px; /*general version*/ transition: 2s; /*browser specific versions*/ -moz-transition: 2s; -webkit-transition: 2s; }

We apply a margin of 50px to accommodate the image as it rotates, but depending on the size of your own image, you may wish to alter this. When the user clicks the image, the browser will apply the 3D transform. To make this happen gradually so that you can see the effect unfold, we apply these transition properties making it last two seconds.

Notice the prefixes used in addition to the standard transition syntax – you will also see this throughout the transform code. The 3D transforms are not yet supported in Internet Explorer or Opera, so our CSS prefixes only need to accommodate Firefox, Safari and Chrome.

Rotate the Image

You can rotate your image element with a 3D effect by specifying the X, Y or Z axis. To start with, let’s use the X axis by adding the following CSS code:

.transformed { /*General*/ transform:rotateX(180deg); /*Firefox*/ -moz-transform:rotateX(180deg); /*Chrome, Safari*/ -webkit-transform:rotateX(180deg); }

Open your page in the browser and click the image to see the 3D effect. To see the rotation working on the Y axis, alter your CSS as follows, rotating the image 300 degrees as a variation:

.transformed { /*General*/ transform:rotateY(300deg); /*Firefox*/ -moz-transform:rotateY(300deg); /*Chrome, Safari*/ -webkit-transform:rotateY(300deg); }

To rotate the image 270 degrees on the Z axis, add the following:

.transformed { /*General*/ transform:rotateZ(270deg);...

Saya says: I liked it very simple and nice- If you suggest any other tutorial please let me know

Implementing Drop-Down Menus with CSS3

CSS Apr 12, 2012 4 comments

CSS3 allows developers to implement a variety of visual and interactive functions most of us would previously have turned to JavaScript for.

In this tutorial we will implement a drop-down menu, with background images featuring a gradient and rounded corners, all defined purely in CSS3 code. Our list will be structured using embedded lists in the HTML code, with top-level menu options appearing above their sub-menus, which we will display when users hover the mouse over the top level item.

Here is the finished result in Firefox:

Create an HTML5 Page

Use the following HTML5 structure for your page:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

We will use the style section in the head to implement the drop-down menu, with no need for JavaScript code or custom-made image files.

Create Embedded Menu Lists

The menu is going to comprise top level items modeled as a list, with additional sub-menu lists embedded into these top level list items. Our menu only contains two levels, but you could of course extend it to provide additional levels of embedding. If you do implement more menu levels, you will need to alter your style code to display the additional lists.

To start with, add your top level items as follows:

<ul id="main_menu"> <li class="top_menu"> <a href="#">Products</a> </li> <li class="top_menu"> <a href="#">Services</a> </li> <li class="top_menu"> <a href="#">Information</a> </li> </ul>

These are the top-level items, which we have given arbitrary headings – feel free to choose your own. We have not included full “href” attributes but you will need to add the URLs you want each item to link to. Inside each list item, after the anchor tag, add a sub-menu with the following structure:

<ul> <li><a href="#">Clothing</a></li> <li><a href="#">Furniture</a></li> <li><a href="#">Toys</a></li> </ul>

Your full menu markup should now look something like this:

<ul id="main_menu"> <li class="top_menu"> <a href="#">Products</a> <ul> <li><a href="#">Clothing</a></li>...