Mess with the best, die like the rest… 

Facebook

No tweets to display


IE specific CSS into @media blocks

Here’s an alternative method for writing IE specific style rules without having to move them into separate files. The idea is to put your IE styles into a @media block that will only be applied in certain versions of IE. I discovered this trick while looking for a way to write a media query pass-through filter for older versions of IE.

The @media rule hacks

To target IE 6 and 7

@media screen\9 {
body { background: red; }
}

To target IE 6, 7 and 8

@media \0screen\,screen\9 {
body { background: green; }
}

To target IE 8

@media \0screen {
body { background: blue; }
}

To target IE 8, 9 and 10

@media screen\0 {
body { background: orange; }
}

To target IE 9 and 10

@media screen and (min-width:0\0) {
body { background: yellow; }
}

How to use?

body {
background: pink;
}

/* IE 6 and 7 fallback styles */
@media all\9 {
body {
background: red;
}
h1 {
color: yellow;
}
}

/* IE 6 and 7 fallback print styles */
@media print\9 {
body {
color: blue;
}
h1 {
color: red;
}
}

 

WordPress 3.6 : Testing new feature – video

Today WordPress release new v3.6, but I really don’t have idea how to put everything together. Let start with the Video

Edited – Cool!! no more extra codes required. Just put the video link and that’s it. Don’t forget to choose format of your video (on right section).format

 

Quick tip: Draw border on the inside of an element using CSS

One way that you can draw a border on the inside of an HTML element rather than on the outside is to use the box-sizing CSS property like so:


.example
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

This is supported on Firefox, Chrome, Safari, Opera and IE8+.

Note that by changing the box-sizing to border-box and declaring the css width property , the actual width of the element will not be composed of the (width value) + (padding value) +(border width value) but rather the value declared for css width property itself.

For a better understanding, please see this example. As you can see in the example, both divs have a width of 300px, padding and border width of 10px. The only difference is the box-sizing css attribute value.

You will notice that the default behavior (red) will result in a width of 340 pixels (300 + 20 + 20, we have both left and right padding and borders) but the green one will have only 300 pixels, the specified width css value. If you ask me, I kind of like it better this way :)

More details about box-sizing can be found on the Mozilla Developer Network

 
credit