IE Conditional Comment

When develop a website, you should take care of anything that IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits and you can’t trust how they’re going to behave on the future browsers. Thus the solution for this problem is the conditional stylesheet or conditional comment. One important thing is that IE 10 and up don’t support conditional comment

Conditional comment operators

Operator Description
IE represents Internet Explorer; if a number value is also
specified, it represents a version vector
lt less than operator
lte less than or equal to
gt greater than
gte greater than or equal to
! the NOT operator
() subexpression operator
& the AND operator
| the OR operator
true evaluates to true
false evaluates to false


Target everything except IE

<!--[if !IE]>
  <link rel="stylesheet" type="text/css" href="not-ie.css" />

Target IE7 only

<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="ie7.css" />

Target IE8 and lower

<!--[if lte IE 8]>
  <link rel="stylesheet" type="text/css" href="ie8.css" />

These conditional comments don’t have to be used only for CSS. You could load JavaScript, or even use them to display the specific content of your site.


Double Slashes In A Url

Many developers was wondering about the following line

<script src="//"></script>

What does the “double slashes” do or is this line of code correct?

It’s a relative URL without a scheme(http or https) according to RFC 3986: “Uniform Resource Identifier (URI): Generic Syntax”, Section 4.2. It’s useful when switching between http and https, because you won’t need to explicitly specify the scheme. It’s also supported in all web browsers.

More detailed, the two forward slashes are described as a common shorthand for whatever protocol being used

Using CSS3 to make rounded corner images

In this tutorial, we’ll use css3 to make a rounded corner for images. As described, css3 supports for IE9+, Chrome, FireFox, Safari and other browsers. You can check your browser support here.

Another problem is that border-radius property doesn’t work properly with images. It only works with div, span and other Html elements. Try this code:

<style type="text/css"> 
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px;
    border-radius: 30px;

We observe that by giving the border-radius property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.
To solve the above problem,

  1. Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
  2. To this wrapping div tag, specify the same original image as the background image.
  3. To the original image <img> tag, give the property “opacity: 0“.

Simply add the following html markup:

    <img src="images/test.jpg" alt="testing" />

and css:

<style type="text/css">
    width: 550px;                                          /* Width same as the image width */
    height: 350px;                                         /* Height same as image height */ 
    background: url("images/test.jpg") no-repeat 0 0;      /* Background Image same as the Original image being wrapped by the div tag */
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;

    opacity: 0;                                            /* Hide the original image being wrapped by the div tag */

Refresh your page and check it out.