potrzebuję zrobić coś takiego:
załadować odpowiedni plik CSS w zależności od rozdzielczości ekranu [640x, 800x, 1024x >] oraz typu urządzenia [pc, telefony/pda/etc]
Proszę o naprowadzenie - na razie znalazłem coś takiego:
dev.opera.com pisze: Styling for handheld
The same HTML page can be presented in many different ways for different media using CSS. The most efficient way to add code for the different media is to split up the style sheet into one for each media rule, that way it isn't necessary for a handheld device to download the projection style sheet, or the desktop PC to download the handheld stylesheet.
<!-- The styles used on all media -->
<link rel="stylesheet" href="all.css">
<!-- But there are some device-specific rules -->
<link rel="stylesheet" href="small.css" media="handheld">
http://dev.opera.com/articles/view/maki ... at/?page=4
W/w odnosi się jednak tylko do wyboru pc/handheld.
[Przy okazji prosiłbym o opinie kogoś kto stosował - jak to się sprawdza w praktyce]
Znalazłem też coś takiego:
W3C pisze:Media Queries
A media query consists of a media type and zero or more expressions involving media features. If the media type is omitted it is assumed to be ‘all’.
Here is a simple example written in HTML:
<link rel="stylesheet" media="screen and (color)" href="example.css" />
This example expresses that a certain style sheet (example.css) applies to devices of a certain media type (‘screen’) with certain feature (it must be a color screen).
HTML has not yet been normatively updated to use media queries in the media attribute.
Here the same media query written in an @import-rule in CSS:
@import url(color.css) screen and (color);
A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true. Also, a media query which is otherwise false becomes true if the ‘not’ keyword is present.
When a media query is true, the corresponding style sheet is applied as per the normal cascading rules.
Several media queries can be combined in a comma-separated list. If one or more of the media queries in the comma-separated list is true, the associated style sheet is applied, otherwise the associated style sheet is ignored. If the comma-separated list is the empty list it is assumed to specify the media query ‘all’.
Here is an example of several media queries in a comma-separated list using the an @media-rule in CSS:
@media screen and (color), projection and (color) { ... }
Here are two examples of the empty media query list in HTML:
<link rel="stylesheet" href="example.css" media=""/>
<link rel="stylesheet" href="example.css" media=" "/>
In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND.
The logical NOT can be expressed through the ‘not’ keyword.
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
The presence of the keyword ‘not’ at the beginning of the query negates the result. I.e., if the media query had been true without the ‘not’ keyword it will become false, and vice versa. User agents that only support media types (as described in HTML4) will not recognize the ‘not’ keyword and the associated style sheet is therefore not applied.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
The media queries syntax can be used with HTML, XHTML, XML [XMLSTYLE] and the @import and @media rules of CSS.
Here is the same example written in HTML, XHTML, XML, @import and @media:
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
@import url(example.css) screen and (color), projection and (color);
@media screen and (color), projection and (color) { ... }
Just like HTML, the [XMLSTYLE] specification has not yet been updated to use media queries in the media pseudo-attribute.
If a media feature does not apply to the device where the UA is running, expressions involving the media feature will be false.
The media feature ‘device-aspect-ratio’ only applies to visual devices. On an aural device, expressions involving ‘device-aspect-ratio’ will therefore always be false:
<link rel="stylesheet" media="aural and (device-aspect-ratio: 16/9)" href="example.css" />
Expressions will always be false if the unit of measurement does not apply to the device.
The ‘px’ unit does not apply to ‘tty’devices so the following media query is always false:
<link rel="stylesheet" media="tty and (min-device-width: 800px)" href="example.css" />
Note that the media queries in this example would have been true if the keyword ‘not’ had been added to the beginning of the media query.
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’).
These two media queries are equivalent:
@media all and (orientation: portrait) { ... }
@media (orientation: portrait) { ... }
To avoid circular dependencies, it is never necessary to apply the style sheet in order to evaluate expressions. For example, the aspect ratio of a printed document may be influenced by a style sheet, but expressions involving ‘device-aspect-ratio’ will be based on the default aspect ratio of the user agent.
User Agents agents are expected, but not required, to re-evaluate and re-layout the page in response to changes in the user environment, for example if the device is tilted from landscape to portrait mode.
# 4. Media features
* 4.1 width
* 4.2 height
* 4.3 device-width
* 4.4 device-height
* 4.5 orientation
* 4.6 aspect-ratio
* 4.7 device-aspect-ratio
* 4.8 color
* 4.9 color-index
* 4.10 monochrome
* 4.11 resolution
* 4.12 scan
* 4.13 grid
http://www.w3.org/TR/css3-mediaqueries/
Tu się zastanawiam nad następującymi rozwiązaniami:
- Kod: Zaznacz cały
width
Value: <length>
Applies to: visual and tactile media types
Accepts min/max prefixes: yes
The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]). For paged media, this is the width of the page box (as described by CSS2, section 13.2 [CSS21]).
A specified <length> cannot be negative.
For example, this media query expresses that the style sheet is usable on printed output wider than 25cm:
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://...." />
This media query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:
@media screen and (min-width: 400px) and (max-width: 700px) { ... }
This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }
The ‘em’ value is relative to the font size of the root element.
- Kod: Zaznacz cały
device-width
Value: <length>
Applies to: visual and tactile media types
Accepts min/max prefixes: yes
The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size.
A specified <length> cannot be negative.
@media screen and (device-width: 800px) { ... }
In the example above, the style sheet will apply only to screens that currently displays exactly 800 horizontal pixels. The ‘px’ unit is of the logical kind, as described in the Units section.
- Kod: Zaznacz cały
aspect-ratio
Value: <ratio>
Applies to: bitmap media types
Accepts min/max prefixes: yes
The ‘aspect-ratio’ media feature describes the aspect ratio of the viewport. Aspect ratio is defined as the horizontal length of the device's viewport divided by its vertical length.
For example, if a screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9"), the following Media Queries will all match the device:
@media screen and (aspect-ratio: 16/9) { ... }
@media screen and (aspect-ratio: 32/18) { ... }
@media screen and (aspect-ratio: 1280/720) { ... }
@media screen and (aspect-ratio: 2560/1440) { ... }
Prosiłbym kogoś z doświadczeniem w podobnych sprawach o wybór najlepszego sposobu i pomoc w miarę składnym umieszczeniu tego wszystkiego w pliku tak by poprawnie to czytały urządzenia przenośne [pda, telefon, etc] oraz normalne przeglądarki i nienormalny IE
PS. XHTML 1.0 Strict
PS2 w tej chwili mam już coś takiego:
- Kod: Zaznacz cały
<link rel="stylesheet" type="text/css" href="../css/styl.css" media="all" title="Podstawowy styl strony" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" media="all" title="IE styl" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/ie7.css" media="all" title="IE7 styl" />
<![endif]-->
Z góry dzięki
