chrome

Chrome 69 is notable for us CSS developers:

• Conic gradients (i.e. background: conic-gradient(red, green, blue);): We've got lots of interesting articles about conic gradients here, and here's some use cases and a polyfill from Lea Verou.
• Logical box model properties: margin, padding, and border all get an upgrade for more use cases. Think of how we have margin-left now — the "left" part doesn't make much sense when we switch directions. Now, we'll have margin-inline-start for that. The full list is margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} and border-{block,inline}-{start,end}-{width,style,color}. Here's Rachel Andrew with Understanding Logical Properties And Values.
• Scroll snap points (i.e. scroll-snap-type: x mandatory;): What once required JavaScript intervention is now happily in CSS. We've been covering this for years. Goes a long way in making carousels way less complicated.
• Environment variables (i.e. env(safe-area-inset-top);): Apple introduced "the notch" with the iPhone X and dropped some proprietary CSS for dealing with it. The community quickly stepped in and now we have env() for browsers to ship stuff like this.

I guess we can give this version number a well-deserved nice.

I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack to fix the issue which using a text-shadow on the text that’s using the variable font:

.variable-font {
  text-shadow: 0 0 0 #000; /* text color goes last here */
} 

Once you do that, you shouldn’t be able to see those weird clip marks in the letterforms anymore. Yeah, it feels pretty hacky but I’m sure this rendering bug will be fixed relatively soon. It doesn’t look like it affects other browsers, as far as I can tell.

Chris Krycho has written an excellent post about how us fickle web developers might sometimes confuse features that land in one browser as being “the future of the web.” However, Chris argues that there’s more than one browser’s vision of the web that we should care about:

No single company gets to dominate the others in terms of setting the agenda for the web. Not Firefox, with its development and advocacy of WebAssembly, dear to my heart though that is. Not Microsoft and the IE/Edge team, with its proposal of the CSS grid spec in 2011, sad though I am that it languished for as long as it did. Not Apple, with its pitch for concurrent JavaScript. And not—however good its developer relations team is—Chrome, with any of the many ideas it’s constantly trying out, including PWAs.

It’s also worth recognizing how these decisions aren’t, in almost any case, unalloyed pushes for “the future of the web.” They reflect business priorities, just like any other technical prioritization.

(more…)

Varun Vachhar:

A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.

An amazing contribution to this open source project would be to make all those points draggable, and then be able to spit out the newly adjusted code.

Also, weren't browser extensions on their way to being interoperable? Looks like the community group has significant work done.