Web Platform News

1660220475000

In today’s browsers, the CSS :empty selector1 matches <p></p> and <p><!-- comment --></p> but not <p> </p>. This behavior is not consistent with the CSS Selectors Level 4 module, which (since 20182) states that :empty should also match elements that contain only white space (spaces, newlines, etc.). Whether browsers will implement this change remains an open question.

  1. www.w3.org/TR/selectors-4/#the-empty-pseudo
  2. github.com/w3c/csswg-drafts/issues/1967#issuecomment-424788796

1660208807000

Unlike with images, defining the aspect ratio of a video via the width and height attributes will not prevent a <video> layout shift in browsers. This is the result of an oversight in the HTML Standard1. As a temporary workaround, you can directly set the CSS aspect-ratio property on the <video> element to avoid the layout shift2.

  1. github.com/w3c/csswg-drafts/issues/7524
  2. twitter.com/simevidas/status/1557648172549390336

1660052884000

A good way to implement a mutually exclusive button group is via toggle buttons. A toggle button is a <button> element with an aria-pressed state1. JavaScript is necessary to update the aria-pressed attributes when the user clicks the buttons (aria-pressed="true" on the clicked button and aria-pressed="false" on all other buttons). You can use the CSS [aria-pressed="true"] selector to style the pressed button.

  1. w3c.github.io/aria/#aria-pressed

1660025430000

Accurate alternative text for images (<img alt> attribute) is necessary for people with vision disabilities, but it also makes it easier to find the image on Google Search1. In general, alternative text is the text that you would have written if you hadn’t been able to include the image2.

  1. twitter.com/simevidas/status/1556877948942155777
  2. html.spec.whatwg.org/multipage/images.html#alt

1659872508000

As of today, a total of 29 policy-controlled features have been standardized1. Websites can use the HTTP Permissions-Policy (Chromium) and Feature-Policy (Safari and Firefox) headers to, among other things, prevent its cross-origin iframes from accessing certain features2, such as geolocation and camera.

  1. github.com/w3c/webappsec-permissions-policy/blob/main/features.md
  2. developer.chrome.com/docs/privacy-sandbox/permissions-policy/

1659869477000

If some text on your website is in a different language, and your primary font doesn’t fully support that language’s diacritics (e.g., the popular Lato font doesn’t include the letter Đ1, which is used in some South Slavic languages), you can switch to a more suitable font by marking the text with the HTML lang attribute (e.g., lang="hr") and then using the CSS :lang() selector (e.g., :lang(hr)) to match it and apply a different font-family.

  1. twitter.com/simevidas/status/1556228230893473793

1659585163000

Since 2020, Firefox has an implementation of masonry layout, which can be enabled on the about:config page (search for “masonry”). This feature is defined in the CSS Grid Layout 3 spec. Mozilla is now waiting for other implementations before masonry layout can be shipped in Firefox1. To switch a grid to masonry layout, add grid-template-rows: masonry to the container, and the items will “effectively move up to plug any gaps”2.

  1. bugzilla.mozilla.org/show_bug.cgi?id=1757446#c0
  2. twitter.com/simevidas/status/1555034351456423936

1659516641000

If you use an image’s error event to set src to a fallback image (e.g., <img onerror="this.src='fallback.png'">), and that fallback image for whatever reason also triggers an error, this will result in an infinite recursion in browsers.


1659501826203

You can use CSS Grid to create a full-width component that breaks out of a central wrapper. The grid layout consists of a central column for components, and two flexible columns on each side (e.g., grid-template-columns: 1fr minmax(0, 70rem) 1fr). The full-width component then simply spans all three columns.


1659498334619

The web standards community is retiring the term “browser intervention” because spec changes cannot be cleanly categorized into interventions and non-interventions. One of the biggest interventions that shipped in browsers was improving scrolling performance by moving scrolling to the compositor thread, where it can’t be interrupted by JavaScript.


1659430645187

You can use the standard <hgroup> element1 to group a heading and a subheading for styling purposes, but this element doesn’t have any special semantics2 and is not included in the browser’s accessibility tree, which means that <hgroup> is no more accessible than a <div>.

  1. html.spec.whatwg.org/multipage/sections.html#the-hgroup-element
  2. twitter.com/aardrian/status/1543952473693605888