I was experimenting with media types in my stylesheet and I did the following:
<div class="media_indicator">
<div class="handheld">
</div>
<div class="screen">
</div>
<div class="handheld">
</div>
<div class="print">
</div>
</div>
@media screen {
div.screen:after {
display: block;
clear: both;
content: "screen";
font-size: 200%;
}
}
@media handheld {
div.handheld:after {
display: block;
clear: both;
content: "handheld"
font-size: 200%;
}
}
@media print {
div.print:after {
display: block;
clear: both;
content: "print"
font-size: 200%;
}
}
On an Android device, I viewed the page in the default browser,
Firefox, "Dolphin Browser HD", and "xScope Pro". I couldn't get
"Opera Mini" to load a page off the local network at all and "Opera
Mobile" would only load the page if I used the IP address, even though
the host name is in the hosts file on the device. I don't currently
have access to iOS or Windows Mobile devices.
Every browser I tested shows "screen". I was hoping for it to say
"handheld" and "screen", or just "handheld".
Does the same thing happen on iOS and Windows Mobile browsers?
Is this an oversight of browser vendors, or am I misunderstanding the spec?
Here's the W3C description of the media types :
> handheld
> Intended for handheld devices (typically small screen,
> limited bandwidth).
>
> screen
> Intended primarily for color computer screens.
I would consider these devices to be both a handheld device and have a
color computer screen.
This, also from W3C, seems unnecessary:
> Media types are mutually exclusive ...
Maybe browser vendors were just making sure they didn't break existing
web sites that use the "screen" media type?
Just out of curiosity, I also tested in the text-mode browsers Elinks,
links, links2, and lynx. None of them support the :after
pseudo-element.
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
