Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

::backdrop selector support for inline SVG mode #319

Merged
merged 7 commits into from
Nov 19, 2021
Merged

Conversation

yhatt
Copy link
Member

@yhatt yhatt commented Nov 19, 2021

Added Marpit PostCSS SVG backdrop plugin.

Retarget ::backdrop and section::backdrop selector to @media screen { :marpit-container > svg[data-marpit-svg] { .. } }. It means ::backdrop targets the SVG container in inline SVG mode.

It's useful for setting style of the letterbox and pillarbox in the SVG scaled slide. (marp-team/marp-cli#358, marp-team/marp#183)

::backdrop {
  background-color: #448;
}

The original definition will remain to support an original usage of ::backdrop.

The important differences from an original ::backdrop are following:

  • In original spec, ::backdrop creates a separated layer from the target element, but Marpit's ::backdrop does not. The slide elements still become the child of ::backdrop so setting some properties that are inherited may make broken slide rendering.
  • Even if the browser is not fullscreen, ::backdrop will match to SVG container whenever matched to @media screen media query.

For developers: If concerned to conflict with the style provided by the integrated app, consider to disable the selector support by inlineSVG: { backdrop: false }.

Close #313.

ToDo

  • inlineSVG option object
  • Tests
  • Update type definition

@yhatt yhatt merged commit ec15722 into main Nov 19, 2021
@yhatt yhatt deleted the svg-backdrop-selector branch November 19, 2021 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

::backdrop pseudo-element support for inline SVG mode
1 participant