Tag: Reference

- WebAssembly BigInt to i64 conversion in JS API: An extension to the WebAssembly JS API for bidrectionally converting BigInts and 64-bit WebAssembly integer values - WebAssembly Bulk Memory Operations: An extension to WebAssembly adding bulk memory operations and conditional segment initialization - WebAssembly Multi-Value: An extension to WebAssembly allowing instructions, blocks and functions to produce multiple result values - WebAssembly Import/Export of Mutable Globals: An extension to WebAssembly import and export of mutable global variables - WebAssembly Non-trapping float-to-int Conversion: An extension to WebAssembly adding floating-point to integer conversion operators which saturate instead of trapping - WebAssembly Sign Extension O

- WebAssembly Reference Types: An extension to WebAssembly allowing opaque references as first-class types, and multiple tables - CSS Anchor Positioning: Allows placing elements anywhere on the page relative to an "anchor element", without regard to the layout of other elements besides their containing block

Selectlist - Customizable select element: Proposal for a customizable <select> element, currently defined as <selectlist>, previously <selectmenu>.

Starting today, you will start noticing badges on feature tables that map to Web Features. These badges match those seen on MDN Web Docs and offer a quick at-a-glance view of feature support based on the Baseline definition. To learn more about the badges on Can I use and what they mean see this web.dev announcement. If you'd like to learn more about Baseline see this explanation from the WebDX community group. Note that the badges are intended as a helpful way to see if support meets a certain defined threshold, the full support table should always be consulted to learn details about a feature's support.

Since the launch of Google Analytics 4 the original importer no longer worked. Now a new import system is available to include browser usage data from your Google Analytics 4 account. This importer no longer requires direct account access though it does depend on a one-time process of setting up an Exploration to export browser usage data. To start importing visit the usage import page. For any problems with the importer you can file an issue on Github. Happy importing!

zstd (Zstandard) content-encoding: Data compression method providing faster page loading while using less CPU power on the server.

Scoped Styles: the @scope rule: Allows CSS rules to be scoped to part of the document, with upper and lower limits described by selectors.

View Transitions API (single-document): Provides a mechanism for easily creating animated transitions between different DOM states, while also updating the DOM contents in a single step. This API is specific to single-document transitions, support for same-origin cross-document transitions is being planned.

Passkeys: Passkeys, also known as Multi-device FIDO Credentials, provide users with an alternative to passwords that is much easier to use and far more secure.

CSS text-wrap: balance: Allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.

Last week Krijn and I decided to cancel performance.now() 2021. Although it was the right decision it leaves me in financially fairly dire straits. So I’m looking for new jobs and/or donations. Even though the Corona trends in NL look good, and we could probably have brought 350 people together in November, we cannot be certain: there might be a new flare-up. More serious is the fact that it’s very hard to figure out how to apply the Corona checks Dutch government requires, especially for non-EU citizens. We couldn’t figure out how UK and US people should be tested, and for us that was the straw that broke the camel’s back. Cancelling the conference relieved us of a lot of stress. Still, it also relieved me of a lot of money. This is the fourth conference in a row we cannot run, and I have burned through all my

I’m writing the position: sticky part of my book, and since I never worked with sticky before I’m not totally sure if what I’m saying is correct. This is made worse by the fact that there are no very clear tutorials on sticky. That’s partly because it works pretty intuitively in most cases, and partly because the details can be complicated. So here’s my draft 1 of position: sticky. There will be something wrong with it; please correct me where needed. The inset properties are top, right, bottom and left. (I already introduced this terminology earlier in the chapter.) h3,h4,pre {clear: left} section.scroll-container { border: 1px solid black; width: 300px; height: 250px; padding: 1em; overflow: auto; --text: 'scroll box'; float: left; clear: left; margin-right: 0.5em; margin-bot

Safari is holding back the web. It is the new IE, after all. In contrast, Chrome is pushing the web forward so hard that it’s starting to break. Meanwhile web developers do nothing except moan and complain. The only thing left to do is to pick our poison. blockquote { font-size: inherit; font-family: inherit; } blockquote p { font-size: inherit; font-family: inherit; } Safari is the new IE Recently there was yet another round of “Safari is the new IE” stories. Once Jeremy’s summary and a short discussion cleared my mind I finally figured out that Safari is not IE, and that Safari’s IE-or-not-IE is not the worst problem the web is facing. Perry Sun argues th

You’re reading a failed article. I hoped to write about @property and how it is useful for extending CSS inheritance considerably in many different circumstances. Alas, I failed. @property turns out to be very useful for font sizes, but does not even approach the general applicability I hoped for. Grandparent-inheriting It all started when I commented on what I thought was an interesting but theoretical idea by Lea Verou: what if elements could inherit the font size of not their parent, but their grandparent? Something like this: div.grandparent { /* font-size could be anything */ } div.parent { font-size: 0.4em; } div.child { font-size: [inherit from grandparent in some sort of way]; font-size: [yes, you could do 2.5em to restore the grandpar

Let’s talk about money! Let’s talk about how hard it is to pay small amounts online to people whose work you like and who could really use a bit of income. Let’s talk about how Coil aims to change that. Taking a subscription to a website is moderately easy, but the person you want to pay must have enabled them. Besides, do you want to purchase a full subscription in order to read one or two articles per month? Sending a one-time donation is pretty easy as well, but, again, the site owner must have enabled them. And even then it just gives them ad-hoc amounts that they cannot depend on. Then there’s Patreon and Kickstarter and similar systems, but Patreon is essentially a subscription service while Kickstarter is essentially a one-time donation service, except that both keep part of the money you donate. And then there’s ads ... Do we want small content creators to remain dependent o

Today we’re going to take a quick look at a few special CSS keywords you can use on any CSS property: inherit, initial, revert, and unset. Also, we will ask where and when to use them to the greatest effect, and if we need more of those keywords. The first three were defined in the Cascading Level 3 spec, while revert was added in Cascading Level 4. Despite 4 still being in draft revert is already supported. See also the MDN revert page, Chris Coyier’s page, and my test page inherit The

This week we’ll take a look at the new aspect-ratio declaration and its use. Una Kravets wrote the introductory article, but there are some additional technical points to be made. I also wrote a little fallback that you might use if you need aspect-ratio right now. At the time of writing aspect-ratio is supported by Chrome 90, by Safari Technology Preview, and by Firefox 88 if you set the aspect-ratio flag in about:config. You need one of these browsers to see the examples below — except for the fallback, which should work in all browsers that support custom properties. .inner-box { border: 0; outline: 1px solid black; background-size: contain; background-position: center; background-repeat: no-repeat; background-color

I’m currently investigating the new aspect-ratio declaration and plan to write an article about it. However, I got stuck on aspect ratios in a grid context. Chrome/Safari and Firefox do something different here, and I understand neither approach. So I hope I can get some help. aspect-ratio is currently supported by Chrome 90, by Firefox 88 with the correct flag enabled, and by Safari Technology Preview. I tested mostly in the first two — for complicated reasons I cannot install STP right now, but a kind Twitter follower sent me a few screenshots. It behaves as Chrome. First, a general remark. aspect-ratio is intentionally a fairly weak declaration. It gives way if other constraints on boxes make the requested aspect ratio impossible. Take this example: .my-box { width: 100px; height: 50px; aspect-ratio

Recently I interviewed Stefan Judis for my upcoming book. We discussed CSS custom properties, and something interesting happened. We had a period of a few minutes where we were talking past one another, because, as it turns out, we have completely opposite ideas about the use of CSS custom properties. I had never considered his approach, and I found it interesting enough to write this quick post. Option 1 Take several site components, each with their own link and hover/focus colours. We want to use custom properties for those colours. Exactly how do we do that? Before my discussion with Stefan that wasn’t even a question for me. I would do this: .component1 { --linkcolor: red; --hovercolor: blue; } .component2 { --linkcolor: purple; --hovercolor: cyan; } a { color: var(--linkcolor); } a:hover,a:focus { color: var(--hovercol

Today we will look at fit-content and fit-content(), which are special values for width and grid definitions. It’s ... complicated — not as a concept, but in its practical application. .width { width: -moz-fit-content; width: fit-content; } .minwidth { min-width: -moz-fit-content; min-width: fit-content; } .maxwidth { max-width: -moz-fit-content; max-width: fit-content; } div.radios { display: grid; grid-template-columns: 1fr 1fr; } div.radios output { grid-column: span 2; } label { display: block; } .flex div { flex-basis: 30%; flex-grow: 1; } function initBoxes(obj) { initCheck(); let container = obj.querySelector('.outer-box'); initRadios(); if (container.slider && container.showComputed) { container.slider.addEventListener('input',container.showComputed,true) } function initCheck() { let check = obj.querySelector('input[type=checkbox]');