- From: Bryce Otis <bryce.otis@gmail.com>
- Date: Wed, 26 Nov 2014 20:41:32 +0000
- To: Anne van Kesteren <annevk@annevk.nl>, "Elika J. Etemad" <fantasai@inkedblade.net>
- Cc: CSS Working Group <www-style@w3.org>
- Message-ID: <CAPX2-E3tVFNQJAGKF5RvEUTSBb5mkk5L8mKXuz_Jf=LOsF6N3Q@mail.gmail.com> (sfid-20141126_204139_092789_FC76BAD0)
My goal is to write one ePUB that behaves the same regardless of UA
This is how I currently understand Stylesheet mechanics:
The W3C method: (ePaper devices & non-Color printers may have their own
Grayscale conversion, but this allows Filters to be matched to Themes)
<head><!--Media Queries can occur outside Stylesheets (Device Validation)-->
<title>W3C Matrix</title><!--PERSISTANT: Output Layer (Formating &
Layout) PREFERED: Theme Layers (Color Selection)-->
<link class="speech" href="url/Speaker.css" rel="pronunciation"
type="text/css" /><!--Alternate Stylesheet for Media-Type: Speech-->
<link class="print" href="url/Printer.css" media="print and (color),
print and (monochrome)" rel="alternate stylesheet" type="text/css" />
<link class="horizontal" href="url/Horizontal.css" media="all and
(orientation: landscape)" rel="alternate stylesheet" type="text/css"
/>
<link class="vertical" href="url/Vertical.css" media="all and
(orientation: portrait)" rel="alternate stylesheet" type="text/css" />
<link class="screen" href="url/PERSISTANT.css" media="screen and
(color), screen and (monochrome)" rel="stylesheet" type="text/css" />
<link class="sepia" href="url/Color-Sepia.css" media="screen and
(color)" rel="stylesheet" title="Color: Sepia" type="text/css" />
<link class="day" href="url/PREFERED.css" media="all and (color)"
rel="stylesheet" title="Color: Day" type="text/css" />
<link class="night" href="url/Color-Night.css" media="all and (color)"
rel="stylesheet" title="Color: Night" type="text/css" />
<link class="day" href="url/Gray-Day.css" media="all and (monochrome)"
rel="stylesheet" title="Gray: Day" type="text/css" />
<link class="night" href="url/Gray-Night.css" media="all and
(monochrome)" rel="stylesheet" title="Gray: Night" type="text/css" />
</head><!--PERSISTANT: [Browser] ALTERNATE: [Speaker] or [Orientation
(Print/Screen)] PREFERED: [Color (Sepia)] or [Color/Gray
(Day/Night)]-->
Observation: Trident shows all five PREFERED choices, while Gecko seems to
validate screen="color" so it only shows three.
The WebKit method:
<head><!--Media Queries only occur inside Stylesheets (WebKit Validation)-->
<title>WebKit Matrix</title><!--Default: Android & iOS Devices-->
<link href="url/PERSISTANT.css" rel="stylesheet" type="text/css"
/><!--@media imports Speech/Print/Orientation-->
<link href="url/PREFERED.css" rel="stylesheet" title="Themes"
type="text/css" /><!--? @webkit and/or @import ?-->
</head><!--No ALTERNATE Stylesheets-->
The vast majority of mobile eReading devices are: Android (B&N Nook,
Kindle Fire, etc.), or iOS (iPad, iPhone, iPod Touch)
The part I am fuzzy on, is how to match Themes with WebKit's Validation
model, *if I'm even using the correct terminology...*
An analogy would be how Filters load from CSS:
img.desaturate { /* Grayscale Filter */
-webkit-filter: grayscale(100%); /* WebKit */
-moz-filter: grayscale(100%); /* Gecko */
filter: grayscale(100%); /* W3C */
filter: gray; /* v6-9 Trident (v10-11 ≡ JavaScript) */
}
Where: (iBooks) Validator [adaptivegarage's example]
:root[__ibooks_internal_theme*="|White|Sepia|Night|"] /* elements */ {
/* ... override your CSS here ... */
}
- What would be the validator for Google (Play Books)?
- What would be the validator for generic (WebKit)?
- We know the validator for Gecko & Trident = (W3C)
Received on Thursday, 27 November 2014 15:50:56 UTC