You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Support has been partial and subpar for user settings
- Everything else is fine as long as the css is build to a static
representation (using postcss-css-variables)
- Will be easier to deal with user settings in JS
Copy file name to clipboardExpand all lines: docs/CSS01-readiumcss_fundamentals.md
-2
Original file line number
Diff line number
Diff line change
@@ -40,8 +40,6 @@ Readium CSS has been be designed following 4 core principles:
40
40
3.**Daisy-chainability:** those modules can be loaded and daisy-chained (cascade) depending on conditions;
41
41
4.**Customization:** modules can be customized either before or during runtime (CSS variables), which implies themes can be generated within minutes.
42
42
43
-
We’ve also made sure that, for most “hardcoded” styles you might add when CSS variables are not supported (internal stylesheet or inline styles), user settings can still be applied (leveraging inheritance).
44
-
45
43
## 4. Openness and Transparency
46
44
47
45
This last principle is important since the relationship between authors and Reading Systems’ developers has not been really great so far.
Copy file name to clipboardExpand all lines: docs/CSS02-quickstart.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -143,7 +143,7 @@ var root = document.documentElement || document.getElementById("iframe-wrapper")
143
143
root.style.removeProperty("--USER__var");
144
144
```
145
145
146
-
Please note you must implement a fallback strategy if you want to support Internet Explorer 11 and early versions of Microsoft Edge. User settings have been designed to work with inline styles (on `html`) whenever possible but you’ll need to find ways to manage others.
146
+
Please note you must implement a fallback strategy if you want to support Internet Explorer 11 and early versions of Microsoft Edge.
Copy file name to clipboardExpand all lines: docs/CSS07-variables.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
[Implementers’ doc]
4
4
5
-
Note: CSS variables **are not and won’t be supported in IE11.** You can either create a static stylesheet for all UA browsers or decide to leverage them in most UA browsers + use a JS fallback for IE11 – you can test for CSS variables support in JS and set inline styles if they’re not.
5
+
Note: CSS variables **are not and won’t be supported in IE11.** You can either create a static stylesheet for all UA browsers or decide to leverage them in most UA browsers + use a JS fallback for IE11 if you want to support this browser – you can test for CSS variables support in JS.
Copy file name to clipboardExpand all lines: docs/CSS11-user_prefs.md
-2
Original file line number
Diff line number
Diff line change
@@ -23,8 +23,6 @@ User settings require the following process:
23
23
24
24
The selectors used in user settings are indeed “conditional”, styles are applied if the variable (or a specific value for reading modes) is set as an inline style in `html` (`:root`).
25
25
26
-
In theory, we can make it work with inline styles too, when variables are not supported by the web browser.
Copy file name to clipboardExpand all lines: docs/CSS18-further_details.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -187,7 +187,7 @@ This isn’t a perfect solution though, and this algorithm may be revisited in t
187
187
188
188
## Conditional Selectors for user settings
189
189
190
-
User settings are appended on load and won’t have any effect until a user-setting variable (or inline style) is set.
190
+
User settings are appended on load and won’t have any effect until a user-setting variable is set.
191
191
192
192
In order to do that, we must use “conditional selectors.” Problem is there is no `if/else statements` in CSS so how do we achieve this?
193
193
@@ -197,9 +197,9 @@ In order to do that, we must use “conditional selectors.” Problem is there i
197
197
198
198
Attribute selectors with pseudo-regex.
199
199
200
-
As soon as you set a property (or add an inline style) and its required flag to the `html` (or root) element, the user setting applies.
200
+
As soon as you set a property and its required flag to the `html` (or root) element, the user setting applies.
201
201
202
-
Whenever needed, we’re leveraging explicit inheritance (`inherit` value) so that the `:root` value can be passed throughout the DOM, which makes it compatible with inline styles, at least for some settings.
202
+
Whenever needed, we’re leveraging explicit inheritance (`inherit` value) so that the `:root` value can be passed throughout the DOM.
203
203
204
204
We’re also relying on the `:not()` pseudo-class to exclude some elements. Think of it as the following command prompt: “make all elements in the DOM inherit the value, excepted this one and that one.”
Copy file name to clipboardExpand all lines: docs/ReadiumCSS_docs/OEBPS/Text/Section-001.xhtml
-2
Original file line number
Diff line number
Diff line change
@@ -65,8 +65,6 @@
65
65
66
66
<li><strong>Customization:</strong> modules can be customized either before or during runtime (CSS variables), which implies themes can be generated within minutes.</li>
67
67
</ol>
68
-
69
-
<p>We’ve also made sure that, for most “hardcoded” styles you might add when CSS variables are not supported (internal stylesheet or inline styles), user settings can still be applied (leveraging inheritance).</p>
<p>Please note you must implement a fallback strategy if you want to support Internet Explorer 11 and early versions of Microsoft Edge. User settings have been designed to work with inline styles (on <code>html</code>) whenever possible but you’ll need to find ways to manage others.</p>
197
+
<p>Please note you must implement a fallback strategy if you want to support Internet Explorer 11 and early versions of Microsoft Edge.</p>
Copy file name to clipboardExpand all lines: docs/ReadiumCSS_docs/OEBPS/Text/Section-007.xhtml
+1-1
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@
15
15
16
16
<p>[Implementers’ doc]</p>
17
17
18
-
<p>Note: CSS variables <strong>are not and won’t be supported in IE11.</strong> You can either create a static stylesheet for all UA browsers or decide to leverage them in most UA browsers + use a JS fallback for IE11 – you can test for CSS variables support in JS and set inline styles if they’re not.</p>
18
+
<p>Note: CSS variables <strong>are not and won’t be supported in IE11.</strong> You can either create a static stylesheet for all UA browsers or decide to leverage them in most UA browsers + use a JS fallback for IE11 if you want to support this browser – you can test for CSS variables support in JS.</p>
Copy file name to clipboardExpand all lines: docs/ReadiumCSS_docs/OEBPS/Text/Section-011.xhtml
-2
Original file line number
Diff line number
Diff line change
@@ -44,8 +44,6 @@
44
44
45
45
<p>The selectors used in user settings are indeed “conditional”, styles are applied if the variable (or a specific value for reading modes) is set as an inline style in <code>html</code> (<code>:root</code>).</p>
46
46
47
-
<p>In theory, we can make it work with inline styles too, when variables are not supported by the web browser.</p>
<h2id="sigil_toc_id_53">Conditional Selectors for user settings</h2>
208
208
209
-
<p>Use settings are appended on load and won’t have any effect until a user-setting variable (or inline style) is set.</p>
209
+
<p>Use settings are appended on load and won’t have any effect until a user-setting variable is set.</p>
210
210
211
211
<p>In order to do that, we must use “conditional selectors.” Problem is there is no <code>if/else statements</code> in CSS so how do we achieve this?</p>
<p>As soon as you set a property (or add an inline style) and its required flag to the <code>html</code> (or root) element, the user setting applies.</p>
217
+
<p>As soon as you set a property and its required flag to the <code>html</code> (or root) element, the user setting applies.</p>
218
218
219
-
<p>Whenever needed, we’re leveraging explicit inheritance (<code>inherit</code> value) so that the <code>:root</code> value can be passed throughout the DOM, which makes it compatible with inline styles, at least for some settings.</p>
219
+
<p>Whenever needed, we’re leveraging explicit inheritance (<code>inherit</code> value) so that the <code>:root</code> value can be passed throughout the DOM.</p>
220
220
221
221
<p>We’re also relying on the <code>:not()</code> pseudo-class to exclude some elements. Think of it as the following command prompt: “make all elements in the DOM inherit the value, excepted this one and that one.”</p>
0 commit comments