We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Hey!
I was attempting to validate the following CSS but recieved an error.
Been discussing it with the developer, and they are pretty sure it in fact is valid CSS.
Possible relevant info on the path d property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
It's also been tested on a lot of different devices, working fine.
Can this possible be a false positve by the CSS validation?
`/**
[data-color-mode*=updating] *:not(.ct-color-switch *) { transition: none !important; }
[data-color-mode*=dark] [data-color-switch=normal],[data-color-mode*=light] [data-color-switch=reversed] { --is-toggled: var(--true); --is-light-mode-visible: none; --is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z"); }
[data-color-mode*=dark] [data-color-switch=reversed],[data-color-mode*=light] [data-color-switch=normal] { --is-toggled: var(--false); --is-dark-mode-visible: none; }
@media(prefers-color-scheme: dark) { [data-color-mode=os-default] [data-color-switch=normal] { --is-toggled: var(--true); --is-light-mode-visible: none; --is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z"); }
[data-color-mode=os-default] [data-color-switch=reversed] { --is-toggled: var(--false); --is-dark-mode-visible: none; } }
@media(prefers-color-scheme: light) { [data-color-mode=os-default] [data-color-switch=normal] { --is-toggled: var(--false); --is-dark-mode-visible: none; }
[data-color-mode=os-default] [data-color-switch=reversed] { --is-toggled: var(--true); --is-light-mode-visible: none; --is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z"); } }
.ct-color-switch { --animation-duration: 300ms; }
.ct-color-switch .ct-dark-mode-label { display: var(--is-dark-mode-visible, block); }
.ct-color-switch .ct-light-mode-label { display: var(--is-light-mode-visible, block); }
.ct-color-switch .ct-switch-type-expand :first-child path { d: var(--is-toggled-path, path("M0-11h25a1 1 0 0017 13v30H0Z")); transition-delay: var(--is-toggled, calc(var(--animation-duration) * 0.4)); transition-timing-function: var(--is-toggled, cubic-bezier(0, 0, 0, 1.25)); }
.ct-color-switch .ct-switch-type-expand g path { transform: var(--is-toggled, scale(0.75)); transition-delay: var(--is-toggled, 0s); }
.ct-color-switch .ct-switch-type-expand g circle { transform: var(--is-toggled, scale(1.4)); transition-delay: var(--is-toggled, 0s); }
.ct-color-switch .ct-switch-type-within .ct-switch-type-within__circle { transform: var(--is-toggled, scale(1.5)); }
.ct-color-switch .ct-switch-type-within .ct-switch-type-within__inner { transform: var(--is-toggled, translate3d(3px, -3px, 0) scale(1.2)); }
.ct-color-switch .ct-switch-type-within g path { transform: var(--is-toggled, scale(0.65)); }
.ct-color-switch .ct-switch-type-dark-inner :first-child { transform: var(--is-toggled, rotate(180deg)); }
.ct-color-switch .ct-switch-type-dark-inner :last-child { transform: var(--is-toggled, rotate(-180deg)); }
.ct-color-switch .ct-switch-type-expand :first-child path { transition-property: transform,d; transition-duration: calc(var(--animation-duration)*.6); transition-timing-function: cubic-bezier(0, 0, 0.5, 1); }
.ct-color-switch .ct-switch-type-expand g path,.ct-color-switch .ct-switch-type-expand g circle { transform-origin: center; transition: transform calc(var(--animation-duration).65) cubic-bezier(0, 0, 0, 1.25) calc(var(--animation-duration).35); }
.ct-color-switch .ct-switch-type-within * { transform-origin: center; transition: transform calc(var(--animation-duration)) cubic-bezier(0, 0, 0, 1.25); }
.ct-color-switch .ct-switch-type-dark-inner path { transform-origin: center; transition: transform var(--animation-duration) ease; }
@supports not (d: path("")) { .ct-color-switch .ct-switch-type-expand :first-child path { transform: var(--is-toggled, translate3d(-9px, 14px, 0)); } }`
The text was updated successfully, but these errors were encountered:
SVG support is currently for SVG 1.1, this is a feature of SVG2, now that support seems to be wide enough, the validator should implement it.
Sorry, something went wrong.
ylafon
No branches or pull requests
Hey!
I was attempting to validate the following CSS but recieved an error.
Been discussing it with the developer, and they are pretty sure it in fact is valid CSS.
Possible relevant info on the path d property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
It's also been tested on a lot of different devices, working fine.
Can this possible be a false positve by the CSS validation?
`/**
*/
[data-color-mode*=updating] *:not(.ct-color-switch *)
{
transition: none !important;
}
[data-color-mode*=dark] [data-color-switch=normal],[data-color-mode*=light] [data-color-switch=reversed]
{
--is-toggled: var(--true);
--is-light-mode-visible: none;
--is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z");
}
[data-color-mode*=dark] [data-color-switch=reversed],[data-color-mode*=light] [data-color-switch=normal]
{
--is-toggled: var(--false);
--is-dark-mode-visible: none;
}
@media(prefers-color-scheme: dark)
{
[data-color-mode=os-default] [data-color-switch=normal]
{
--is-toggled: var(--true);
--is-light-mode-visible: none;
--is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z");
}
[data-color-mode=os-default] [data-color-switch=reversed]
{
--is-toggled: var(--false);
--is-dark-mode-visible: none;
}
}
@media(prefers-color-scheme: light)
{
[data-color-mode=os-default] [data-color-switch=normal]
{
--is-toggled: var(--false);
--is-dark-mode-visible: none;
}
[data-color-mode=os-default] [data-color-switch=reversed]
{
--is-toggled: var(--true);
--is-light-mode-visible: none;
--is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z");
}
}
.ct-color-switch
{
--animation-duration: 300ms;
}
.ct-color-switch .ct-dark-mode-label
{
display: var(--is-dark-mode-visible, block);
}
.ct-color-switch .ct-light-mode-label
{
display: var(--is-light-mode-visible, block);
}
.ct-color-switch .ct-switch-type-expand :first-child path
{
d: var(--is-toggled-path, path("M0-11h25a1 1 0 0017 13v30H0Z"));
transition-delay: var(--is-toggled, calc(var(--animation-duration) * 0.4));
transition-timing-function: var(--is-toggled, cubic-bezier(0, 0, 0, 1.25));
}
.ct-color-switch .ct-switch-type-expand g path
{
transform: var(--is-toggled, scale(0.75));
transition-delay: var(--is-toggled, 0s);
}
.ct-color-switch .ct-switch-type-expand g circle
{
transform: var(--is-toggled, scale(1.4));
transition-delay: var(--is-toggled, 0s);
}
.ct-color-switch .ct-switch-type-within .ct-switch-type-within__circle
{
transform: var(--is-toggled, scale(1.5));
}
.ct-color-switch .ct-switch-type-within .ct-switch-type-within__inner
{
transform: var(--is-toggled, translate3d(3px, -3px, 0) scale(1.2));
}
.ct-color-switch .ct-switch-type-within g path
{
transform: var(--is-toggled, scale(0.65));
}
.ct-color-switch .ct-switch-type-dark-inner :first-child
{
transform: var(--is-toggled, rotate(180deg));
}
.ct-color-switch .ct-switch-type-dark-inner :last-child
{
transform: var(--is-toggled, rotate(-180deg));
}
.ct-color-switch .ct-switch-type-expand :first-child path
{
transition-property: transform,d;
transition-duration: calc(var(--animation-duration)*.6);
transition-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
.ct-color-switch .ct-switch-type-expand g path,.ct-color-switch .ct-switch-type-expand g circle
{
transform-origin: center;
transition: transform calc(var(--animation-duration).65) cubic-bezier(0, 0, 0, 1.25) calc(var(--animation-duration).35);
}
.ct-color-switch .ct-switch-type-within *
{
transform-origin: center;
transition: transform calc(var(--animation-duration)) cubic-bezier(0, 0, 0, 1.25);
}
.ct-color-switch .ct-switch-type-dark-inner path
{
transform-origin: center;
transition: transform var(--animation-duration) ease;
}
@supports not (d: path(""))
{
.ct-color-switch .ct-switch-type-expand :first-child path
{
transform: var(--is-toggled, translate3d(-9px, 14px, 0));
}
}`
The text was updated successfully, but these errors were encountered: