All posts tagged “Explorer”

Microsoft’s former Internet Explorer chief has left the company

Dean Hachamovitch — the man who oversaw the development of Internet Explorer for ten years — has left Microsoft. Hacahmovitch announced the news in a short blog post, in which he said he was “ready to enjoy a different point of view on both tech and life,” 24 years after he joined Microsoft. In an interview with GeekWire, Hachamovitch said that the company “really has changed a lot” since he joined in 1990, and that he was “overdue a change.”

Continue reading…

The Verge – All Posts

The $1,500 Google Glass Explorer Edition is now on sale through Google Play

The long, slow rollout of Google Glass continues. Back in May, Google started selling its $ 1,500 Glass “Explorer Addition” to anyone who wanted it after months of exclusive, invite-only availability. Now, Google’s made it an official part of its biggest storefront, the Google Play store. Of course, it’s still the expensive Explorer Edition, rather than some finalized (and less pricy) consumer product — but the more places Google sells Glass, the harder it is to make that distinction. Most people who stumble upon Glass in the Play store won’t necessarily understand that “Explorer Edition” is just another way of saying “beta,” but developers who want to start building good Glass apps should still get a lot of milage out of the headset….

Continue reading…

The Verge – All Posts

How to Enable Background Size in Internet Explorer [Quicktip]

The new features that come with CSS3 won’t be applicable in Internet Explorer 8-6, and yet we can ignore this disadvantage as The effect will degrade nicely. For example, browsers without the support for CSS3 Box Shadow won’t see the shadow, but this is fine so long as the content remains readable.

However, one of the few things that you can’t ignore is when you apply CSS3 Background Size. We are able to control the size of background images added through CSS using the newbackground-size property. We can specify the width and the height in precise units and also let the background follow the container size using cover and contain values.

The cover value fills the entire area of its container and the width and height are proportionally adjusted. The contain value, will push the background to fit in the width of the container. This will sometimes result in a void when the container height is longer than the image.

1. Using CSS3 Background Size

Do note that the new background-size property cannot be included within the background shorthand property, background. They must be declared separately, like so.

 .container { background: url('img/image.jpg'); background-size: cover; } 

In the code snippet shown above, we attached an image with a width of around 3000px. The background-size that we have also added therein will prevent the background image from overflowing the content. As we mentioned above, the cover value will cover the entire container up proportionally.

This is what you will see in the browser.

Photo by Rafael Chiti

2. CSS3 Background Size in Internet Explorer

Unfortunately, this feature does not fallback nicely in Internet Explrorer 8 and below. If you attach a very large image, it may overflow the container. On the other hand, if you attach a very small image, you will end up with a void within the container. From the same example above, you will get the following result in Internet Explorer 8-6.

On that account, we need a polyfill that can somehow replicate CSS3 Background Size in Internet Explorer.

3. CSS3 Background Size Polyfill

This polyfill is developed by Louis-Rémi. This polyfill replicates the same behaviour of background-size property with cover and contain values. This polyfill comes in the form of an HTC file named backgroundsize.htc, and an .htaccess file, which is required when the page is served from Apache server to send the .htc mime-type.

To use it, include the HTC file through the Internet Explorer behavior property, as follows.

 .background-size { width: 500px; height: 320px; background-image: url('img/image.jpg'); background-size: cover; -ms-behavior: url('http://example.com/js/backgroundsize.htc'); } 

Then, if you are using Apache server, place the .htaccess in the root folder of server or, simply add this line to the existing .htacces file, if available.

 AddType text/x-component .htc 

And that’s it. You can now view the page in Internet Explorer. Assuming that you set the background-size with cover as shown above, you should find that the background image is now resized and will fit in proportionally within the container; see the following demo in Internet Explorer 8-6 to see it in action.





hongkiat.com

Microsoft launches Internet Explorer Developer Channel

Read more about Microsoft launches Internet Explorer Developer Channel at CreativeBloq.com


Microsoft has made good on its promise to increase communication with the web developer community by launching a version of IE that enables exploration and testing of upcoming features.




Creative Bloq

Security flaw puts all Internet Explorer users at risk, exposes Windows XP

If you’re still using a 12-year-old operating system, a new security flaw discovered in Internet Explorer should cause you quite a bit of consternation. Microsoft published a security advisory today warning its customers that a vulnerability in all versions of Internet Explorer (6 through 11) could let hackers gain full user permissions over your computer, allowing them to install programs, view and delete data, and much more simply by visiting a website.

That’s not good, but at least anyone using Internet Explorer on a modern version of Windows will likely see a patch within a couple weeks’ time. Since Microsoft finally ended support for Windows XP on April 8th, it will not receive an update. This is the first known security flaw since…

Continue reading…

The Verge – All Posts

How to Enable Box Sizing in Internet Explorer 7 [Quicktip]

We have covered CSS3 Box Sizing in a previous article. Box Sizing, with the value of border-box, allows us to retain the element width and height, regardless of the additional padding and border it has.

This makes measuring and defining element size easier. However, CSS3 Box Sizing would not function in Internet Explorer 7 (IE7) and earlier versions, as you can see below.

Both of the columns that you see in the above screenshot have width, height, padding, and box-sizing specified. But as IE8 does not recognize the box-sizing property, the second column is pushed down when their total width exceed their parent container’s width.

You will have to adjust the size for each column accordingly to make them fit in it, which could be a very tedious task depending on the number of elements that you need to handle. If your website has to support IE7 (for whatever reason) while also preserving CSS3 Box Sizing, you can use the following trick.

Box Sizing Polyfill

To make IE8 (and below) acknowledge Box Sizing, we can use a polyfill. This polyfill comes in the form of an HTC file and is developed by Christian Schaefer. Download the file from the Github repository and put it in, for example, your CSS folder.

Create a CSS stylesheet, dedicated for Internet Explorer. Add the link in the HTML document this way so it will only be served in IE7.

 <!--[if lte IE7]> <link rel="stylesheet" href="css/ie.css"> <![endif]--> 

Then put the following code in the ie.css. This CSS rule below will apply box-sizing for all elements.

 * { behavior: url(css/boxsizing.htc); } 

A few things to note when applying this trick:

The url path of boxsizing.htc must be relative to the HTML files location, otherwise it will fail to work.

Paul Irish also has a tip to apply box-sizing in pseudo-element with *:before, *:after. But, since IE7 as well as IE6 does not support pseudo-element, there is no reason to use pseudo-element selectors in this case. And as you can see above, we don’t include them in the code as well.

The Result

Here, we have two columns with the parent container’s width set to 500px. The column width are set to 50%, so each column should have 250px width, even though we also set padding for it. Let’s open Internet Explorer 7, and launch the Developer Tool (F12).

Go to the Layout tab of the Developer Tool to see the column size in detail. You should see that in IE7 the column now includes padding as well as borders as part of the total size. In our case, the box width remains at 250px.


    




hongkiat.com

How to Enable CSS3 Border Radius in Internet Explorer 8 and below

CSS3 gives us the ability to create rounded corners with the border-radius property. But as you might already know, this new feature is not recognized in Internet Explorer 8 (IE8) and its earlier versions. So when you apply CSS3 Border Radius to an element, it still appears as a box with pointed tips.

You may find a lot of different advice on the Internet suggesting you ignore IE8. You wish you could do so. But if you’re working on a website for a government institution or a bank, you may not have a choice. You still have to make the website look as nice as it does in modern browsers, which includes the ability to apply CSS3 Border Radius.

If you really have to make your website IE8-ready, while being able to use the CSS3 feature, we have just the tip for you.

CSS3Pie

CSS3Pie is a kind of polyfill for CSS3 decorative features. Aside from CSS3 Border Radius that we’re going to discuss in this article, CSS3Pie also supports Box Shadow and Gradients, though it’s limited to the Linear Gradient type.

Download CSS3Pie (here). Put it inside your project directory – I placed it in the css folder. As you can also see from the screenshot below, I’ve created one stylesheet as well as one HTML file.

Open the stylesheet in code editor and set one of the elements in the HTML file with rounded corners, like so:

 .border-radius { height: 100px; width: 100px; background-color: #2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } 

As the element’s width and height are both 100px, and the border-radius is set to 50px, the element will become a circle:

In IE8, as we expect, it would still be a square (sigh), but don’t worry.

To enable the rounded corner effect, insert this line: behavior: url(css/pie.htc);, like so.

 .border-radius { height: 100px; width: 100px; background-color: #2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; behavior: url(css/pie.htc); } 

Note that the file path in url()has to be either an absolute path or relative to the HTML file. You can also add this line in a separate file.

You may have a stylesheet that is designated for Internet Explorer. You can put behavior: url(css/pie.htc); within that file, but ensure that it’s declared within the same CSS selector, like so.

 /* declared in ie.css */ .border-radius { behavior: url(css/pie.htc); } 

Refresh the page in IE8. The rounded corner should now come into effect (ta-da!). It should work in IE7 as well.

Troubleshooting

Internet Explorer may behave unexpectedly. If this does not work (maybe the rounded corner does not take effect, or the selected element has disappeared), adding the position and zoom property should solve the problem:

 <style> .border-radius { behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc); position: relative; zoom: 1; } </style> 

Using CSS3 Pie in WordPress

You have finished putting your website in HTML form. You also utilize pie.htc in the website to enable CSS3 in IE8. At this stage, you are ready to transform the website into a functioning WordPress theme. In this case, as WordPress is dynamic, where pages may serve in different level URLs, we have to specify an absolute path.

You can either change the path in CSS like this:

 .border-radius { behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc); position: relative; zoom: 1; } 

Or add internal styles in the header.php, this way:

 <style> .border-radius { behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc); position: relative; zoom: 1; } </style> 

Final Thought

Having cool things such as CSS3 Border Radius work in IE8 is fascinating, and CSS3Pie makes that happen, while giving us one less reason to hate IE8.


    




hongkiat.com

A Look Into: Internet Explorer 11 DevTools

The Internet Explorer in-browser Developer Tools (IE DevTools) has long been lacking several critical functionalities for debugging, making it nearly useless. This includes the inability to inspect elements in different state like :hover, :active, :focus, and :visited – at least not in an easy intuitive way. Long story short, it is hard and frustrating to debug in Internet Explorer.

But starting with Internet Explorer 11, the IE DevTools has finally got a facelift in its existing features as well as a few new functionalities. Let’s take a look at what it now has to offer.

Getting Started

Internet Explorer 11 is shipped along with Windows 8. If you are still using Windows 7 and haven’t yet updated IE, you can download the installer here. Launch the installer, then follow the installation instructions.

Once it has been installed, launch Internet Explorer 11, and press the F12 button to launch the DevTools. As we have mentioned and seen below, the new DevTools has a totally redesigned look, compared to earlier versions.

In addition, although this kind of menu has also been available in the other browsers for a while, IE 11 has also included the “Inspect Element” on the right-click menu to quickly bring up the DevTools.

DOM Explorer

The DOM Explorer also got some improvements. First, you will find that it now has “breadcrumbs” at the bottom, which makes navigating through the DOM hierarchy much leaner. It also allows us to move elements within the DOM simply by dragging and dropping.

Styles Tab

At the right side of the DOM Explorer pane, similar to the other Browsers DevTools, you will find the Styles tab with all the CSS rules that are applied to the DOM elements. It is now also equipped with Intellisense. So, as we type codes in CSS, JavaScript, and HTML, it will show a list of input suggestions to complete the code.

It now also puts the styles that are currently applied at the top, instead of buried at the very bottom (which forces us to scroll). This makes debugging CSS quicker and more intuitive.

Trace Tab

In the Trace tab, you can immediately discover which styles are applied to the element, and which styles are overridden.

If you find your website styling output not appearing as expected, this is the tab that you should inspect.

Layout Tab

Furthermore, in the Layout tab, you will also see the box diagram and box property information: width, height padding, margin and borders. Now, this tab is not merely showing information staticly, we can now also edit the values of these properties.

New Console API

Aside, from the user interface and user experience aspects, Internet Explorer 11 also introduced a number of new Console APIs including console.time and console.timeEnd method. You can use these two methods to track execution time of JavaScript functions or code blocks, for example:

 console.time('loop'); var index; var a = ["a", "b", "c"]; for (index = 0; index < a.length; ++index) { console.log(a[index]); } console.timeEnd('loop'); 

See the complete list of new Console API in this page.

The Mobile Emulator

With the increasing usage of mobile devices as well as websites that are created for Mobile platforms, it is now very reasonable to include a feature in IE DevTools to support the development process. Check out the IE Mobile Emulator.

In the Emulation panel, you can configure the document and browser mode, display orientation, viewport size and Geolocation, which allows you to override your current location coordinates.

It works similar to the Emulation Tool in Chrome DevTools, so check out our previous article on 5 (More) Useful Chrome DevTools Tips For Developers.

Final Thought

Over all, I’m glad to see that Microsoft has finally put serious attention in Internet Explorer. Aside from the capability to render some cutting-edge CSS3 and HTML5 spec, the DevTools in Internet Explorer 11, as we can see above, comes with significant improvements in some areas.

However, in term of features, it still is behind the other browsers. The option for viewing elements in different state as mentioned at the beginning of the post is still missing. For those who work with CSS a lot, like me, this feature is essential.


    




hongkiat.com

You can now join an official waitlist to be a Google Glass Explorer

It just got a little easier to pick up Google Glass. A number of tipsters noticed a change this week in Google’s Glass Explorer site, which now gives users a chance to declare, “if a spot opens up, I want to purchase Glass and become an Explorer.” Previously, the only way to get a Glass unit was either to be selected by Google or get in through the Explorer invite program, which opened the program to friends of the initial explorers. The new option offers a more formal waitlist, in which consumers can become Glass Explorers as soon as a spot in the program is available, provided they’re willing to pay the steep $ 1,500 entry fee.

Continue reading…

The Verge – All Posts

Uh? Internet Explorer rebrands itself as a cute, sexy girl

Read more about Uh? Internet Explorer rebrands itself as a cute, sexy girl at CreativeBloq.com


Will this cute character encourage more people to use Internet Explorer?
    




Creative Bloq