CSS Layout News - Issue 308

Hello,

lots of browser-related stuff today from the Chrome team. The two posts I've included about TablesNG and RenderingNG are a really accessible look into the improvements being shipped.

I'm not a browser engineer, but one of the great benefits of being part of the CSSWG has been to listen to browser engineers explaining why something is difficult to implement. Many of the annoying inconsistencies, or the lack of support of some obviously useful feature, come down to them just being incredibly hard to fix or implement. Big projects such as RenderingNG may appear to slow progress for a while, as things get held up waiting for the big change to ship. Now it is all landing I think we are going to see a whole bunch of really annoying things fixed. Also, these changes allow future work on features we all want to see (such as Container Queries) to happen.

Do give these pieces a read, if nothing else I have found that an appreciation of this stuff makes the web platform somewhat less frustrating.

Rachel Andrew

News

TablesNG Resolves 72 Chromium Bugs for Better Interoperability

I mentioned TablesNG last week, with a link to a doc describing the changes. In this post you can read more about them, and see some examples.

RenderingNG

TablesNG is just one part of the huge effort to build a new rendering architecture for Chrome. I'm very excited about this, as it enables all kinds of things to be fixed, as well as paving the way for future exciting features. This post introduces the various parts of RenderingNG, and there will be future posts diving into these in more depth.

On the subject of browser engineering, read this thread, where Ian Kilpatrick explains more about why it was easier to land the work on TablesNG as a big change, rather than small ones.

Podcast: Igalia Chats

I had an enjoyable chat with Miriam Suzanne and Brian Kardell in this episode of Igalia Chats. We talked about the different people who work on standards.

Learn

Perfect Tooltips With CSS Clipping and Masking

Create a tooltip using the mask-image property. Useful if you want to make a tooltip, but the same technique could be used for other shapes.

Serving sharp images to high density screens

How best to serve high quality images is something I get asked about, and never have a really good answer for. This post contains all the details, with examples.

Thinking outside the box with CSS Grid

I've just found this site, via this article. The rest of the posts are worth a look too. I'm a big fan of taking cool examples that people have built and explaining how they work. With a few notable exceptions, the people who come up with the most amazing and creative ideas, may not be the best at explaining them. So these types of articles are great, as they make doing cool stuff more accessible to folk who would like to have a go themselves.

Interesting

Theme builder

This is just incredibly cool, useful, and fun to play around with. Generate themes for your site, the Curves editor lets you edit color scales across channels for HSL, HSV, LAB, RGB, and LCH.