A link element without a media attribute that specifies a stylesheet with an @import rule which, in turn, imports a stylesheet with an @media all rule. All headings should appear right aligned and purple in every media mode.
Follow the down-page links below for detailed case summaries for each of the browsers tested. Document link markup and CSS is listed in the View source section at the foot of the page, with links to other test pages in this set.
Internet Explorer 7.0 for Windows supports @import and @media rules and correctly renders all, screen and print media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Internet Explorer 6.0 for Windows supports @import and @media rules and correctly renders all, screen and print media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Internet Explorer 5.5 supports @import and @media rules and correctly renders all, screen and print media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Internet Explorer 5.0 for Windows supports @import and @media rules and correctly renders all, screen and print media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Internet Explorer 5.0 for Mac recognises @import rules and correctly renders stylesheets attached in this way according to any media attribute in the referring document's link element.
Internet Explorer 5.0 for Mac does not implement @media rules and does not render stylesheets that use this type of attachment. Declarations for supported media types all, screen and print are effectively hidden from this browser and styles for un-supported media types are properly disregarded on screen and in print.
Internet Explorer 4.5 for Mac recognises @import rules and correctly renders stylesheets attached in this way according to any media attribute in the referring document's link element.
Internet Explorer 4.5 for Mac does not implement @media rules and does not render stylesheets that use this type of attachment. Declarations for supported media types all, screen and print are effectively hidden from this browser and styles for un-supported media types are properly disregarded on screen and in print.
Internet Explorer 4.01 for Mac may crash when it encounters @import rules. Unless the path to the imported stylesheet is specified explicitly, it is requested with a path relative to the source document, not the primary stylesheet. A 404, not found, error document served in place of a stylesheet will crash this browser and may freeze the operating system.
Internet Explorer 4.01 for Mac does not support @media rules and incorrectly renders some style rules intended for un-supported media types. The first two style rules in an @media block are not applied (in this case the H1 and H2 selectors), but all remaining rules in the style block are rendered regardless of the specified media type. This incorrect rendering is also applied when printing.
Internet Explorer 4.0 recognises @import rules but does not support @media rules and incorrectly renders some styles intended for un-supported media types. The first style rule in an @media block is not applied (in this case the H1 selector), but all remaining rules in the style block are rendered regardless of the specified media type. This incorrect rendering is also applied when printing.
Internet Explorer 3.0 does not recognise @import rules and will not load any stylesheets attached in this way, regardless of any media attribute in the referring document's link element. For all un-supported media types, this gives the appearance of conforming to the CSS2 specifications, though for the wrong reasons. Any all, screen and print media styles attached via @import rules are also effectively hidden from this browser.
Netscape Navigator 7.1 recognises @import rules and correctly renders stylesheets attached in this way according to any media attribute in the referring document's link element.
Netscape Navigator 7.1 supports @media rules and correctly renders all, screen and print media dependent styles, and properly disregards styles for un-supported media types. When such @media style blocks are used in imported stylesheets, appropriate media dependent rendering is maintained.
Netscape Navigator 6.0 recognises @import rules and correctly renders stylesheets attached in this way according to any media attribute in the referring document's link element.
Netscape Navigator 6.0 supports @media rules and correctly renders all, screen and print media dependent styles, and properly disregards styles for un-supported media types. When such @media style blocks are used in imported stylesheets, appropriate media dependent rendering is maintained.
Netscape Navigator 4.73 for Windows does not recognise @import rules and will not load any stylesheets attached in this way, regardless of any media attribute in the referring document's link element. For all un-supported media types, this gives the appearance of conforming to the CSS2 specifications, though for the wrong reasons. Any all, screen and print media styles attached via @import rules are also effectively hidden from this browser.
Netscape Navigator 4.7 for Mac does not recognise @import rules and will not load any stylesheets attached in this way, regardless of any media attribute in the referring document's link element. For all un-supported media types, this gives the appearance of conforming to the CSS2 specifications, though for the wrong reasons. Any all, screen and print media styles attached via @import rules are also effectively hidden from this browser.
Opera 7.11 supports @import and @media rules and correctly renders all, screen, print and projection media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Opera 6.01 supports @import and @media rules and correctly renders all, screen, print and projection media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Opera 5.11 supports @import and @media rules and correctly renders all, screen, print and projection media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Opera 5.0 supports @import and @media rules and correctly renders all, screen, print and projection media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Opera 4.0 supports @import and @media rules and correctly renders all, screen, print and projection media dependent styles applied in this way, and properly disregards styles for un-supported media types.
Opera 3.62 supports @import rules but does not support @media rules and incorrectly renders styles intended for supported media types only. For all and screen media styles, the first rule in an @media block is not applied (in this case the H1 selector), but all remaining rules in the style block are rendered for these media types. This incorrect rendering also occurs with print media styles in standard screen mode and is seen in print in all cases. Styles intended for un-supported media types are not rendered at all when applied in this way, nor rendered in print.
Safari 1.2 recognises @import rules and correctly renders stylesheets attached in this way according to any media attribute in the referring document's link element.
Safari 1.2 for Mac supports @media rules, correctly renders all, screen and print media dependent styles, and properly disregards styles for un-supported media types. When such @media style blocks are used in imported stylesheets, appropriate media dependent rendering is maintained.
link element
<link
rel="stylesheet"
type="text/css"
href="/styles/test/media/all-Test6.1.css" />
all-Test6.1.css
@import url(all-Test6.2.css);
all-Test6.2.css
@media all{
H1{
text-align: right;
color: purple;
background: white;
volume: loud;
azimuth: left;
voice-family: female;
pitch: high;
}
H2{
text-align: right;
color: purple;
background: white;
volume: medium;
azimuth: right;
voice-family: male;
pitch: low;
}
H3{
text-align: right;
color: purple;
background: white;
volume: x-soft;
azimuth: center;
voice-family: child;
pitch: x-high;
}
}