I was looking at a paragraph on edge and the same paragraph on chrome on the same site. I could tell something was different but not what exactly. Something subtle enough that the only way I could really tell after checking that the screen resolutions were the same and padding and margin was because there were a few extra words on one line.
So I ran these two functions on each, and peeped the diff. I never did figure out what it was that was different but that's not the point. The point (of this post) is a collection site for weird CSS properties I come across, a few of which were revealed in the diff.
If you run getComputedStyle(document.querySelector('somen paragraph')) it will spit out everything known to (wo)man and most of them will have null values. So here's a modified version of how to just get properties with values:
function getComputedStyleWithoutNullValues(element) {
const computedStyle = getComputedStyle(element);
const result = {};
for (let i = 0; i < computedStyle.length; i++) {
const property = computedStyle[i];
const value = computedStyle.getPropertyValue(property);
if (value) {
result[property] = value;
}
}
return result;
}
So get the elements of your interest and pass them to that e.g.
const subtlyDiffParaOnEdge = getComputedStyledWithoutNullValues(
document.querySelector("#paranormal-paragraph")
);
// obvs in sep browser console
const subtlyDiffParaOnChrome = getComputedStyledWithoutNullValues(
document.querySelector("#paranormal-paragraph")
);
Then, in one of them, pass them to this lil util that will return just the keys whose values are different. There is probs a much more performant way to do this ik.
function diffObjects(obj1, obj2) {
const result = {};
for (const key in obj1) {
if (obj2[key] === undefined) {
result[key] = { value1: obj1[key], value2: undefined };
} else if (obj1[key] !== obj2[key]) {
result[key] = { value1: obj1[key], value2: obj2[key] };
}
}
for (const key in obj2) {
if (obj1[key] === undefined) {
result[key] = { value1: undefined, value2: obj2[key] };
}
}
return result;
}
All together now:
const subtlyDiffParaOnEdge = getComputedStyledWithoutNullValues(
document.querySelector("#paranormal-paragraph")
);
const subtlyDiffParaOnChrome = getComputedStyledWithoutNullValues(
document.querySelector("#paranormal-paragraph")
);
diffObjects(subtlyDiffParaOnEdge, subtlyDiffParaOnChrome);
In my case, this is what was spit out:
{
"font-variant-position": {
"value1": "normal"
},
"offset-anchor": {
"value1": "auto"
},
"perspective-origin": {
"value1": "161.102px 111px",
"value2": "162.602px 111px"
},
"timeline-scope": {
"value1": "none"
},
"transform-origin": {
"value1": "161.102px 111px",
"value2": "162.602px 111px"
},
"-webkit-tap-highlight-color": {
"value1": "rgba(51,181,229,0.4)",
"value2": "rgba(51, 181, 229, 0.4)"
},
"-webkit-text-fill-color": {
"value1": "rgb(0,0,0)",
"value2": "rgb(0, 0, 0)"
}
}
Which, finally, leads me to the point of this post, bc wth are timeline-scope, and perspective-origin???
perspective-originThe perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.
MD has this as a demonstration. Moving it around makes it clear what it does but not necessarily what it's for or like when you would use it. Or why it would be different on edge vs. chromium for a the most basic blog post you've ever read, hmm…
I'm guessing that there is some subtle rendering engine diff between the two browser engines. As far as real world examples of when you'd wanna use this, oh, interactive product viewers, that make sense. Or like scroll effects. 3D Tings.
timeline-scopeBy default, a named timeline (i.e. declared using
scroll-timeline-nameorview-timeline-name) can only be set as the controlling timeline of a direct descendant element (i.e. by settinganimation-timelineon it with the timeline name as its value). This is the timeline's default "scope".
timeline-scopeis given the name of a timeline defined on a descendant element; this causes the scope of the timeline to be increased to the element thattimeline-scopeis set on and any of its descendants. In other words, that element and any of its descendant elements can now be controlled using that timeline.
Lolwat amirite ladies? Also, get this. Scrolling down the [mdn page]() for it, check out these sections as of Aug 13:
I will spare you, 23 monthly readers, more from "examples section" and show you simply the interactive one:
So. It does that. Moving on.
offset-anchorThis was another in that original diff. Interestingly when I MDN it from chrome, I get the unsupported message. Fascinating!
Not so when looked at in edge dev edition!
The offset-anchor CSS property specifies the point inside the box of an element traveling along an offset-path that is actually moving along the path.
As opposed to not actually moving along the path. Lolwat amirite ladies again? Anyway, Here's the vid:
It's so freakin pretty. And to think that it's not just a bunch of image but just CSS is even cooler. I begin to look at CSS after 8 years ago and go, hi, what're you having for lunch […] Oh just wondering hope you enjoy it! How was Pirates of the Carr—
I was browsing around CSSTricks for glow/frost and came across this gorg example so I quickly copied and pasted and made by beatific footer. Anyway, remember the post we're in, I saw this when cutting stuff:
.flow > * + * {
margin-top: var(--flow-space, 1.25em);
}
Now. When I first read this I waw thinking like… all children, and when I say all I Mean ALL, triplets or something, borne to a Ms. .flow (not her, my sleep paralysis demon). So… what does it mean?
Lol I actually realized I'm blind when I went to search it. It's a * + *:
.flow > * + *;
.class > * + *.class > * + *=======
I was browsing vercel's templates to see if they had anything about proxies and saw this lil gorg sliver of a blue bg code theme that I had to spend a 45 minutes trying to figure out what it was. The syntax highlighting is powered by Shiki. I started going through the starters "click to deploy" type stuff, and Lo, some rare css:
body {
font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-webkit-font-smoothing: subpixel-antialiased;
font-feature-settings: "case" 1, "cpsp" 1, "dlig" 1, "cv01" 1, "cv02",
"cv03" 1, "cv04" 1;
font-variation-settings: "wght" 450;
font-variant: common-ligatures contextual;
letter-spacing: -0.02em;
}
Where to start. Sure, lots of fallback fonts. But who is miss font-feature-settings, or rather, who is her value?
font-feature-settings: "case" 1, "cpsp" 1, "dlig" 1, "cv01" 1, "cv02", "cv03" 1,
"cv04" 1;
Both lines after that have an air too:
font-variation-settings: "wght" 450;
font-variant: common-ligatures contextual;
Turns out they're all related, and are meant to deal with OpenType attributes.
The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.
Followed by, as our example above:
Whenever possible, Web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.
I guess naming things is one of the big hard things… because check out some of these example values:
