HTML and CSS Reference
In-Depth Information
Interestingly, the support for this construct is most problematic due to browser handling of
XML/XHTML documents, MIME types, and the varying syntaxes for mixing tag
vocabularies.
N
OTE
This demo uses an
xmlns
attribute, which is discussed in the HTML5 specification
somewhat controversially as some nonworking “talisman” attribute. Interestingly, the test suite
at the W3C provides the inspiration for the brief demo, and the demo based upon the illustration
does work in many currently shipping browsers.
Media Queries
A media query takes the CSS
media
attribute and extends it with conditions. For example,
commonly Web developers are familiar with a style rule for print and one for screen. Media
queries add to this a query upon the media, such as what is the available width or color, to
then determine whether to apply rules or not. Such a query system allows Web developers
to easily apply different styles to different conditions, such as one style for a wide screen
and one for a narrow one, without resorting to JavaScript. As an example, here we employ a
style sheet wide.css if the screen resolution is at least 1024px, a different one for a midrange
window size, and one for a small window size:
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="wide.
css">
<link rel="stylesheet" media="screen and (min-width: 641px) and (max-width:
1023px)" href="medium.css">
<link rel="stylesheet" media="screen and (max-width: 640px)" href="narrow.
css">
Interestingly, most modern browsers, with the exception of Internet Explorer as of
version 8, support this, as shown in Figure 6-1.
O
NLINE
http://htmlref.com/ch6/mediaquery.html
Media queries can be used inline, as well, with the
@media
syntax, and may also apply
to different mediums; for example, here we might apply different CSS rules depending on
the print style:
@media print and (orientation:portrait) { /* portrait layout rules */ }
@media print and (orientation:landscape) { /* landscape rules */ }
Table 6-6 details all of the media queries defined by the specification, though
implementations currently focus mostly on width-related features.
What you decide to do with a media query is up to your imagination. An interesting
possibility is side-by-side display environments for wide monitors and stacked layouts for
narrow ones.
