@media and @import media query hack

http://css.doyoe.com/

@media and @import Media inquiries hack

Media queries can be used in CSS @media and @import rules, and can also be used in HTML and the XML.

For example:

@media screen and (width:800px) {...}

@import URL (example.css) screen and (width:800px);

<link media= "screen and (width:800px)" rel= "stylesheet" href= "Example.css"/>

<?xml-stylesheet media= "screen and (width:800px)" rel= "stylesheet" href= "Example.css"?>

Grammar:

@media:<media_query_list>

<media_query_list>:[<media_query>[', ' <media_query>]*]?

Multiple @media separated by commas (not (screen and color)), print and (color)

<media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>:' ('<media_feature>[:<value>]? ') '

Only: For not: No, not for

/* only supports IE6, 7 */@media screen\9 {...}

/* Only support IE8 */@media \0screen {...}

/* only supports IE6, 7, 8 */@media \0screen\,screen\9 {...}

/* Only support IE8, 9, */@media screen\0 {...}

/* Only support IE9, ten */@media screen and (min-width:0\0) {...}

/* only supports IE10 */

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {...}

/* Support IE9, Chrome, Safari, Firefox, Opera */

@media all and (min-width:0) {...}

/* only supports Wekit kernel browser chrome, Safari */

@media screen and (-webkit-min-device-pixel-ratio:0) {...}

@-moz-document Url-prefix () {

/* in Firefox Chinese text color is magenta * /

. Class{color: #F0F;}

}

</style>

/*---------------------------------media query hack]]---------------------------------*/

/*---------------------------------selector hack [[---------------------------------*/

/* only supports IE7 */

html* Selector {}

/* Only support IE7 using this selector requires that there is a declaration at the top of the HTML: <! DOCTYPE HTML ... >*/

*+html Selector {}

/* only supports IE6 */

*html Selector {}

Such as:

<p class= "Class" > selector hack selector hack selector hack selector hack Selector Selector hack Selector Selector hack</p>

html*. Class{color: #F00,}/* in IE7 Chinese text color is red * /

*+html. Class{color: #0F0,}/* in IE7 Chinese text color is green * /

*html. Class{color: #00F,}/* in IE6 Chinese text color is blue */

/*---------------------------------selector hack]]---------------------------------*/

/*---------------------------------property hack [[---------------------------------*/

/* only supports IE6, 7, 8, 9, 10 */

Selector {property: Property value \9;}

/* only supports IE8, 9, 10 */

Selector {property: attribute value;

/* Supports partial attribute values for IE8, full support for IE9, 10 */

Selector {property: Property value \9\0;}

/* only supports IE7 and IE6 */

selector {* Attribute: property value;}

/* only supports IE6 */

Selector {_ Property: property value;}

/* Only does not support IE6 */

Selector {property: Property value!important;}

/* only supports Safari and chrome, and can only be placed in the last attribute of the selector, because when the browser resolves [;;] After that, the following properties are no longer read */

selector {[; Property: Property value;]}

Such as:

<p class= "Class" > properties hack property hack property hack Property Hack property hack property hack</p>

<style type= "Text/css" >
. class{

Color: #F00 \0;/* in IE8 and IE9 Chinese color is red * /

*color: #0F0; /* in IE7 Chinese text color is green * /

_color: #00F; /* color is blue in IE6 * /

[; color: #F0F;] /* Color Magenta in Safari and Chrome * /

}

</style>

/* Only support opera */

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {...}

/* Only support Firefox */@-moz-document Url-prefix () {...}

Such as:

<p class= "class" >@[email protected]@[email protected]@[email protected]</p>
<style type= "Text/css" >
@media all and (min-width:0) {

/* in IE9 text color is red * /

. Class{color: #F00;}

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

/ * in Chrome,Safari Chinese This color is green * /

. Class{color: #0F0;}

}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

/* in Opera Chinese This color is blue * /

. Class{color: #00F;}

}

@media and @import media query hack