Cascading order of stylesheets #559
-
|
Applying Vivliostyle CLI's "Themes and CSS" to Mdn's table in "Cascading order," is the cascading order of stylesheets as follows?
The Theme is specified as:
module.exports = {
entry: ['example/sample.md'],
theme: ['./my-theme/style.css']
};or --theme ./my-theme/style.css |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
The precedence order in the same origin, "author (developer)", is determined by order of appearance. Vivliostyle CLI inserts vivliostyle-cli/src/processor/html.tsx Lines 494 to 497 in ef01043 Vivliostyle CLI passes stylesheets given by Lines 134 to 165 in ef01043 Vivliostyle.js handles author stylesheets specified by the style parameter as if they are appended to the end of the HTML document. As a result, the cascading order is as shown in that table. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! So, except for the user stylesheet, will the HTML file for debugging CSS (supported in browsers) be like this? <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cascading order of stylesheets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="author.css">
<link rel="stylesheet" type="text/css" href="config-theme.css">
</head>
<body>
<p>Lorem ipsum.</p>
</body>
<!-- inserted from here -->
<link rel="stylesheet" type="text/css" href="additional-style.css">
<style>
/* --css option */
body { background-color: lime; }
</style>
<!-- inserted up to here -->
</html>where:
module.exports = {
entry: ['sample.md'],
theme: ['./config-theme.css']
};Input markdown text (VFM) ---
lang: 'en'
title: "Cascading order of stylesheets"
link:
- rel: 'stylesheet'
href: 'author.css'
---
Lorem ipsum.Command line vivliostyle preview \
--css "body { background-color: lime; }" \
--style additional-style.css \
sample.mdIntermediate (hidden) HTML <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cascading order of stylesheets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="author.css">
<link rel="stylesheet" type="text/css" href="config-theme.css">
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Yes 💯 |
Beta Was this translation helpful? Give feedback.
The precedence order in the same origin, "author (developer)", is determined by order of appearance.
Vivliostyle CLI inserts
<link rel="stylesheet">elements for stylesheets from themes to the end of the<head>elements of the HTML document:vivliostyle-cli/src/processor/html.tsx
Lines 494 to 497 in ef01043
Vivliostyle CLI passes stylesheets given by
style(author stylesheet),userStyle(user stylesheet) andcss(author stylesheet) options to Vivliostyle.js:vivliostyle-cli/src/server.ts
Lines 134 to 165 in