Internet Explorer 10 on Windows 7

Internet Explorer 10 for developers

This topic of the Internet Explorer 10 Guide for Developers explains the differences between Internet Explorer 10 running on Windows 7 and Internet Explorer 10 running on Windows 8. All differences involve touch and pen input APIs.

IE 10 offers support for developers to create rich visual effects with CSS Text Shadow, CSS 3D Transforms and CSS3 Gradient. It enables more sophisticated and responsive page layouts with CSS3. Its IndexedDB and HTML5 Application Cache are among the features that enable the creation of better offline applications through local storage.

The browser also supports new technologies such as CSS3 Positioned Floats, HTML5 Drag-Drop, File Reader API and HTML5 Forms, all used for building nteractive Web applications.  

IE 10 loads web pages 20 percent faster than previous versions. That performance includes pages from the most popular sites for news, social networks, search and ecommerce. The new browser also offers faster interactivity and JavaScript performance while reducing CPU usage and improving battery life on mobile PCs.

This topic contains the following sections:

• UA string changes
• DOM events
• CSS properties
• DOM properties
• Simulating hover on touch-enabled devices
• Related topics

UA string changes

While Internet Explorer 10 introduces the "Touch" UA string token to identify touch-enabled systems, it's only generated when the user's system is running Windows 8 (or later). For instance, the following UA string will be transmitted on a touch-enabled system running Windows 8:

HTML

Copy

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch)

Internet Explorer 10 on Windows 7 will never report a UA string with the "Touch" token. This is the user-agent string for Internet Explorer 10 running on Windows 7: 

HTML

Copy

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

DOM events

Internet Explorer 10 on Windows 7 handles touch and pen input as simulated mouse input for the following Document Object Model (DOM) events:

• MSPointerCancel
• MSPointerDown
• MSPointerMove
• MSPointerOut
• MSPointerOver
• MSPointerUp

Internet Explorer 10 on Windows 7 will not fire any of the following DOM events:
Gesture events:

• MSGestureChange
• MSGestureEnd
• MSGestureHold
• MSGestureStart
• MSGestureTap

Manipulation state event:

• MSManipulationStateChanged

 

CSS properties

Internet Explorer 10 on Windows 7 doesn't support these Cascading Style Sheets (CSS) properties:
Scrolling properties:

• -ms-overflow-style
• -ms-scroll-chaining
• -ms-scroll-limit
• -ms-scroll-limit-x-max
• -ms-scroll-limit-x-min
• -ms-scroll-limit-y-max
• -ms-scroll-limit-y-min
• -ms-scroll-rails
• -ms-scroll-translation

Zooming properties:

• -ms-content-zoom-chaining
• -msContentZoomFactor
• -ms-content-zooming
• -ms-content-zoom-limit
• -ms-content-zoom-limit-max
• -ms-content-zoom-limit-min

Touch behavior property:

• -ms-touch-action

Scroll snap points properties:

• -ms-scroll-snap-points-x
• -ms-scroll-snap-points-y
• -ms-scroll-snap-type
• -ms-scroll-snap-x
• -ms-scroll-snap-y

Zooming snap points properties:

• -ms-content-zoom-snap
• -ms-content-zoom-snap-points
• -ms-content-zoom-snap-type

 

DOM properties

In Internet Explorer 10 on Windows 7, the following DOM touch-related APIs behave differently:

• The msMaxTouchPoints property always returns a value of "0" in Internet Explorer 10 on Windows 7, regardless of the device's capabilities.
• The MSGesture object is undefined.

 

Simulating hover on touch-enabled devices

In Internet Explorer 10 on Windows 8, you can use the aria-haspopup DOM property to simulate mouse hover functionality in touch-based scenarios. You can read more about this behavior in Using aria-haspopup to simulate hover on touch-enabled devices.
This use for aria-haspopup is not supported in Windows 7. Adding "aria-haspopup="true"" to an element doesn't simulate mouse hover in Internet Explorer 10 on Windows 7. However, the aria-haspopup property is still supported for reporting accessibility information to assistive technologies.

What it Takes to Design a Successful Website

Since you've read this far, you're obviously very serious about designing a web site. As I have been where you are right now, and I know how difficult the entire Internet experience can be, I'd like to provide you with some questions that will give you an idea of exactly what is involved in creating a professional web site...Prior to designing your web site, these are the questions you'll need to ask yourself -- And, you'll need to find the answers to:

Who is your target audience and how will you reach them?	How will you collect your customers information?
What product or service will you offer?	How will you automate portions of your business?
Is there a market for your product or service?	Where will you find the scripts you need?
Will you sell affiliate products or services?	What types of scripts will you use? CGI, JavaScript?
How will you design your website? Will you write your HTML code or use an HTML editor?	Will you need to hire a professional to write your scripts?
How will your website be navigated? Will you use links, buttons or a script?	Will you edit and install your own scripts or hire a professional?
How will you optimize your web pages for the search engines?	What kind of computer software will you need?
What type of graphics will your website use?	Where will you find the software?
Where will you obtain your graphics? Will you hire a graphics designer?	How will you decide on a domain name?
What graphic formats will you use -- GIF, JPG?	How will you register a domain name?
What fonts will you use? Which are the most legible on a computer screen?	How will you launch your website on the Internet?
How will you design your website for different screen sizes?	What should you look for in a quality web host?
How will you design your website for different web browsers?	How will you upload your files to your web server?
How will you optimize your graphics?	Should your files be uploaded in binary or ASCII mode?
How will you make your web pages load more quickly?	Will you publish an ezine?
What type of content will your website offer?	How will you collect your visitors' email addresses?
Where will the content come from?	How will you send out mailings?
How will you gain your visitors' trust?	How will you drive traffic to your website?
How will you build your credibility?	How will you advertise your products and services?
Will you write your own sales copy or hire a copywriter?	How will you test your advertising?
How will you accept payment through your website?	Will you offer an affiliate program?
How will you process your orders?	How will you run your affiliate program?
How will you deliver your products or services?	How will you market and promote your website?

Business benefits of Adaptive Web Designs

Firstly,a good question to ask is what is adaptive design? It is a very hot topic and one that is extremely current at the moment. Business leader as well as marketing professionals and web developers are discussing in greater detail. So, Adaptive web design refers to to web site that completely adapts and conforms to the web platform or browser you are viewing the site in.

---

Essentially, adaptive websites are designed and developed to give online users a much better web experience when viewing a site. It is a kind of one size fits all and is really the way forward when it comes to new web technologies. By designing one website that will adapt to multiple platforms, business owners will see huge benefits in terms of costs savings moving forward. reason being; only 1 site has to be designed rather than multiple sites for an array of varied browsers. Think of desktops, iphones, ipads, androids, galaxy phones, mac v PC screen sizes. The list just goes on and on.
So what are all those business benefits of incorporating adaptive web design into your marketing profile?

1) The greatest benefit as mentioned above is the dollars saved. Your web team can focus their energies and time in designing and developing 1 site as opposed to say 2 or 3 sites. It also saves the headache and strained relationship between the designer and the client. Clients want their website to adapt to all browser sizes and the web designer has to let the client know that this is a totally separate job, which needs to be costed.

2) It is well known throughout the IT community that viewers on mobile sites will exit the site if it has been optimised properly for the mobile viewing experience. There are heaps less bounce rates with users who enjoy the experience more likely to make a purchase or inquiry. I know from personal experience that if the site is not optimised for the phone I am on, I will simply leave. It will only be in the rare case that I will use a non adaptive website on my iphone.

3) Another huge benefit for implementing an adaptive website design is that people will notice the effort you have gone to in ensuring their experience has been enhanced and will remain a loyal follower or customer. If you make their mobile phone search experience easy via adaptive web design then you will be rewarded.

You should really act now and see about how to get an adaptive web based solution for your site. As the internet grows, especially the mobile world, you will be left behind by those web savvy companies who have taken up this new technology.

Table border with CSS

I want to have a one-pixel one-color solid border around a table and its cells. Adding border="1" to the table tag isn't suitable, because it looks horrific in most of the browsers.

Solution with HTML only

Back in the old days we used to use just HTML to create a one-pixel border. Some people even used 1×1 pixel transparent gifs, but let’s not go into that. The easiest way to achieve the border was to use nested tables: outer table that provides the border color and inner table that holds the content.

HTML:
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="#FFFFCC">Cell 1</td>
        <td bgcolor="#FFFFCC">Cell 2</td>
    </tr>
    <tr>
        <td bgcolor="#FFFFCC">Cell 3</td>
        <td bgcolor="#FFFFCC">Cell 4</td>
    </tr>
    </table>

This is all we have. Really. Everything else is hidden in a style sheet. You can easily change the looks of your table without touching the HTML.

Maybe the first thing that comes up to your mind when you start creating a style sheet for a table border is to add a one-pixel border to every table cell. However, that would cause the borders to "duplicate" between the cells. The trick is to let cells to have only the top and right borders and add the bottom and left borders to the table. This way it looks like every cell is surrounded with a border, even though technically this is not the case.

Here is our final code:
<style type="text/css">
/* <![CDATA[ */

table, td
{
    border-color: #600;
    border-style: solid;
}

table
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
}

td
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    background-color: #FFC;
}

/* ]]> */
</style>

<table>
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>
<tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
</tr>
</table>

Create cross-browser CSS3 Gradient Buttons

For past few months I was working on a project and got to learn lots of new things. I would love to share some good learnings like Create 'CSS3 Gradient Buttons'.

The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

CSS:
<style media="all"  type="text/css">
    .btn {
    overflow: hidden;
    zoom:1;
}
.btn input.secondary,
.btn button.secondary {
    background: #3c78c7;
    background: -moz-linear-gradient(top,  #4b97fa 0%, #3c78c7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b97fa), color-stop(100%,#3c78c7));
    background: -webkit-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: -o-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: -ms-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    color: #fff;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
    background: #4b97fa;
    background: -moz-linear-gradient(top,  #88bcff 0%, #4b97fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bcff), color-stop(100%,#4b97fa));
    background: -webkit-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: -o-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: -ms-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
}
.btn input.secondary:active,
.btn button.secondary:active {
    outline:0;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
}
/* #### MAIN BUTTON STYLES #### */
.btn input,
.btn button {
    font-size: 18px;   
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* input + button styles*/
.btn input,
.btn button {
    border: none;
    padding: 0;
    margin: 0;
    padding: 3px 10px 4px;
    cursor: pointer;
    white-space:  normal;
    box-shadow: none;
    transition: none 0s ease 0s;
    text-align: left;
    -webkit-appearance: button;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Google Chrome and Safari adjustments */   
    .btn input,
    .btn button {
        height: 22px;
        padding-bottom: 1px;
        line-height: 1.428571; /* 20/14 */
    }   
}
</style>
<!--[if IE]>
<style media="all"  type="text/css">
.btn input,
.btn button {
    overflow: visible;
    font-size: 18px;   
}
.btn input.secondary,
.btn button.secondary {
    background: #3c78c7;  
    color: #fff;
    overflow: visible;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
    background: #4b97fa;   
}
</style>
<![endif]-->

HTML:
<div class="btn action"><input type="submit" value="Submit" class="secondary"></div>

Non-Transparent Elements Inside Transparent Elements

If using transparency on a block element it makes the text inside transparent as well. Is there a way I can prevent that from happening? I tried putting the text in another div and setting the opacity to 100%, but that didn't do the job. Although, logically, I thought it would!

Code Problem-
HTML
<div class="transparentDiv">
  <h2>Non-Transparent Elements Inside Transparent Elements.</h2>
</div>

CSS
.transparentDiv {
  height: 4em;
  padding-top: 2em;
  opacity: 0.5;
  background: black;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin-top: 5.0em;
}

This is where you notice that the text inside the transparentDiv as taken on the transparency of the transparentDiv itself. You don't want that, it's making the text hard to read! So you get smart and apply 100% transparency to the text inside the div. Doesn't work right?

Trick to resolve the issue-
This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the "alpha" settings of their parent.

As you likely know, just because an element occupies the same space as another element, doesn't make one a child of the other. That's the beauty of CSS positioning. So the trick to getting our non-transparent text into a transparent div is just to put that text outside of the div and push it visually inside with some CSS positioning.

HTML:
<h2 class="fullOpacity">Non-Transparent Elements Inside Transparent Elements.</h2>
<div class="transparentDiv"></div>

CSS:
.transparentDiv {
  height: 4em;
  padding-top: 2em;
  opacity: 0.5;
  background: black;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin-top: 5.0em;
}
h2.fullOpacity {
  position: relative;
  top: 4.7em;
}

Cross Browser Opacity

.Opacity_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}