Add explainer for CSS Linked Parameters#1348
Open
goldenboy777 wants to merge 1 commit into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new explainer document for the proposed CSS Linked Parameters feature and wires it into the repository’s index and issue-template workflow.
Changes:
- Add
SVG/CSSLinkedParameters/explainer.mddescribing the feature, goals, mechanisms, and considerations. - Add a new entry to
README.mdto list the explainer and link to issues/issue creation. - Add a GitHub issue template for CSS Linked Parameters.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
SVG/CSSLinkedParameters/explainer.md |
New explainer documenting CSS Linked Parameters usage, design decisions, and references. |
README.md |
Adds the explainer to the main table with label badge + “New issue…” link. |
.github/ISSUE_TEMPLATE/css-linked-parameters.md |
Adds a dedicated issue template intended to tag new issues for the explainer. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| | [Offline Audio Context Streaming](OfflineAudioContext/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/OfflineAudioContextStreaming"></a> | [New Issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=nishitha-burman&labels=OfflineAudioContextStreaming&title=%5BOfflineAudioContextStreaming%5D+%3CTITLE+HERE%3E) | Audio | | ||
| | [Network Efficiency Guardrails](PerformanceControlOfEmbeddedContent/neg-explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Network%20Efficiency%20Guardrails"></a> | [New Issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=network-efficiency-guardrails.md) | WICG | | ||
| | [Conditional Tracing for LoAF](ConditionalTracing/explainer-for-loaf.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/Conditional%20Tracing%20for%20LoAF"></a> | [New Issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=conditonal-tracing-loaf.md) | Web Perf | | ||
| | [CSS Linked Parameters](SVG/CSSLinkedParameters/explainer.md) | <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/labels/CSS%20Linked%20Parameters"></a> | [New issue...](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=goldenboy777&labels=CSS%20Linked%20Parameters&template=css-linked-parameters.md&title=%5BCSS+Linked+Parameters%5D+%3CTITLE+HERE%3E) | CSS | |
Comment on lines
+3
to
+6
| about: new issue | ||
| title: "[CSS Linked Parameters] <TITLE HERE>" | ||
| labels: CSS Linked Parameters | ||
| assignees: goldenboy777 |
|
|
||
| > "Ability to use currentColor and css variables for SVG set using background-image" | ||
|
|
||
| On Stack Overflow, variations of "How to change SVG color on hover" are perennial, first asked over a decade ago and still regularly re-asked. CSS author Roma Komarov has also documented [existing workarounds and their limitations](https://kizu.dev/svg-linked-parameters-workaround/). Developers clearly need this functionality. |
Contributor
There was a problem hiding this comment.
Developers clearly need this functionality.
I think you can take out this part, the examples speak for themselves
|
|
||
| > "Ability to use currentColor and css variables for SVG set using background-image" | ||
|
|
||
| On Stack Overflow, variations of "How to change SVG color on hover" are perennial, first asked over a decade ago and still regularly re-asked. CSS author Roma Komarov has also documented [existing workarounds and their limitations](https://kizu.dev/svg-linked-parameters-workaround/). Developers clearly need this functionality. |
Contributor
There was a problem hiding this comment.
first asked over a decade ago and still regularly re-asked
Links here would be helpful
| ## Goals | ||
|
|
||
| 1. **Enable parameterized external SVG images** — allow developers to pass named values into external SVG resources that can be read via `env()` in the SVG's own stylesheets. | ||
| 2. **Three complementary mechanisms** — support the `link-parameters` CSS property, URL fragment `param()`, and `url()` function `param()` modifier, per the spec. |
Contributor
There was a problem hiding this comment.
"Three complementary mechanisms" isn't really a goal, maybe something like "supported everywhere SVG files are embedded" is better?
|
|
||
| - **Cross-origin parameter passing** — link parameters are subject to the same security restrictions as other cross-origin resource interactions. | ||
| - **Passing values into non-CSS-aware resources** — only resources that understand CSS (SVG, HTML) can consume link parameters via `env()`. | ||
| - **Animated link parameters** — animation type is discrete; smooth interpolation between parameter values is not a goal of this specification. |
Contributor
There was a problem hiding this comment.
Animated link parameters — animation type is discrete; smooth interpolation between parameter values is not a goal of this specification.
This part can be removed - animation on discrete values is in a separate spec and this might lead to confusion that you can't animate values with linked parameters
| ## Non-Goals | ||
|
|
||
| - **Cross-origin parameter passing** — link parameters are subject to the same security restrictions as other cross-origin resource interactions. | ||
| - **Passing values into non-CSS-aware resources** — only resources that understand CSS (SVG, HTML) can consume link parameters via `env()`. |
Contributor
There was a problem hiding this comment.
Passing values into non-CSS-aware resources — only resources that understand CSS (SVG, HTML) can consume link parameters via
env().
I think this part is a given, you can remove this as well
| 1. **Enable parameterized external SVG images** — allow developers to pass named values into external SVG resources that can be read via `env()` in the SVG's own stylesheets. | ||
| 2. **Three complementary mechanisms** — support the `link-parameters` CSS property, URL fragment `param()`, and `url()` function `param()` modifier, per the spec. | ||
| 3. **Interop** — implement according to the [CSS Linked Parameters Module Level 1](https://drafts.csswg.org/css-link-params/) specification to ensure cross-browser compatibility as other engines adopt the spec. | ||
| 4. **Graceful degradation** — SVG images that use `env()` with fallback values continue to render correctly in browsers that do not support link parameters. |
Contributor
There was a problem hiding this comment.
Might be worth linking here that env() is widely supported: https://caniuse.com/css-env-function
| | **CSSWG** | ✅ Positive | [First Public Working Draft](https://drafts.csswg.org/css-link-params/) published; active spec discussions | | ||
| | **Firefox** | ✅ Positive | Experimental implementation landed ([bug 2022783](https://bugzilla.mozilla.org/show_bug.cgi?id=2022783)) | | ||
| | **Safari/WebKit** | No signal | No known implementation or public position (TODO: file standards position request) | | ||
| | **Web developers** | ✅ Positive | Long-standing demand for parameterized external SVG; [css-tricks](https://css-tricks.com/) and community discussions | |
Contributor
There was a problem hiding this comment.
Might want to put some links here
|
|
||
| ## Status of this Document | ||
|
|
||
| This document is an **explainer** for an implementation of an existing consensus standard ([CSS Linked Parameters Module Level 1](https://drafts.csswg.org/css-link-params/)). This explainer captures developer benefit, key implementation decisions, and Chromium-specific shipping details. |
Contributor
There was a problem hiding this comment.
Chromium-specific shipping details
This is pretty light on Chromium-specific details, is this worth expanding on?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request is to merge the explainer for the feature
CSS Linked Parameters.